From f5cdba121f5604d04b819caba35832212a0624cb Mon Sep 17 00:00:00 2001
From: "David A. Kennedy" <me@davidakennedy.com>
Date: Mon, 14 Nov 2016 11:23:32 +0000
Subject: [PATCH] Twenty Seventeen: Make custom header preview match front end
 in Customizer when changed
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Toggles `has-header-image` body class  in Customizer preview whenever images or videos are added or removed.
* Hides the `.custom-header-image`div in CSS when an image or video haven't been set so preview changes are smoother.
* Also fixes the main issues in #38391 – making the preview match.

Props bradyvercher.

Fixes #38627.
See #38391.

Built from https://develop.svn.wordpress.org/trunk@39220


git-svn-id: http://core.svn.wordpress.org/trunk@39160 1a063a9b-81f0-0310-95a4-ce76da25c4cd
---
 .../assets/js/customize-preview.js            | 28 +++++++++++++++++++
 wp-content/themes/twentyseventeen/style.css   |  4 ++-
 wp-includes/version.php                       |  2 +-
 3 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/wp-content/themes/twentyseventeen/assets/js/customize-preview.js b/wp-content/themes/twentyseventeen/assets/js/customize-preview.js
index 74b4072b71..4981980b5d 100644
--- a/wp-content/themes/twentyseventeen/assets/js/customize-preview.js
+++ b/wp-content/themes/twentyseventeen/assets/js/customize-preview.js
@@ -102,4 +102,32 @@
 			}
 		} );
 	} );
+
+	// Whether a header image is available.
+	function hasHeaderImage() {
+		var image = wp.customize( 'header_image' )();
+		return '' !== image && 'remove-header' !== image;
+	}
+
+	// Whether a header video is available.
+	function hasHeaderVideo() {
+		var externalVideo = wp.customize( 'external_header_video' )(),
+			video = wp.customize( 'header_video' )();
+
+		return '' !== externalVideo || ( 0 !== video && '' !== video );
+	}
+
+	// Toggle a body class if a custom header exists.
+	$.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' ) ) ) {
+					$( document.body ).addClass( 'has-header-image' );
+				} else {
+					$( document.body ).removeClass( 'has-header-image' );
+				}
+			} );
+		} );
+	} );
+
 } )( jQuery );
diff --git a/wp-content/themes/twentyseventeen/style.css b/wp-content/themes/twentyseventeen/style.css
index 96db6648c9..61eb2f4262 100644
--- a/wp-content/themes/twentyseventeen/style.css
+++ b/wp-content/themes/twentyseventeen/style.css
@@ -1690,8 +1690,10 @@ body:not(.title-tagline-hidden) .site-branding-text {
 	transform: translateX(-50%) translateY(0);
 }
 
+/* Hides div in Customizer preview when header images or videos change. */
+
 body:not(.has-header-image) .custom-header-image {
-	padding: 5% 0;
+	display: none;
 }
 
 .has-header-image.twentyseventeen-front-page .site-branding,
diff --git a/wp-includes/version.php b/wp-includes/version.php
index 8087608771..b8ba8bd947 100644
--- a/wp-includes/version.php
+++ b/wp-includes/version.php
@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.7-beta3-39219';
+$wp_version = '4.7-beta3-39220';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.