Index: src/wp-admin/css/customize-controls.css =================================================================== --- src/wp-admin/css/customize-controls.css (revision 31433) +++ src/wp-admin/css/customize-controls.css (working copy) @@ -831,7 +831,177 @@ float: right; } +/** + * Themes + */ +@-webkit-keyframes customize-reload { + 0% { opacity: 0; } + 100% { opacity: 1; } +} +@-moz-keyframes customize-reload { + 0% { opacity: 0; } + 100% { opacity: 1; } +} + +@keyframes customize-reload { + 0% { opacity: 0; } + 100% { opacity: 1; } +} + +/* #customize-container is reused from customize-loader.js, hence the naming. */ +.wp-customizer.customize-loading #customize-container { + display: block; + -webkit-animation: customize-reload .75s; /* Can't use `transition` because `display` changes here. */ + -moz-animation: customize-reload .75s; + animation: customize-reload .75s; +} + +.customize-themes-panel { + display: none; + padding: 0 8px; + background: #f1f1f1; + box-sizing: border-box; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; +} + +.control-section.open .customize-themes-panel { + display: block; +} + +#customize-theme-controls .customize-themes-panel .accordion-section-content { + background: transparent; + display: block; +} + +.customize-control.customize-control-theme { + margin-bottom: 8px; +} + +.wp-customizer .theme-browser .themes { + padding-bottom: 8px; +} + +.wp-customizer .theme-browser .theme { + margin: 0; + width: 100%; +} + +.wp-customizer .theme-browser .theme .theme-actions { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + opacity: 1; +} + +#customize-controls h3.theme-name { + font-size: 15px; +} + +.wp-customizer .theme-browser .theme.active .theme-name { + padding-right: 15px; +} + +.wp-customizer #themes-filter { + width: 100%; +} + +/* 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); +} + +#customize-theme-controls .control-section.current-panel > h3.accordion-section-title { + left: 0; +} + +.customize-themes-panel.control-panel-content { + position: absolute; + left: -100%; + top: 0; + width: 100%; + border-top: 1px solid #ddd; +} + +.in-themes-panel #customize-info, +.in-themes-panel #customize-theme-controls > ul > .accordion-section { + left: 100%; +} + +.themes-panel-back:before { + top: 13px; + left: 14px; +} + +.in-themes-panel .themes-panel-back { + left: 0; +} + +.in-sub-panel .themes-panel-back { + display: none; +} + +.control-panel-back.themes-panel-back:before { + content: "\f345"; +} + +.rtl .control-panel-back.themes-panel-back:before { + content: "\f341"; +} + +/* Details View */ +.wp-customizer .theme-overlay { + display: none; +} + +.wp-customizer.modal-open .theme-overlay { + position: fixed; + left: 0; + top: 0; + right: 0; + bottom: 0; + z-index: 109; +} + +.wp-customizer .theme-overlay .theme-backdrop { + background: rgba( 238, 238, 238, 0.75 ); + position: fixed; + z-index: 110; +} + +.wp-customizer .theme-overlay .theme-wrap { + left: 90px; + right: 90px; + top: 45px; + bottom: 45px; + z-index: 120; + max-width: 1740px; /* To ensure that theme screenshots are not displayed larger than 880px wide. */ +} + +.wp-customizer .theme-overlay .theme-actions { + text-align: right; /* Because there's only one action, match the pattern of media modals and right-align the action. */ +} + +.modal-open .in-themes-panel #customize-controls .wp-full-overlay-sidebar-content { + overflow: visible; /* Prevent the top-level Customizer controls from becoming visible when elements on the right of the details modal are focused. +} + +/* Small Screens */ +@media (max-width:850px), (max-height:472px) { + .wp-customizer .theme-overlay .theme-wrap { + left: 0; + right: 0; + top: 0; + bottom: 0; + } +} + + /** Handle cheaters. */ body.cheatin { font-size: medium; Index: src/wp-admin/includes/theme.php =================================================================== --- src/wp-admin/includes/theme.php (revision 31433) +++ src/wp-admin/includes/theme.php (working copy) @@ -486,3 +486,58 @@ $prepared_themes = apply_filters( 'wp_prepare_themes_for_js', $prepared_themes ); return array_values( $prepared_themes ); } + +/** + * Print JS templates for the theme-browsing UI in the Customizer. + * + * @since 4.2.0 + */ +function customize_themes_print_templates() { + ?> + + ul > .accordion-section > .accordion-section-title' ).add( '#customize-info > .accordion-section-title' ), + backBtn = overlay.find( '.themes-panel-back' ), + panelTitle = section.find( '.accordion-section-title' ).first(), + content = section.find( '.control-panel-content' ); + + if ( expanded ) { + + // Collapse any sibling sections/panels + api.section.each( function ( otherSection ) { + if ( otherSection !== panel ) { + otherSection.collapse( { duration: args.duration } ); + } + }); + api.panel.each( function ( otherPanel ) { + if ( panel !== otherPanel ) { + otherPanel.collapse( { duration: 0 } ); + } + }); + + content.show( 0, function() { + position = content.offset().top; + scroll = container.scrollTop(); + content.css( 'margin-top', ( 45 - position - scroll ) ); + section.addClass( 'current-panel' ); + overlay.addClass( 'in-themes-panel' ); + container.scrollTop( 0 ); + if ( args.completeCallback ) { + args.completeCallback(); + } + } ); + topPanel.attr( 'tabindex', '-1' ); + backBtn.attr( 'tabindex', '0' ); + backBtn.focus(); + } else { + siblings.removeClass( 'open' ); + section.removeClass( 'current-panel' ); + overlay.removeClass( 'in-themes-panel' ); + content.delay( 180 ).hide( 0, function() { + content.css( 'margin-top', 'inherit' ); // Reset + if ( args.completeCallback ) { + args.completeCallback(); + } + } ); + topPanel.attr( 'tabindex', '0' ); + backBtn.attr( 'tabindex', '-1' ); + panelTitle.focus(); + container.scrollTop( 0 ); + } + }, + + /** + * Advance the modal to the next theme. + * + * @since 4.2.0 + */ + nextTheme: function () { + var section = this; + if ( section.getNextTheme() ) { + section.showDetails( section.getNextTheme(), function() { + section.overlay.find( '.right' ).focus(); + } ); + } + }, + + /** + * Get the next theme model. + * + * @since 4.2.0 + */ + getNextTheme: function () { + var control, next; + control = api.control( 'theme_' + this.currentTheme ); + next = control.container.next( 'li.customize-control-theme' ); + if ( ! next.length ) { + return false; + } + next = next[0].id.replace( 'customize-control-', '' ); + control = api.control( next ); + + return control.params.theme; + }, + + /** + * Advance the modal to the previous theme. + * + * @since 4.2.0 + */ + previousTheme: function () { + var section = this; + if ( section.getPreviousTheme() ) { + section.showDetails( section.getPreviousTheme(), function() { + section.overlay.find( '.left' ).focus(); + } ); + } + }, + + /** + * Get the previous theme model. + * + * @since 4.2.0 + */ + getPreviousTheme: function () { + var control, previous; + control = api.control( 'theme_' + this.currentTheme ); + previous = control.container.prev( 'li.customize-control-theme' ); + if ( ! previous.length ) { + return false; + } + previous = previous[0].id.replace( 'customize-control-', '' ); + control = api.control( previous ); + + return control.params.theme; + }, + + /** + * Disable buttons when we're viewing the first or last theme. + * + * @since 4.2.0 + */ + updateLimits: function () { + if ( ! this.getNextTheme() ) { + this.overlay.find( '.right' ).addClass( 'disabled' ); + } + if ( ! this.getPreviousTheme() ) { + this.overlay.find( '.left' ).addClass( 'disabled' ); + } + }, + + /** + * Render & show the theme details for a given theme model. + * + * @since 4.2.0 + * + * @param {Object} theme + */ + showDetails: function ( theme, callback ) { + var section = this; + callback = callback || function(){}; + section.currentTheme = theme.id; + section.overlay.html( section.template( theme ) ) + .fadeIn( 'fast' ) + .focus(); + $( 'body' ).addClass( 'modal-open' ); + section.containFocus( section.overlay ); + section.updateLimits(); + callback(); + }, + + /** + * Close the theme details modal. + * + * @since 4.2.0 + */ + closeDetails: function ( theme ) { + $( 'body' ).removeClass( 'modal-open' ); + this.overlay.fadeOut( 'fast' ); + api.control( 'theme_' + this.currentTheme ).focus(); + }, + + /** + * Keep tab focus within the theme details modal. + * + * @since 4.2.0 + */ + containFocus: function( el ) { + var tabbables; + + el.on( 'keydown', function( event ) { + + // Return if it's not the tab key + // When navigating with prev/next focus is already handled + if ( 9 !== event.keyCode ) { + return; + } + + // uses jQuery UI to get the tabbable elements + tabbables = $( ':tabbable', el ); + + // Keep focus within the overlay + if ( tabbables.last()[0] === event.target && ! event.shiftKey ) { + tabbables.first().focus(); + return false; + } else if ( tabbables.first()[0] === event.target && event.shiftKey ) { + tabbables.last().focus(); + return false; + } + }); + } + }); + + /** * @since 4.1.0 * * @class @@ -1409,6 +1754,63 @@ }); + /** + * wp.customize.ThemeControl + * + * @constructor + * @augments wp.customize.Control + * @augments wp.customize.Class + */ + api.ThemeControl = api.Control.extend({ + + /** + * @since 4.2.0 + */ + ready: function() { + var control = this; + + // Bind details view trigger. + control.container.on( 'click keydown', '.theme', function( event ) { + if ( api.utils.isKeydownButNotEnterEvent( event ) ) { + return; + } + + if ( 'button' === event.target.className ) { + return; + } + + api.section( control.section() ).showDetails( control.params.theme ); + }); + + control.container.on( 'click keydown', '.theme-actions .button', function( event ) { + if ( api.utils.isKeydownButNotEnterEvent( event ) ) { + return; + } + + $( 'body' ).addClass( 'customize-loading' ); + }); + }, + + /** + * Show or hide the theme based on the presence of the term in the title, description, and author. + * + * @since 4.2.0 + */ + filter: function( term ) { + var control = this, + haystack = control.params.theme.name + ' ' + + control.params.theme.description + ' ' + + control.params.theme.tags + ' ' + + control.params.theme.author; + haystack = haystack.toLowerCase().replace( '-', ' ' ); + if ( -1 !== haystack.search( term ) ) { + control.activate(); + } else { + control.deactivate(); + } + } + }); + // Change objects contained within the main customize object to Settings. api.defaultConstructor = api.Setting; @@ -1853,14 +2255,17 @@ }); api.controlConstructor = { - color: api.ColorControl, - upload: api.UploadControl, - image: api.ImageControl, - header: api.HeaderControl, - background: api.BackgroundControl + color: api.ColorControl, + upload: api.UploadControl, + image: api.ImageControl, + header: api.HeaderControl, + background: api.BackgroundControl, + theme: api.ThemeControl }; api.panelConstructor = {}; - api.sectionConstructor = {}; + api.sectionConstructor = { + themes: api.ThemesSection + }; $( function() { api.settings = window._wpCustomizeSettings; Index: src/wp-includes/class-wp-customize-control.php =================================================================== --- src/wp-includes/class-wp-customize-control.php (revision 31433) +++ src/wp-includes/class-wp-customize-control.php (working copy) @@ -1101,6 +1101,101 @@ } /** + * Customize Theme Control Class + * + * @package WordPress + * @subpackage Customize + * @since 4.2.0 + */ +class WP_Customize_Theme_Control extends WP_Customize_Control { + + public $type = 'theme'; + public $theme; + + /** + * Refresh the parameters passed to the JavaScript via JSON. + * + * @since 4.2.0 + * @uses WP_Customize_Control::to_json() + */ + public function to_json() { + parent::to_json(); + $this->json['theme'] = $this->theme; + } + + /** + * Don't render the control content from PHP, as it's rendered via JS on load. + * + * @since 4.2.0 + */ + public function render_content() {} + + /** + * Render a JS template for theme display. + * + * @since 4.2.0 + */ + public function content_template() { + ?> +
+ <# if ( data.theme.screenshot[0] ) { #> +
+ +
+ <# } else { #> +
+ <# } #> + +
+ + <# if ( data.theme.active ) { #> +

