Make WordPress Core


Ignore:
Timestamp:
09/29/2017 08:12:19 PM (7 years ago)
Author:
westonruter
Message:

Customize: Introduce a new experience for discovering, installing, and previewing themes within the customizer.

Unify the theme-browsing and theme-customization experiences by introducing a comprehensive theme browser and installer directly accessible in the customizer. Replaces the customizer theme switcher with a full-screen panel for discovering/browsing and installing themes available on WordPress.org. Themes can now be installed and previewed directly in the customizer without entering the wp-admin context. Also includes an extensible framework for browsing and installing themes from other sources.

Also includes CSS auto-prefixing added via grunt precommit:css.

For details, see: https://make.wordpress.org/core/2016/10/03/feature-proposal-a-new-experience-for-discovering-installing-and-previewing-themes-in-the-customizer/

Previously [38813] but reverted in [39140].
Fixes #37661, #34843, #38666.
Props celloexpressions, folletto, westonruter, karmatosed, melchoyce, afercia.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/customize/class-wp-customize-themes-section.php

    r41368 r41648  
    1111 * Customize Themes Section class.
    1212 *
    13  * A UI container for theme controls, which behaves like a backwards Panel.
     13 * A UI container for theme controls, which are displayed within sections.
    1414 *
    1515 * @since 4.2.0
     
    2020
    2121    /**
    22      * Customize section type.
     22     * Section type.
    2323     *
    2424     * @since 4.2.0
     
    2828
    2929    /**
    30      * Render the themes section, which behaves like a panel.
     30     * Theme section action.
    3131     *
    32      * @since 4.2.0
     32     * Defines the type of themes to load (installed, wporg, etc.).
     33     *
     34     * @since 4.9.0
     35     * @var string
    3336     */
    34     protected function render() {
    35         $classes = 'accordion-section control-section control-section-' . $this->type;
     37    public $action = '';
     38
     39    /**
     40     * Get section parameters for JS.
     41     *
     42     * @since 4.9.0
     43     * @return array Exported parameters.
     44     */
     45    public function json() {
     46        $exported = parent::json();
     47        $exported['action'] = $this->action;
     48
     49        return $exported;
     50    }
     51
     52    /**
     53     * Render a themes section as a JS template.
     54     *
     55     * The template is only rendered by PHP once, so all actions are prepared at once on the server side.
     56     *
     57     * @since 4.9.0
     58     */
     59    protected function render_template() {
    3660        ?>
    37         <li id="accordion-section-<?php echo esc_attr( $this->id ); ?>" class="<?php echo esc_attr( $classes ); ?>">
    38             <h3 class="accordion-section-title">
    39                 <?php
    40                 if ( $this->manager->is_theme_active() ) {
    41                     echo '<span class="customize-action">' . __( 'Active theme' ) . '</span> ' . $this->title;
    42                 } else {
    43                     echo '<span class="customize-action">' . __( 'Previewing theme' ) . '</span> ' . $this->title;
    44                 }
    45                 ?>
    46 
    47                 <?php if ( count( $this->controls ) > 0 ) : ?>
    48                     <button type="button" class="button change-theme" tabindex="0"><?php _ex( 'Change', 'theme' ); ?></button>
    49                 <?php endif; ?>
    50             </h3>
    51             <div class="customize-themes-panel control-panel-content themes-php">
    52                 <h3 class="accordion-section-title customize-section-title">
    53                     <button class="customize-section-back" tabindex="0" type="button"><span class="screen-reader-text"><?php _e( 'Back' ); ?></span></button>
    54                     <span class="customize-action"><?php _e( 'Customizing' ); ?></span>
    55                     <?php _e( 'Themes' ); ?>
    56                     <span class="title-count theme-count"><?php echo count( $this->controls ) + 1 /* Active theme */; ?></span>
    57                 </h3>
    58                 <h3 class="accordion-section-title customize-section-title">
    59                     <?php
    60                     if ( $this->manager->is_theme_active() ) {
    61                         echo '<span class="customize-action">' . __( 'Active theme' ) . '</span> ' . $this->title;
    62                     } else {
    63                         echo '<span class="customize-action">' . __( 'Previewing theme' ) . '</span> ' . $this->title;
    64                     }
    65                     ?>
    66                     <button type="button" class="button customize-theme"><?php _e( 'Customize' ); ?></button>
    67                 </h3>
    68 
     61        <li id="accordion-section-{{ data.id }}" class="theme-section">
     62            <button type="button" class="customize-themes-section-title themes-section-{{ data.id }}">{{ data.title }}</button>
     63            <?php if ( current_user_can( 'install_themes' ) || is_multisite() ) : // @todo: upload support ?>
     64            <?php endif; ?>
     65            <div class="customize-themes-section themes-section-{{ data.id }} control-section-content themes-php">
    6966                <div class="theme-overlay" tabindex="0" role="dialog" aria-label="<?php esc_attr_e( 'Theme Details' ); ?>"></div>
    70 
    71                 <div id="customize-container"></div>
    72                 <?php if ( count( $this->controls ) > 4 ) : ?>
    73                     <p><label for="themes-filter">
    74                         <span class="screen-reader-text"><?php _e( 'Search installed themes&hellip;' ); ?></span>
    75                         <input type="text" id="themes-filter" placeholder="<?php esc_attr_e( 'Search installed themes&hellip;' ); ?>" />
    76                     </label></p>
    77                 <?php endif; ?>
    7867                <div class="theme-browser rendered">
    79                     <ul class="themes accordion-section-content">
     68                    <div class="customize-preview-header themes-filter-bar">
     69                        <?php $this->filter_bar_content_template(); ?>
     70                    </div>
     71                    <div class="error unexpected-error" style="display: none; "><p><?php _e( 'An unexpected error occurred. Something may be wrong with WordPress.org or this server&#8217;s configuration. If you continue to have problems, please try the <a href="https://wordpress.org/support/">support forums</a>.' ); ?></p></div>
     72                    <ul class="themes">
    8073                    </ul>
     74                    <p class="no-themes"><?php _e( 'No themes found. Try a different search.' ); ?></p>
     75                    <p class="no-themes-local">
     76                        <?php
     77                        /* translators: %s is the string, "search WordPress.org themes" */
     78                        printf( __( 'No themes found. Try a different search, or %s.' ),
     79                            sprintf( '<button type="button" class="button-link search-dotorg-themes">%s</button>', __( 'Search WordPress.org themes' ) )
     80                        );
     81                        ?>
     82                    </p>
     83                    <p class="spinner"></p>
    8184                </div>
    8285            </div>
    8386        </li>
    84 <?php }
     87        <?php
     88    }
     89
     90    /**
     91     * Render the filter bar portion of a themes section as a JS template.
     92     *
     93     * The template is only rendered by PHP once, so all actions are prepared at once on the server side.
     94     * The filter bar container is rendered by @see `render_template()`.
     95     *
     96     * @since 4.9.0
     97     */
     98    protected function filter_bar_content_template() {
     99        ?>
     100        <button type="button" class="button button-primary customize-section-back customize-themes-mobile-back"><?php _e( 'Back to theme sources' ); ?></button>
     101        <# if ( 'wporg' === data.action ) { #>
     102            <div class="search-form">
     103                <label class="screen-reader-text" for="wp-filter-search-input"><?php _e( 'Search themes&hellip;' ); ?></label>
     104                <input placeholder="<?php _e( 'Search themes&hellip;' ); ?>" type="search" aria-describedby="live-search-desc" id="wp-filter-search-input" class="wp-filter-search">
     105                <span id="live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span>
     106            </div>
     107            <button type="button" class="button feature-filter-toggle">
     108                <span class="filter-count-0"><?php _e( 'Filter themes' ); ?></span><span class="filter-count-filters">
     109                <?php
     110                /* translators: %s: number of filters selected. */
     111                printf( __( 'Filter themes (%s)' ), '<span class="theme-filter-count">0</span>' );
     112                ?>
     113                </span>
     114            </button>
     115            <div class="filter-drawer filter-details">
     116                <?php
     117                $feature_list = get_theme_feature_list( false ); // @todo: Use the .org API instead of the local core feature list. The .org API is currently outdated and will be reconciled when the .org themes directory is next redesigned.
     118                foreach ( $feature_list as $feature_name => $features ) {
     119                    echo '<fieldset class="filter-group">';
     120                    echo '<legend>' . esc_html( $feature_name ) . '</legend>';
     121                    echo '<div class="filter-group-feature">';
     122                    foreach ( $features as $feature => $feature_name ) {
     123                        echo '<input type="checkbox" id="filter-id-' . esc_attr( $feature ) . '" value="' . esc_attr( $feature ) . '" /> ';
     124                        echo '<label for="filter-id-' . esc_attr( $feature ) . '">' . esc_html( $feature_name ) . '</label><br>';
     125                    }
     126                    echo '</div>';
     127                    echo '</fieldset>';
     128                }
     129                ?>
     130            </div>
     131        <# } else { #>
     132            <p class="themes-filter-container">
     133                <label for="themes-filter">
     134                    <span class="screen-reader-text"><?php _e( 'Search themes&hellip;' ); ?></span>
     135                    <input type="search" id="themes-filter" placeholder="<?php esc_attr_e( 'Search themes&hellip;' ); ?>" aria-describedby="live-search-desc" class="wp-filter-search wp-filter-search-themes" />
     136                    <span id="live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span>
     137                </label>
     138            </p>
     139        <# } #>
     140        <div class="filter-themes-count">
     141            <span class="themes-displayed">
     142                <?php
     143                /* translators: %s: number of themes displayed. */
     144                echo sprintf( __( '%s themes' ), '<span class="theme-count">0</span>' );
     145                ?>
     146            </span>
     147        </div>
     148        <?php
     149    }
    85150}
Note: See TracChangeset for help on using the changeset viewer.