From dfbcdae985f6037895de2500cfb8e18fa4640212 Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Mon, 14 Nov 2016 18:41:32 +0000 Subject: [PATCH] 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 --- .../themes/twentyseventeen/inc/customizer.php | 2 -- .../template-parts/header/header-image.php | 22 ++++--------------- wp-includes/class-wp-customize-manager.php | 10 +++++++++ wp-includes/css/customize-preview-rtl.css | 3 +++ wp-includes/css/customize-preview-rtl.min.css | 2 +- wp-includes/css/customize-preview.css | 3 +++ wp-includes/css/customize-preview.min.css | 2 +- wp-includes/theme.php | 16 +++++++++----- wp-includes/version.php | 2 +- 9 files changed, 34 insertions(+), 28 deletions(-) diff --git a/wp-content/themes/twentyseventeen/inc/customizer.php b/wp-content/themes/twentyseventeen/inc/customizer.php index 6e2db28162..5963f790da 100644 --- a/wp-content/themes/twentyseventeen/inc/customizer.php +++ b/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', diff --git a/wp-content/themes/twentyseventeen/template-parts/header/header-image.php b/wp-content/themes/twentyseventeen/template-parts/header/header-image.php index 17ea8af16b..5dea9d812e 100644 --- a/wp-content/themes/twentyseventeen/template-parts/header/header-image.php +++ b/wp-content/themes/twentyseventeen/template-parts/header/header-image.php @@ -10,25 +10,11 @@ ?>
- +
+ +
- -
- -
- - - - - -
- -
- - +
diff --git a/wp-includes/class-wp-customize-manager.php b/wp-includes/class-wp-customize-manager.php index 150b123147..9f5e9a69da 100644 --- a/wp-includes/class-wp-customize-manager.php +++ b/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' ), diff --git a/wp-includes/css/customize-preview-rtl.css b/wp-includes/css/customize-preview-rtl.css index 250d3a0fd9..cf7424f962 100644 --- a/wp-includes/css/customize-preview-rtl.css +++ b/wp-includes/css/customize-preview-rtl.css @@ -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; diff --git a/wp-includes/css/customize-preview-rtl.min.css b/wp-includes/css/customize-preview-rtl.min.css index 40b4d93abf..9ff5f6aa82 100644 --- a/wp-includes/css/customize-preview-rtl.min.css +++ b/wp-includes/css/customize-preview-rtl.min.css @@ -1 +1 @@ -.customize-partial-refreshing{opacity:.25;-webkit-transition:opacity .25s;transition:opacity .25s;cursor:progress}.customize-partial-refreshing.widget-customizer-highlighted-widget{-webkit-box-shadow:none;box-shadow:none}.customize-partial-edit-shortcut,.widget .customize-partial-edit-shortcut{position:absolute;float:right;width:1px;height:1px;padding:0;margin:-1px -1px 0 0;border:0;background:0 0;color:transparent;-webkit-box-shadow:none;box-shadow:none;outline:0;z-index:5}.customize-partial-edit-shortcut button:active,.widget .customize-partial-edit-shortcut button:active{padding:3px;border:1px solid #0085ba}.customize-partial-edit-shortcut button,.widget .customize-partial-edit-shortcut button{position:absolute;right:-30px;top:2px;color:#fff;width:30px;height:30px;min-width:30px;min-height:30px;font-size:18px;z-index:5;background:#0085ba;-webkit-border-radius:50%;border-radius:50%;border:2px solid #fff;-webkit-box-shadow:0 2px 1px rgba(46,68,83,.15);box-shadow:0 2px 1px rgba(46,68,83,.15);text-align:center;cursor:pointer;box-sizing:border-box;padding:3px;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.4s;animation-duration:.4s;opacity:0;pointer-events:none;text-shadow:0 -1px 1px #006799,-1px 0 1px #006799,0 1px 1px #006799,1px 0 1px #006799}.customize-partial-edit-shortcut button svg{fill:#fff;min-width:20px;min-height:20px;width:20px;height:20px;margin:auto}.customize-partial-edit-shortcut button:focus,.customize-partial-edit-shortcut button:hover{background:#008ec2;border-color:#191e23}body.customize-partial-edit-shortcuts-shown .customize-partial-edit-shortcut button{-webkit-animation-name:customize-partial-edit-shortcut-bounce-appear;animation-name:customize-partial-edit-shortcut-bounce-appear;pointer-events:auto}body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut button{-webkit-animation-name:customize-partial-edit-shortcut-bounce-disappear;animation-name:customize-partial-edit-shortcut-bounce-disappear;pointer-events:none}.customize-partial-edit-shortcut-hidden .customize-partial-edit-shortcut button,.page-sidebar-collapsed .customize-partial-edit-shortcut button{visibility:hidden}@-webkit-keyframes customize-partial-edit-shortcut-bounce-appear{20%,40%,60%,80%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes customize-partial-edit-shortcut-bounce-appear{20%,40%,60%,80%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@-webkit-keyframes customize-partial-edit-shortcut-bounce-disappear{20%,40%,60%,80%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}20%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}40%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}60%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}80%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes customize-partial-edit-shortcut-bounce-disappear{20%,40%,60%,80%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}20%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}40%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}60%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}80%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@media screen and (max-width:800px){.customize-partial-edit-shortcut button,.widget .customize-partial-edit-shortcut button{right:-32px}}@media screen and (max-width:320px){.site-title,.widget-area .widget{padding-right:10px}.customize-partial-edit-shortcut button,.widget .customize-partial-edit-shortcut button{right:-30px}} \ No newline at end of file +.customize-partial-refreshing{opacity:.25;-webkit-transition:opacity .25s;transition:opacity .25s;cursor:progress}.customize-partial-refreshing.widget-customizer-highlighted-widget{-webkit-box-shadow:none;box-shadow:none}.customize-partial-edit-shortcut,.widget .customize-partial-edit-shortcut{position:absolute;float:right;width:1px;height:1px;padding:0;margin:-1px -1px 0 0;border:0;background:0 0;color:transparent;-webkit-box-shadow:none;box-shadow:none;outline:0;z-index:5}.customize-partial-edit-shortcut button:active,.widget .customize-partial-edit-shortcut button:active{padding:3px;border:1px solid #0085ba}.customize-partial-edit-shortcut button,.widget .customize-partial-edit-shortcut button{position:absolute;right:-30px;top:2px;color:#fff;width:30px;height:30px;min-width:30px;min-height:30px;font-size:18px;z-index:5;background:#0085ba;-webkit-border-radius:50%;border-radius:50%;border:2px solid #fff;-webkit-box-shadow:0 2px 1px rgba(46,68,83,.15);box-shadow:0 2px 1px rgba(46,68,83,.15);text-align:center;cursor:pointer;box-sizing:border-box;padding:3px;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.4s;animation-duration:.4s;opacity:0;pointer-events:none;text-shadow:0 -1px 1px #006799,-1px 0 1px #006799,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;min-width:20px;min-height:20px;width:20px;height:20px;margin:auto}.customize-partial-edit-shortcut button:focus,.customize-partial-edit-shortcut button:hover{background:#008ec2;border-color:#191e23}body.customize-partial-edit-shortcuts-shown .customize-partial-edit-shortcut button{-webkit-animation-name:customize-partial-edit-shortcut-bounce-appear;animation-name:customize-partial-edit-shortcut-bounce-appear;pointer-events:auto}body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut button{-webkit-animation-name:customize-partial-edit-shortcut-bounce-disappear;animation-name:customize-partial-edit-shortcut-bounce-disappear;pointer-events:none}.customize-partial-edit-shortcut-hidden .customize-partial-edit-shortcut button,.page-sidebar-collapsed .customize-partial-edit-shortcut button{visibility:hidden}@-webkit-keyframes customize-partial-edit-shortcut-bounce-appear{20%,40%,60%,80%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes customize-partial-edit-shortcut-bounce-appear{20%,40%,60%,80%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@-webkit-keyframes customize-partial-edit-shortcut-bounce-disappear{20%,40%,60%,80%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}20%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}40%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}60%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}80%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes customize-partial-edit-shortcut-bounce-disappear{20%,40%,60%,80%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}20%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}40%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}60%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}80%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@media screen and (max-width:800px){.customize-partial-edit-shortcut button,.widget .customize-partial-edit-shortcut button{right:-32px}}@media screen and (max-width:320px){.site-title,.widget-area .widget{padding-right:10px}.customize-partial-edit-shortcut button,.widget .customize-partial-edit-shortcut button{right:-30px}} \ No newline at end of file diff --git a/wp-includes/css/customize-preview.css b/wp-includes/css/customize-preview.css index c72675eeba..e099b303be 100644 --- a/wp-includes/css/customize-preview.css +++ b/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; diff --git a/wp-includes/css/customize-preview.min.css b/wp-includes/css/customize-preview.min.css index 2743b3b2e2..d4652036ac 100644 --- a/wp-includes/css/customize-preview.min.css +++ b/wp-includes/css/customize-preview.min.css @@ -1 +1 @@ -.customize-partial-refreshing{opacity:.25;-webkit-transition:opacity .25s;transition:opacity .25s;cursor:progress}.customize-partial-refreshing.widget-customizer-highlighted-widget{-webkit-box-shadow:none;box-shadow:none}.customize-partial-edit-shortcut,.widget .customize-partial-edit-shortcut{position:absolute;float:left;width:1px;height:1px;padding:0;margin:-1px 0 0 -1px;border:0;background:0 0;color:transparent;-webkit-box-shadow:none;box-shadow:none;outline:0;z-index:5}.customize-partial-edit-shortcut button:active,.widget .customize-partial-edit-shortcut button:active{padding:3px;border:1px solid #0085ba}.customize-partial-edit-shortcut button,.widget .customize-partial-edit-shortcut button{position:absolute;left:-30px;top:2px;color:#fff;width:30px;height:30px;min-width:30px;min-height:30px;font-size:18px;z-index:5;background:#0085ba;-webkit-border-radius:50%;border-radius:50%;border:2px solid #fff;-webkit-box-shadow:0 2px 1px rgba(46,68,83,.15);box-shadow:0 2px 1px rgba(46,68,83,.15);text-align:center;cursor:pointer;box-sizing:border-box;padding:3px;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.4s;animation-duration:.4s;opacity:0;pointer-events:none;text-shadow:0 -1px 1px #006799,1px 0 1px #006799,0 1px 1px #006799,-1px 0 1px #006799}.customize-partial-edit-shortcut button svg{fill:#fff;min-width:20px;min-height:20px;width:20px;height:20px;margin:auto}.customize-partial-edit-shortcut button:focus,.customize-partial-edit-shortcut button:hover{background:#008ec2;border-color:#191e23}body.customize-partial-edit-shortcuts-shown .customize-partial-edit-shortcut button{-webkit-animation-name:customize-partial-edit-shortcut-bounce-appear;animation-name:customize-partial-edit-shortcut-bounce-appear;pointer-events:auto}body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut button{-webkit-animation-name:customize-partial-edit-shortcut-bounce-disappear;animation-name:customize-partial-edit-shortcut-bounce-disappear;pointer-events:none}.customize-partial-edit-shortcut-hidden .customize-partial-edit-shortcut button,.page-sidebar-collapsed .customize-partial-edit-shortcut button{visibility:hidden}@-webkit-keyframes customize-partial-edit-shortcut-bounce-appear{20%,40%,60%,80%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes customize-partial-edit-shortcut-bounce-appear{20%,40%,60%,80%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@-webkit-keyframes customize-partial-edit-shortcut-bounce-disappear{20%,40%,60%,80%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}20%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}40%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}60%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}80%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes customize-partial-edit-shortcut-bounce-disappear{20%,40%,60%,80%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}20%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}40%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}60%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}80%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@media screen and (max-width:800px){.customize-partial-edit-shortcut button,.widget .customize-partial-edit-shortcut button{left:-32px}}@media screen and (max-width:320px){.site-title,.widget-area .widget{padding-left:10px}.customize-partial-edit-shortcut button,.widget .customize-partial-edit-shortcut button{left:-30px}} \ No newline at end of file +.customize-partial-refreshing{opacity:.25;-webkit-transition:opacity .25s;transition:opacity .25s;cursor:progress}.customize-partial-refreshing.widget-customizer-highlighted-widget{-webkit-box-shadow:none;box-shadow:none}.customize-partial-edit-shortcut,.widget .customize-partial-edit-shortcut{position:absolute;float:left;width:1px;height:1px;padding:0;margin:-1px 0 0 -1px;border:0;background:0 0;color:transparent;-webkit-box-shadow:none;box-shadow:none;outline:0;z-index:5}.customize-partial-edit-shortcut button:active,.widget .customize-partial-edit-shortcut button:active{padding:3px;border:1px solid #0085ba}.customize-partial-edit-shortcut button,.widget .customize-partial-edit-shortcut button{position:absolute;left:-30px;top:2px;color:#fff;width:30px;height:30px;min-width:30px;min-height:30px;font-size:18px;z-index:5;background:#0085ba;-webkit-border-radius:50%;border-radius:50%;border:2px solid #fff;-webkit-box-shadow:0 2px 1px rgba(46,68,83,.15);box-shadow:0 2px 1px rgba(46,68,83,.15);text-align:center;cursor:pointer;box-sizing:border-box;padding:3px;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.4s;animation-duration:.4s;opacity:0;pointer-events:none;text-shadow:0 -1px 1px #006799,1px 0 1px #006799,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;min-width:20px;min-height:20px;width:20px;height:20px;margin:auto}.customize-partial-edit-shortcut button:focus,.customize-partial-edit-shortcut button:hover{background:#008ec2;border-color:#191e23}body.customize-partial-edit-shortcuts-shown .customize-partial-edit-shortcut button{-webkit-animation-name:customize-partial-edit-shortcut-bounce-appear;animation-name:customize-partial-edit-shortcut-bounce-appear;pointer-events:auto}body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut button{-webkit-animation-name:customize-partial-edit-shortcut-bounce-disappear;animation-name:customize-partial-edit-shortcut-bounce-disappear;pointer-events:none}.customize-partial-edit-shortcut-hidden .customize-partial-edit-shortcut button,.page-sidebar-collapsed .customize-partial-edit-shortcut button{visibility:hidden}@-webkit-keyframes customize-partial-edit-shortcut-bounce-appear{20%,40%,60%,80%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes customize-partial-edit-shortcut-bounce-appear{20%,40%,60%,80%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@-webkit-keyframes customize-partial-edit-shortcut-bounce-disappear{20%,40%,60%,80%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}20%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}40%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}60%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}80%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes customize-partial-edit-shortcut-bounce-disappear{20%,40%,60%,80%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}20%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}40%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}60%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}80%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@media screen and (max-width:800px){.customize-partial-edit-shortcut button,.widget .customize-partial-edit-shortcut button{left:-32px}}@media screen and (max-width:320px){.site-title,.widget-area .widget{padding-left:10px}.customize-partial-edit-shortcut button,.widget .customize-partial-edit-shortcut button{left:-30px}} \ No newline at end of file diff --git a/wp-includes/theme.php b/wp-includes/theme.php index bf1c55cd85..865f851a83 100644 --- a/wp-includes/theme.php +++ b/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() ); } diff --git a/wp-includes/version.php b/wp-includes/version.php index 7c4ca20b7a..46a391101d 100644 --- a/wp-includes/version.php +++ b/wp-includes/version.php @@ -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.