WordPress.org
Get WordPress

Make WordPress Core

Ticket #31336: 31336.8.diff

File 31336.8.diff, 27.0 KB (added by celloexpressions, 9 years ago)

Misc. fixes, see comment.

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

     
    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,
     85#customize-controls .customize-info .panel-title {
    7886        font-size: 20px;
    7987        font-weight: 200;
    8088        line-height: 24px;
    8189        display: block;
     90        overflow: hidden;
     91        white-space: nowrap;
     92        text-overflow: ellipsis;
    8293}
    8394
    84 #customize-info .theme-screenshot {
    85         width: 258px;
     95#customize-controls .customize-info .customize-help-toggle {
     96        position: absolute;
     97        top: 4px;
     98        right: 1px;
     99        padding: 20px 20px 10px 10px;
     100        width: 20px;
     101        height: 20px;
     102        cursor: pointer;
     103        box-shadow: none;
     104        -webkit-appearance: none;
     105        background: transparent;
     106        color: #555;
     107        border: none;
    86108}
    87109
    88 #customize-info .theme-description {
    89         margin-top: 1em;
    90         color: #666666;
    91         line-height: 20px;
     110#customize-controls .customize-info .customize-help-toggle:before {
     111        position: absolute;
     112        top: 5px;
     113        left: 5px;
    92114}
    93115
     116#customize-controls .customize-info.open .customize-help-toggle,
     117#customize-controls .customize-info .customize-help-toggle:focus,
     118#customize-controls .customize-info .customize-help-toggle:hover {
     119        color: #0073aa;
     120}
     121
     122#customize-controls .customize-info .customize-panel-description {
     123        display: none;
     124        background: #fff;
     125        padding: 12px 15px;
     126        border-top: 1px solid #ddd;
     127}
     128
     129#customize-controls .customize-info .customize-panel-description p:first-child {
     130        margin-top: 0;
     131}
     132
     133#customize-controls .customize-info .customize-panel-description p:last-child {
     134        margin-bottom: 0;
     135}
     136
    94137#customize-theme-controls .control-section {
    95138        border: none;
    96139}
    … …  
    101144        border-bottom: 1px solid #eeeeee;
    102145}
    103146
     147#customize-theme-controls .accordion-section-title:after {
     148        content: "\f345";
     149}
     150
     151.rtl #customize-theme-controls .accordion-section-title:after {
     152        content: "\f341";
     153}
     154
    104155#customize-theme-controls .accordion-section-content {
    105         color: #555555;
    106         background: #fff;
     156        color: #555;
     157        background: transparent;
    107158}
    108159
    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;
     160#customize-controls .control-section:hover > .accordion-section-title,
     161#customize-controls .control-section .accordion-section-title:hover,
     162#customize-controls .control-section.open .accordion-section-title,
     163#customize-controls .control-section .accordion-section-title:focus {
     164        color: #fff;
     165        background: #0073aa;
    118166}
    119167
    120168.js .control-section:hover .accordion-section-title,
    … …  
    128176#customize-theme-controls .control-section .accordion-section-title:hover:after,
    129177#customize-theme-controls .control-section.open .accordion-section-title:after,
    130178#customize-theme-controls .control-section .accordion-section-title:focus:after {
    131         color: #555;
     179        color: #fff;
    132180}
    133181
    134 #customize-info.open,
    135182#customize-theme-controls .control-section.open {
    136183        border-bottom: 1px solid #eeeeee;
    137184}
    … …  
    145192        border-bottom-color: #ddd;
    146193}
    147194
    148 #customize-theme-controls > ul,
     195#customize-theme-controls > ul {
     196        margin: 0;
     197}
     198
    149199#customize-theme-controls .accordion-section-content {
    150200        margin: 0;
     201        position: absolute;
     202        left: 100%;
     203        top: 0;
     204        width: -webkit-calc(100% - 24px);
     205        width: calc(100% - 24px);
     206        padding: 12px;
    151207}
    152208
     209.customize-section-description-container {
     210        margin-bottom: 15px;
     211}
     212
     213h3.customize-section-title {
     214        margin: -12px -12px -12px 35px;
     215        padding: 12px;
     216        border-bottom: 1px solid #ddd;
     217        border-left: 1px solid #ddd;
     218        background: #fff;
     219        color: #555;
     220        cursor: pointer;
     221}
     222
     223h3.customize-section-title:before {
     224        font: normal 20px/72px dashicons;
     225        content: "\f341";
     226        -webkit-font-smoothing: antialiased;
     227        -moz-osx-font-smoothing: grayscale;
     228        position: absolute;
     229        top: 0;
     230        left: 0;
     231        width: 47px;
     232        margin: 0;
     233        text-align: center;
     234        background: #fff;
     235        border-bottom: 1px solid #ddd;
     236}
     237
     238.rtl h3.customize-section-title:before {
     239        content: "\f345";
     240}
     241
     242h3.customize-section-title:hover,
     243h3.customize-section-title:hover:before,
     244h3.customize-section-title:focus,
     245h3.customize-section-title:focus:before {
     246        background: #0073aa;
     247        color: #fff;
     248        box-shadow: none;
     249        outline: none;
     250}
     251
     252#customize-theme-controls .control-section .accordion-section-content > li.customize-control:nth-child(2) {
     253        margin-top: 12px;
     254}
     255
     256#customize-theme-controls {
     257        position: relative;
     258        left: 0;
     259        transition: .18s left ease-in-out;
     260}
     261
     262.section-open #customize-info,
     263.section-open #customize-theme-controls {
     264        left: -100%;
     265}
     266
     267.section-open .control-panel-back {
     268        display: none;
     269}
     270
    153271.control-section.control-panel > .accordion-section-title {
    154272        padding-right: 54px;
    155273}
    … …  
    169287
    170288#customize-theme-controls .control-section.control-panel > h3.accordion-section-title:focus:after,
    171289#customize-theme-controls .control-section.control-panel > h3.accordion-section-title:hover:after {
    172         background: #ddd;
    173         color: #000;
     290        background: #00a0d2;
     291        color: #fff;
    174292        border: 1px solid #d9d9d9;
    175293        border-right: none;
    176294        margin-top: -12px;
    … …  
    184302        left: 300px;
    185303        top: 0;
    186304        width: 300px;
    187         border-top: 1px solid #ddd;
    188305        -webkit-transition: left ease-in-out .18s;
    189306        transition: left ease-in-out .18s;
    190307}
    … …  
    242359        transition: left .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out;
    243360}
    244361
    245 .ios .control-panel-back {
     362.customize-panel-back {
     363        display: block;
     364        float: left;
     365        width: 48px;
     366        height: 69px;
     367        padding: 0 24px 0 0;
     368        margin: 0;
     369        background: #fff;
     370        border: none;
     371        border-right: 1px solid #ddd;
     372        box-shadow: none;
     373        cursor: pointer;
     374        -webkit-transition: left .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out;
     375        transition: left .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out;
     376}
     377
     378
     379.ios .control-panel-back,
     380.ios .customize-panel-back {
    246381        -webkit-transition: left 0s;
    247382        transition: left 0s;
    248383}
    … …  
    251386        display: none;
    252387}
    253388
     389.panel-meta.customize-info .accordion-section-title {
     390        margin-left: 48px;
     391}
     392
     393#customize-controls .panel-meta.customize-info .accordion-section-title:hover {
     394        background: #fff;
     395        color: #555;
     396}
     397
    254398.customize-overlay-close:focus,
    255399.customize-overlay-close:hover,
    256400.customize-controls-close:focus,
    … …  
    267411        box-shadow: none;
    268412}
    269413
     414.customize-panel-back:hover,
     415.customize-panel-back:focus {
     416        background: #0073aa;
     417        border-color: #ccc;
     418        color: #fff;
     419        outline: none;
     420        -webkit-box-shadow: none;
     421        box-shadow: none;
     422}
     423
    270424.customize-overlay-close:before,
    271425.customize-controls-close:before {
    272426        font: normal 22px/45px dashicons;
    … …  
    276430        left: 13px;
    277431}
    278432
     433.customize-panel-back:before {
     434        font: normal 20px/69px dashicons;
     435        content: "\f341";
     436        position: relative;
     437        left: 13px;
     438}
     439
    279440.control-panel-back:before {
    280441        font: normal 20px/45px dashicons;
    281442        content: "\f341";
    … …  
    285446}
    286447
    287448.in-sub-panel .control-panel-back {
    288         left: 0;
     449/*      left: 0; @todo decide whether to bring back the back buttons in the header */
    289450}
    290451
    291452.current-panel > .accordion-section-title {
    … …  
    345506        transition: left 0s;
    346507}
    347508
    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 
    361509p.customize-section-description {
    362510        font-style: normal;
     511        margin-top: 22px;
     512        margin-bottom: 0;
    363513}
    364514
    365515.customize-control {
    … …  
    366516        width: 100%;
    367517        float: left;
    368518        clear: both;
    369         margin-bottom: 8px;
     519        margin-bottom: 12px;
    370520}
    371521
    372522.customize-control select,
    … …  
    9131063        padding-right: 100px; /* Space for the button */
    9141064}
    9151065
    916 .control-section-themes .accordion-section-title span {
    917         font-size: small;
     1066.control-section-themes .accordion-section-title span.customize-action,
     1067#customize-controls .customize-section-title span.customize-action {
     1068        font-size: 13px;
    9181069        display: block;
    9191070        font-weight: 400;
    9201071}
    … …  
    9281079        font-weight: normal;
    9291080}
    9301081
     1082.control-section-themes .accordion-section-title:before {
     1083        display: none;
     1084}
     1085
    9311086.customize-themes-panel {
    9321087        display: none;
    9331088        padding: 0 8px;
    … …  
    9381093        box-sizing: border-box;
    9391094}
    9401095
     1096.customize-themes-panel .accordion-section-title:first-child {
     1097        margin-top: 0;
     1098}
    9411099
     1100#customize-controls .customize-themes-panel .accordion-section-title:nth-child(2) {
     1101        font-size: 14px;
     1102        font-weight: 600;
     1103}
     1104
    9421105.customize-themes-panel > h2 {
    9431106        padding: 15px 8px 0 8px;
    9441107}
    … …  
    9561119        margin-bottom: 8px;
    9571120}
    9581121
     1122#customize-theme-controls .themes.accordion-section-content {
     1123        position: relative;
     1124        left: 0;
     1125        padding: 0;
     1126        width: 100%;
     1127}
     1128
    9591129.wp-customizer .theme-browser .themes {
    9601130        padding-bottom: 8px;
    9611131}
    … …  
    11701340                margin-bottom: 4px;
    11711341        }
    11721342
    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 
    11811343        #customize-header-actions .button-primary {
    11821344                margin-top: 6px;
    11831345        }

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

     
    348348        width: 300px;
    349349        margin: 0;
    350350        z-index: 1;
    351         background: #fff !important;
     351        background: #eee !important;
    352352        -webkit-transition: all 0.2s;
    353353        transition: all 0.2s;
    354354        border-right: 1px solid #dddddd;
    … …  
    384384#available-widgets .widget-tpl {
    385385        position: relative;
    386386        padding: 20px 15px 20px 60px;
     387        background: #fff;
    387388        border-bottom: 1px solid #e4e4e4;
    388389        cursor: pointer;
    389390        display: none;
    … …  
    391392
    392393#available-widgets .widget-tpl:hover,
    393394#available-widgets .widget-tpl.selected {
    394         background: #fafafa;
     395        background: #eee;
     396        border-bottom-color: #ccc;
    395397}
    396398
    397399#available-widgets .widget-top,
    … …  
    583585#available-widgets [class*="tweet"] .widget-title:before,
    584586#available-widgets [class*="twitter"] .widget-title:before { content: "\f301"; }
    585587
     588#available-widgets .customize-section-title {
     589        display: none;
     590}
    586591
    587592@media screen and (max-height: 700px) and (min-width: 981px) {
    588         .customize-control {
     593        .customize-control-widget {
    589594                margin-bottom: 0;
    590595        }
    591596        .widget-top {
    … …  
    628633                width: 100%;
    629634        }
    630635
     636        #available-widgets .customize-section-title {
     637                margin: 0 0 0 47px;
     638                font-size: 20px;
     639                font-weight: 200;
     640                line-height: 24px;
     641                display: block;
     642                overflow: hidden;
     643                white-space: nowrap;
     644                text-overflow: ellipsis;
     645        }
     646
     647        #available-widgets .customize-section-title .customize-action {
     648                font-size: 13px;
     649                display: block;
     650                font-weight: 400;
     651        }
     652
    631653        #available-widgets-filter {
    632654                position: static;
    633655                width: 100%;
    634656                height: auto;
    635657        }
     658
     659        #available-widgets-list {
     660                top: 122px;
     661        }
    636662}

  • src/wp-admin/customize.php

     
    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

     
    446446                        var section = this;
    447447
    448448                        // Expand/Collapse accordion sections on click.
    449                         section.container.find( '.accordion-section-title' ).on( 'click keydown', function( event ) {
     449                        section.container.find( '.accordion-section-title, .customize-section-title' ).on( 'click keydown', function( event ) {
    450450                                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    451451                                        return;
    452452                                }
    … …  
    499499                 * @param {Object}  args
    500500                 */
    501501                onChangeExpanded: function ( expanded, args ) {
    502                         var section = this,
     502                        var position, scroll, section = this,
     503                                container = section.container.closest( '.wp-full-overlay-sidebar-content' ),
    503504                                content = section.container.find( '.accordion-section-content' ),
     505                                overlay = section.container.closest( '.wp-full-overlay' ),
    504506                                expand;
    505507
    506                         if ( expanded ) {
     508                        if ( expanded && ! section.container.hasClass( 'open' ) ) {
    507509
    508510                                if ( args.unchanged ) {
    509511                                        expand = args.completeCallback;
    510512                                } else {
     513                                        container.scrollTop( 0 );
    511514                                        expand = function () {
    512                                                 content.stop().slideDown( args.duration, args.completeCallback );
    513515                                                section.container.addClass( 'open' );
     516                                                overlay.addClass( 'section-open' );
     517                                                position = content.offset().top;
     518                                                scroll = container.scrollTop();
     519                                                content.css( 'margin-top', ( 45 - position - scroll ) );
    514520                                        };
    515521                                }
    516522
    … …  
    531537                                        expand();
    532538                                }
    533539
    534                         } else {
     540                        } else if ( section.container.hasClass( 'open' ) ) {
    535541                                section.container.removeClass( 'open' );
    536                                 content.slideUp( args.duration, args.completeCallback );
     542                                overlay.removeClass( 'section-open' );
     543                                content.css( 'margin-top', 'inherit' );
     544                                container.scrollTop( 0 );
     545                                section.container.find( '.accordion-section-title' ).focus();
    537546                        }
    538547                }
    539548        });
    … …  
    718727                                overlay = section.closest( '.wp-full-overlay' ),
    719728                                container = section.closest( '.wp-full-overlay-sidebar-content' ),
    720729                                siblings = container.find( '.open' ),
    721                                 topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section > .accordion-section-title' ).add( '#customize-info > .accordion-section-title' ),
     730                                topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section > .accordion-section-title' ),
    722731                                customizeBtn = section.find( '.customize-theme' ),
    723732                                changeBtn = section.find( '.change-theme' ),
    724733                                content = section.find( '.control-panel-content' );
    … …  
    10121021                                }
    10131022                        });
    10141023
     1024                        // Close panel.
     1025                        panel.container.find( '.customize-panel-back' ).on( 'click keydown', function( event ) {
     1026                                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
     1027                                        return;
     1028                                }
     1029                                event.preventDefault(); // Keep this AFTER the key filter above
     1030
     1031                                if ( panel.expanded() ) {
     1032                                        panel.collapse();
     1033                                }
     1034                        });
     1035
    10151036                        meta = panel.container.find( '.panel-meta:first' );
    10161037
    1017                         meta.find( '> .accordion-section-title' ).on( 'click keydown', function( event ) {
     1038                        meta.find( '> .accordion-section-title .customize-help-toggle' ).on( 'click keydown', function( event ) {
    10181039                                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    10191040                                        return;
    10201041                                }
    … …  
    10241045                                        return;
    10251046                                }
    10261047
    1027                                 var content = meta.find( '.accordion-section-content:first' );
     1048                                var content = meta.find( '.customize-panel-description:first' );
    10281049                                if ( meta.hasClass( 'open' ) ) {
    10291050                                        meta.toggleClass( 'open' );
    10301051                                        content.slideUp( panel.defaultExpandedArguments.duration );
     1052                                        $( this ).attr( 'aria-expanded', false );
    10311053                                } else {
    10321054                                        content.slideDown( panel.defaultExpandedArguments.duration );
    10331055                                        meta.toggleClass( 'open' );
     1056                                        $( this ).attr( 'aria-expanded', true );
    10341057                                }
    10351058                        });
    10361059
    … …  
    10891112                        // Note: there is a second argument 'args' passed
    10901113                        var position, scroll,
    10911114                                panel = this,
    1092                                 section = panel.container.closest( '.accordion-section' ),
     1115                                section = panel.container.closest( '.accordion-section' ), // This is actually the panel.
    10931116                                overlay = section.closest( '.wp-full-overlay' ),
    10941117                                container = section.closest( '.wp-full-overlay-sidebar-content' ),
    10951118                                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' ),
     1119                                topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section > .accordion-section-title' ),
     1120                                backBtn = section.find( '.customize-panel-back' ),
    10981121                                panelTitle = section.find( '.accordion-section-title' ).first(),
    10991122                                content = section.find( '.control-panel-content' );
    11001123
    … …  
    25732596                var parent, topFocus,
    25742597                        body = $( document.body ),
    25752598                        overlay = body.children( '.wp-full-overlay' ),
    2576                         title = $( '#customize-info .theme-name.site-title' ),
     2599                        title = $( '#customize-info .panel-title.site-title' ),
    25772600                        closeBtn = $( '.customize-controls-close' ),
    25782601                        saveBtn = $( '#save' );
    25792602
    … …  
    25882611                });
    25892612
    25902613                // Expand/Collapse the main customizer customize info.
    2591                 $( '#customize-info' ).find( '> .accordion-section-title' ).on( 'click keydown', function( event ) {
     2614                $( '.customize-info' ).find( '> .accordion-section-title .customize-help-toggle' ).on( 'click keydown', function( event ) {
    25922615                        if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    25932616                                return;
    25942617                        }
    25952618                        event.preventDefault(); // Keep this AFTER the key filter above
    25962619
    2597                         var section = $( this ).parent(),
    2598                                 content = section.find( '.accordion-section-content:first' );
     2620                        var section = $( this ).closest( '.accordion-section' ),
     2621                                content = section.find( '.customize-panel-description:first' );
    25992622
    26002623                        if ( section.hasClass( 'cannot-expand' ) ) {
    26012624                                return;
    … …  
    26042627                        if ( section.hasClass( 'open' ) ) {
    26052628                                section.toggleClass( 'open' );
    26062629                                content.slideUp( api.Panel.prototype.defaultExpandedArguments.duration );
     2630                                $( this ).attr( 'aria-expanded', false );
    26072631                        } else {
    26082632                                content.slideDown( api.Panel.prototype.defaultExpandedArguments.duration );
    26092633                                section.toggleClass( 'open' );
     2634                                $( this ).attr( 'aria-expanded', true );
    26102635                        }
    26112636                });
    26122637

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

     
    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();
    … …  
    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

     
    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

     
    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                                        <h3 class="customize-section-title" tabindex="0">
     313                                                <span class="customize-action"><?php if ( $this->panel ) { echo _x( 'Customizing &#9656; ', 'Customizer sub-section breadcrumbs.' ) . esc_html( $this->manager->get_panel( $this->panel )->title ); } else { _e( 'Customizing' ); } ?></span>
     314                                                <?php echo esc_html( $this->title ); ?>
     315                                                <span class="screen-reader-text"><?php _e( 'Press return or enter to close' ); ?></span>
     316                                        </h3>
     317                                        <?php if ( ! empty( $this->description ) ) : ?>
    313318                                                <p class="description customize-section-description"><?php echo $this->description; ?></p>
    314                                         </li>
    315                                 <?php endif; ?>
     319                                        <?php endif; ?>
     320                                </li>
    316321                        </ul>
    317322                </li>
    318323                <?php
    … …  
    353358                                <?php
    354359                                if ( $this->manager->is_theme_active() ) {
    355360                                        /* translators: %s: theme name */
    356                                         printf( __( '<span>Active theme</span> %s' ), $this->title );
     361                                        printf( __( '<span class="customize-action">Active theme</span> %s' ), $this->title );
    357362                                } else {
    358363                                        /* translators: %s: theme name */
    359                                         printf( __( '<span>Previewing theme</span> %s' ), $this->title );
     364                                        printf( __( '<span class="customize-action">Previewing theme</span> %s' ), $this->title );
    360365                                }
    361366                                ?>
    362367
    … …  
    363368                                <button type="button" class="button change-theme"><?php _ex( 'Change', 'theme' ); ?></button>
    364369                        </h3>
    365370                        <div class="customize-themes-panel control-panel-content themes-php">
    366                                 <h2>
     371                                <h3 class="accordion-section-title customize-section-title">
     372                                        <span class="customize-action"><?php _e( 'Customizing' ); ?></span>
    367373                                        <?php _e( 'Themes' ); ?>
    368374                                        <span class="title-count theme-count"><?php echo count( $this->controls ) + 1 /* Active theme */; ?></span>
    369                                 </h2>
    370 
     375                                </h3>
    371376                                <h3 class="accordion-section-title customize-section-title">
    372377                                        <?php
    373378                                        if ( $this->manager->is_theme_active() ) {
    374379                                                /* translators: %s: theme name */
    375                                                 printf( __( '<span>Active theme</span> %s' ), $this->title );
     380                                                printf( __( '<span class="customize-action">Active theme</span> %s' ), $this->title );
    376381                                        } else {
    377382                                                /* translators: %s: theme name */
    378                                                 printf( __( '<span>Previewing theme</span> %s' ), $this->title );
     383                                                printf( __( '<span class="customize-action">Previewing theme</span> %s' ), $this->title );
    379384                                        }
    380385                                        ?>
    381386                                        <button type="button" class="button customize-theme"><?php _e( 'Customize' ); ?></button>

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

     
    681681                ?>
    682682                <div id="widgets-left"><!-- compatibility with JS which looks for widget templates here -->
    683683                <div id="available-widgets">
     684                        <h3 class="customize-section-title" tabindex="0">
     685                                <span class="customize-action"><?php _e( 'Customizing' ); echo ' &#9656; '; _e( 'Widgets' ); ?></span>
     686                                <?php _e( 'Add a Widget' ); ?>
     687                                <span class="screen-reader-text"><?php _e( 'Press return or enter to close' ); ?></span>
     688                        </h3>
    684689                        <div id="available-widgets-filter">
    685690                                <label class="screen-reader-text" for="widgets-search"><?php _e( 'Search Widgets' ); ?></label>
    686691                                <input type="search" id="widgets-search" placeholder="<?php esc_attr_e( 'Search widgets&hellip;' ) ?>" />