WordPress/wp-admin/customize.php
Weston Ruter 71afe657b6 Customize: Add edit shortcuts in customizer preview to visually expose editable elements and focus on the corresponding controls when clicked.
* Edit shortcuts show initially for a moment and then fade away so as to not get in the way of the preview. 
* Visibility of edit shortcuts is toggled by clicking/touching anywhere inert in the document.
* Implements UI for mobile and touch devices which do not support shift-click.
* Adds `editShortcutVisibility` state.
* Adds new methods to `wp.customize.selectiveRefresh.Partial` for managing edit shortcuts.

Incorporates aspects of the Customize Direct Manipulation feature plugin.

Props sirbrillig, mattwiebe, celloexpressions, melchoyce, westonruter, afercia.
Fixes #27403.

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


git-svn-id: http://core.svn.wordpress.org/trunk@38910 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-10-26 20:03:32 +00:00

214 lines
7.2 KiB
PHP

<?php
/**
* Theme Customize Screen.
*
* @package WordPress
* @subpackage Customize
* @since 3.4.0
*/
define( 'IFRAME_REQUEST', true );
/** Load WordPress Administration Bootstrap */
require_once( dirname( __FILE__ ) . '/admin.php' );
if ( ! current_user_can( 'customize' ) ) {
wp_die(
'<h1>' . __( 'Cheatin&#8217; uh?' ) . '</h1>' .
'<p>' . __( 'Sorry, you are not allowed to customize this site.' ) . '</p>',
403
);
}
/**
* @global WP_Scripts $wp_scripts
* @global WP_Customize_Manager $wp_customize
*/
global $wp_scripts, $wp_customize;
if ( $wp_customize->changeset_post_id() ) {
if ( ! current_user_can( get_post_type_object( 'customize_changeset' )->cap->edit_post, $wp_customize->changeset_post_id() ) ) {
wp_die(
'<h1>' . __( 'Cheatin&#8217; uh?' ) . '</h1>' .
'<p>' . __( 'Sorry, you are not allowed to edit this changeset.' ) . '</p>',
403
);
}
if ( in_array( get_post_status( $wp_customize->changeset_post_id() ), array( 'publish', 'trash' ), true ) ) {
wp_die(
'<h1>' . __( 'Cheatin&#8217; uh?' ) . '</h1>' .
'<p>' . __( 'This changeset has already been published and cannot be further modified.' ) . '</p>' .
'<p><a href="' . esc_url( remove_query_arg( 'changeset_uuid' ) ) . '">' . __( 'Customize New Changes' ) . '</a></p>',
403
);
}
}
wp_reset_vars( array( 'url', 'return', 'autofocus' ) );
if ( ! empty( $url ) ) {
$wp_customize->set_preview_url( wp_unslash( $url ) );
}
if ( ! empty( $return ) ) {
$wp_customize->set_return_url( wp_unslash( $return ) );
}
if ( ! empty( $autofocus ) && is_array( $autofocus ) ) {
$wp_customize->set_autofocus( wp_unslash( $autofocus ) );
}
$registered = $wp_scripts->registered;
$wp_scripts = new WP_Scripts;
$wp_scripts->registered = $registered;
add_action( 'customize_controls_print_scripts', 'print_head_scripts', 20 );
add_action( 'customize_controls_print_footer_scripts', '_wp_footer_scripts' );
add_action( 'customize_controls_print_styles', 'print_admin_styles', 20 );
/**
* Fires when Customizer controls are initialized, before scripts are enqueued.
*
* @since 3.4.0
*/
do_action( 'customize_controls_init' );
wp_enqueue_script( 'customize-controls' );
wp_enqueue_style( 'customize-controls' );
/**
* Enqueue Customizer control scripts.
*
* @since 3.4.0
*/
do_action( 'customize_controls_enqueue_scripts' );
// Let's roll.
@header('Content-Type: ' . get_option('html_type') . '; charset=' . get_option('blog_charset'));
wp_user_settings();
_wp_admin_html_begin();
$body_class = 'wp-core-ui wp-customizer js';
if ( wp_is_mobile() ) :
$body_class .= ' mobile';
?><meta name="viewport" id="viewport-meta" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=1.2" /><?php
endif;
if ( $wp_customize->is_ios() ) {
$body_class .= ' ios';
}
if ( is_rtl() ) {
$body_class .= ' rtl';
}
$body_class .= ' locale-' . sanitize_html_class( strtolower( str_replace( '_', '-', get_locale() ) ) );
$admin_title = sprintf( $wp_customize->get_document_title_template(), __( 'Loading&hellip;' ) );
?><title><?php echo $admin_title; ?></title>
<script type="text/javascript">
var ajaxurl = <?php echo wp_json_encode( admin_url( 'admin-ajax.php', 'relative' ) ); ?>,
pagenow = 'customize';
</script>
<?php
/**
* Fires when Customizer control styles are printed.
*
* @since 3.4.0
*/
do_action( 'customize_controls_print_styles' );
/**
* Fires when Customizer control scripts are printed.
*
* @since 3.4.0
*/
do_action( 'customize_controls_print_scripts' );
?>
</head>
<body class="<?php echo esc_attr( $body_class ); ?>">
<div class="wp-full-overlay expanded">
<form id="customize-controls" class="wrap wp-full-overlay-sidebar">
<div id="customize-header-actions" class="wp-full-overlay-header">
<?php
$save_text = $wp_customize->is_theme_active() ? __( 'Save &amp; Publish' ) : __( 'Save &amp; Activate' );
$save_attrs = array();
if ( ! current_user_can( get_post_type_object( 'customize_changeset' )->cap->publish_posts ) ) {
$save_attrs['style'] = 'display: none';
}
submit_button( $save_text, 'primary save', 'save', false, $save_attrs );
?>
<span class="spinner"></span>
<button type="button" class="customize-controls-preview-toggle">
<span class="controls"><?php _e( 'Customize' ); ?></span>
<span class="preview"><?php _e( 'Preview' ); ?></span>
</button>
<a class="customize-controls-close" href="<?php echo esc_url( $wp_customize->get_return_url() ); ?>">
<span class="screen-reader-text"><?php _e( 'Close the Customizer and go back to the previous page' ); ?></span>
</a>
</div>
<div id="widgets-right" class="wp-clearfix"><!-- For Widget Customizer, many widgets try to look for instances under div#widgets-right, so we have to add that ID to a container div in the Customizer for compat -->
<div class="wp-full-overlay-sidebar-content" tabindex="-1">
<div id="customize-info" class="accordion-section customize-info">
<div class="accordion-section-title">
<span class="preview-notice"><?php
echo sprintf( __( 'You are customizing %s' ), '<strong class="panel-title site-title">' . get_bloginfo( 'name' ) . '</strong>' );
?></span>
<button type="button" class="customize-help-toggle dashicons dashicons-editor-help" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
</div>
<div class="customize-panel-description"><?php
_e( 'The Customizer allows you to preview changes to your site before publishing them. You can navigate to different pages on your site within the preview. Edit shortcuts are shown for some editable elements; click anywhere in the preview to toggle them off and on.' );
?></div>
</div>
<div id="customize-theme-controls">
<ul class="customize-pane-parent"><?php // Panels and sections are managed here via JavaScript ?></ul>
</div>
</div>
</div>
<div id="customize-footer-actions" class="wp-full-overlay-footer">
<?php $previewable_devices = $wp_customize->get_previewable_devices(); ?>
<?php if ( ! empty( $previewable_devices ) ) : ?>
<div class="devices">
<?php foreach ( (array) $previewable_devices as $device => $settings ) : ?>
<?php
if ( empty( $settings['label'] ) ) {
continue;
}
$active = ! empty( $settings['default'] );
$class = 'preview-' . $device;
if ( $active ) {
$class .= ' active';
}
?>
<button type="button" class="<?php echo esc_attr( $class ); ?>" aria-pressed="<?php echo esc_attr( $active ) ?>" data-device="<?php echo esc_attr( $device ); ?>">
<span class="screen-reader-text"><?php echo esc_html( $settings['label'] ); ?></span>
</button>
<?php endforeach; ?>
</div>
<?php endif; ?>
<button type="button" class="collapse-sidebar button" aria-expanded="true" aria-label="<?php esc_attr_e( 'Collapse Sidebar' ); ?>">
<span class="collapse-sidebar-arrow"></span>
<span class="collapse-sidebar-label"><?php _e( 'Collapse' ); ?></span>
</button>
</div>
</form>
<div id="customize-preview" class="wp-full-overlay-main"></div>
<?php
/**
* Prints templates, control scripts, and settings in the footer.
*
* @since 3.4.0
*/
do_action( 'customize_controls_print_footer_scripts' );
?>
</div>
</body>
</html>