Ticket #34747: b2088ce.diff

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

@@ -418 +418 @@
         transition: left ease-in-out .18s;
 }
 
+#customize-info.no-title {
+        display:none;
+}
+
 .ios #customize-info,
 .ios #customize-theme-controls > ul > .accordion-section {
         -webkit-transition: left 0s;

src/wp-admin/customize.php

@@ -132 +132 @@
                         <div id="customize-info" class="accordion-section customize-info">
                                 <div class="accordion-section-title">
                                         <span class="preview-notice"><?php
-                                                echo sprintf( __( 'You are customizing %s' ), '<strong class="panel-title site-title">' . get_bloginfo( 'name' ) . '</strong>' );
+                                                echo sprintf( __( 'You are customizing %s' ), '<strong class="panel-title site-title">' . $wp_customize->get_root_panel_title() . '</strong>' );
                                         ?></span>
-                                        <button class="customize-help-toggle dashicons dashicons-editor-help" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
+                                        <?php
+                                        $root_panel_description = $wp_customize->get_root_panel_description();
+                                        if ( ! empty ( $root_panel_description ) ):
+                                        ?>
+                                                <button class="customize-help-toggle dashicons dashicons-editor-help" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
+                                        <?php endif; ?>
+                                </div>
+                                <div class="customize-panel-description">
+                                        <?php echo $root_panel_description; ?>
                                 </div>
-                                <div class="customize-panel-description"><?php
-                                        _e( 'The Customizer allows you to preview changes to your site before publishing them. You can also navigate to different pages on your site to preview them.' );
-                                ?></div>
                         </div>
 
                         <div id="customize-theme-controls">

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

@@ -3250 +3250 @@
                 });
 
                 // Expand/Collapse the main customizer customize info.
