WordPress.org

Make WordPress Core


Ignore:
Timestamp:
09/29/2017 08:12:19 PM (4 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-theme-control.php

    r41162 r41648  
    5858     */
    5959    public function content_template() {
    60         $current_url = set_url_scheme( 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'] );
    61         $active_url  = esc_url( remove_query_arg( 'customize_theme', $current_url ) );
    62         $preview_url = esc_url( add_query_arg( 'customize_theme', '__THEME__', $current_url ) ); // Token because esc_url() strips curly braces.
    63         $preview_url = str_replace( '__THEME__', '{{ data.theme.id }}', $preview_url );
     60        /* translators: %s: theme name */
     61        $details_label = sprintf( __( 'Details for theme: %s' ), '{{ data.theme.name }}' );
     62        /* translators: %s: theme name */
     63        $customize_label = sprintf( __( 'Customize theme: %s' ), '{{ data.theme.name }}' );
     64        /* translators: %s: theme name */
     65        $preview_label = sprintf( __( 'Live preview theme: %s' ), '{{ data.theme.name }}' );
     66        /* translators: %s: theme name */
     67        $install_label = sprintf( __( 'Install and preview theme: %s' ), '{{ data.theme.name }}' );
    6468        ?>
    65         <# if ( data.theme.isActiveTheme ) { #>
    66             <div class="theme active" tabindex="0" data-preview-url="<?php echo esc_attr( $active_url ); ?>" aria-describedby="{{ data.theme.id }}-action {{ data.theme.id }}-name">
     69        <# if ( data.theme.active ) { #>
     70            <div class="theme active" tabindex="0" aria-describedby="{{ data.section }}-{{ data.theme.id }}-action {{ data.theme.id }}-name">
    6771        <# } else { #>
    68             <div class="theme" tabindex="0" data-preview-url="<?php echo esc_attr( $preview_url ); ?>" aria-describedby="{{ data.theme.id }}-action {{ data.theme.id }}-name">
     72            <div class="theme" tabindex="0" aria-describedby="{{ data.section }}-{{ data.theme.id }}-action {{ data.theme.id }}-name">
    6973        <# } #>
    7074
    71             <# if ( data.theme.screenshot[0] ) { #>
     75            <# if ( data.theme.screenshot && data.theme.screenshot[0] ) { #>
    7276                <div class="theme-screenshot">
    7377                    <img data-src="{{ data.theme.screenshot[0] }}" alt="" />
     
    7781            <# } #>
    7882
    79             <# if ( data.theme.isActiveTheme ) { #>
    80                 <span class="more-details" id="{{ data.theme.id }}-action"><?php _e( 'Customize' ); ?></span>
    81             <# } else { #>
    82                 <span class="more-details" id="{{ data.theme.id }}-action"><?php _e( 'Live Preview' ); ?></span>
    83             <# } #>
     83            <span class="more-details theme-details" id="{{ data.section }}-{{ data.theme.id }}-action" aria-label="<?php echo esc_attr( $details_label ); ?>"><?php _e( 'Theme Details' ); ?></span>
    8484
    8585            <div class="theme-author"><?php
     
    8888            ?></div>
    8989
    90             <# if ( data.theme.isActiveTheme ) { #>
    91                 <h3 class="theme-name" id="{{ data.theme.id }}-name">
     90            <# if ( 'installed' === data.theme.type && data.theme.hasUpdate ) { #>
     91                <div class="update-message notice inline notice-warning notice-alt" data-slug="{{ data.theme.id }}">
     92                    <p>
     93                        <?php
     94                        /* translators: %s is the linked update now button */
     95                        printf( __( 'New version available. %s' ), '<button class="button-link update-theme" type="button">' . __( 'Update now' ) . '</button>' );
     96                        ?>
     97                    </p>
     98                </div>
     99            <# } #>
     100
     101            <# if ( data.theme.active ) { #>
     102                <h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">
    92103                    <?php
    93104                    /* translators: %s: theme name */
    94                     printf( __( '<span>Active:</span> %s' ), '{{{ data.theme.name }}}' );
     105                    printf( __( '<span>Previewing:</span> %s' ), '{{ data.theme.name }}' );
    95106                    ?>
    96107                </h3>
     108                <div class="theme-actions">
     109                    <button type="button" class="button button-primary customize-theme" aria-label="<?php echo esc_attr( $customize_label ); ?>"><?php _e( 'Customize' ); ?></button>
     110                </div>
     111                <div class="notice notice-success notice-alt"><p><?php _e( 'Installed' ); ?></p></div>
     112            <# } else if ( 'installed' === data.theme.type ) { #>
     113                <h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">{{ data.theme.name }}</h3>
     114                <div class="theme-actions">
     115                    <button type="button" class="button button-primary preview-theme" aria-label="<?php echo esc_attr( $preview_label ); ?>" data-slug="{{ data.theme.id }}"><?php _e( 'Live Preview' ); ?></span>
     116                </div>
     117                <div class="notice notice-success notice-alt"><p><?php _e( 'Installed' ); ?></p></div>
    97118            <# } else { #>
    98                 <h3 class="theme-name" id="{{ data.theme.id }}-name">{{{ data.theme.name }}}</h3>
     119                <h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">{{ data.theme.name }}</h3>
    99120                <div class="theme-actions">
    100                     <button type="button" class="button theme-details"><?php _e( 'Theme Details' ); ?></button>
     121                    <button type="button" class="button button-primary theme-install preview" aria-label="<?php echo esc_attr( $install_label ); ?>" data-slug="{{ data.theme.id }}" data-name="{{ data.theme.name }}"><?php _e( 'Install &amp; Preview' ); ?></button>
    101122                </div>
    102123            <# } #>
Note: See TracChangeset for help on using the changeset viewer.