{{ data.theme.name }}

+ <# } else { #> +

{{ data.theme.name }}

+ <# } #> + + <# if ( ! data.theme.active ) { #> +
+ +
+ <# } #> +
+ +
+ +
+ +
+

+ +
+ register_control_type( 'WP_Customize_Upload_Control' ); $this->register_control_type( 'WP_Customize_Image_Control' ); $this->register_control_type( 'WP_Customize_Background_Image_Control' ); + $this->register_control_type( 'WP_Customize_Theme_Control' ); + /* Themes */ + + $this->add_section( new WP_Customize_Themes_Section( $this, 'themes', array( + 'title' => sprintf( __( 'Theme: %s' ), $this->theme()->display('Name') ), + 'capability' => 'switch_themes', + 'priority' => 0, + ) ) ); + + // Themes Setting (unused - the theme is considerably more fundamental to the Customizer experience). + $this->add_setting( new WP_Customize_Filter_Setting( $this, 'active_theme', array( + 'capability' => 'switch_themes', + ) ) ); + + require_once( ABSPATH . 'wp-admin/includes/theme.php' ); + + // Theme Controls. + $themes = wp_prepare_themes_for_js(); + foreach ( $themes as $theme ) { + $theme_id = 'theme_' . $theme['id']; + $this->add_control( new WP_Customize_Theme_Control( $this, $theme_id, array( + 'theme' => $theme, + 'section' => 'themes', + 'settings' => 'active_theme', + ) ) ); + } + + $this->add_control( new WP_Customize_New_Theme_Control( $this, 'add_theme', array( + 'section' => 'themes', + 'settings' => 'active_theme', + ) ) ); + /* Site Title & Tagline */ $this->add_section( 'title_tagline', array( Index: src/wp-includes/class-wp-customize-section.php =================================================================== --- src/wp-includes/class-wp-customize-section.php (revision 31433) +++ src/wp-includes/class-wp-customize-section.php (working copy) @@ -312,6 +312,57 @@ } /** + * Customize Themes Section Class. + * + * A UI container for theme controls, which behaves like a backwards Panel. + * + * @package WordPress + * @subpackage Customize + * @since 4.2.0 + */ +class WP_Customize_Themes_Section extends WP_Customize_Section { + + public $type = 'themes'; + + /** + * Render the themes section, which behaves like a panel. + * + * @since 4.2.0 + */ + protected function render() { + $classes = 'accordion-section control-section control-section-' . $this->type; + ?> +
  • +

    + title ); ?> + +

    + +
    +

    + controls ) - 1; ?> + + + +

    + +
    + controls ) ) : ?> +

    + +
    +
      +
    +
    +
    +
    • +