Ticket #38995: 38995.7.patch

src/wp-content/themes/twentyseventeen/assets/css/ie8.css

@@ -65 +65 @@
         display: block;
 }
 
-.custom-header-image {
+.custom-header-media {
         background-position: bottom center;
 }
 
@@ -84 +84 @@
         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 +141 @@
         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;
 }
 

src/wp-content/themes/twentyseventeen/assets/css/ie9.css

@@ -4 +4 @@
 */
 
 .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 +32 @@
 @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;
         }

src/wp-content/themes/twentyseventeen/assets/js/customize-preview.js

@@ -123 +123 @@
         $.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' );
+                                }
                         } );
                 } );
         } );

src/wp-content/themes/twentyseventeen/assets/js/global.js

@@ -4 +4 @@
         // 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 +63 @@
                         // 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 +241 @@
                 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 );

src/wp-content/themes/twentyseventeen/inc/color-patterns.php

@@ -443 +443 @@
 .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; */
 }
 

src/wp-content/themes/twentyseventeen/inc/template-functions.php

@@ -35 +35 @@
         }
 
         // 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';
         }
 

src/wp-content/themes/twentyseventeen/style.css

@@ -1581 +1581 @@
 }
 
 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 +1594 @@
         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 +1613 @@
         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 +1634 @@
 }
 
 .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 +1653 @@
         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 +1669 @@
         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 +1714 @@
         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 +1726 @@
 
 /* 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 +3283 @@
         }
 
         .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 +3296 @@
         }
 
         .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 +3331 @@
         }
 
         .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 +3599 @@
         /* 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 +4139 @@
                 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 +4185 @@
         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 +4196 @@
         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 */

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

@@ -1 +1 @@
 <?php
 /**
- * Displays header image
+ * Displays header media
  *
  * @package WordPress
  * @subpackage Twenty_Seventeen
@@ -11 +11 @@
 ?>
 <div class="custom-header">
 
-        <?php if ( has_custom_header() ) : ?>
-                <div class="custom-header-image">
+                <div class="custom-header-media">
                         <?php the_custom_header_markup(); ?>
                 </div>
-        <?php endif; ?>
 
         <?php get_template_part( 'template-parts/header/site', 'branding' ); ?>