Changeset 39227

Timestamp:

11/14/2016 06:40:08 PM (8 years ago)

Author:

westonruter

Message:

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.

Location:

trunk/src

Files:

• wp-content/themes/twentyseventeen/inc/customizer.php (modified) (1 diff)
• wp-content/themes/twentyseventeen/template-parts/header/header-image.php (modified) (1 diff)
• wp-includes/class-wp-customize-manager.php (modified) (1 diff)
• wp-includes/css/customize-preview.css (modified) (1 diff)
• wp-includes/theme.php (modified) (2 diffs)

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

@@ -17 +17 @@
     $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(

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

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

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

@@ -3463 +3463 @@
         ) ) );
 
+        /*
+         * 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' ),

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

@@ -75 +75 @@
                  -1px 0 1px #006799;
 }
+.wp-custom-header .customize-partial-edit-shortcut button {
+    left: 2px
+}
 
 .customize-partial-edit-shortcut button svg {

trunk/src/wp-includes/theme.php

@@ -1411 +1411 @@
  * 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 '';
     }
 
@@ -1429 +1431 @@
  * 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() );