Changeset 29034

Timestamp:

07/08/2014 07:52:17 PM (12 years ago)

Author:

helen

Message:

Customizer info section:

• Only show the theme info when doing a live preview of another theme.
• Replace with helper text about what you are customizing and what the Customizer is for.
• Fix focus styling.

props celloexpressions, westonruter. fixes #28550.

Location:

trunk/src/wp-admin

Files:

• css/customize-controls.css (modified) (4 diffs)
• customize.php (modified) (2 diffs)
• js/customize-controls.js (modified) (2 diffs)

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

@@ -51 +51 @@
 }
 
-#customize-info.open .accordion-section-title,
-#customize-info .accordion-section-title:hover,
-#customize-info .accordion-section-title:focus {
-        color: #555555;
-}
-
 #customize-info.open .accordion-section-title:after,
 #customize-info .accordion-section-title:hover:after,
@@ -63 +57 @@
 }
 
-#customize-info.open .accordion-section-title {
-        border-color: transparent;
-}
-
 #customize-info .preview-notice {
         font-size: 13px;
@@ -104 +94 @@
 }
 
+#customize-info.open .accordion-section-title,
+#customize-info .accordion-section-title:hover,
+#customize-info .accordion-section-title:focus,
 #customize-theme-controls .control-section:hover > .accordion-section-title,
 #customize-theme-controls .control-section .accordion-section-title:hover,
@@ -126 +119 @@
 }
 
+#customize-info.open,
 #customize-theme-controls .control-section.open {
         border-bottom: 1px solid #eeeeee;

trunk/src/wp-admin/customize.php

@@ -120 +120 @@
                 <?php
                         $screenshot = $wp_customize->theme()->get_screenshot();
-                        $cannot_expand = ! ( $screenshot || $wp_customize->theme()->get('Description') );
+                        $cannot_expand = ! ( $wp_customize->is_theme_active() || $screenshot || $wp_customize->theme()->get('Description') );
                 ?>
 
@@ -128 +128 @@
                                 <div class="accordion-section-title" aria-label="<?php esc_attr_e( 'Theme Customizer Options' ); ?>" tabindex="0">
                                         <span class="preview-notice"><?php
-                                                /* translators: %s is the theme name in the Customize/Live Preview pane */
-                                                echo sprintf( __( 'You are previewing %s' ), '<strong class="theme-name">' . $wp_customize->theme()->display('Name') . '</strong>' );
+                                                if ( ! $wp_customize->is_theme_active() ) {
+                                                        /* translators: %s is the theme name in the Customize/Live Preview pane */
+                                                        echo sprintf( __( 'You are previewing %s' ), '<strong class="theme-name">' . $wp_customize->theme()->display('Name') . '</strong>' );
+                                                } else {
+                                                        /* translators: %s is the site title in the Customize pane */
+                                                        echo sprintf( __( 'You are customizing %s' ), '<strong class="theme-name site-title">' . get_bloginfo( 'name' ) . '</strong>' );
+                                                }
                                         ?></span>
                                 </div>
                                 <?php if ( ! $cannot_expand ) : ?>
                                 <div class="accordion-section-content">
-                                        <?php if ( $screenshot ) : ?>
-                                                <img class="theme-screenshot" src="<?php echo esc_url( $screenshot ); ?>" />
-                                        <?php endif; ?>
-
-                                        <?php if ( $wp_customize->theme()->get('Description') ): ?>
-                                                <div class="theme-description"><?php echo $wp_customize->theme()->display('Description'); ?></div>
-                                        <?php endif; ?>
+                                        <?php if ( ! $wp_customize->is_theme_active() ) :
+                                                if ( $screenshot ) : ?>
+                                                        <img class="theme-screenshot" src="<?php echo esc_url( $screenshot ); ?>" />
+                                                <?php endif; ?>
+
+                                                <?php if ( $wp_customize->theme()->get('Description') ): ?>
+                                                        <div class="theme-description"><?php echo $wp_customize->theme()->display('Description'); ?></div>
+                                                <?php endif;
+                                        else:
+                                                echo __( '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.' );
+                                        endif; ?>
                                 </div>
                                 <?php endif; ?>

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

@@ -917 +917 @@
                         body = $( document.body ),
                         overlay = body.children( '.wp-full-overlay' ),
+                        title = $( '#customize-info .theme-name.site-title' ),
                         closeBtn = $( '.customize-controls-close' ),
                         saveBtn = $( '#save' );
@@ -1112 +1113 @@
                         event.preventDefault();
                 });
+
+                // Bind site title display to the corresponding field.
+                if ( title.length ) {
+                        $( '#customize-control-blogname input' ).on( 'input', function() {
+                                title.text(  this.value );
+                        } );
+                }
 
                 // Create a potential postMessage connection with the parent frame.