diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css index b25610616d..1e9d326fff 100644 --- a/src/wp-admin/css/customize-controls.css +++ b/src/wp-admin/css/customize-controls.css @@ -20,7 +20,7 @@ body { } #customize-controls .description { - color: #666666; + color: #555; } #customize-header-actions .button-primary { @@ -50,45 +50,101 @@ body { overflow-x: hidden; } -#customize-info { +#customize-controls .customize-info { border: none; border-top: 1px solid #ddd; + border-bottom: 1px solid #ddd; + margin-bottom: 15px; } -#customize-info .accordion-section-title { - background-color: #fff; - color: #666666; +#customize-controls .customize-info .accordion-section-title { + background: #fff; + color: #555; border-left: none; border-right: none; - border-bottom: 1px solid #eeeeee; + border-bottom: none; + cursor: default; } -#customize-info.open .accordion-section-title:after, -#customize-info .accordion-section-title:hover:after, -#customize-info .accordion-section-title:focus:after { - color: #555555; +#customize-controls .customize-info.open .accordion-section-title:after, +#customize-controls .customize-info .accordion-section-title:hover:after, +#customize-controls .customize-info .accordion-section-title:focus:after { + color: #333; } -#customize-info .preview-notice { +#customize-controls .customize-info .accordion-section-title:after { + display: none; +} + +#customize-controls .customize-info .preview-notice { font-size: 13px; line-height: 24px; } -#customize-info .theme-name { +#customize-controls .control-section .customize-section-title h3, +#customize-controls .control-section h3.customize-section-title, +#customize-controls .customize-info .panel-title { font-size: 20px; font-weight: 200; line-height: 24px; display: block; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } -#customize-info .theme-screenshot { - width: 258px; +#customize-controls .customize-section-title span.customize-action { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } -#customize-info .theme-description { - margin-top: 1em; - color: #666666; - line-height: 20px; +#customize-controls .customize-info .customize-help-toggle { + position: absolute; + top: 4px; + right: 1px; + padding: 20px 20px 10px 10px; + width: 20px; + height: 20px; + cursor: pointer; + -webkit-box-shadow: none; + box-shadow: none; + -webkit-appearance: none; + background: transparent; + color: #555; + border: none; +} + +#customize-controls .customize-info .customize-help-toggle:before { + position: absolute; + top: 5px; + left: 5px; +} + +#customize-controls .customize-info.open .customize-help-toggle, +#customize-controls .customize-info .customize-help-toggle:focus, +#customize-controls .customize-info .customize-help-toggle:hover { + color: #0073aa; +} + +#customize-controls .customize-info .customize-panel-description { + color: #555; + display: none; + background: #fff; + padding: 12px 15px; + border-top: 1px solid #ddd; +} + +#customize-controls .customize-info .customize-panel-description p:first-child { + margin-top: 0; +} + +#customize-controls .customize-info .customize-panel-description p:last-child { + margin-bottom: 0; +} + +#customize-controls .current-panel .control-section > h3.accordion-section-title { + padding-right: 30px; } #customize-theme-controls .control-section { @@ -96,25 +152,30 @@ body { } #customize-theme-controls .accordion-section-title { - color: #555555; + color: #555; background-color: #fff; - border-bottom: 1px solid #eeeeee; + border-bottom: 1px solid #eee; +} + +#customize-theme-controls .accordion-section-title:after { + content: "\f345"; +} + +.rtl #customize-theme-controls .accordion-section-title:after { + content: "\f341"; } #customize-theme-controls .accordion-section-content { - color: #555555; - background: #fff; + color: #555; + background: transparent; } -#customize-info.open .accordion-section-title, -#customize-info .accordion-section-title:hover, -#customize-info .accordion-section-title:focus, -#customize-theme-controls .control-section:hover > .accordion-section-title, -#customize-theme-controls .control-section .accordion-section-title:hover, -#customize-theme-controls .control-section.open .accordion-section-title, -#customize-theme-controls .control-section .accordion-section-title:focus { - color: #23282d; - background: #f5f5f5; +#customize-controls .control-section:hover > .accordion-section-title, +#customize-controls .control-section .accordion-section-title:hover, +#customize-controls .control-section.open .accordion-section-title, +#customize-controls .control-section .accordion-section-title:focus { + color: #fff; + background: #0073aa; } .js .control-section:hover .accordion-section-title, @@ -128,16 +189,15 @@ body { #customize-theme-controls .control-section .accordion-section-title:hover:after, #customize-theme-controls .control-section.open .accordion-section-title:after, #customize-theme-controls .control-section .accordion-section-title:focus:after { - color: #555; + color: #fff; } -#customize-info.open, #customize-theme-controls .control-section.open { - border-bottom: 1px solid #eeeeee; + border-bottom: 1px solid #eee; } #customize-theme-controls .control-section.open .accordion-section-title { - border-bottom-color: #eeeeee !important; + border-bottom-color: #eee !important; } #customize-theme-controls .control-section:last-of-type.open, @@ -145,37 +205,70 @@ body { border-bottom-color: #ddd; } -#customize-theme-controls > ul, -#customize-theme-controls .accordion-section-content { +#customize-theme-controls > ul { margin: 0; } -.control-section.control-panel > .accordion-section-title { - padding-right: 54px; +#customize-theme-controls .accordion-section-content { + margin: 0; + position: absolute; + left: 100%; + top: 0; + width: -webkit-calc(100% - 24px); + width: calc(100% - 24px); + padding: 12px; } -.control-section.control-panel > .accordion-section-title:after { - content: "\f345"; - background: #f5f5f5; +.customize-section-description-container { + margin-bottom: 15px; +} + +.customize-section-title { + margin: -12px; + border-bottom: 1px solid #ddd; + background: #fff; +} + +#customize-theme-controls .customize-themes-panel h3.customize-section-title:first-child { + border-bottom: 1px solid #ddd; + padding: 12px 12px 12px 12px; +} + +.ios #customize-theme-controls .customize-themes-panel h3.customize-section-title:first-child { + padding: 12px 12px 13px 12px; +} + +.customize-section-title h3, +h3.customize-section-title { + padding: 10px 10px 12px 14px; + margin: 0; + line-height: 21px; color: #555; - width: 38px; - height: 100%; - margin: -11px -10px -11px 0; /* compensate for positioning */ - line-height: 45px; - padding-left: 5px; - border-left: 1px solid #eee; - z-index: 0; } -#customize-theme-controls .control-section.control-panel > h3.accordion-section-title:focus:after, -#customize-theme-controls .control-section.control-panel > h3.accordion-section-title:hover:after { - background: #ddd; - color: #000; - border: 1px solid #d9d9d9; - border-right: none; - margin-top: -12px; - line-height: 44px; - z-index: 1; +#customize-theme-controls .control-section .accordion-section-content > li.customize-control:nth-child(2) { + margin-top: 12px; +} + +#customize-theme-controls { + position: relative; + left: 0; + -webkit-transition: .18s left ease-in-out; + transition: .18s left ease-in-out; +} + +.ios #customize-theme-controls { + -webkit-transition: left 0s; + transition: left 0s; +} + +.section-open #customize-info, +.section-open #customize-theme-controls { + left: -100%; +} + +.section-open .control-panel-back { + display: none; } .accordion-sub-container.control-panel-content { @@ -184,11 +277,15 @@ body { left: 300px; top: 0; width: 300px; - border-top: 1px solid #ddd; -webkit-transition: left ease-in-out .18s; transition: left ease-in-out .18s; } +.ios .accordion-sub-container.control-panel-content { + -webkit-transition: left 0s; + transition: left 0s; +} + .accordion-sub-container.control-panel-content.animating { display: block; } @@ -242,15 +339,53 @@ body { transition: left .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out; } -.ios .control-panel-back { +.customize-panel-back, +.customize-section-back { + display: block; + float: left; + width: 48px; + height: 69px; + padding: 0 24px 0 0; + margin: 0; + background: #fff; + border: none; + border-right: 1px solid #ddd; + -webkit-box-shadow: none; + box-shadow: none; + cursor: pointer; + -webkit-transition: left .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out; + transition: left .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out; +} + +.customize-section-back { + height: 70px; +} + +.ios .control-panel-back, +.ios .customize-panel-back, +.ios .customize-section-back { -webkit-transition: left 0s; transition: left 0s; } -.collapsed .control-panel-back { +.collapsed .control-panel-back, +.ios .customize-panel-back { display: none; } +.ios .expanded.in-sub-panel .customize-panel-back { + display: block; +} + +.panel-meta.customize-info .accordion-section-title { + margin-left: 48px; +} + +#customize-controls .panel-meta.customize-info .accordion-section-title:hover { + background: #fff; + color: #555; +} + .customize-overlay-close:focus, .customize-overlay-close:hover, .customize-controls-close:focus, @@ -267,6 +402,18 @@ body { box-shadow: none; } +.customize-panel-back:hover, +.customize-panel-back:focus, +.customize-section-back:hover, +.customize-section-back:focus { + background: #0073aa; + border-color: #ccc; + color: #fff; + outline: none; + -webkit-box-shadow: none; + box-shadow: none; +} + .customize-overlay-close:before, .customize-controls-close:before { font: normal 22px/45px dashicons; @@ -276,6 +423,14 @@ body { left: 13px; } +.customize-panel-back:before, +.customize-section-back:before { + font: normal 20px/69px dashicons; + content: "\f341"; + position: relative; + left: 13px; +} + .control-panel-back:before { font: normal 20px/45px dashicons; content: "\f341"; @@ -284,14 +439,6 @@ body { left: 13px; } -.in-sub-panel .control-panel-back { - left: 0; -} - -.current-panel > .accordion-section-title { - height: 22px; -} - .wp-full-overlay-sidebar .wp-full-overlay-header { -webkit-transition: padding ease-in-out .18s; transition: padding ease-in-out .18s; @@ -345,28 +492,17 @@ body { transition: left 0s; } -.control-section.control-panel .accordion-section-title .panel-title { - font-size: 20px; - font-weight: 200; - line-height: 24px; - display: block; - border: none; -} - -.control-section.control-panel .preview-notice { - font-size: 13px; - line-height: 24px; -} - p.customize-section-description { font-style: normal; + margin-top: 22px; + margin-bottom: 0; } .customize-control { width: 100%; float: left; clear: both; - margin-bottom: 8px; + margin-bottom: 12px; } .customize-control select, @@ -498,7 +634,7 @@ p.customize-section-description { } .wp-full-overlay-sidebar { - background: #eeeeee; + background: #eee; border-right: 1px solid #ddd; } @@ -542,7 +678,7 @@ p.customize-section-description { line-height: 16px; margin-right: 16px; padding: 4px 5px; - border: 2px solid #eeeeee; + border: 2px solid #eee; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; @@ -555,7 +691,7 @@ p.customize-section-description { bottom: 0; right: 0; width: 20px; - background: #eeeeee; + background: #eee; } .customize-control .dropdown-arrow:after { @@ -575,7 +711,7 @@ p.customize-section-description { .customize-control .dropdown-status { color: #32373c; - background: #eeeeee; + background: #eee; display: none; max-width: 112px; } @@ -595,7 +731,7 @@ p.customize-section-description { } .customize-control-color .dropdown .dropdown-content { - background-color: #555555; + background-color: #555; border: 1px solid rgba(0, 0, 0, 0.15); } @@ -897,7 +1033,7 @@ p.customize-section-description { #customize-theme-controls .control-section-themes .accordion-section-title:hover, #customize-theme-controls .control-section-themes .accordion-section-title:focus { - color: #555555; + color: #555; background-color: #fff; } @@ -913,8 +1049,9 @@ p.customize-section-description { padding-right: 100px; /* Space for the button */ } -.control-section-themes .accordion-section-title span { - font-size: small; +.control-section-themes .accordion-section-title span.customize-action, +#customize-controls .customize-section-title span.customize-action { + font-size: 13px; display: block; font-weight: 400; } @@ -928,6 +1065,10 @@ p.customize-section-description { font-weight: normal; } +.control-section-themes .accordion-section-title:before { + display: none; +} + .customize-themes-panel { display: none; padding: 0 8px; @@ -938,6 +1079,14 @@ p.customize-section-description { box-sizing: border-box; } +.customize-themes-panel .accordion-section-title:first-child { + margin-top: 0; +} + +#customize-controls .customize-themes-panel .accordion-section-title:nth-child(2) { + font-size: 14px; + font-weight: 600; +} .customize-themes-panel > h2 { padding: 15px 8px 0 8px; @@ -956,6 +1105,13 @@ p.customize-section-description { margin-bottom: 8px; } +#customize-theme-controls .themes.accordion-section-content { + position: relative; + left: 0; + padding: 0; + width: 100%; +} + .wp-customizer .theme-browser .themes { padding-bottom: 8px; } @@ -1170,14 +1326,6 @@ body.cheatin p { margin-bottom: 4px; } - .adding-widget #customize-header-actions .primary-actions { - display: none; - } - - .adding-widget #customize-header-actions .secondary-actions { - display: block; - } - #customize-header-actions .button-primary { margin-top: 6px; } diff --git a/src/wp-admin/css/customize-widgets.css b/src/wp-admin/css/customize-widgets.css index ba95022d7d..359678e814 100644 --- a/src/wp-admin/css/customize-widgets.css +++ b/src/wp-admin/css/customize-widgets.css @@ -14,6 +14,10 @@ display: none; } +.control-section.control-section-sidebar .accordion-section-content.ui-sortable { + overflow: visible; +} + .customize-control-widget_form .widget-top { -webkit-transition: opacity 0.5s; transition: opacity 0.5s; @@ -348,10 +352,15 @@ body.adding-widget .add-new-widget:before { width: 300px; margin: 0; z-index: 1; - background: #fff !important; - -webkit-transition: all 0.2s; - transition: all 0.2s; - border-right: 1px solid #dddddd; + background: #eee !important; + -webkit-transition: left .18s; + transition: left .18s; + border-right: 1px solid #ddd; +} + +.ios #available-widgets { + -webkit-transition: left 0s; + transition: left 0s; } #available-widgets-list { @@ -384,6 +393,7 @@ body.adding-widget .add-new-widget:before { #available-widgets .widget-tpl { position: relative; padding: 20px 15px 20px 60px; + background: #fff; border-bottom: 1px solid #e4e4e4; cursor: pointer; display: none; @@ -391,7 +401,8 @@ body.adding-widget .add-new-widget:before { #available-widgets .widget-tpl:hover, #available-widgets .widget-tpl.selected { - background: #fafafa; + background: #eee; + border-bottom-color: #ccc; } #available-widgets .widget-top, @@ -583,9 +594,12 @@ body.adding-widget #customize-preview { #available-widgets [class*="tweet"] .widget-title:before, #available-widgets [class*="twitter"] .widget-title:before { content: "\f301"; } +#available-widgets .customize-section-title { + display: none; +} @media screen and (max-height: 700px) and (min-width: 981px) { - .customize-control { + .customize-control-widget { margin-bottom: 0; } .widget-top { @@ -628,9 +642,46 @@ body.adding-widget #customize-preview { width: 100%; } + #available-widgets .customize-section-title { + display: block; + margin: 0; + } + + #available-widgets .customize-section-back { + height: 69px; + } + + #available-widgets .customize-section-title h3 { + font-size: 20px; + font-weight: 200; + padding: 9px 10px 12px 14px; + margin: 0; + line-height: 24px; + color: #555; + display: block; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + #available-widgets .customize-section-title .customize-action { + font-size: 13px; + display: block; + font-weight: 400; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + #available-widgets-filter { - position: static; + position: relative; width: 100%; + background: #fff; height: auto; + padding: 10px 15px; + } + + #available-widgets-list { + top: 140px; } } diff --git a/src/wp-admin/customize.php b/src/wp-admin/customize.php index 65caa29d90..9be60c7e74 100644 --- a/src/wp-admin/customize.php +++ b/src/wp-admin/customize.php @@ -147,13 +147,14 @@ do_action( 'customize_controls_print_scripts' );
-
-
+
+
' . get_bloginfo( 'name' ) . '' ); + echo sprintf( __( 'You are customizing %s' ), '' . get_bloginfo( 'name' ) . '' ); ?> +
-
diff --git a/src/wp-admin/js/customize-controls.js b/src/wp-admin/js/customize-controls.js index e211a41ff7..7ed309572a 100644 --- a/src/wp-admin/js/customize-controls.js +++ b/src/wp-admin/js/customize-controls.js @@ -443,10 +443,12 @@ * @since 4.1.0 */ attachEvents: function () { - var section = this; + var section = this, + backBtn = section.container.find( '.customize-section-back' ), + sectionTitle = section.container.find( '.accordion-section-title' ).first(); // Expand/Collapse accordion sections on click. - section.container.find( '.accordion-section-title' ).on( 'click keydown', function( event ) { + section.container.find( '.accordion-section-title, .customize-section-back' ).on( 'click keydown', function( event ) { if ( api.utils.isKeydownButNotEnterEvent( event ) ) { return; } @@ -454,8 +456,14 @@ if ( section.expanded() ) { section.collapse(); + backBtn.attr( 'tabindex', '-1' ); + sectionTitle.attr( 'tabindex', '0' ); + sectionTitle.focus(); } else { section.expand(); + sectionTitle.attr( 'tabindex', '-1' ); + backBtn.attr( 'tabindex', '0' ); + backBtn.focus(); } }); }, @@ -499,18 +507,24 @@ * @param {Object} args */ onChangeExpanded: function ( expanded, args ) { - var section = this, + var position, scroll, section = this, + container = section.container.closest( '.wp-full-overlay-sidebar-content' ), content = section.container.find( '.accordion-section-content' ), + overlay = section.container.closest( '.wp-full-overlay' ), expand; - if ( expanded ) { + if ( expanded && ! section.container.hasClass( 'open' ) ) { if ( args.unchanged ) { expand = args.completeCallback; } else { + container.scrollTop( 0 ); expand = function () { - content.stop().slideDown( args.duration, args.completeCallback ); section.container.addClass( 'open' ); + overlay.addClass( 'section-open' ); + position = content.offset().top; + scroll = container.scrollTop(); + content.css( 'margin-top', ( 45 - position - scroll ) ); }; } @@ -531,9 +545,12 @@ expand(); } - } else { + } else if ( section.container.hasClass( 'open' ) ) { section.container.removeClass( 'open' ); - content.slideUp( args.duration, args.completeCallback ); + overlay.removeClass( 'section-open' ); + content.css( 'margin-top', 'inherit' ); + container.scrollTop( 0 ); + section.container.find( '.accordion-section-title' ).focus(); } } }); @@ -718,7 +735,6 @@ overlay = section.closest( '.wp-full-overlay' ), container = section.closest( '.wp-full-overlay-sidebar-content' ), siblings = container.find( '.open' ), - topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section > .accordion-section-title' ).add( '#customize-info > .accordion-section-title' ), customizeBtn = section.find( '.customize-theme' ), changeBtn = section.find( '.change-theme' ), content = section.find( '.control-panel-content' ); @@ -748,8 +764,6 @@ args.completeCallback(); } } ); - topPanel.attr( 'tabindex', '-1' ); - changeBtn.attr( 'tabindex', '-1' ); customizeBtn.focus(); } else { siblings.removeClass( 'open' ); @@ -762,7 +776,6 @@ args.completeCallback(); } } ); - topPanel.attr( 'tabindex', '0' ); customizeBtn.attr( 'tabindex', '0' ); changeBtn.focus(); container.scrollTop( 0 ); @@ -1012,9 +1025,21 @@ } }); + // Close panel. + panel.container.find( '.customize-panel-back' ).on( 'click keydown', function( event ) { + if ( api.utils.isKeydownButNotEnterEvent( event ) ) { + return; + } + event.preventDefault(); // Keep this AFTER the key filter above + + if ( panel.expanded() ) { + panel.collapse(); + } + }); + meta = panel.container.find( '.panel-meta:first' ); - meta.find( '> .accordion-section-title' ).on( 'click keydown', function( event ) { + meta.find( '> .accordion-section-title .customize-help-toggle' ).on( 'click keydown', function( event ) { if ( api.utils.isKeydownButNotEnterEvent( event ) ) { return; } @@ -1024,13 +1049,15 @@ return; } - var content = meta.find( '.accordion-section-content:first' ); + var content = meta.find( '.customize-panel-description:first' ); if ( meta.hasClass( 'open' ) ) { meta.toggleClass( 'open' ); content.slideUp( panel.defaultExpandedArguments.duration ); + $( this ).attr( 'aria-expanded', false ); } else { content.slideDown( panel.defaultExpandedArguments.duration ); meta.toggleClass( 'open' ); + $( this ).attr( 'aria-expanded', true ); } }); @@ -1089,12 +1116,12 @@ // Note: there is a second argument 'args' passed var position, scroll, panel = this, - section = panel.container.closest( '.accordion-section' ), + section = panel.container.closest( '.accordion-section' ), // This is actually the panel. overlay = section.closest( '.wp-full-overlay' ), container = section.closest( '.wp-full-overlay-sidebar-content' ), siblings = container.find( '.open' ), - topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section > .accordion-section-title' ).add( '#customize-info > .accordion-section-title' ), - backBtn = overlay.find( '.control-panel-back' ), + topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section > .accordion-section-title' ), + backBtn = section.find( '.customize-panel-back' ), panelTitle = section.find( '.accordion-section-title' ).first(), content = section.find( '.control-panel-content' ); @@ -2573,7 +2600,7 @@ var parent, topFocus, body = $( document.body ), overlay = body.children( '.wp-full-overlay' ), - title = $( '#customize-info .theme-name.site-title' ), + title = $( '#customize-info .panel-title.site-title' ), closeBtn = $( '.customize-controls-close' ), saveBtn = $( '#save' ); @@ -2588,14 +2615,14 @@ }); // Expand/Collapse the main customizer customize info. - $( '#customize-info' ).find( '> .accordion-section-title' ).on( 'click keydown', function( event ) { + $( '.customize-info' ).find( '> .accordion-section-title .customize-help-toggle' ).on( 'click keydown', function( event ) { if ( api.utils.isKeydownButNotEnterEvent( event ) ) { return; } event.preventDefault(); // Keep this AFTER the key filter above - var section = $( this ).parent(), - content = section.find( '.accordion-section-content:first' ); + var section = $( this ).closest( '.accordion-section' ), + content = section.find( '.customize-panel-description:first' ); if ( section.hasClass( 'cannot-expand' ) ) { return; @@ -2604,9 +2631,11 @@ if ( section.hasClass( 'open' ) ) { section.toggleClass( 'open' ); content.slideUp( api.Panel.prototype.defaultExpandedArguments.duration ); + $( this ).attr( 'aria-expanded', false ); } else { content.slideDown( api.Panel.prototype.defaultExpandedArguments.duration ); section.toggleClass( 'open' ); + $( this ).attr( 'aria-expanded', true ); } }); diff --git a/src/wp-admin/js/customize-widgets.js b/src/wp-admin/js/customize-widgets.js index 729e6a8f1e..eb245ea2cc 100644 --- a/src/wp-admin/js/customize-widgets.js +++ b/src/wp-admin/js/customize-widgets.js @@ -176,8 +176,8 @@ // If the available widgets panel is open and the customize controls are // interacted with (i.e. available widgets panel is blurred) then close the - // available widgets panel. - $( '#customize-controls, .customize-overlay-close' ).on( 'click keydown', function( e ) { + // available widgets panel. Also close on back button click. + $( '#customize-controls, .customize-overlay-close, #available-widgets .customize-section-title' ).on( 'click keydown', function( e ) { var isAddNewBtn = $( e.target ).is( '.add-new-widget, .add-new-widget *' ); if ( $( 'body' ).hasClass( 'adding-widget' ) && ! isAddNewBtn ) { self.close(); @@ -366,7 +366,7 @@ this.close( { returnFocus: true } ); } - if ( isTab && ( isShift && isSearchFocused || ! isShift && isLastWidgetFocused ) ) { + if ( this.currentSidebarControl && isTab && ( isShift && isSearchFocused || ! isShift && isLastWidgetFocused ) ) { this.currentSidebarControl.container.find( '.add-new-widget' ).focus(); event.preventDefault(); } @@ -1270,7 +1270,9 @@ if ( expanded ) { - self.expandControlSection(); + if ( 'undefined' != typeof api.section( self.section ) && ! api.section( self.section ).expanded() ) { + self.expandControlSection(); + } // Close all other widget controls before expanding this one api.control.each( function( otherControl ) { diff --git a/src/wp-includes/class-wp-customize-panel.php b/src/wp-includes/class-wp-customize-panel.php index ee9f846bc8..96e740dc12 100644 --- a/src/wp-includes/class-wp-customize-panel.php +++ b/src/wp-includes/class-wp-customize-panel.php @@ -315,15 +315,17 @@ class WP_Customize_Panel { */ protected function render_content() { ?> -
  • -
    +
  • + +
    ' . esc_html( $this->title ) . '' ); ?> +
    description ) ) : ?> -
    +
    description; ?>
    diff --git a/src/wp-includes/class-wp-customize-section.php b/src/wp-includes/class-wp-customize-section.php index a27f22b0c1..5364da7897 100644 --- a/src/wp-includes/class-wp-customize-section.php +++ b/src/wp-includes/class-wp-customize-section.php @@ -305,14 +305,30 @@ class WP_Customize_Section {

  • title ); ?> - +

      - description ) ) : ?> -
    • +
    • +
      + +

      + panel ) { + /* translators: ▸ is the unicode right-pointing triangle, and %s is the section title in the Customizer */ + echo sprintf( __( 'Customizing ▸ %s' ), esc_html( $this->manager->get_panel( $this->panel )->title ) ); + } else { + _e( 'Customizing' ); + } + ?> + title ); ?> +

      +
      + description ) ) : ?>

      description; ?>

      -
      • - + +
    • manager->is_theme_active() ) { /* translators: %s: theme name */ - printf( __( 'Active theme %s' ), $this->title ); + printf( __( 'Active theme %s' ), $this->title ); } else { /* translators: %s: theme name */ - printf( __( 'Previewing theme %s' ), $this->title ); + printf( __( 'Previewing theme %s' ), $this->title ); } ?> - +
    -

    +

    + controls ) + 1 /* Active theme */; ?> -

    - +

    manager->is_theme_active() ) { /* translators: %s: theme name */ - printf( __( 'Active theme %s' ), $this->title ); + printf( __( 'Active theme %s' ), $this->title ); } else { /* translators: %s: theme name */ - printf( __( 'Previewing theme %s' ), $this->title ); + printf( __( 'Previewing theme %s' ), $this->title ); } ?> diff --git a/src/wp-includes/class-wp-customize-widgets.php b/src/wp-includes/class-wp-customize-widgets.php index cfd0541aa0..d4d30b0ad1 100644 --- a/src/wp-includes/class-wp-customize-widgets.php +++ b/src/wp-includes/class-wp-customize-widgets.php @@ -681,6 +681,18 @@ final class WP_Customize_Widgets { ?>
    +
    + +

    + manager->get_panel( 'widgets' )->title ) ); + ?> + +

    +