Customize: Use selective refresh for custom header changes when possible.

* Use `postMessage` transport for header image settings by default when video headers are supported, and thus `the_custom_header_markup()` will necessarily be used (and thus a selective refresh partial will be available).
* Ensure that `the_custom_header_markup()` always outputs a container element in the customizer preview even if the header is empty.
* Ensure that edit shortcut appearing for custom header does not get positioned off-screen.

Props bradyvercher, westonruter.
See #38639.
Fixes #38737.

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


git-svn-id: http://core.svn.wordpress.org/trunk@39167 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Weston Ruter 2016-11-14 18:41:32 +00:00
parent 9ef40ced2f
commit dfbcdae985
9 changed files with 34 additions and 28 deletions

View File

@ -16,8 +16,6 @@ function twentyseventeen_customize_register( $wp_customize ) {
$wp_customize->get_setting( 'blogname' )->transport = 'postMessage';
$wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';
$wp_customize->get_setting( 'header_textcolor' )->transport = 'postMessage';
$wp_customize->get_setting( 'header_image' )->transport = 'postMessage';
$wp_customize->get_setting( 'header_image_data' )->transport = 'postMessage';
$wp_customize->selective_refresh->add_partial( 'blogname', array(
'selector' => '.site-title a',

View File

@ -10,25 +10,11 @@
?>
<div class="custom-header">
<?php
// Check if Custom Header image has been added.
if ( has_custom_header() ) :
?>
<div class="custom-header-image">
<?php the_custom_header_markup(); ?>
</div>
<?php // Output the full custom header - video and/or image fallback. ?>
<div class="custom-header-image">
<?php the_custom_header_markup(); ?>
</div>
<?php get_template_part( 'template-parts/header/site', 'branding' ); ?>
<?php else : ?>
<?php // Otherwise, show a blank header. ?>
<div class="custom-header-simple">
<?php get_template_part( 'template-parts/header/site', 'branding' ); ?>
</div><!-- .custom-header-simple -->
<?php endif; ?>
<?php get_template_part( 'template-parts/header/site', 'branding' ); ?>
</div><!-- .custom-header -->

View File

@ -3462,6 +3462,16 @@ final class WP_Customize_Manager {
'theme_supports' => 'custom-header',
) ) );
/*
* Switch image settings to postMessage when video support is enabled since
* it entails that the_custom_header_markup() will be used, and thus selective
* refresh can be utilized.
*/
if ( current_theme_supports( 'custom-header', 'video' ) ) {
$this->get_setting( 'header_image' )->transport = 'postMessage';
$this->get_setting( 'header_image_data' )->transport = 'postMessage';
}
$this->add_control( new WP_Customize_Media_Control( $this, 'header_video', array(
'theme_supports' => array( 'custom-header', 'video' ),
'label' => __( 'Header Video' ),

View File

@ -74,6 +74,9 @@
0 1px 1px #006799,
1px 0 1px #006799;
}
.wp-custom-header .customize-partial-edit-shortcut button {
right: 2px
}
.customize-partial-edit-shortcut button svg {
fill: #fff;

File diff suppressed because one or more lines are too long

View File

@ -74,6 +74,9 @@
0 1px 1px #006799,
-1px 0 1px #006799;
}
.wp-custom-header .customize-partial-edit-shortcut button {
left: 2px
}
.customize-partial-edit-shortcut button svg {
fill: #fff;

File diff suppressed because one or more lines are too long

View File

@ -1410,13 +1410,15 @@ function has_custom_header() {
/**
* Retrieve the markup for a custom header.
*
* The container div will always be returned in the Customizer preview.
*
* @since 4.7.0
*
* @return string|false The markup for a custom header on success. False if not.
* @return string The markup for a custom header on success.
*/
function get_custom_header_markup() {
if ( ! has_custom_header() ) {
return false;
if ( ! has_custom_header() && ! is_customize_preview() ) {
return '';
}
return sprintf(
@ -1428,15 +1430,19 @@ function get_custom_header_markup() {
/**
* Print the markup for a custom header.
*
* A container div will always be printed in the Customizer preview.
*
* @since 4.7.0
*/
function the_custom_header_markup() {
if ( ! $custom_header = get_custom_header_markup() ) {
$custom_header = get_custom_header_markup();
if ( empty( $custom_header ) ) {
return;
}
echo $custom_header;
if ( has_header_video() && is_front_page() ) {
if ( is_front_page() && ( has_header_video() || is_customize_preview() ) ) {
wp_enqueue_script( 'wp-custom-header' );
wp_localize_script( 'wp-custom-header', '_wpCustomHeaderSettings', get_header_video_settings() );
}

View File

@ -4,7 +4,7 @@
*
* @global string $wp_version
*/
$wp_version = '4.7-beta3-39226';
$wp_version = '4.7-beta3-39227';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.