WordPress/wp-includes/customize/class-wp-customize-theme-control.php
Weston Ruter 76f590b99b 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.

Built from https://develop.svn.wordpress.org/trunk@41648


git-svn-id: http://core.svn.wordpress.org/trunk@41482 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-09-29 20:13:50 +00:00

128 lines
4.2 KiB
PHP

<?php
/**
* Customize API: WP_Customize_Theme_Control class
*
* @package WordPress
* @subpackage Customize
* @since 4.4.0
*/
/**
* Customize Theme Control class.
*
* @since 4.2.0
*
* @see WP_Customize_Control
*/
class WP_Customize_Theme_Control extends WP_Customize_Control {
/**
* Customize control type.
*
* @since 4.2.0
* @var string
*/
public $type = 'theme';
/**
* Theme object.
*
* @since 4.2.0
* @var WP_Theme
*/
public $theme;
/**
* Refresh the parameters passed to the JavaScript via JSON.
*
* @since 4.2.0
*
* @see WP_Customize_Control::to_json()
*/
public function to_json() {
parent::to_json();
$this->json['theme'] = $this->theme;
}
/**
* Don't render the control content from PHP, as it's rendered via JS on load.
*
* @since 4.2.0
*/
public function render_content() {}
/**
* Render a JS template for theme display.
*
* @since 4.2.0
*/
public function content_template() {
/* 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.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" aria-describedby="{{ data.section }}-{{ data.theme.id }}-action {{ data.theme.id }}-name">
<# } #>
<# if ( data.theme.screenshot && data.theme.screenshot[0] ) { #>
<div class="theme-screenshot">
<img data-src="{{ data.theme.screenshot[0] }}" alt="" />
</div>
<# } else { #>
<div class="theme-screenshot blank"></div>
<# } #>
<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>
<div class="theme-author"><?php
/* translators: Theme author name */
printf( _x( 'By %s', 'theme author' ), '{{ data.theme.author }}' );
?></div>
<# 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
/* translators: %s is the linked update now button */
printf( __( 'New version available. %s' ), '<button class="button-link update-theme" type="button">' . __( 'Update now' ) . '</button>' );
?>
</p>
</div>
<# } #>
<# if ( data.theme.active ) { #>
<h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">
<?php
/* translators: %s: theme name */
printf( __( '<span>Previewing:</span> %s' ), '{{ data.theme.name }}' );
?>
</h3>
<div class="theme-actions">
<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-slug="{{ 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 }}"><?php _e( 'Install &amp; Preview' ); ?></button>
</div>
<# } #>
</div>
<?php
}
}