Make WordPress Core


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