WordPress.org
Get WordPress

Make WordPress Core

Ticket #31336: 31336.11.diff

File 31336.11.diff, 32.7 KB (added by valendesigns, 9 years ago)

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

    diff --git src/wp-admin/css/customize-controls.css src/wp-admin/css/customize-controls.css
index b256106..016ac20 100644
    body { 
    2020}
    2121
    2222#customize-controls .description {
    23         color: #666666;
     23        color: #555;
    2424}
    2525
    2626#customize-header-actions .button-primary {
    … … body { 
    5050        overflow-x: hidden;
    5151}
    5252
    53 #customize-info {
     53#customize-controls .customize-info {
    5454        border: none;
    5555        border-top: 1px solid #ddd;
     56        border-bottom: 1px solid #ddd;
     57        margin-bottom: 15px;
    5658}
    5759
    58 #customize-info .accordion-section-title {
    59         background-color: #fff;
    60         color: #666666;
     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;
     65        border-bottom: none;
     66        cursor: default;
    6467}
    6568
    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;
     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;
    7073}
    7174
    72 #customize-info .preview-notice {
     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;
     91        overflow: hidden;
     92        white-space: nowrap;
     93        text-overflow: ellipsis;
    8294}
    8395
    84 #customize-info .theme-screenshot {
    85         width: 258px;
     96#customize-controls .customize-section-title span.customize-action {
     97        overflow: hidden;
     98        white-space: nowrap;
     99        text-overflow: ellipsis;
    86100}
    87101
    88 #customize-info .theme-description {
    89         margin-top: 1em;
    90         color: #666666;
    91         line-height: 20px;
     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        box-shadow: none;
     111        -webkit-appearance: none;
     112        background: transparent;
     113        color: #555;
     114        border: none;
     115}
     116
     117#customize-controls .customize-info .customize-help-toggle:before {
     118        position: absolute;
     119        top: 5px;
     120        left: 5px;
     121}
     122
     123#customize-controls .customize-info.open .customize-help-toggle,
     124#customize-controls .customize-info .customize-help-toggle:focus,
     125#customize-controls .customize-info .customize-help-toggle:hover {
     126        color: #0073aa;
     127}
     128
     129#customize-controls .customize-info .customize-panel-description {
     130        color: #555;
     131        display: none;
     132        background: #fff;
     133        padding: 12px 15px;
     134        border-top: 1px solid #ddd;
     135}
     136
     137#customize-controls .customize-info .customize-panel-description p:first-child {
     138        margin-top: 0;
     139}
     140
     141#customize-controls .customize-info .customize-panel-description p:last-child {
     142        margin-bottom: 0;
     143}
     144
     145#customize-controls .current-panel .control-section > h3.accordion-section-title {
     146        padding-right: 30px;
    92147}
    93148
    94149#customize-theme-controls .control-section {
    … … body { 
    96151}
    97152
    98153#customize-theme-controls .accordion-section-title {
    99         color: #555555;
     154        color: #555;
    100155        background-color: #fff;
    101         border-bottom: 1px solid #eeeeee;
     156        border-bottom: 1px solid #eee;
     157}
     158
     159#customize-theme-controls .accordion-section-title:after {
     160        content: "\f345";
     161}
     162
     163.rtl #customize-theme-controls .accordion-section-title:after {
     164        content: "\f341";
    102165}
    103166
    104167#customize-theme-controls .accordion-section-content {
    105         color: #555555;
    106         background: #fff;
     168        color: #555;
     169        background: transparent;
    107170}
    108171
    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;
     172#customize-controls .control-section:hover > .accordion-section-title,
     173#customize-controls .control-section .accordion-section-title:hover,
     174#customize-controls .control-section.open .accordion-section-title,
     175#customize-controls .control-section .accordion-section-title:focus {
     176        color: #fff;
     177        background: #0073aa;
    118178}
    119179
    120180.js .control-section:hover .accordion-section-title,
    … … body { 
    128188#customize-theme-controls .control-section .accordion-section-title:hover:after,
    129189#customize-theme-controls .control-section.open .accordion-section-title:after,
    130190#customize-theme-controls .control-section .accordion-section-title:focus:after {
    131         color: #555;
     191        color: #fff;
    132192}
    133193
    134 #customize-info.open,
    135194#customize-theme-controls .control-section.open {
    136         border-bottom: 1px solid #eeeeee;
     195        border-bottom: 1px solid #eee;
    137196}
    138197
    139198#customize-theme-controls .control-section.open .accordion-section-title {
    140         border-bottom-color: #eeeeee !important;
     199        border-bottom-color: #eee !important;
    141200}
    142201
    143202#customize-theme-controls .control-section:last-of-type.open,
    … … body { 
    145204        border-bottom-color: #ddd;
    146205}
    147206
    148 #customize-theme-controls > ul,
     207#customize-theme-controls > ul {
     208        margin: 0;
     209}
     210
    149211#customize-theme-controls .accordion-section-content {
    150212        margin: 0;
     213        position: absolute;
     214        left: 100%;
     215        top: 0;
     216        width: -webkit-calc(100% - 24px);
     217        width: calc(100% - 24px);
     218        padding: 12px;
    151219}
    152220
    153 .control-section.control-panel > .accordion-section-title {
    154         padding-right: 54px;
     221.customize-section-description-container {
     222        margin-bottom: 15px;
    155223}
    156224
    157 .control-section.control-panel > .accordion-section-title:after {
    158         content: "\f345";
    159         background: #f5f5f5;
     225.customize-section-title {
     226        margin: -12px;
     227        border-bottom: 1px solid #ddd;
     228        background: #fff;
     229}
     230
     231#customize-theme-controls .customize-themes-panel h3.customize-section-title:first-child {
     232        border-bottom: 1px solid #ddd;
     233        padding: 12px 12px 12px 12px;
     234}
     235
     236.ios #customize-theme-controls .customize-themes-panel h3.customize-section-title:first-child {
     237        padding: 12px 12px 13px 12px;
     238}
     239
     240.customize-section-title h3,
     241h3.customize-section-title {
     242        padding: 10px 10px 12px 14px;
     243        margin: 0;
     244        line-height: 21px;
    160245        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;
    168246}
    169247
    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;
     248#customize-theme-controls .control-section .accordion-section-content > li.customize-control:nth-child(2) {
     249        margin-top: 12px;
     250}
     251
     252#customize-theme-controls {
     253        position: relative;
     254        left: 0;
     255        transition: .18s left ease-in-out;
     256}
     257
     258.section-open #customize-info,
     259.section-open #customize-theme-controls {
     260        left: -100%;
     261}
     262
     263.section-open .control-panel-back {
     264        display: none;
    179265}
    180266
    181267.accordion-sub-container.control-panel-content {
    … … body { 
    184270        left: 300px;
    185271        top: 0;
    186272        width: 300px;
    187         border-top: 1px solid #ddd;
    188273        -webkit-transition: left ease-in-out .18s;
    189274        transition: left ease-in-out .18s;
    190275}
    191276
     277.ios .accordion-sub-container.control-panel-content {
     278        -webkit-transition: left 0s;
     279        transition: left 0s;
     280}
     281
    192282.accordion-sub-container.control-panel-content.animating {
    193283        display: block;
    194284}
    … … body { 
    242332        transition: left .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out;
    243333}
    244334
    245 .ios .control-panel-back {
     335.customize-panel-back,
     336.customize-section-back {
     337        display: block;
     338        float: left;
     339        width: 48px;
     340        height: 69px;
     341        padding: 0 24px 0 0;
     342        margin: 0;
     343        background: #fff;
     344        border: none;
     345        border-right: 1px solid #ddd;
     346        box-shadow: none;
     347        cursor: pointer;
     348        -webkit-transition: left .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out;
     349        transition: left .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out;
     350}
     351
     352.customize-section-back {
     353        height: 70px;
     354}
     355
     356.ios .control-panel-back,
     357.ios .customize-panel-back,
     358.ios .customize-section-back {
    246359        -webkit-transition: left 0s;
    247360        transition: left 0s;
    248361}
    249362
    250 .collapsed .control-panel-back {
     363.collapsed .control-panel-back,
     364.ios .customize-panel-back {
    251365        display: none;
    252366}
    253367
     368.ios .expanded.in-sub-panel .customize-panel-back {
     369        display: block;
     370}
     371
     372.panel-meta.customize-info .accordion-section-title {
     373        margin-left: 48px;
     374}
     375
     376#customize-controls .panel-meta.customize-info .accordion-section-title:hover {
     377        background: #fff;
     378        color: #555;
     379}
     380
    254381.customize-overlay-close:focus,
    255382.customize-overlay-close:hover,
    256383.customize-controls-close:focus,
    … … body { 
    267394        box-shadow: none;
    268395}
    269396
     397.customize-panel-back:hover,
     398.customize-panel-back:focus,
     399.customize-section-back:hover,
     400.customize-section-back:focus {
     401        background: #0073aa;
     402        border-color: #ccc;
     403        color: #fff;
     404        outline: none;
     405        -webkit-box-shadow: none;
     406        box-shadow: none;
     407}
     408
    270409.customize-overlay-close:before,
    271410.customize-controls-close:before {
    272411        font: normal 22px/45px dashicons;
    … … body { 
    276415        left: 13px;
    277416}
    278417
     418.customize-panel-back:before,
     419.customize-section-back:before {
     420        font: normal 20px/69px dashicons;
     421        content: "\f341";
     422        position: relative;
     423        left: 13px;
     424}
     425
    279426.control-panel-back:before {
    280427        font: normal 20px/45px dashicons;
    281428        content: "\f341";
    … … body { 
    284431        left: 13px;
    285432}
    286433
    287 .in-sub-panel .control-panel-back {
    288         left: 0;
    289 }
    290 
    291 .current-panel > .accordion-section-title {
    292         height: 22px;
    293 }
    294 
    295434.wp-full-overlay-sidebar .wp-full-overlay-header {
    296435        -webkit-transition: padding ease-in-out .18s;
    297436        transition: padding ease-in-out .18s;
    … … body { 
    345484        transition: left 0s;
    346485}
    347486
    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 
    361487p.customize-section-description {
    362488        font-style: normal;
     489        margin-top: 22px;
     490        margin-bottom: 0;
    363491}
    364492
    365493.customize-control {
    366494        width: 100%;
    367495        float: left;
    368496        clear: both;
    369         margin-bottom: 8px;
     497        margin-bottom: 12px;
    370498}
    371499
    372500.customize-control select,
    … … p.customize-section-description { 
    498626}
    499627
    500628.wp-full-overlay-sidebar {
    501         background: #eeeeee;
     629        background: #eee;
    502630        border-right: 1px solid #ddd;
    503631}
    504632
    … … p.customize-section-description { 
    542670        line-height: 16px;
    543671        margin-right: 16px;
    544672        padding: 4px 5px;
    545         border: 2px solid #eeeeee;
     673        border: 2px solid #eee;
    546674        -webkit-user-select: none;
    547675        -moz-user-select: none;
    548676        -ms-user-select: none;
    … … p.customize-section-description { 
    555683        bottom: 0;
    556684        right: 0;
    557685        width: 20px;
    558         background: #eeeeee;
     686        background: #eee;
    559687}
    560688
    561689.customize-control .dropdown-arrow:after {
    … … p.customize-section-description { 
    575703
    576704.customize-control .dropdown-status {
    577705        color: #32373c;
    578         background: #eeeeee;
     706        background: #eee;
    579707        display: none;
    580708        max-width: 112px;
    581709}
    … … p.customize-section-description { 
    595723}
    596724
    597725.customize-control-color .dropdown .dropdown-content {
    598         background-color: #555555;
     726        background-color: #555;
    599727        border: 1px solid rgba(0, 0, 0, 0.15);
    600728}
    601729
    … … p.customize-section-description { 
    8971025
    8981026#customize-theme-controls .control-section-themes .accordion-section-title:hover,
    8991027#customize-theme-controls .control-section-themes .accordion-section-title:focus {
    900         color: #555555;
     1028        color: #555;
    9011029        background-color: #fff;
    9021030}
    9031031
    … … p.customize-section-description { 
    9131041        padding-right: 100px; /* Space for the button */
    9141042}
    9151043
    916 .control-section-themes .accordion-section-title span {
    917         font-size: small;
     1044.control-section-themes .accordion-section-title span.customize-action,
     1045#customize-controls .customize-section-title span.customize-action {
     1046        font-size: 13px;
    9181047        display: block;
    9191048        font-weight: 400;
    9201049}
    … … p.customize-section-description { 
    9281057        font-weight: normal;
    9291058}
    9301059
     1060.control-section-themes .accordion-section-title:before {
     1061        display: none;
     1062}
     1063
    9311064.customize-themes-panel {
    9321065        display: none;
    9331066        padding: 0 8px;
    … … p.customize-section-description { 
    9381071        box-sizing: border-box;
    9391072}
    9401073
     1074.customize-themes-panel .accordion-section-title:first-child {
     1075        margin-top: 0;
     1076}
     1077
     1078#customize-controls .customize-themes-panel .accordion-section-title:nth-child(2) {
     1079        font-size: 14px;
     1080        font-weight: 600;
     1081}
    9411082
    9421083.customize-themes-panel > h2 {
    9431084        padding: 15px 8px 0 8px;
    … … p.customize-section-description { 
    9561097        margin-bottom: 8px;
    9571098}
    9581099
     1100#customize-theme-controls .themes.accordion-section-content {
     1101        position: relative;
     1102        left: 0;
     1103        padding: 0;
     1104        width: 100%;
     1105}
     1106
    9591107.wp-customizer .theme-browser .themes {
    9601108        padding-bottom: 8px;
    9611109}
    … … body.cheatin p { 
    11701318                margin-bottom: 4px;
    11711319        }
    11721320
    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 
    11811321        #customize-header-actions .button-primary {
    11821322                margin-top: 6px;
    11831323        }

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

    diff --git src/wp-admin/css/customize-widgets.css src/wp-admin/css/customize-widgets.css
index ba95022..3601cae 100644
     
    1414        display: none;
    1515}
    1616
     17.control-section.control-section-sidebar .accordion-section-content.ui-sortable {
     18        overflow: visible;
     19}
     20
    1721.customize-control-widget_form .widget-top {
    1822        -webkit-transition: opacity 0.5s;
    1923        transition: opacity 0.5s;
    … … body.adding-widget .add-new-widget:before { 
    348352        width: 300px;
    349353        margin: 0;
    350354        z-index: 1;
    351         background: #fff !important;
     355        background: #eee !important;
    352356        -webkit-transition: all 0.2s;
    353357        transition: all 0.2s;
    354         border-right: 1px solid #dddddd;
     358        border-right: 1px solid #ddd;
    355359}
    356360
    357361#available-widgets-list {
    … … body.adding-widget .add-new-widget:before { 
    384388#available-widgets .widget-tpl {
    385389        position: relative;
    386390        padding: 20px 15px 20px 60px;
     391        background: #fff;
    387392        border-bottom: 1px solid #e4e4e4;
    388393        cursor: pointer;
    389394        display: none;
    … … body.adding-widget .add-new-widget:before { 
    391396
    392397#available-widgets .widget-tpl:hover,
    393398#available-widgets .widget-tpl.selected {
    394         background: #fafafa;
     399        background: #eee;
     400        border-bottom-color: #ccc;
    395401}
    396402
    397403#available-widgets .widget-top,
    … … body.adding-widget #customize-preview { 
    583589#available-widgets [class*="tweet"] .widget-title:before,
    584590#available-widgets [class*="twitter"] .widget-title:before { content: "\f301"; }
    585591
     592#available-widgets .customize-section-title {
     593        display: none;
     594}
    586595
    587596@media screen and (max-height: 700px) and (min-width: 981px) {
    588         .customize-control {
     597        .customize-control-widget {
    589598                margin-bottom: 0;
    590599        }
    591600        .widget-top {
    … … body.adding-widget #customize-preview { 
    628637                width: 100%;
    629638        }
    630639
     640        #available-widgets .customize-section-title {
     641                display: block;
     642                margin: 0;
     643        }
     644       
     645        #available-widgets .customize-section-back {
     646                height: 69px;
     647        }
     648
     649        #available-widgets .customize-section-title h3 {
     650                font-size: 20px;
     651                font-weight: 200;
     652                padding: 9px 10px 12px 14px;
     653                margin: 0;
     654                line-height: 24px;
     655                color: #555;
     656                display: block;
     657                overflow: hidden;
     658                white-space: nowrap;
     659                text-overflow: ellipsis;
     660        }
     661
     662        #available-widgets .customize-section-title .customize-action {
     663                font-size: 13px;
     664                display: block;
     665                font-weight: 400;
     666                overflow: hidden;
     667                white-space: nowrap;
     668                text-overflow: ellipsis;
     669        }
     670
    631671        #available-widgets-filter {
    632                 position: static;
     672                position: relative;
    633673                width: 100%;
     674                background: #fff;
    634675                height: auto;
     676                padding: 10px 15px;
     677        }
     678
     679        #available-widgets-list {
     680                top: 140px;
    635681        }
    636682}

  • src/wp-admin/customize.php 

    diff --git src/wp-admin/customize.php src/wp-admin/customize.php
index fc181db..f69d427 100644
    do_action( 'customize_controls_print_scripts' ); 
    143143
    144144                <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 -->
    145145                <div class="wp-full-overlay-sidebar-content" tabindex="-1">
    146                         <div id="customize-info" class="accordion-section">
    147                                 <div class="accordion-section-title" aria-label="<?php esc_attr_e( 'Customizer Options' ); ?>" tabindex="0">
     146                        <div id="customize-info" class="accordion-section customize-info">
     147                                <div class="accordion-section-title" aria-label="<?php esc_attr_e( 'Customizer Options' ); ?>">
    148148                                        <span class="preview-notice"><?php
    149                                                 echo sprintf( __( 'You are customizing %s' ), '<strong class="theme-name site-title">' . get_bloginfo( 'name' ) . '</strong>' );
     149                                                echo sprintf( __( 'You are customizing %s' ), '<strong class="panel-title site-title">' . get_bloginfo( 'name' ) . '</strong>' );
    150150                                        ?></span>
     151                                        <button class="customize-help-toggle dashicons dashicons-editor-help" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
    151152                                </div>
    152                                 <div class="accordion-section-content"><?php
     153                                <div class="customize-panel-description"><?php
    153154                                        _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.' );
    154155                                ?></div>
    155156                        </div>

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

    diff --git src/wp-admin/js/customize-controls.js src/wp-admin/js/customize-controls.js
index e211a41..30750f9 100644
     
    443443                 * @since 4.1.0
    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;
    452454                                }
    … …  
    454456
    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                        });
    461469                },
    … …  
    499507                 * @param {Object}  args
    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                                }
    516530
    … …  
    531545                                        expand();
    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                }
    539556        });
    … …  
    718735                                overlay = section.closest( '.wp-full-overlay' ),
    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' ),
     738                                topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section > .accordion-section-title' ),
    722739                                customizeBtn = section.find( '.customize-theme' ),
    723740                                changeBtn = section.find( '.change-theme' ),
    724741                                content = section.find( '.control-panel-content' );
    … …  
    748765                                                args.completeCallback();
    749766                                        }
    750767                                } );
    751                                 topPanel.attr( 'tabindex', '-1' );
    752                                 changeBtn.attr( 'tabindex', '-1' );
    753768                                customizeBtn.focus();
    754769                        } else {
    755770                                siblings.removeClass( 'open' );
    … …  
    762777                                                args.completeCallback();
    763778                                        }
    764779                                } );
    765                                 topPanel.attr( 'tabindex', '0' );
    766780                                customizeBtn.attr( 'tabindex', '0' );
    767781                                changeBtn.focus();
    768782                                container.scrollTop( 0 );
    … …  
    10121026                                }
    10131027                        });
    10141028
     1029                        // Close panel.
     1030                        panel.container.find( '.customize-panel-back' ).on( 'click keydown', function( event ) {
     1031                                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
     1032                                        return;
     1033                                }
     1034                                event.preventDefault(); // Keep this AFTER the key filter above
     1035
     1036                                if ( panel.expanded() ) {
     1037                                        panel.collapse();
     1038                                }
     1039                        });
     1040
    10151041                        meta = panel.container.find( '.panel-meta:first' );
    10161042
    1017                         meta.find( '> .accordion-section-title' ).on( 'click keydown', function( event ) {
     1043                        meta.find( '> .accordion-section-title .customize-help-toggle' ).on( 'click keydown', function( event ) {
    10181044                                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    10191045                                        return;
    10201046                                }
    … …  
    10241050                                        return;
    10251051                                }
    10261052
    1027                                 var content = meta.find( '.accordion-section-content:first' );
     1053                                var content = meta.find( '.customize-panel-description:first' );
    10281054                                if ( meta.hasClass( 'open' ) ) {
    10291055                                        meta.toggleClass( 'open' );
    10301056                                        content.slideUp( panel.defaultExpandedArguments.duration );
     1057                                        $( this ).attr( 'aria-expanded', false );
    10311058                                } else {
    10321059                                        content.slideDown( panel.defaultExpandedArguments.duration );
    10331060                                        meta.toggleClass( 'open' );
     1061                                        $( this ).attr( 'aria-expanded', true );
    10341062                                }
    10351063                        });
    10361064
    … …  
    10891117                        // Note: there is a second argument 'args' passed
    10901118                        var position, scroll,
    10911119                                panel = this,
    1092                                 section = panel.container.closest( '.accordion-section' ),
     1120                                section = panel.container.closest( '.accordion-section' ), // This is actually the panel.
    10931121                                overlay = section.closest( '.wp-full-overlay' ),
    10941122                                container = section.closest( '.wp-full-overlay-sidebar-content' ),
    10951123                                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' ),
     1124                                topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section > .accordion-section-title' ),
     1125                                backBtn = section.find( '.customize-panel-back' ),
    10981126                                panelTitle = section.find( '.accordion-section-title' ).first(),
    10991127                                content = section.find( '.control-panel-content' );
    11001128
    … …  
    25732601                var parent, topFocus,
    25742602                        body = $( document.body ),
    25752603                        overlay = body.children( '.wp-full-overlay' ),
    2576                         title = $( '#customize-info .theme-name.site-title' ),
     2604                        title = $( '#customize-info .panel-title.site-title' ),
    25772605                        closeBtn = $( '.customize-controls-close' ),
    25782606                        saveBtn = $( '#save' );
    25792607
    … …  
    25882616                });
    25892617
    25902618                // Expand/Collapse the main customizer customize info.
    2591                 $( '#customize-info' ).find( '> .accordion-section-title' ).on( 'click keydown', function( event ) {
     2619                $( '.customize-info' ).find( '> .accordion-section-title .customize-help-toggle' ).on( 'click keydown', function( event ) {
    25922620                        if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    25932621                                return;
    25942622                        }
    25952623                        event.preventDefault(); // Keep this AFTER the key filter above
    25962624
    2597                         var section = $( this ).parent(),
    2598                                 content = section.find( '.accordion-section-content:first' );
     2625                        var section = $( this ).closest( '.accordion-section' ),
     2626                                content = section.find( '.customize-panel-description:first' );
    25992627
    26002628                        if ( section.hasClass( 'cannot-expand' ) ) {
    26012629                                return;
    … …  
    26042632                        if ( section.hasClass( 'open' ) ) {
    26052633                                section.toggleClass( 'open' );
    26062634                                content.slideUp( api.Panel.prototype.defaultExpandedArguments.duration );
     2635                                $( this ).attr( 'aria-expanded', false );
    26072636                        } else {
    26082637                                content.slideDown( api.Panel.prototype.defaultExpandedArguments.duration );
    26092638                                section.toggleClass( 'open' );
     2639                                $( this ).attr( 'aria-expanded', true );
    26102640                        }
    26112641                });
    26122642

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

    diff --git src/wp-admin/js/customize-widgets.js src/wp-admin/js/customize-widgets.js
index 729e6a8..eb245ea 100644
     
    176176
    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 ) {
    183183                                        self.close();
    … …  
    366366                                this.close( { returnFocus: true } );
    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();
    372372                        }
    … …  
    12701270
    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
    12761278                                api.control.each( function( otherControl ) {

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

    diff --git src/wp-includes/class-wp-customize-panel.php src/wp-includes/class-wp-customize-panel.php
index ee9f846..8877882 100644
    class WP_Customize_Panel { 
    315315         */
    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>
    329331                        <?php endif; ?>

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

    diff --git src/wp-includes/class-wp-customize-section.php src/wp-includes/class-wp-customize-section.php
index a27f22b..5364da7 100644
    class WP_Customize_Section { 
    305305                <li id="accordion-section-<?php echo esc_attr( $this->id ); ?>" class="<?php echo esc_attr( $classes ); ?>">
    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>
    318334                <?php
    … … class WP_Customize_Themes_Section extends WP_Customize_Section { 
    353369                                <?php
    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                                        ?>
    381397                                        <button type="button" class="button customize-theme"><?php _e( 'Customize' ); ?></button>

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

    diff --git src/wp-includes/class-wp-customize-widgets.php src/wp-includes/class-wp-customize-widgets.php
index cfd0541..d4d30b0 100644
    final class WP_Customize_Widgets { 
    681681                ?>
    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>
    686698                                <input type="search" id="widgets-search" placeholder="<?php esc_attr_e( 'Search widgets&hellip;' ) ?>" />