-                $( '.customize-info' ).find( '> .accordion-section-title .customize-help-toggle' ).on( 'click keydown', function( event ) {
+                $( '#customize-info > .accordion-section-title .customize-help-toggle' ).on( 'click keydown', function( event ) {
                         if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
                                 return;
                         }
@@ -3654 +3654 @@
                 } );
 
                 // Bind site title display to the corresponding field.
-                if ( title.length ) {
-                        api( 'blogname', function( setting ) {
-                                var updateTitle = function() {
+                api( 'blogname', function( setting ) {
+                        var updateTitle = function() {
+
+                                // Set the Customizer title.
+                                if ( api.settings.isRootPanelTitleOverridden ) {
+                                        title.text( api.settings.filteredRootPanelTitle || '' );
+                                } else {
                                         title.text( $.trim( setting() ) || api.l10n.untitledBlogName );
-                                };
-                                setting.bind( updateTitle );
-                                updateTitle();
-                        } );
-                }
+                                }
+
+                                // If there's no title, set a class on the info section. The CSS will hide it.
+                                if ( ! title.text().length ) {
+                                        $( '#customize-info' ).addClass( 'no-title' );
+                                } else {
+                                        $( '#customize-info' ).removeClass( 'no-title' );
+                                }
+
+                        };
+                        setting.bind( updateTitle );
+                        updateTitle();
+                } );
 
                 /*
                  * Create a postMessage connection with a parent frame,

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

@@ -184 +184 @@
         protected $return_url;
 
         /**
+         * Title of the Customizer, shown in the top of the root panel.
+         *
+         * @since 4.6
+         * @access protected
+         * @var string
+         */
+        protected $root_panel_title;
+
+        /**
+         * Description of the Customizer, below the title.
+         *
+         * @since 4.6
+         * @access protected
+         * @var string
+         */
+        protected $root_panel_description;
+
+        /**
          * Mapping of 'panel', 'section', 'control' to the ID which should be autofocused.
          *
          * @since 4.4.0
@@ -1601 +1619 @@
         }
 
         /**
+         * Set Customizer title at top of root Customizer panel.
+         *
+         * Appears after text "You are customizing."
+         *
+         * @since 4.6
+         * @access public
+         * @param string $root_panel_title Appears above description.
+         */
+        public function set_root_panel_title( $root_panel_title ) {
+                $this->root_panel_title = $root_panel_title;
+        }
+
+        /**
+         * Get Customizer title at top of root Customizer panel
+         *
+         * Appears above the description.
+         *
+         * @since 4.6
+         * @access public
+         *
+         * @return string Root panel title.
+         */
+        public function get_root_panel_title() {
+                return is_null( $this->root_panel_title ) ? get_bloginfo( 'name' ) : $this->root_panel_title;
+        }
+
+        /**
+         * Set Customizer description.
+         *
+         * To be shown at the top of the Customizer root panel.
+         *
+         * @since 4.6
+         * @access public
+         * @param string $root_panel_description Appears after Customizer title.
+         */
+        public function set_root_panel_description( $root_panel_description ) {
+                $this->root_panel_description = $root_panel_description;
+        }
+
+        /**
+         * Get Customizer description, to be shown in the root panel.
+         *
+         * Appears after "You are customizing" and the Customizer title.
+         *
+         * @since 4.6
+         * @access public
+         *
+         * @return string Root panel description.
+         */
+        public function get_root_panel_description() {
+                $default_description = __( 'The Customizer allows you to preview changes to your site before publishing them. You can also navigate to different pages on your site to preview them.' );
+                return is_null( $this->root_panel_description ) ? $default_description : $this->root_panel_description;
+        }
+
+        /**
          * Set the autofocused constructs.
          *
          * @since 4.4.0
@@ -1727 +1800 @@
                         'documentTitleTmpl' => $this->get_document_title_template(),
                         'previewableDevices' => $this->get_previewable_devices(),
                         'selectiveRefreshEnabled' => isset( $this->selective_refresh ),
+                        'filteredRootPanelTitle' => $this->get_root_panel_title(),
+                        'isRootPanelTitleOverridden' => ! is_null( $this->root_panel_title ),
                 );
 
                 // Prepare Customize Section objects to pass to JavaScript.

tests/phpunit/tests/customize/manager.php

@@ -340 +340 @@
         }
 
         /**
+         * Test get_root_panel_title()/set_root_panel_title() methods.
+         *
+         * @see WP_Customize_Manager::get_root_panel_title();
+         * @see WP_Customize_Manager::set_root_panel_title();
+         */
+        function test_get_root_panel_title() {
+                $this->assertEquals( get_bloginfo( 'name' ), $this->manager->get_root_panel_title() );
+
+                $first_new_title = 'Different Title';
+                $this->manager->set_root_panel_title( $first_new_title );
+                $this->assertEquals( $first_new_title, $this->manager->get_root_panel_title() );
+
+                $second_new_title = 'Renamed Title';
+                $this->manager->set_root_panel_title( $second_new_title );
+                $this->assertEquals( $second_new_title, $this->manager->get_root_panel_title() );
+        }
+
+        /**
+         * Test get_root_panel_description()/set_root_panel_description() methods.
+         *
+         * @see WP_Customize_Manager::get_root_panel_title();
+         * @see WP_Customize_Manager::set_root_panel_title();
+         */
+        function test_get_root_panel_description() {
+                $default_description = __( 'The Customizer allows you to preview changes to your site before publishing them. You can also navigate to different pages on your site to preview them.' );
+                $this->assertEquals( $default_description, $this->manager->get_root_panel_description() );
+
+                $first_new_description = 'Another Description';
+                $this->manager->set_root_panel_description( $first_new_description );
+                $this->assertEquals( $first_new_description, $this->manager->get_root_panel_description() );
+
+                $second_new_description = '<em>Newest Description</em>';
+                $this->manager->set_root_panel_description( $second_new_description );
+                $this->assertEquals( $second_new_description, $this->manager->get_root_panel_description() );
+        }
+
+        /**
          * Test get_autofocus()/set_autofocus() methods.
          *
          * @see WP_Customize_Manager::get_autofocus()
@@ -425 +462 @@
                 $data = json_decode( $json, true );
                 $this->assertNotEmpty( $data );
 
-                $this->assertEqualSets( array( 'theme', 'url', 'browser', 'panels', 'sections', 'nonce', 'autofocus', 'documentTitleTmpl', 'previewableDevices', 'selectiveRefreshEnabled' ), array_keys( $data ) );
+                $this->assertEqualSets( array( 'theme', 'url', 'browser', 'panels', 'sections', 'nonce', 'autofocus', 'documentTitleTmpl', 'previewableDevices', 'selectiveRefreshEnabled', 'filteredRootPanelTitle', 'isRootPanelTitleOverridden' ), array_keys( $data ) );
                 $this->assertEquals( $autofocus, $data['autofocus'] );
                 $this->assertArrayHasKey( 'save', $data['nonce'] );
                 $this->assertArrayHasKey( 'preview', $data['nonce'] );