diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css index bcaf51913c..8ee33bc414 100644 --- a/src/wp-admin/css/customize-controls.css +++ b/src/wp-admin/css/customize-controls.css @@ -882,6 +882,43 @@ p.customize-section-description { animation: customize-reload .75s; } +.control-section-themes .accordion-section-title { + cursor: default; +} + +#customize-theme-controls .control-section-themes .accordion-section-title:hover, +#customize-theme-controls .control-section-themes .accordion-section-title:focus { + color: #555555; + background-color: #fff; +} + +.control-section-themes .accordion-section-title { + margin: 15px 0; +} + +.customize-themes-panel .accordion-section-title { + margin: 15px -8px; +} + +.control-section-themes .accordion-section-title { + padding-right: 100px; /* Space for the button */ +} + +.control-section-themes .accordion-section-title span { + font-size: small; + display: block; + font-weight: 400; +} + +.control-section-themes .accordion-section-title .change-theme, +.control-section-themes .accordion-section-title .customize-theme { + position: absolute; + right: 10px; + top: 50%; + margin-top: -14px; + font-weight: normal; +} + .customize-themes-panel { display: none; padding: 0 8px; @@ -889,6 +926,12 @@ p.customize-section-description { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; + box-sizing: border-box; +} + + +.customize-themes-panel > h2 { + padding: 15px 8px 0 8px; } .control-section.open .customize-themes-panel { @@ -933,34 +976,8 @@ p.customize-section-description { width: 100%; } - -.wp-customizer .theme-browser .theme.active:hover, -.wp-customizer .theme-browser .theme.active:focus { - cursor: default; -} - -.wp-customizer .theme-browser .theme.active .more-details { - display: none; -} - -.wp-customizer .theme-browser .theme.active .theme-name { - padding-right: 15px; -} - -.wp-customizer .theme-browser.rendered .theme.active:hover .theme-screenshot img, -.wp-customizer .theme-browser.rendered .theme.active:focus .theme-screenshot img { - opacity: 1; -} - -/* Panel-like behavior */ #accordion-section-themes .accordion-section-title:after { - content: "\f148"; -} - -.rtl #accordion-section-themes .accordion-section-title:after { - -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); + display: none; } #customize-theme-controls .control-section-themes.current-panel > h3.accordion-section-title { @@ -980,18 +997,6 @@ p.customize-section-description { left: 100%; } -.in-themes-panel .control-panel-back:before { - content: "\f345"; - left: 14px; -} - -.in-themes-panel .control-panel-back { - left: 0; -} - -.in-themes-panel .control-panel-back:before { -} - /* Details View */ .wp-customizer .theme-overlay { display: none; @@ -1039,8 +1044,7 @@ p.customize-section-description { } } - -/** Handle cheaters. */ +/* Handle cheaters. */ body.cheatin { font-size: medium; height: auto; diff --git a/src/wp-admin/js/customize-controls.js b/src/wp-admin/js/customize-controls.js index 734a1935e7..fcf25a3517 100644 --- a/src/wp-admin/js/customize-controls.js +++ b/src/wp-admin/js/customize-controls.js @@ -591,7 +591,7 @@ var section = this; // Expand/Collapse section/panel. - section.container.find( '.accordion-section-title' ).on( 'click keydown', function( event ) { + section.container.find( '.change-theme, .customize-theme' ).on( 'click keydown', function( event ) { if ( api.utils.isKeydownButNotEnterEvent( event ) ) { return; } @@ -604,19 +604,6 @@ } }); - - $( '#customize-header-actions' ).on( 'click keydown', '.control-panel-back', function( event ) { - if ( api.utils.isKeydownButNotEnterEvent( event ) ) { - return; - } - - event.preventDefault(); // Keep this AFTER the key filter above - - if ( section.expanded() ) { - section.collapse(); - } - }); - // Theme navigation in details view. section.container.on( 'click keydown', '.left', function( event ) { if ( api.utils.isKeydownButNotEnterEvent( event ) ) { @@ -692,8 +679,8 @@ 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' ), - panelTitle = section.find( '.accordion-section-title' ).first(), + customizeBtn = section.find( '.customize-theme' ), + changeBtn = section.find( '.change-theme' ), content = section.find( '.control-panel-content' ); if ( expanded ) { @@ -722,8 +709,7 @@ } } ); topPanel.attr( 'tabindex', '-1' ); - backBtn.attr( 'tabindex', '0' ); - backBtn.focus(); + customizeBtn.focus(); } else { siblings.removeClass( 'open' ); section.removeClass( 'current-panel' ); @@ -735,8 +721,7 @@ } } ); topPanel.attr( 'tabindex', '0' ); - backBtn.attr( 'tabindex', '-1' ); - panelTitle.focus(); + changeBtn.focus(); container.scrollTop( 0 ); } }, @@ -1899,10 +1884,6 @@ return; } - if ( $( this ).hasClass( 'active' ) ) { - return; - } - var previewUrl = $( this ).data( 'previewUrl' ); $( '.wp-full-overlay' ).addClass( 'customize-loading' ); diff --git a/src/wp-includes/class-wp-customize-manager.php b/src/wp-includes/class-wp-customize-manager.php index 4074d05a9a..0baf2bc178 100644 --- a/src/wp-includes/class-wp-customize-manager.php +++ b/src/wp-includes/class-wp-customize-manager.php @@ -1148,9 +1148,9 @@ final class WP_Customize_Manager { /* Themes */ $this->add_section( new WP_Customize_Themes_Section( $this, 'themes', array( - 'title' => sprintf( __( 'Theme: %s' ), $this->theme()->display('Name') ), + 'title' => $this->theme()->display( 'Name' ), 'capability' => 'switch_themes', - 'priority' => 0, + 'priority' => 0, ) ) ); // Themes Setting (unused - the theme is considerably more fundamental to the Customizer experience). @@ -1163,10 +1163,14 @@ final class WP_Customize_Manager { // Theme Controls. $themes = wp_prepare_themes_for_js(); foreach ( $themes as $theme ) { + if ( $theme['active'] ) { + continue; + } + $theme_id = 'theme_' . $theme['id']; $this->add_control( new WP_Customize_Theme_Control( $this, $theme_id, array( - 'theme' => $theme, - 'section' => 'themes', + 'theme' => $theme, + 'section' => 'themes', 'settings' => 'active_theme', ) ) ); } diff --git a/src/wp-includes/class-wp-customize-section.php b/src/wp-includes/class-wp-customize-section.php index 1309f245d1..9bb59382dd 100644 --- a/src/wp-includes/class-wp-customize-section.php +++ b/src/wp-includes/class-wp-customize-section.php @@ -341,17 +341,42 @@ class WP_Customize_Themes_Section extends WP_Customize_Section { $classes = 'accordion-section control-section control-section-' . $this->type; ?>
  • -

    - title ); ?> - +

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

    -

    - controls ) - 1; ?> +

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

    + +

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

    + +
    - controls ) ) : ?> + controls ) > 4 ) : ?>