Customize: Only show video header controls if previewing front page; show explanatory notice when controls are hidden.

Also include todo for the `header_video` control's `button_labels`. See #38796.

Props westonruter, joemcgill, celloexpressions.
Fixes #38778.

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


git-svn-id: http://core.svn.wordpress.org/trunk@39177 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/js/customize-controls.js

@@ -5284,6 +5284,26 @@
 			} );
 		} );
 
+		// Toggle visibility of Header Video notice when active state change.
+		api.control( 'header_video', function( headerVideoControl ) {
+			headerVideoControl.deferred.embedded.done( function() {
+				var toggleNotice = function() {
+					var section = api.section( headerVideoControl.section() ), notice;
+					if ( ! section ) {
+						return;
+					}
+					notice = section.container.find( '.header-video-not-currently-previewable:first' );
+					if ( headerVideoControl.active.get() ) {
+						notice.stop().slideUp( 'fast' );
+					} else {
+						notice.stop().slideDown( 'fast' );
+					}
+				};
+				toggleNotice();
+				headerVideoControl.active.bind( toggleNotice );
+			} );
+		} );
+
 		// Update the setting validities.
 		api.previewer.bind( 'selective-refresh-setting-validities', function handleSelectiveRefreshedSettingValidities( settingValidities ) {
 			api._handleSettingValidities( {

wp-includes/class-wp-customize-manager.php

@@ -3407,7 +3407,12 @@ final class WP_Customize_Manager {
 
 		if ( current_theme_supports( 'custom-header', 'video' ) ) {
 			$title = __( 'Header Media' );
-			$description = __( 'If you add a video, the image will be used as a fallback while the video loads.' );
+			$description = '<p>' . __( 'If you add a video, the image will be used as a fallback while the video loads.' ) . '</p>';
+
+			// @todo Customizer sections should support having notifications just like controls do. See <https://core.trac.wordpress.org/ticket/38794>.
+			$description .= '<div class="customize-control-notifications-container header-video-not-currently-previewable" style="display: none"><ul>';
+			$description .= '<li class="notice notice-info">' . __( 'This theme doesn\'t support video headers on this page. Navigate to the front page or another page that supports video headers.' ) . '</li>';
+			$description .= '</ul></div>';
 			$width = absint( get_theme_support( 'custom-header', 'width' ) );
 			$height = absint( get_theme_support( 'custom-header', 'height' ) );
 			if ( $width && $height ) {
@@ -3478,13 +3483,15 @@ final class WP_Customize_Manager {
 			'description'    => $control_description,
 			'section'        => 'header_image',
 			'mime_type'      => 'video',
+			// @todo These button_labels can be removed once WP_Customize_Media_Control provides mime_type-specific labels automatically. See <https://core.trac.wordpress.org/ticket/38796>.
 			'button_labels'  => array(
 				'select'       => __( 'Select Video' ),
 				'change'       => __( 'Change Video' ),
 				'placeholder'  => __( 'No video selected' ),
 				'frame_title'  => __( 'Select Video' ),
 				'frame_button' => __( 'Choose Video' ),
-			)
+			),
+			'active_callback' => 'is_front_page',
 		) ) );
 
 		$this->add_control( 'external_header_video', array(
@@ -3492,6 +3499,7 @@ final class WP_Customize_Manager {
 			'type'           => 'url',
 			'description'    => __( 'Or, enter a YouTube URL:' ),
 			'section'        => 'header_image',
+			'active_callback'=> 'is_front_page',
 		) );
 
 		$this->add_control( new WP_Customize_Header_Image_Control( $this ) );

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.7-beta3-39236';
+$wp_version = '4.7-beta3-39237';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.