mirror of
https://github.com/WordPress/WordPress.git
synced 2024-09-29 23:57:41 +02:00
76f590b99b
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
104 lines
3.4 KiB
PHP
104 lines
3.4 KiB
PHP
<?php
|
|
/**
|
|
* Customize API: WP_Customize_Themes_Panel class
|
|
*
|
|
* @package WordPress
|
|
* @subpackage Customize
|
|
* @since 4.9.0
|
|
*/
|
|
|
|
/**
|
|
* Customize Themes Panel Class
|
|
*
|
|
* @since 4.9.0
|
|
*
|
|
* @see WP_Customize_Panel
|
|
*/
|
|
class WP_Customize_Themes_Panel extends WP_Customize_Panel {
|
|
|
|
/**
|
|
* Panel type.
|
|
*
|
|
* @since 4.9.0
|
|
* @var string
|
|
*/
|
|
public $type = 'themes';
|
|
|
|
/**
|
|
* An Underscore (JS) template for rendering this panel's container.
|
|
*
|
|
* The themes panel renders a custom panel heading with the current theme and a switch themes button.
|
|
*
|
|
* @see WP_Customize_Panel::print_template()
|
|
*
|
|
* @since 4.9.0
|
|
*/
|
|
protected function render_template() {
|
|
?>
|
|
<li id="accordion-section-{{ data.id }}" class="accordion-section control-panel-themes">
|
|
<h3 class="accordion-section-title">
|
|
<?php
|
|
if ( $this->manager->is_theme_active() ) {
|
|
echo '<span class="customize-action">' . __( 'Active theme' ) . '</span> {{ data.title }}';
|
|
} else {
|
|
echo '<span class="customize-action">' . __( 'Previewing theme' ) . '</span> {{ data.title }}';
|
|
}
|
|
?>
|
|
|
|
<?php if ( current_user_can( 'switch_themes' ) ) : ?>
|
|
<button type="button" class="button change-theme" aria-label="<?php _e( 'Change theme' ); ?>"><?php _ex( 'Change', 'theme' ); ?></button>
|
|
<?php endif; ?>
|
|
</h3>
|
|
<ul class="accordion-sub-container control-panel-content"></ul>
|
|
</li>
|
|
<?php
|
|
}
|
|
|
|
/**
|
|
* An Underscore (JS) template for this panel's content (but not its container).
|
|
*
|
|
* Class variables for this panel class are available in the `data` JS object;
|
|
* export custom variables by overriding WP_Customize_Panel::json().
|
|
*
|
|
* @since 4.9.0
|
|
*
|
|
* @see WP_Customize_Panel::print_template()
|
|
*/
|
|
protected function content_template() {
|
|
?>
|
|
<li class="panel-meta customize-info accordion-section <# if ( ! data.description ) { #> cannot-expand<# } #>">
|
|
<button class="customize-panel-back" tabindex="-1" type="button"><span class="screen-reader-text"><?php _e( 'Back' ); ?></span></button>
|
|
<div class="accordion-section-title">
|
|
<span class="preview-notice">
|
|
<?php
|
|
/* translators: %s: themes panel title in the Customizer */
|
|
echo sprintf( __( 'You are browsing %s' ), '<strong class="panel-title">' . __( 'Themes' ) . '</strong>' ); // Separate strings for consistency with other panels.
|
|
?>
|
|
</span>
|
|
<?php if ( current_user_can( 'install_themes' ) && ! is_multisite() ) : ?>
|
|
<# if ( data.description ) { #>
|
|
<button class="customize-help-toggle dashicons dashicons-editor-help" type="button" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
|
|
<# } #>
|
|
<?php endif; ?>
|
|
</div>
|
|
<?php if ( current_user_can( 'install_themes' ) && ! is_multisite() ) : ?>
|
|
<# if ( data.description ) { #>
|
|
<div class="description customize-panel-description">
|
|
{{{ data.description }}}
|
|
</div>
|
|
<# } #>
|
|
<?php endif; ?>
|
|
</li>
|
|
<li id="customize-themes-loading-container">
|
|
<span class="customize-loading-text-installing-theme"><?php _e( 'Downloading your new theme…' ); ?></span>
|
|
<span class="customize-loading-text"><?php _e( 'Setting up your live preview. This may take a bit.' ); ?></span>
|
|
</li><?php // Used as a full-screen overlay transition after clicking to preview a theme. ?>
|
|
<li class="customize-themes-full-container-container">
|
|
<ul class="customize-themes-full-container">
|
|
<li class="customize-themes-notifications"></li>
|
|
</ul>
|
|
</li>
|
|
<?php
|
|
}
|
|
}
|