Ticket #38778: 38778.notification.2.diff

src/wp-admin/css/customize-controls.css

@@ -1186 +1186 @@
 }
 
 /**
+ * Header Video
+ */
+.header-video-not-currently-previewable {
+        display: none; /* Visibility toggled by change to the header_video control's active state. */
+}
+
+/**
  * Themes
  */
 

src/wp-admin/js/customize-controls.js

@@ -5284 +5284 @@
                         } );
                 } );
 
+                // 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( {

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

@@ -3407 +3407 @@
 
                 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.
+                        $description .= '<div class="customize-control-notifications-container header-video-not-currently-previewable"><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 does.' ) . '</li>';
+                        $description .= '</ul></div>';
                         $width = absint( get_theme_support( 'custom-header', 'width' ) );
                         $height = absint( get_theme_support( 'custom-header', 'height' ) );
                         if ( $width && $height ) {
@@ -3484 +3489 @@
                                 '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 +3498 @@
                         '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 ) );