Make WordPress Core


Ignore:
Timestamp:
10/19/2016 03:19:13 AM (8 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.

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/

Fixes #37661, #34843.
Props celloexpressions, folletto, westonruter, karmatosed, afercia.

File:
1 edited

Legend:

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

    r35943 r38813  
    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 in tabbed sections.
    1414 *
    1515 * @since 4.2.0
     
    2929
    3030    /**
    31      * Render the themes section, which behaves like a panel.
     31     * Theme section action.
    3232     *
    33      * @since 4.2.0
     33     * Defines the type of themes to load (installed, featured, latest, etc.).
     34     *
     35     * @since 4.7.0
     36     * @access public
     37     * @var string
     38     */
     39    public $action = '';
     40
     41    /**
     42     * Text before theme section heading.
     43     *
     44     * @since 4.7.0
     45     * @access public
     46     * @var string
     47     */
     48    public $text_before = '';
     49
     50    /**
     51     * Get section parameters for JS.
     52     *
     53     * @since 4.7.0
     54     * @access public
     55     * @return array Exported parameters.
     56     */
     57    public function json() {
     58        $exported = parent::json();
     59        $exported['action'] = $this->action;
     60        $exported['text_before'] = $this->text_before;
     61
     62        return $exported;
     63    }
     64
     65    /**
     66     * Render a themes section as a JS template.
     67     *
     68     * The template is only rendered by PHP once, so all actions are prepared at once on the server side.
     69     *
     70     * @since 4.7.0
    3471     * @access protected
    3572     */
    36     protected function render() {
    37         $classes = 'accordion-section control-section control-section-' . $this->type;
     73    protected function render_template() {
    3874        ?>
    39         <li id="accordion-section-<?php echo esc_attr( $this->id ); ?>" class="<?php echo esc_attr( $classes ); ?>">
    40             <h3 class="accordion-section-title">
    41                 <?php
    42                 if ( $this->manager->is_theme_active() ) {
    43                     echo '<span class="customize-action">' . __( 'Active theme' ) . '</span> ' . $this->title;
     75        <li id="accordion-section-{{ data.id }}" class="theme-section">
     76            <# if ( '' !== data.text_before ) { #>
     77                <p class="customize-themes-text-before">{{ data.text_before }}</p>
     78            <# } #>
     79            <# if ( 'search' === data.action ) { #>
     80                <div class="search-form customize-themes-section-title themes-section-search_themes">
     81                    <label class="screen-reader-text" for="wp-filter-search-input">{{ data.title }}</label>
     82                    <input placeholder="{{ data.title }}" type="text" aria-describedby="live-search-desc" id="wp-filter-search-input" class="wp-filter-search">
     83                    <span id="live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span>
     84                </div>
     85            <# } else { #>
     86                <# if ( 'favorites' === data.action || 'feature_filter' === data.action ) {
     87                    var attr = ' aria-expanded="false"';
    4488                } else {
    45                     echo '<span class="customize-action">' . __( 'Previewing theme' ) . '</span> ' . $this->title;
    46                 }
    47                 ?>
    48 
    49                 <?php if ( count( $this->controls ) > 0 ) : ?>
    50                     <button type="button" class="button change-theme" tabindex="0"><?php _ex( 'Change', 'theme' ); ?></button>
    51                 <?php endif; ?>
    52             </h3>
    53             <div class="customize-themes-panel control-panel-content themes-php">
    54                 <h3 class="accordion-section-title customize-section-title">
    55                     <span class="customize-action"><?php _e( 'Customizing' ); ?></span>
    56                     <?php _e( 'Themes' ); ?>
    57                     <span class="title-count theme-count"><?php echo count( $this->controls ) + 1 /* Active theme */; ?></span>
    58                 </h3>
    59                 <h3 class="accordion-section-title customize-section-title">
     89                    var attr = '';
     90                } #>
     91                <button type="button" class="customize-themes-section-title themes-section-{{ data.id }}"{{{ attr }}}>{{ data.title }}</button>
     92            <# } #>
     93            <?php if ( ! current_user_can( 'install_themes' ) || is_multisite() ) : ?>
     94                <# if ( 'installed' === data.action ) { #>
     95                    <p class="themes-filter-container">
     96                        <label for="themes-filter">
     97                            <span class="screen-reader-text"><?php _e( 'Search installed themes&hellip;' ); ?></span>
     98                            <input type="text" id="themes-filter" placeholder="<?php esc_attr_e( 'Search installed themes&hellip;' ); ?>" />
     99                        </label>
     100                    </p>
     101                <# } #>
     102            <?php endif; ?>
     103            <# if ( 'favorites' === data.action ) { #>
     104                <div class="favorites-form filter-details">
     105                    <p class="install-help"><?php _e( 'If you have marked themes as favorites on WordPress.org, you can browse them here.' ); ?></p>
     106                    <p>
     107                        <label for="wporg-username-input"><?php _e( 'Your WordPress.org username:' ); ?></label>
     108                        <input type="search" id="wporg-username-input" value="">
     109                        <button type="button" class="button button-secondary favorites-form-submit"><?php _e( 'Get Favorites' ); ?></button>
     110                    </p>
     111                </div>
     112            <# } else if ( 'feature_filter' === data.action ) { #>
     113                <div class="filter-drawer filter-details">
    60114                    <?php
    61                     if ( $this->manager->is_theme_active() ) {
    62                         echo '<span class="customize-action">' . __( 'Active theme' ) . '</span> ' . $this->title;
    63                     } else {
    64                         echo '<span class="customize-action">' . __( 'Previewing theme' ) . '</span> ' . $this->title;
     115                    $feature_list = get_theme_feature_list();
     116                    foreach ( $feature_list as $feature_name => $features ) {
     117                        echo '<fieldset class="filter-group">';
     118                        $feature_name = esc_html( $feature_name );
     119                        echo '<legend><button type="button" class="button-link" aria-expanded="false">' . $feature_name . '</button></legend>';
     120                        echo '<div class="filter-group-feature">';
     121                        foreach ( $features as $feature => $feature_name ) {
     122                            $feature = esc_attr( $feature );
     123                            echo '<input type="checkbox" id="filter-id-' . $feature . '" value="' . $feature . '" /> ';
     124                            echo '<label for="filter-id-' . $feature . '">' . $feature_name . '</label><br>';
     125                        }
     126                        echo '</div>';
     127                        echo '</fieldset>';
    65128                    }
    66129                    ?>
    67                     <button type="button" class="button customize-theme"><?php _e( 'Customize' ); ?></button>
    68                 </h3>
    69 
     130                </div>
     131            <# } #>
     132            <div class="customize-themes-section themes-section-{{ data.id }} control-section-content themes-php">
    70133                <div class="theme-overlay" tabindex="0" role="dialog" aria-label="<?php esc_attr_e( 'Theme Details' ); ?>"></div>
    71 
    72                 <div id="customize-container"></div>
    73                 <?php if ( count( $this->controls ) > 4 ) : ?>
    74                     <p><label for="themes-filter">
    75                         <span class="screen-reader-text"><?php _e( 'Search installed themes&hellip;' ); ?></span>
    76                         <input type="text" id="themes-filter" placeholder="<?php esc_attr_e( 'Search installed themes&hellip;' ); ?>" />
    77                     </label></p>
    78                 <?php endif; ?>
    79134                <div class="theme-browser rendered">
    80                     <ul class="themes accordion-section-content">
     135                    <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>
     136                    <ul class="themes">
    81137                    </ul>
     138                    <p class="no-themes"><?php _e( 'No themes found. Try a different search.' ); ?></p>
     139                    <p class="spinner"></p>
    82140                </div>
    83141            </div>
Note: See TracChangeset for help on using the changeset viewer.