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.


git-svn-id: https://develop.svn.wordpress.org/trunk@39227 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-content/themes/twentyseventeen/inc/customizer.php

@@ -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',

src/wp-content/themes/twentyseventeen/template-parts/header/header-image.php

@@ -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 -->

src/wp-includes/class-wp-customize-manager.php

@@ -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' ),

src/wp-includes/css/customize-preview.css

@@ -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;

src/wp-includes/theme.php

@@ -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() );
 	}