From e2b7762e9ad28e1c3a13ddb9e03f354989fbb4cc Mon Sep 17 00:00:00 2001 From: Joe McGill Date: Fri, 2 Dec 2016 05:12:41 +0000 Subject: [PATCH] Twenty Seventeen: Better handling of custom headers when no image is set. This ensures that a standard header is shown on the front page whenever a header video is set without a header image if the video doesn't load, e.g., on mobile sizes or if the JS doesn't fire. This adds a new class, `.has-header-video` that is added whenever the `wp-custom-header-video-loaded` event is fired, which is then used to style the custom headers along with `.has-header-image` whenever a header image is available. This also changes the class name on the custom header media wrapping `div` from `.custom-header-image` to `.custom-header-media`. Props laurelfulford, joemcgill. Fixes #38995. Built from https://develop.svn.wordpress.org/trunk@39413 git-svn-id: http://core.svn.wordpress.org/trunk@39353 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- .../themes/twentyseventeen/assets/css/ie8.css | 9 +- .../themes/twentyseventeen/assets/css/ie9.css | 22 +++-- .../assets/js/customize-preview.js | 6 +- .../twentyseventeen/assets/js/global.js | 10 ++- .../twentyseventeen/inc/color-patterns.php | 5 +- .../inc/template-functions.php | 2 +- wp-content/themes/twentyseventeen/style.css | 90 ++++++++++++------- .../template-parts/header/header-image.php | 6 +- wp-includes/version.php | 2 +- 9 files changed, 98 insertions(+), 54 deletions(-) diff --git a/wp-content/themes/twentyseventeen/assets/css/ie8.css b/wp-content/themes/twentyseventeen/assets/css/ie8.css index 83342bafbe..bf45c26cb8 100644 --- a/wp-content/themes/twentyseventeen/assets/css/ie8.css +++ b/wp-content/themes/twentyseventeen/assets/css/ie8.css @@ -65,7 +65,7 @@ img { display: block; } -.custom-header-image { +.custom-header-media { background-position: bottom center; } @@ -84,8 +84,7 @@ img { width: 100%; } -.has-header-image .custom-header-image img, -.has-header-image .custom-header-image video { +.has-header-image .custom-header-media img { left: 0; top: 0; } @@ -142,8 +141,8 @@ img { padding-top: 0; } -.twentyseventeen-front-page .custom-header-image, -.blog.home .custom-header-image { +.twentyseventeen-front-page .custom-header-media, +.blog.home .custom-header-media { background-position: center center; } diff --git a/wp-content/themes/twentyseventeen/assets/css/ie9.css b/wp-content/themes/twentyseventeen/assets/css/ie9.css index 24c8905162..9f8f7664da 100644 --- a/wp-content/themes/twentyseventeen/assets/css/ie9.css +++ b/wp-content/themes/twentyseventeen/assets/css/ie9.css @@ -4,22 +4,26 @@ Description: IE9 specific styles. */ .has-header-image.twentyseventeen-front-page .custom-header, -.has-header-image.home.blog .custom-header { +.has-header-video.twentyseventeen-front-page .custom-header, +.has-header-image.home.blog .custom-header, +.has-header-video.home.blog .custom-header { height: 300px; } -.has-header-image .custom-header-image img, -.has-header-image .custom-header-image video, -.has-header-image .custom-header-image iframe { +.has-header-image .custom-header-media img, +.has-header-video .custom-header-media video, +.has-header-video .custom-header-media iframe { min-width: 100%; } @media screen and (min-width: 30em) { .has-header-image.twentyseventeen-front-page .custom-header, + .has-header-video.twentyseventeen-front-page .custom-header, .has-header-image.home.blog .custom-header, - .twentyseventeen-front-page.has-header-image .custom-header-image, - .home.blog.has-header-image .custom-header-image, + .has-header-video.home.blog .custom-header, + .twentyseventeen-front-page.has-header-image .custom-header-media, + .home.blog.has-header-image .custom-header-media, .panel-image { height: 700px; } @@ -28,9 +32,11 @@ Description: IE9 specific styles. @media screen and (min-width: 48em) { .has-header-image.twentyseventeen-front-page .custom-header, + .has-header-video.twentyseventeen-front-page .custom-header, .has-header-image.home.blog .custom-header, - .twentyseventeen-front-page.has-header-image .custom-header-image, - .home.blog.has-header-image .custom-header-image, + .has-header-video.home.blog .custom-header, + .twentyseventeen-front-page.has-header-image .custom-header-media, + .home.blog.has-header-image .custom-header-media, .panel-image { height: 1000px; } diff --git a/wp-content/themes/twentyseventeen/assets/js/customize-preview.js b/wp-content/themes/twentyseventeen/assets/js/customize-preview.js index 651e034b84..11c9ed46ae 100644 --- a/wp-content/themes/twentyseventeen/assets/js/customize-preview.js +++ b/wp-content/themes/twentyseventeen/assets/js/customize-preview.js @@ -123,11 +123,15 @@ $.each( [ 'external_header_video', 'header_image', 'header_video' ], function( index, settingId ) { wp.customize( settingId, function( setting ) { setting.bind(function() { - if ( hasHeaderImage() || ( hasHeaderVideo() && $( 'body' ).hasClass( 'twentyseventeen-front-page' ) ) ) { + if ( hasHeaderImage() ) { $( document.body ).addClass( 'has-header-image' ); } else { $( document.body ).removeClass( 'has-header-image' ); } + + if ( ! hasHeaderVideo() ) { + $( document.body ).removeClass( 'has-header-video' ); + } } ); } ); } ); diff --git a/wp-content/themes/twentyseventeen/assets/js/global.js b/wp-content/themes/twentyseventeen/assets/js/global.js index cb8a6ec92f..6e2f42902e 100644 --- a/wp-content/themes/twentyseventeen/assets/js/global.js +++ b/wp-content/themes/twentyseventeen/assets/js/global.js @@ -4,7 +4,6 @@ // Variables and DOM Caching. var $body = $( 'body' ), $customHeader = $body.find( '.custom-header' ), - $customHeaderImage = $customHeader.find( '.custom-header-image' ), $branding = $customHeader.find( '.site-branding' ), $navigation = $body.find( '.navigation-top' ), $navWrap = $navigation.find( '.wrap' ), @@ -64,8 +63,8 @@ // Make sure the nav isn't taller than two rows. if ( navIsNotTooTall ) { - // When there's a custom header image, the header offset includes the height of the navigation. - if ( isFrontPage && $customHeaderImage.length ) { + // When there's a custom header image or video, the header offset includes the height of the navigation. + if ( isFrontPage && ( $body.hasClass( 'has-header-image' ) || $body.hasClass( 'has-header-video' ) ) ) { headerOffset = $customHeader.innerHeight() - navigationOuterHeight; } else { headerOffset = $customHeader.innerHeight(); @@ -242,4 +241,9 @@ setTimeout( adjustHeaderHeight, 1000 ); }); + // Add header video class after the video is loaded. + $( document ).on( 'wp-custom-header-video-loaded', function() { + $body.addClass( 'has-header-video' ); + }); + })( jQuery ); diff --git a/wp-content/themes/twentyseventeen/inc/color-patterns.php b/wp-content/themes/twentyseventeen/inc/color-patterns.php index a59e64457f..bd261ef73c 100644 --- a/wp-content/themes/twentyseventeen/inc/color-patterns.php +++ b/wp-content/themes/twentyseventeen/inc/color-patterns.php @@ -443,8 +443,11 @@ body.colors-custom, .colors-custom .next.page-numbers:focus, .colors-custom .next.page-numbers:hover, .colors-custom.has-header-image .site-title, +.colors-custom.has-header-video .site-title, .colors-custom.has-header-image .site-title a, -.colors-custom.has-header-image .site-description { +.colors-custom.has-header-video .site-title a, +.colors-custom.has-header-image .site-description, +.colors-custom.has-header-video .site-description { color: hsl( ' . $hue . ', ' . $saturation . ', 100% ); /* base: #fff; */ } diff --git a/wp-content/themes/twentyseventeen/inc/template-functions.php b/wp-content/themes/twentyseventeen/inc/template-functions.php index 4479f3788a..6b136c4765 100644 --- a/wp-content/themes/twentyseventeen/inc/template-functions.php +++ b/wp-content/themes/twentyseventeen/inc/template-functions.php @@ -35,7 +35,7 @@ function twentyseventeen_body_classes( $classes ) { } // Add a class if there is a custom header. - if ( has_header_image() || has_header_video() && is_front_page() ) { + if ( has_header_image() ) { $classes[] = 'has-header-image'; } diff --git a/wp-content/themes/twentyseventeen/style.css b/wp-content/themes/twentyseventeen/style.css index 8b0e4faa30..2c323193f2 100644 --- a/wp-content/themes/twentyseventeen/style.css +++ b/wp-content/themes/twentyseventeen/style.css @@ -1581,7 +1581,9 @@ body { } body.has-header-image .site-title, -body.has-header-image .site-title a { +body.has-header-video .site-title, +body.has-header-image .site-title a, +body.has-header-video .site-title a { color: #fff; } @@ -1592,7 +1594,8 @@ body.has-header-image .site-title a { margin-bottom: 0; } -body.has-header-image .site-description { +body.has-header-image .site-description, +body.has-header-video .site-description { color: #fff; opacity: 0.8; } @@ -1610,7 +1613,8 @@ body.has-header-image .site-description { width: auto; } -body.home.title-tagline-hidden.has-header-image .custom-logo-link img { +body.home.title-tagline-hidden.has-header-image .custom-logo-link img, +body.home.title-tagline-hidden.has-header-video .custom-logo-link img { max-height: 200px; max-width: 100%; } @@ -1630,14 +1634,16 @@ body:not(.title-tagline-hidden) .site-branding-text { } .has-header-image.twentyseventeen-front-page .custom-header, -.has-header-image.home.blog .custom-header { +.has-header-video.twentyseventeen-front-page .custom-header, +.has-header-image.home.blog .custom-header, +.has-header-video.home.blog .custom-header { display: table; height: 300px; height: 75vh; width: 100%; } -.custom-header-image { +.custom-header-media { bottom: 0; left: 0; overflow: hidden; @@ -1647,7 +1653,7 @@ body:not(.title-tagline-hidden) .site-branding-text { width: 100%; } -.custom-header-image:before { +.custom-header-media:before { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.3+75 */ background: -moz-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%); /* Chrome10-25,Safari5.1-6 */ @@ -1663,9 +1669,9 @@ body:not(.title-tagline-hidden) .site-branding-text { z-index: 2; } -.has-header-image .custom-header-image img, -.has-header-image .custom-header-image video, -.has-header-image .custom-header-image iframe { +.has-header-image .custom-header-media img, +.has-header-video .custom-header-media video, +.has-header-video .custom-header-media iframe { position: fixed; height: auto; left: 50%; @@ -1708,7 +1714,7 @@ body:not(.title-tagline-hidden) .site-branding-text { top: 62px; } -.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-image img { +.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img { bottom: 0; position: absolute; top: auto; @@ -1720,12 +1726,14 @@ body:not(.title-tagline-hidden) .site-branding-text { /* Hides div in Customizer preview when header images or videos change. */ -body:not(.has-header-image) .custom-header-image { +body:not(.has-header-image):not(.has-header-video) .custom-header-media { display: none; } .has-header-image.twentyseventeen-front-page .site-branding, -.has-header-image.home.blog .site-branding { +.has-header-video.twentyseventeen-front-page .site-branding, +.has-header-image.home.blog .site-branding, +.has-header-video.home.blog .site-branding { display: table-cell; height: 100%; vertical-align: bottom; @@ -3275,7 +3283,9 @@ object { } .has-header-image.twentyseventeen-front-page .site-branding, - .has-header-image.home.blog .site-branding { + .has-header-video.twentyseventeen-front-page .site-branding, + .has-header-image.home.blog .site-branding, + .has-header-video.home.blog .site-branding { bottom: 0; display: block; left: 0; @@ -3286,23 +3296,28 @@ object { } .has-header-image.twentyseventeen-front-page .custom-header, - .has-header-image.home.blog .custom-header { + .has-header-video.twentyseventeen-front-page .custom-header, + .has-header-image.home.blog .custom-header, + .has-header-video.home.blog .custom-header { display: block; height: auto; } - .custom-header-image { + .custom-header-media { height: 165px; position: relative; } - .twentyseventeen-front-page.has-header-image .custom-header-image, - .home.blog.has-header-image .custom-header-image { + .twentyseventeen-front-page.has-header-image .custom-header-media, + .twentyseventeen-front-page.has-header-video .custom-header-media, + .home.blog.has-header-image .custom-header-media, + .home.blog.has-header-video .custom-header-media { height: 0; position: relative; } - .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-image { + .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media, + .has-header-video:not(.twentyseventeen-front-page):not(.home) .custom-header-media { bottom: 0; height: auto; left: 0; @@ -3316,11 +3331,13 @@ object { } .custom-logo-link img, - body.home.title-tagline-hidden.has-header-image .custom-logo-link img { + body.home.title-tagline-hidden.has-header-image .custom-logo-link img, + body.home.title-tagline-hidden.has-header-video .custom-logo-link img { max-width: 350px; } - .title-tagline-hidden.home.has-header-image .custom-logo-link img { + .title-tagline-hidden.home.has-header-image .custom-logo-link img, + .title-tagline-hidden.home.has-header-video .custom-logo-link img { max-height: 200px; } @@ -3582,25 +3599,33 @@ object { /* Front Page */ .twentyseventeen-front-page.has-header-image .site-branding, - .home.blog.has-header-image .site-branding { + .twentyseventeen-front-page.has-header-video .site-branding, + .home.blog.has-header-image .site-branding, + .home.blog.has-header-video .site-branding { margin-bottom: 70px; } - .twentyseventeen-front-page.has-header-image .custom-header-image, - .home.blog.has-header-image .custom-header-image { + .twentyseventeen-front-page.has-header-image .custom-header-media, + .twentyseventeen-front-page.has-header-video .custom-header-media, + .home.blog.has-header-image .custom-header-media, + .home.blog.has-header-video .custom-header-media { height: 1200px; height: 100vh; max-height: 100%; overflow: hidden; } - .twentyseventeen-front-page.has-header-image .custom-header-image:before, - .home.blog.has-header-image .custom-header-image:before { + .twentyseventeen-front-page.has-header-image .custom-header-media:before, + .twentyseventeen-front-page.has-header-video .custom-header-media:before, + .home.blog.has-header-image .custom-header-media:before, + .home.blog.has-header-video .custom-header-media:before { height: 33%; } - .admin-bar.twentyseventeen-front-page.has-header-image .custom-header-image, - .admin-bar.home.blog.has-header-image .custom-header-image { + .admin-bar.twentyseventeen-front-page.has-header-image .custom-header-media, + .admin-bar.twentyseventeen-front-page.has-header-video .custom-header-media, + .admin-bar.home.blog.has-header-image .custom-header-media, + .admin-bar.home.blog.has-header-video .custom-header-media { height: calc(100vh - 32px); } @@ -4114,12 +4139,14 @@ object { padding: 0; } - .custom-header-image { + .custom-header-media { padding: 0; } .twentyseventeen-front-page.has-header-image .site-branding, - .home.blog.has-header-image .site-branding { + .twentyseventeen-front-page.has-header-video .site-branding, + .home.blog.has-header-image .site-branding, + .home.blog.has-header-video .site-branding { position: relative; } @@ -4158,7 +4185,9 @@ object { a, .site-title a, .twentyseventeen-front-page.has-header-image .site-title, - .twentyseventeen-front-page.has-header-image .site-title a { + .twentyseventeen-front-page.has-header-video .site-title, + .twentyseventeen-front-page.has-header-image .site-title a, + .twentyseventeen-front-page.has-header-video .site-title a { color: #222 !important; /* Make sure color schemes don't affect to print */ } @@ -4167,6 +4196,7 @@ object { blockquote, .site-description, .twentyseventeen-front-page.has-header-image .site-description, + .twentyseventeen-front-page.has-header-video .site-description, .entry-meta, .entry-meta a { color: #777 !important; /* Make sure color schemes don't affect to print */ 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 3f13048bd5..390debcd03 100644 --- a/wp-content/themes/twentyseventeen/template-parts/header/header-image.php +++ b/wp-content/themes/twentyseventeen/template-parts/header/header-image.php @@ -1,6 +1,6 @@
- -
+
- diff --git a/wp-includes/version.php b/wp-includes/version.php index a41db962e8..66cf3eb391 100644 --- a/wp-includes/version.php +++ b/wp-includes/version.php @@ -4,7 +4,7 @@ * * @global string $wp_version */ -$wp_version = '4.8-alpha-39411'; +$wp_version = '4.8-alpha-39413'; /** * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.