WordPress.org
Get WordPress

Make WordPress Core

Changeset 32649


Ignore:
Timestamp:
05/29/2015 01:56:39 PM (10 years ago)
Author:
ocean90
Message:

Customizer: Replace accordion behavior of sections with a slide-in navigation.

This allows users to focus on the contents of the active section more easily and separating the navigation from the content/controls in the Customizer.

props valendesigns, celloexpressions.
see #31336.

Location:
trunk/src
Files:
8 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/customize-controls.css

    r32382 r32649  
    2121
    2222#customize-controls .description {
    23     color: #666666;
     23    color: #555;
    2424}
    2525
    … …  
    5151}
    5252
    53 #customize-info {
     53#customize-controls .customize-info {
    5454    border: none;
    5555    border-top: 1px solid #ddd;
    56 }
    57 
    58 #customize-info .accordion-section-title {
    59     background-color: #fff;
    60     color: #666666;
     56    border-bottom: 1px solid #ddd;
     57    margin-bottom: 15px;
     58}
     59
     60#customize-controls .customize-info .accordion-section-title {
     61    background: #fff;
     62    color: #555;
    6163    border-left: none;
    6264    border-right: none;
    63     border-bottom: 1px solid #eeeeee;
    64 }
    65 
    66 #customize-info.open .accordion-section-title:after,
    67 #customize-info .accordion-section-title:hover:after,
    68 #customize-info .accordion-section-title:focus:after {
    69     color: #555555;
    70 }
    71 
    72 #customize-info .preview-notice {
     65    border-bottom: none;
     66    cursor: default;
     67}
     68
     69#customize-controls .customize-info.open .accordion-section-title:after,
     70#customize-controls .customize-info .accordion-section-title:hover:after,
     71#customize-controls .customize-info .accordion-section-title:focus:after {
     72    color: #333;
     73}
     74
     75#customize-controls .customize-info .accordion-section-title:after {
     76    display: none;
     77}
     78
     79#customize-controls .customize-info .preview-notice {
    7380    font-size: 13px;
    7481    line-height: 24px;
    7582}
    7683
    77 #customize-info .theme-name {
     84#customize-controls .control-section .customize-section-title h3,
     85#customize-controls .control-section h3.customize-section-title,
     86#customize-controls .customize-info .panel-title {
    7887    font-size: 20px;
    7988    font-weight: 200;
    8089    line-height: 24px;
    8190    display: block;
    82 }
    83 
    84 #customize-info .theme-screenshot {
    85     width: 258px;
    86 }
    87 
    88 #customize-info .theme-description {
    89     margin-top: 1em;
    90     color: #666666;
    91     line-height: 20px;
     91    overflow: hidden;
     92    white-space: nowrap;
     93    text-overflow: ellipsis;
     94}
     95
     96#customize-controls .customize-section-title span.customize-action {
     97    overflow: hidden;
     98    white-space: nowrap;
     99    text-overflow: ellipsis;
     100}
     101
     102#customize-controls .customize-info .customize-help-toggle {
     103    position: absolute;
     104    top: 4px;
     105    right: 1px;
     106    padding: 20px 20px 10px 10px;
     107    width: 20px;
     108    height: 20px;
     109    cursor: pointer;
     110    -webkit-box-shadow: none;
     111    box-shadow: none;
     112    -webkit-appearance: none;
     113    background: transparent;
     114    color: #555;
     115    border: none;
     116}
     117
     118#customize-controls .customize-info .customize-help-toggle:before {
     119    position: absolute;
     120    top: 5px;
     121    left: 5px;
     122}
     123
     124#customize-controls .customize-info.open .customize-help-toggle,
     125#customize-controls .customize-info .customize-help-toggle:focus,
     126#customize-controls .customize-info .customize-help-toggle:hover {
     127    color: #0073aa;
     128}
     129
     130#customize-controls .customize-info .customize-panel-description {
     131    color: #555;
     132    display: none;
     133    background: #fff;
     134    padding: 12px 15px;
     135    border-top: 1px solid #ddd;
     136}
     137
     138#customize-controls .customize-info .customize-panel-description p:first-child {
     139    margin-top: 0;
     140}
     141
     142#customize-controls .customize-info .customize-panel-description p:last-child {
     143    margin-bottom: 0;
     144}
     145
     146#customize-controls .current-panel .control-section > h3.accordion-section-title {
     147    padding-right: 30px;
    92148}
    93149
    … …  
    97153
    98154#customize-theme-controls .accordion-section-title {
    99     color: #555555;
     155    color: #555;
    100156    background-color: #fff;
    101     border-bottom: 1px solid #eeeeee;
     157    border-bottom: 1px solid #eee;
     158}
     159
     160#customize-theme-controls .accordion-section-title:after {
     161    content: "\f345";
     162}
     163
     164.rtl #customize-theme-controls .accordion-section-title:after {
     165    content: "\f341";
    102166}
    103167
    104168#customize-theme-controls .accordion-section-content {
    105     color: #555555;
    106     background: #fff;
    107 }
    108 
    109 #customize-info.open .accordion-section-title,
    110 #customize-info .accordion-section-title:hover,
    111 #customize-info .accordion-section-title:focus,
    112 #customize-theme-controls .control-section:hover > .accordion-section-title,
    113 #customize-theme-controls .control-section .accordion-section-title:hover,
    114 #customize-theme-controls .control-section.open .accordion-section-title,
    115 #customize-theme-controls .control-section .accordion-section-title:focus {
    116     color: #23282d;
    117     background: #f5f5f5;
     169    color: #555;
     170    background: transparent;
     171}
     172
     173#customize-controls .control-section:hover > .accordion-section-title,
     174#customize-controls .control-section .accordion-section-title:hover,
     175#customize-controls .control-section.open .accordion-section-title,
     176#customize-controls .control-section .accordion-section-title:focus {
     177    color: #fff;
     178    background: #0073aa;
    118179}
    119180
    … …  
    129190#customize-theme-controls .control-section.open .accordion-section-title:after,
    130191#customize-theme-controls .control-section .accordion-section-title:focus:after {
    131     color: #555;
    132 }
    133 
    134 #customize-info.open,
     192    color: #fff;
     193}
     194
    135195#customize-theme-controls .control-section.open {
    136     border-bottom: 1px solid #eeeeee;
     196    border-bottom: 1px solid #eee;
    137197}
    138198
    139199#customize-theme-controls .control-section.open .accordion-section-title {
    140     border-bottom-color: #eeeeee !important;
     200    border-bottom-color: #eee !important;
    141201}
    142202
    … …  
    146206}
    147207
    148 #customize-theme-controls > ul,
     208#customize-theme-controls > ul {
     209    margin: 0;
     210}
     211
    149212#customize-theme-controls .accordion-section-content {
    150213    margin: 0;
    151 }
    152 
    153 .control-section.control-panel > .accordion-section-title {
    154     padding-right: 54px;
    155 }
    156 
    157 .control-section.control-panel > .accordion-section-title:after {
    158     content: "\f345";
    159     background: #f5f5f5;
     214    position: absolute;
     215    left: 100%;
     216    top: 0;
     217    width: -webkit-calc(100% - 24px);
     218    width: calc(100% - 24px);
     219    padding: 12px;
     220}
     221
     222.customize-section-description-container {
     223    margin-bottom: 15px;
     224}
     225
     226.customize-section-title {
     227    margin: -12px;
     228    border-bottom: 1px solid #ddd;
     229    background: #fff;
     230}
     231
     232#customize-theme-controls .customize-themes-panel h3.customize-section-title:first-child {
     233    border-bottom: 1px solid #ddd;
     234    padding: 12px 12px 12px 12px;
     235}
     236
     237.ios #customize-theme-controls .customize-themes-panel h3.customize-section-title:first-child {
     238    padding: 12px 12px 13px 12px;
     239}
     240
     241.customize-section-title h3,
     242h3.customize-section-title {
     243    padding: 10px 10px 12px 14px;
     244    margin: 0;
     245    line-height: 21px;
    160246    color: #555;
    161     width: 38px;
    162     height: 100%;
    163     margin: -11px -10px -11px 0; /* compensate for positioning */
    164     line-height: 45px;
    165     padding-left: 5px;
    166     border-left: 1px solid #eee;
    167     z-index: 0;
    168 }
    169 
    170 #customize-theme-controls .control-section.control-panel > h3.accordion-section-title:focus:after,
    171 #customize-theme-controls .control-section.control-panel > h3.accordion-section-title:hover:after {
    172     background: #ddd;
    173     color: #000;
    174     border: 1px solid #d9d9d9;
    175     border-right: none;
    176     margin-top: -12px;
    177     line-height: 44px;
    178     z-index: 1;
     247}
     248
     249#customize-theme-controls .control-section .accordion-section-content > li.customize-control:nth-child(2) {
     250    margin-top: 12px;
     251}
     252
     253#customize-theme-controls {
     254    position: relative;
     255    left: 0;
     256    -webkit-transition: .18s left ease-in-out;
     257    transition: .18s left ease-in-out;
     258}
     259
     260.ios #customize-theme-controls {
     261    -webkit-transition: left 0s;
     262    transition: left 0s;
     263}
     264
     265.section-open #customize-info,
     266.section-open #customize-theme-controls {
     267    left: -100%;
     268}
     269
     270.section-open .control-panel-back {
     271    display: none;
    179272}
    180273
    … …  
    185278    top: 0;
    186279    width: 300px;
    187     border-top: 1px solid #ddd;
    188280    -webkit-transition: left ease-in-out .18s;
    189281    transition: left ease-in-out .18s;
     282}
     283
     284.ios .accordion-sub-container.control-panel-content {
     285    -webkit-transition: left 0s;
     286    transition: left 0s;
    190287}
    191288
    … …  
    243340}
    244341
    245 .ios .control-panel-back {
     342.customize-panel-back,
     343.customize-section-back {
     344    display: block;
     345    float: left;
     346    width: 48px;
     347    height: 69px;
     348    padding: 0 24px 0 0;
     349    margin: 0;
     350    background: #fff;
     351    border: none;
     352    border-right: 1px solid #ddd;
     353    -webkit-box-shadow: none;
     354    box-shadow: none;
     355    cursor: pointer;
     356    -webkit-transition: left .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out;
     357    transition: left .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out;
     358}
     359
     360.customize-section-back {
     361    height: 70px;
     362}
     363
     364.ios .control-panel-back,
     365.ios .customize-panel-back,
     366.ios .customize-section-back {
    246367    -webkit-transition: left 0s;
    247368    transition: left 0s;
    248369}
    249370
    250 .collapsed .control-panel-back {
     371.collapsed .control-panel-back,
     372.ios .customize-panel-back {
    251373    display: none;
     374}
     375
     376.ios .expanded.in-sub-panel .customize-panel-back {
     377    display: block;
     378}
     379
     380.panel-meta.customize-info .accordion-section-title {
     381    margin-left: 48px;
     382}
     383
     384#customize-controls .panel-meta.customize-info .accordion-section-title:hover {
     385    background: #fff;
     386    color: #555;
    252387}
    253388
    … …  
    268403}
    269404
     405.customize-panel-back:hover,
     406.customize-panel-back:focus,
     407.customize-section-back:hover,
     408.customize-section-back:focus {
     409    background: #0073aa;
     410    border-color: #ccc;
     411    color: #fff;
     412    outline: none;
     413    -webkit-box-shadow: none;
     414    box-shadow: none;
     415}
     416
    270417.customize-overlay-close:before,
    271418.customize-controls-close:before {
    … …  
    277424}
    278425
     426.customize-panel-back:before,
     427.customize-section-back:before {
     428    font: normal 20px/69px dashicons;
     429    content: "\f341";
     430    position: relative;
     431    left: 13px;
     432}
     433
    279434.control-panel-back:before {
    280435    font: normal 20px/45px dashicons;
    … …  
    285440}
    286441
    287 .in-sub-panel .control-panel-back {
    288     left: 0;
    289 }
    290 
    291 .current-panel > .accordion-section-title {
    292     height: 22px;
    293 }
    294 
    295442.wp-full-overlay-sidebar .wp-full-overlay-header {
    296443    -webkit-transition: padding ease-in-out .18s;
    … …  
    346493}
    347494
    348 .control-section.control-panel .accordion-section-title .panel-title {
    349     font-size: 20px;
    350     font-weight: 200;
    351     line-height: 24px;
    352     display: block;
    353     border: none;
    354 }
    355 
    356 .control-section.control-panel .preview-notice {
    357     font-size: 13px;
    358     line-height: 24px;
    359 }
    360 
    361495p.customize-section-description {
    362496    font-style: normal;
     497    margin-top: 22px;
     498    margin-bottom: 0;
    363499}
    364500
    … …  
    367503    float: left;
    368504    clear: both;
    369     margin-bottom: 8px;
     505    margin-bottom: 12px;
    370506}
    371507
    … …  
    499635
    500636.wp-full-overlay-sidebar {
    501     background: #eeeeee;
     637    background: #eee;
    502638    border-right: 1px solid #ddd;
    503639}
    … …  
    543679    margin-right: 16px;
    544680    padding: 4px 5px;
    545     border: 2px solid #eeeeee;
     681    border: 2px solid #eee;
    546682    -webkit-user-select: none;
    547683    -moz-user-select: none;
    … …  
    556692    right: 0;
    557693    width: 20px;
    558     background: #eeeeee;
     694    background: #eee;
    559695}
    560696
    … …  
    576712.customize-control .dropdown-status {
    577713    color: #32373c;
    578     background: #eeeeee;
     714    background: #eee;
    579715    display: none;
    580716    max-width: 112px;
    … …  
    596732
    597733.customize-control-color .dropdown .dropdown-content {
    598     background-color: #555555;
     734    background-color: #555;
    599735    border: 1px solid rgba(0, 0, 0, 0.15);
    600736}
    … …  
    8981034#customize-theme-controls .control-section-themes .accordion-section-title:hover,
    8991035#customize-theme-controls .control-section-themes .accordion-section-title:focus {
    900     color: #555555;
     1036    color: #555;
    9011037    background-color: #fff;
    9021038}
    … …  
    9141050}
    9151051
    916 .control-section-themes .accordion-section-title span {
    917     font-size: small;
     1052.control-section-themes .accordion-section-title span.customize-action,
     1053#customize-controls .customize-section-title span.customize-action {
     1054    font-size: 13px;
    9181055    display: block;
    9191056    font-weight: 400;
    … …  
    9271064    margin-top: -14px;
    9281065    font-weight: normal;
     1066}
     1067
     1068.control-section-themes .accordion-section-title:before {
     1069    display: none;
    9291070}
    9301071
    … …  
    9391080}
    9401081
     1082.customize-themes-panel .accordion-section-title:first-child {
     1083    margin-top: 0;
     1084}
     1085
     1086#customize-controls .customize-themes-panel .accordion-section-title:nth-child(2) {
     1087    font-size: 14px;
     1088    font-weight: 600;
     1089}
    9411090
    9421091.customize-themes-panel > h2 {
    … …  
    9551104.customize-control.customize-control-theme {
    9561105    margin-bottom: 8px;
     1106}
     1107
     1108#customize-theme-controls .themes.accordion-section-content {
     1109    position: relative;
     1110    left: 0;
     1111    padding: 0;
     1112    width: 100%;
    9571113}
    9581114
    … …  
    11711327    }
    11721328
    1173     .adding-widget #customize-header-actions .primary-actions {
    1174         display: none;
    1175     }
    1176 
    1177     .adding-widget #customize-header-actions .secondary-actions {
    1178         display: block;
    1179     }
    1180 
    11811329    #customize-header-actions .button-primary {
    11821330        margin-top: 6px;

  • trunk/src/wp-admin/css/customize-widgets.css

    r32243 r32649  
    1313    /* The link in .customize-control-sidebar_widgets .hide-if-js will fail if it ever gets used. */
    1414    display: none;
     15}
     16
     17.control-section.control-section-sidebar .accordion-section-content.ui-sortable {
     18    overflow: visible;
    1519}
    1620
    … …  
    349353    margin: 0;
    350354    z-index: 1;
    351     background: #fff !important;
    352     -webkit-transition: all 0.2s;
    353     transition: all 0.2s;
    354     border-right: 1px solid #dddddd;
     355    background: #eee !important;
     356    -webkit-transition: left .18s;
     357    transition: left .18s;
     358    border-right: 1px solid #ddd;
     359}
     360
     361.ios #available-widgets {
     362    -webkit-transition: left 0s;
     363    transition: left 0s;
    355364}
    356365
    … …  
    385394    position: relative;
    386395    padding: 20px 15px 20px 60px;
     396    background: #fff;
    387397    border-bottom: 1px solid #e4e4e4;
    388398    cursor: pointer;
    … …  
    392402#available-widgets .widget-tpl:hover,
    393403#available-widgets .widget-tpl.selected {
    394     background: #fafafa;
     404    background: #eee;
     405    border-bottom-color: #ccc;
    395406}
    396407
    … …  
    584595#available-widgets [class*="twitter"] .widget-title:before { content: "\f301"; }
    585596
     597#available-widgets .customize-section-title {
     598    display: none;
     599}
    586600
    587601@media screen and (max-height: 700px) and (min-width: 981px) {
    588     .customize-control {
     602    .customize-control-widget {
    589603        margin-bottom: 0;
    590604    }
    … …  
    629643    }
    630644
     645    #available-widgets .customize-section-title {
     646        display: block;
     647        margin: 0;
     648    }
     649
     650    #available-widgets .customize-section-back {
     651        height: 69px;
     652    }
     653
     654    #available-widgets .customize-section-title h3 {
     655        font-size: 20px;
     656        font-weight: 200;
     657        padding: 9px 10px 12px 14px;
     658        margin: 0;
     659        line-height: 24px;
     660        color: #555;
     661        display: block;
     662        overflow: hidden;
     663        white-space: nowrap;
     664        text-overflow: ellipsis;
     665    }
     666
     667    #available-widgets .customize-section-title .customize-action {
     668        font-size: 13px;
     669        display: block;
     670        font-weight: 400;
     671        overflow: hidden;
     672        white-space: nowrap;
     673        text-overflow: ellipsis;
     674    }
     675
    631676    #available-widgets-filter {
    632         position: static;
     677        position: relative;
    633678        width: 100%;
     679        background: #fff;
    634680        height: auto;
    635     }
    636 }
     681        padding: 10px 15px;
     682    }
     683
     684    #available-widgets-list {
     685        top: 140px;
     686    }
     687}

  • trunk/src/wp-admin/customize.php

    r32642 r32649  
    148148        <div id="widgets-right"><!-- For Widget Customizer, many widgets try to look for instances under div#widgets-right, so we have to add that ID to a container div in the Customizer for compat -->
    149149        <div class="wp-full-overlay-sidebar-content" tabindex="-1">
    150             <div id="customize-info" class="accordion-section">
    151                 <div class="accordion-section-title" aria-label="<?php esc_attr_e( 'Customizer Options' ); ?>" tabindex="0">
     150            <div id="customize-info" class="accordion-section customize-info">
     151                <div class="accordion-section-title" aria-label="<?php esc_attr_e( 'Customizer Options' ); ?>">
    152152                    <span class="preview-notice"><?php
    153                         echo sprintf( __( 'You are customizing %s' ), '<strong class="theme-name site-title">' . get_bloginfo( 'name' ) . '</strong>' );
     153                        echo sprintf( __( 'You are customizing %s' ), '<strong class="panel-title site-title">' . get_bloginfo( 'name' ) . '</strong>' );
    154154                    ?></span>
     155                    <button class="customize-help-toggle dashicons dashicons-editor-help" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
    155156                </div>
    156                 <div class="accordion-section-content"><?php
     157                <div class="customize-panel-description"><?php
    157158                    _e( 'The Customizer allows you to preview changes to your site before publishing them. You can also navigate to different pages on your site to preview them.' );
    158159                ?></div>

  • trunk/src/wp-admin/js/customize-controls.js

    r32119 r32649  
    444444         */
    445445        attachEvents: function () {
    446             var section = this;
     446            var section = this,
     447                backBtn = section.container.find( '.customize-section-back' ),
     448                sectionTitle = section.container.find( '.accordion-section-title' ).first();
    447449
    448450            // Expand/Collapse accordion sections on click.
    449             section.container.find( '.accordion-section-title' ).on( 'click keydown', function( event ) {
     451            section.container.find( '.accordion-section-title, .customize-section-back' ).on( 'click keydown', function( event ) {
    450452                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    451453                    return;
    … …  
    455457                if ( section.expanded() ) {
    456458                    section.collapse();
     459                    backBtn.attr( 'tabindex', '-1' );
     460                    sectionTitle.attr( 'tabindex', '0' );
     461                    sectionTitle.focus();
    457462                } else {
    458463                    section.expand();
     464                    sectionTitle.attr( 'tabindex', '-1' );
     465                    backBtn.attr( 'tabindex', '0' );
     466                    backBtn.focus();
    459467                }
    460468            });
    … …  
    500508         */
    501509        onChangeExpanded: function ( expanded, args ) {
    502             var section = this,
     510            var position, scroll, section = this,
     511                container = section.container.closest( '.wp-full-overlay-sidebar-content' ),
    503512                content = section.container.find( '.accordion-section-content' ),
     513                overlay = section.container.closest( '.wp-full-overlay' ),
    504514                expand;
    505515
    506             if ( expanded ) {
     516            if ( expanded && ! section.container.hasClass( 'open' ) ) {
    507517
    508518                if ( args.unchanged ) {
    509519                    expand = args.completeCallback;
    510520                } else {
     521                    container.scrollTop( 0 );
    511522                    expand = function () {
    512                         content.stop().slideDown( args.duration, args.completeCallback );
    513523                        section.container.addClass( 'open' );
     524                        overlay.addClass( 'section-open' );
     525                        position = content.offset().top;
     526                        scroll = container.scrollTop();
     527                        content.css( 'margin-top', ( 45 - position - scroll ) );
    514528                    };
    515529                }
    … …  
    532546                }
    533547
    534             } else {
     548            } else if ( section.container.hasClass( 'open' ) ) {
    535549                section.container.removeClass( 'open' );
    536                 content.slideUp( args.duration, args.completeCallback );
     550                overlay.removeClass( 'section-open' );
     551                content.css( 'margin-top', 'inherit' );
     552                container.scrollTop( 0 );
     553                section.container.find( '.accordion-section-title' ).focus();
    537554            }
    538555        }
    … …  
    719736                container = section.closest( '.wp-full-overlay-sidebar-content' ),
    720737                siblings = container.find( '.open' ),
    721                 topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section > .accordion-section-title' ).add( '#customize-info > .accordion-section-title' ),
    722738                customizeBtn = section.find( '.customize-theme' ),
    723739                changeBtn = section.find( '.change-theme' ),
    … …  
    749765                    }
    750766                } );
    751                 topPanel.attr( 'tabindex', '-1' );
    752                 changeBtn.attr( 'tabindex', '-1' );
    753767                customizeBtn.focus();
    754768            } else {
    … …  
    763777                    }
    764778                } );
    765                 topPanel.attr( 'tabindex', '0' );
    766779                customizeBtn.attr( 'tabindex', '0' );
    767780                changeBtn.focus();
    … …  
    10131026            });
    10141027
    1015             meta = panel.container.find( '.panel-meta:first' );
    1016 
    1017             meta.find( '> .accordion-section-title' ).on( 'click keydown', function( event ) {
     1028            // Close panel.
     1029            panel.container.find( '.customize-panel-back' ).on( 'click keydown', function( event ) {
    10181030                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    10191031                    return;
    … …  
    10211033                event.preventDefault(); // Keep this AFTER the key filter above
    10221034
     1035                if ( panel.expanded() ) {
     1036                    panel.collapse();
     1037                }
     1038            });
     1039
     1040            meta = panel.container.find( '.panel-meta:first' );
     1041
     1042            meta.find( '> .accordion-section-title .customize-help-toggle' ).on( 'click keydown', function( event ) {
     1043                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
     1044                    return;
     1045                }
     1046                event.preventDefault(); // Keep this AFTER the key filter above
     1047
    10231048                if ( meta.hasClass( 'cannot-expand' ) ) {
    10241049                    return;
    10251050                }
    10261051
    1027                 var content = meta.find( '.accordion-section-content:first' );
     1052                var content = meta.find( '.customize-panel-description:first' );
    10281053                if ( meta.hasClass( 'open' ) ) {
    10291054                    meta.toggleClass( 'open' );
    10301055                    content.slideUp( panel.defaultExpandedArguments.duration );
     1056                    $( this ).attr( 'aria-expanded', false );
    10311057                } else {
    10321058                    content.slideDown( panel.defaultExpandedArguments.duration );
    10331059                    meta.toggleClass( 'open' );
     1060                    $( this ).attr( 'aria-expanded', true );
    10341061                }
    10351062            });
    … …  
    10901117            var position, scroll,
    10911118                panel = this,
    1092                 section = panel.container.closest( '.accordion-section' ),
     1119                section = panel.container.closest( '.accordion-section' ), // This is actually the panel.
    10931120                overlay = section.closest( '.wp-full-overlay' ),
    10941121                container = section.closest( '.wp-full-overlay-sidebar-content' ),
    10951122                siblings = container.find( '.open' ),
    1096                 topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section > .accordion-section-title' ).add( '#customize-info > .accordion-section-title' ),
    1097                 backBtn = overlay.find( '.control-panel-back' ),
     1123                topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section > .accordion-section-title' ),
     1124                backBtn = section.find( '.customize-panel-back' ),
    10981125                panelTitle = section.find( '.accordion-section-title' ).first(),
    10991126                content = section.find( '.control-panel-content' );
    … …  
    25742601            body = $( document.body ),
    25752602            overlay = body.children( '.wp-full-overlay' ),
    2576             title = $( '#customize-info .theme-name.site-title' ),
     2603            title = $( '#customize-info .panel-title.site-title' ),
    25772604            closeBtn = $( '.customize-controls-close' ),
    25782605            saveBtn = $( '#save' );
    … …  
    25892616
    25902617        // Expand/Collapse the main customizer customize info.
    2591         $( '#customize-info' ).find( '> .accordion-section-title' ).on( 'click keydown', function( event ) {
     2618        $( '.customize-info' ).find( '> .accordion-section-title .customize-help-toggle' ).on( 'click keydown', function( event ) {
    25922619            if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    25932620                return;
    … …  
    25952622            event.preventDefault(); // Keep this AFTER the key filter above
    25962623
    2597             var section = $( this ).parent(),
    2598                 content = section.find( '.accordion-section-content:first' );
     2624            var section = $( this ).closest( '.accordion-section' ),
     2625                content = section.find( '.customize-panel-description:first' );
    25992626
    26002627            if ( section.hasClass( 'cannot-expand' ) ) {
    … …  
    26052632                section.toggleClass( 'open' );
    26062633                content.slideUp( api.Panel.prototype.defaultExpandedArguments.duration );
     2634                $( this ).attr( 'aria-expanded', false );
    26072635            } else {
    26082636                content.slideDown( api.Panel.prototype.defaultExpandedArguments.duration );
    26092637                section.toggleClass( 'open' );
     2638                $( this ).attr( 'aria-expanded', true );
    26102639            }
    26112640        });

  • trunk/src/wp-admin/js/customize-widgets.js

    r32243 r32649  
    177177            // If the available widgets panel is open and the customize controls are
    178178            // interacted with (i.e. available widgets panel is blurred) then close the
    179             // available widgets panel.
    180             $( '#customize-controls, .customize-overlay-close' ).on( 'click keydown', function( e ) {
     179            // available widgets panel. Also close on back button click.
     180            $( '#customize-controls, .customize-overlay-close, #available-widgets .customize-section-title' ).on( 'click keydown', function( e ) {
    181181                var isAddNewBtn = $( e.target ).is( '.add-new-widget, .add-new-widget *' );
    182182                if ( $( 'body' ).hasClass( 'adding-widget' ) && ! isAddNewBtn ) {
    … …  
    367367            }
    368368
    369             if ( isTab && ( isShift && isSearchFocused || ! isShift && isLastWidgetFocused ) ) {
     369            if ( this.currentSidebarControl && isTab && ( isShift && isSearchFocused || ! isShift && isLastWidgetFocused ) ) {
    370370                this.currentSidebarControl.container.find( '.add-new-widget' ).focus();
    371371                event.preventDefault();
    … …  
    12711271            if ( expanded ) {
    12721272
    1273                 self.expandControlSection();
     1273                if ( 'undefined' != typeof api.section( self.section ) && ! api.section( self.section ).expanded() ) {
     1274                    self.expandControlSection();
     1275                }
    12741276
    12751277                // Close all other widget controls before expanding this one

  • trunk/src/wp-includes/class-wp-customize-panel.php

    r31541 r32649  
    316316    protected function render_content() {
    317317        ?>
    318         <li class="panel-meta accordion-section control-section<?php if ( empty( $this->description ) ) { echo ' cannot-expand'; } ?>">
    319             <div class="accordion-section-title" tabindex="0">
     318        <li class="panel-meta customize-info accordion-section<?php if ( empty( $this->description ) ) { echo ' cannot-expand'; } ?>">
     319            <button class="customize-panel-back" tabindex="-1"><span class="screen-reader-text"><?php _e( 'Back' ); ?></span></button>
     320            <div class="accordion-section-title">
    320321                <span class="preview-notice"><?php
    321322                    /* translators: %s is the site/panel title in the Customizer */
    322323                    echo sprintf( __( 'You are customizing %s' ), '<strong class="panel-title">' . esc_html( $this->title ) . '</strong>' );
    323324                ?></span>
     325                <button class="customize-help-toggle dashicons dashicons-editor-help" tabindex="0" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
    324326            </div>
    325327            <?php if ( ! empty( $this->description ) ) : ?>
    326                 <div class="accordion-section-content description">
     328                <div class="description customize-panel-description">
    327329                    <?php echo $this->description; ?>
    328330                </div>

  • trunk/src/wp-includes/class-wp-customize-section.php

    r32535 r32649  
    306306            <h3 class="accordion-section-title" tabindex="0">
    307307                <?php echo esc_html( $this->title ); ?>
    308                 <span class="screen-reader-text"><?php _e( 'Press return or enter to expand' ); ?></span>
     308                <span class="screen-reader-text"><?php _e( 'Press return or enter to open' ); ?></span>
    309309            </h3>
    310310            <ul class="accordion-section-content">
    311                 <?php if ( ! empty( $this->description ) ) : ?>
    312                     <li class="customize-section-description-container">
     311                <li class="customize-section-description-container">
     312                    <div class="customize-section-title">
     313                        <button class="customize-section-back" tabindex="-1">
     314                            <span class="screen-reader-text"><?php _e( 'Back' ); ?></span>
     315                        </button>
     316                        <h3>
     317                            <span class="customize-action"><?php
     318                                if ( $this->panel ) {
     319                                    /* translators: &#9656; is the unicode right-pointing triangle, and %s is the section title in the Customizer */
     320                                    echo sprintf( __( 'Customizing &#9656; %s' ), esc_html( $this->manager->get_panel( $this->panel )->title ) );
     321                                } else {
     322                                    _e( 'Customizing' );
     323                                }
     324                            ?></span>
     325                            <?php echo esc_html( $this->title ); ?>
     326                        </h3>
     327                    </div>
     328                    <?php if ( ! empty( $this->description ) ) : ?>
    313329                        <p class="description customize-section-description"><?php echo $this->description; ?></p>
    314                     </li>
    315                 <?php endif; ?>
     330                    <?php endif; ?>
     331                </li>
    316332            </ul>
    317333        </li>
    … …  
    354370                if ( $this->manager->is_theme_active() ) {
    355371                    /* translators: %s: theme name */
    356                     printf( __( '<span>Active theme</span> %s' ), $this->title );
     372                    printf( __( '<span class="customize-action">Active theme</span> %s' ), $this->title );
    357373                } else {
    358374                    /* translators: %s: theme name */
    359                     printf( __( '<span>Previewing theme</span> %s' ), $this->title );
     375                    printf( __( '<span class="customize-action">Previewing theme</span> %s' ), $this->title );
    360376                }
    361377                ?>
    362378
    363                 <button type="button" class="button change-theme"><?php _ex( 'Change', 'theme' ); ?></button>
     379                <button type="button" class="button change-theme" tabindex="0"><?php _ex( 'Change', 'theme' ); ?></button>
    364380            </h3>
    365381            <div class="customize-themes-panel control-panel-content themes-php">
    366                 <h2>
     382                <h3 class="accordion-section-title customize-section-title">
     383                    <span class="customize-action"><?php _e( 'Customizing' ); ?></span>
    367384                    <?php _e( 'Themes' ); ?>
    368385                    <span class="title-count theme-count"><?php echo count( $this->controls ) + 1 /* Active theme */; ?></span>
    369                 </h2>
    370 
     386                </h3>
    371387                <h3 class="accordion-section-title customize-section-title">
    372388                    <?php
    373389                    if ( $this->manager->is_theme_active() ) {
    374390                        /* translators: %s: theme name */
    375                         printf( __( '<span>Active theme</span> %s' ), $this->title );
     391                        printf( __( '<span class="customize-action">Active theme</span> %s' ), $this->title );
    376392                    } else {
    377393                        /* translators: %s: theme name */
    378                         printf( __( '<span>Previewing theme</span> %s' ), $this->title );
     394                        printf( __( '<span class="customize-action">Previewing theme</span> %s' ), $this->title );
    379395                    }
    380396                    ?>

  • trunk/src/wp-includes/class-wp-customize-widgets.php

    r32601 r32649  
    682682        <div id="widgets-left"><!-- compatibility with JS which looks for widget templates here -->
    683683        <div id="available-widgets">
     684            <div class="customize-section-title">
     685                <button class="customize-section-back" tabindex="-1">
     686                    <span class="screen-reader-text"><?php _e( 'Back' ); ?></span>
     687                </button>
     688                <h3>
     689                    <span class="customize-action"><?php
     690                        /* translators: &#9656; is the unicode right-pointing triangle, and %s is the section title in the Customizer */
     691                        echo sprintf( __( 'Customizing &#9656; %s' ), esc_html( $this->manager->get_panel( 'widgets' )->title ) );
     692                    ?></span>
     693                    <?php _e( 'Add a Widget' ); ?>
     694                </h3>
     695            </div>
    684696            <div id="available-widgets-filter">
    685697                <label class="screen-reader-text" for="widgets-search"><?php _e( 'Search Widgets' ); ?></label>
Note: See TracChangeset for help on using the changeset viewer.