WordPress.org

Make WordPress Core

Changeset 39227


Ignore:
Timestamp:
11/14/2016 06:40:08 PM (2 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:
5 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-content/themes/twentyseventeen/inc/customizer.php

    r39078 r39227  
    1717    $wp_customize->get_setting( 'blogdescription' )->transport   = 'postMessage';
    1818    $wp_customize->get_setting( 'header_textcolor' )->transport  = 'postMessage';
    19     $wp_customize->get_setting( 'header_image' )->transport      = 'postMessage';
    20     $wp_customize->get_setting( 'header_image_data' )->transport = 'postMessage';
    2119
    2220    $wp_customize->selective_refresh->add_partial( 'blogname', array(
  • trunk/src/wp-content/themes/twentyseventeen/template-parts/header/header-image.php

    r39224 r39227  
    1111?>
    1212<div class="custom-header">
    13     <?php
    1413
    15     // Check if Custom Header image has been added.
    16     if ( has_custom_header() ) :
    17     ?>
     14    <div class="custom-header-image">
     15        <?php the_custom_header_markup(); ?>
     16    </div>
    1817
    19         <?php // Output the full custom header - video and/or image fallback. ?>
    20         <div class="custom-header-image">
    21             <?php the_custom_header_markup(); ?>
    22         </div>
    23         <?php get_template_part( 'template-parts/header/site', 'branding' ); ?>
    24 
    25     <?php else : ?>
    26 
    27         <?php // Otherwise, show a blank header. ?>
    28         <div class="custom-header-simple">
    29             <?php get_template_part( 'template-parts/header/site', 'branding' ); ?>
    30         </div><!-- .custom-header-simple -->
    31 
    32     <?php endif; ?>
     18    <?php get_template_part( 'template-parts/header/site', 'branding' ); ?>
    3319
    3420</div><!-- .custom-header -->
  • trunk/src/wp-includes/class-wp-customize-manager.php

    r39205 r39227  
    34633463        ) ) );
    34643464
     3465        /*
     3466         * Switch image settings to postMessage when video support is enabled since
     3467         * it entails that the_custom_header_markup() will be used, and thus selective
     3468         * refresh can be utilized.
     3469         */
     3470        if ( current_theme_supports( 'custom-header', 'video' ) ) {
     3471            $this->get_setting( 'header_image' )->transport = 'postMessage';
     3472            $this->get_setting( 'header_image_data' )->transport = 'postMessage';
     3473        }
     3474
    34653475        $this->add_control( new WP_Customize_Media_Control( $this, 'header_video', array(
    34663476            'theme_supports' => array( 'custom-header', 'video' ),
  • trunk/src/wp-includes/css/customize-preview.css

    r39202 r39227  
    7575                 -1px 0 1px #006799;
    7676}
     77.wp-custom-header .customize-partial-edit-shortcut button {
     78    left: 2px
     79}
    7780
    7881.customize-partial-edit-shortcut button svg {
  • trunk/src/wp-includes/theme.php

    r39209 r39227  
    14111411 * Retrieve the markup for a custom header.
    14121412 *
     1413 * The container div will always be returned in the Customizer preview.
     1414 *
    14131415 * @since 4.7.0
    14141416 *
    1415  * @return string|false The markup for a custom header on success. False if not.
     1417 * @return string The markup for a custom header on success.
    14161418 */
    14171419function get_custom_header_markup() {
    1418     if ( ! has_custom_header() ) {
    1419         return false;
     1420    if ( ! has_custom_header() && ! is_customize_preview() ) {
     1421        return '';
    14201422    }
    14211423
     
    14291431 * Print the markup for a custom header.
    14301432 *
     1433 * A container div will always be printed in the Customizer preview.
     1434 *
    14311435 * @since 4.7.0
    14321436 */
    14331437function the_custom_header_markup() {
    1434     if ( ! $custom_header = get_custom_header_markup() ) {
     1438    $custom_header = get_custom_header_markup();
     1439    if ( empty( $custom_header ) ) {
    14351440        return;
    14361441    }
     1442
    14371443    echo $custom_header;
    14381444
    1439     if ( has_header_video() && is_front_page() ) {
     1445    if ( is_front_page() && ( has_header_video() || is_customize_preview() ) ) {
    14401446        wp_enqueue_script( 'wp-custom-header' );
    14411447        wp_localize_script( 'wp-custom-header', '_wpCustomHeaderSettings', get_header_video_settings() );
Note: See TracChangeset for help on using the changeset viewer.