mirror of
https://github.com/gosticks/wordpress-develop.git
synced 2026-06-28 22:30:04 +00:00
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. git-svn-id: https://develop.svn.wordpress.org/trunk@38813 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
@@ -62,18 +62,22 @@ class WP_Customize_Theme_Control extends WP_Customize_Control {
|
||||
* @access public
|
||||
*/
|
||||
public function content_template() {
|
||||
$current_url = set_url_scheme( 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'] );
|
||||
$active_url = esc_url( remove_query_arg( 'customize_theme', $current_url ) );
|
||||
$preview_url = esc_url( add_query_arg( 'customize_theme', '__THEME__', $current_url ) ); // Token because esc_url() strips curly braces.
|
||||
$preview_url = str_replace( '__THEME__', '{{ data.theme.id }}', $preview_url );
|
||||
/* translators: %s: theme name */
|
||||
$details_label = sprintf( __( 'Details for theme: %s' ), '{{ data.theme.name }}' );
|
||||
/* translators: %s: theme name */
|
||||
$customize_label = sprintf( __( 'Customize theme: %s' ), '{{ data.theme.name }}' );
|
||||
/* translators: %s: theme name */
|
||||
$preview_label = sprintf( __( 'Live preview theme: %s' ), '{{ data.theme.name }}' );
|
||||
/* translators: %s: theme name */
|
||||
$install_label = sprintf( __( 'Install and preview theme: %s' ), '{{ data.theme.name }}' );
|
||||
?>
|
||||
<# if ( data.theme.isActiveTheme ) { #>
|
||||
<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">
|
||||
<# if ( data.theme.active ) { #>
|
||||
<div class="theme active" tabindex="0" aria-describedby="{{ data.section }}-{{ data.theme.id }}-action {{ data.theme.id }}-name">
|
||||
<# } else { #>
|
||||
<div class="theme" tabindex="0" data-preview-url="<?php echo esc_attr( $preview_url ); ?>" aria-describedby="{{ data.theme.id }}-action {{ data.theme.id }}-name">
|
||||
<div class="theme" tabindex="0" aria-describedby="{{ data.section }}-{{ data.theme.id }}-action {{ data.theme.id }}-name">
|
||||
<# } #>
|
||||
|
||||
<# if ( data.theme.screenshot[0] ) { #>
|
||||
<# if ( data.theme.screenshot && data.theme.screenshot[0] ) { #>
|
||||
<div class="theme-screenshot">
|
||||
<img data-src="{{ data.theme.screenshot[0] }}" alt="" />
|
||||
</div>
|
||||
@@ -81,25 +85,34 @@ class WP_Customize_Theme_Control extends WP_Customize_Control {
|
||||
<div class="theme-screenshot blank"></div>
|
||||
<# } #>
|
||||
|
||||
<# if ( data.theme.isActiveTheme ) { #>
|
||||
<span class="more-details" id="{{ data.theme.id }}-action"><?php _e( 'Customize' ); ?></span>
|
||||
<# } else { #>
|
||||
<span class="more-details" id="{{ data.theme.id }}-action"><?php _e( 'Live Preview' ); ?></span>
|
||||
<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>
|
||||
|
||||
|
||||
<# if ( 'installed' === data.theme.type && data.theme.hasUpdate ) { #>
|
||||
<div class="update-message notice inline notice-warning notice-alt" data-slug="{{ data.theme.id }}"><p><?php printf( __( 'New version available. %s' ), '<button class="button-link update-theme" type="button">' . __( 'Update now' ) . '</button>' ); ?></p></div>
|
||||
<# } #>
|
||||
|
||||
<div class="theme-author"><?php printf( __( 'By %s' ), '{{ data.theme.author }}' ); ?></div>
|
||||
|
||||
<# if ( data.theme.isActiveTheme ) { #>
|
||||
<h3 class="theme-name" id="{{ data.theme.id }}-name">
|
||||
<# if ( data.theme.active ) { #>
|
||||
<h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">
|
||||
<?php
|
||||
/* translators: %s: theme name */
|
||||
printf( __( '<span>Active:</span> %s' ), '{{{ data.theme.name }}}' );
|
||||
printf( __( '<span>Current:</span> %s' ), '{{ data.theme.name }}' );
|
||||
?>
|
||||
</h3>
|
||||
<# } else { #>
|
||||
<h3 class="theme-name" id="{{ data.theme.id }}-name">{{{ data.theme.name }}}</h3>
|
||||
<div class="theme-actions">
|
||||
<button type="button" class="button theme-details"><?php _e( 'Theme Details' ); ?></button>
|
||||
<button type="button" class="button button-primary customize-theme" aria-label="<?php echo esc_attr( $customize_label ); ?>"><?php _e( 'Customize' ); ?></button>
|
||||
</div>
|
||||
<div class="notice notice-success notice-alt"><p><?php _e( 'Installed' ); ?></p></div>
|
||||
<# } else if ( 'installed' === data.theme.type ) { #>
|
||||
<h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">{{ data.theme.name }}</h3>
|
||||
<div class="theme-actions">
|
||||
<button type="button" class="button button-primary preview-theme" aria-label="<?php echo esc_attr( $preview_label ); ?>" data-theme-id="{{ data.theme.id }}"><?php _e( 'Live Preview' ); ?></span>
|
||||
</div>
|
||||
<div class="notice notice-success notice-alt"><p><?php _e( 'Installed' ); ?></p></div>
|
||||
<# } else { #>
|
||||
<h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">{{ data.theme.name }}</h3>
|
||||
<div class="theme-actions">
|
||||
<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 }}" data-theme-id="{{ data.theme.id }}"><?php _e( 'Install & Preview' ); ?></button>
|
||||
</div>
|
||||
<# } #>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user