Make WordPress Core

Changeset 29034


Ignore:
Timestamp:
07/08/2014 07:52:17 PM (11 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:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/customize-controls.css

    r29031 r29034  
    5151}
    5252
    53 #customize-info.open .accordion-section-title,
    54 #customize-info .accordion-section-title:hover,
    55 #customize-info .accordion-section-title:focus {
    56     color: #555555;
    57 }
    58 
    5953#customize-info.open .accordion-section-title:after,
    6054#customize-info .accordion-section-title:hover:after,
     
    6357}
    6458
    65 #customize-info.open .accordion-section-title {
    66     border-color: transparent;
    67 }
    68 
    6959#customize-info .preview-notice {
    7060    font-size: 13px;
     
    10494}
    10595
     96#customize-info.open .accordion-section-title,
     97#customize-info .accordion-section-title:hover,
     98#customize-info .accordion-section-title:focus,
    10699#customize-theme-controls .control-section:hover > .accordion-section-title,
    107100#customize-theme-controls .control-section .accordion-section-title:hover,
     
    126119}
    127120
     121#customize-info.open,
    128122#customize-theme-controls .control-section.open {
    129123    border-bottom: 1px solid #eeeeee;
  • trunk/src/wp-admin/customize.php

    r29031 r29034  
    120120        <?php
    121121            $screenshot = $wp_customize->theme()->get_screenshot();
    122             $cannot_expand = ! ( $screenshot || $wp_customize->theme()->get('Description') );
     122            $cannot_expand = ! ( $wp_customize->is_theme_active() || $screenshot || $wp_customize->theme()->get('Description') );
    123123        ?>
    124124
     
    128128                <div class="accordion-section-title" aria-label="<?php esc_attr_e( 'Theme Customizer Options' ); ?>" tabindex="0">
    129129                    <span class="preview-notice"><?php
    130                         /* translators: %s is the theme name in the Customize/Live Preview pane */
    131                         echo sprintf( __( 'You are previewing %s' ), '<strong class="theme-name">' . $wp_customize->theme()->display('Name') . '</strong>' );
     130                        if ( ! $wp_customize->is_theme_active() ) {
     131                            /* translators: %s is the theme name in the Customize/Live Preview pane */
     132                            echo sprintf( __( 'You are previewing %s' ), '<strong class="theme-name">' . $wp_customize->theme()->display('Name') . '</strong>' );
     133                        } else {
     134                            /* translators: %s is the site title in the Customize pane */
     135                            echo sprintf( __( 'You are customizing %s' ), '<strong class="theme-name site-title">' . get_bloginfo( 'name' ) . '</strong>' );
     136                        }
    132137                    ?></span>
    133138                </div>
    134139                <?php if ( ! $cannot_expand ) : ?>
    135140                <div class="accordion-section-content">
    136                     <?php if ( $screenshot ) : ?>
    137                         <img class="theme-screenshot" src="<?php echo esc_url( $screenshot ); ?>" />
    138                     <?php endif; ?>
    139 
    140                     <?php if ( $wp_customize->theme()->get('Description') ): ?>
    141                         <div class="theme-description"><?php echo $wp_customize->theme()->display('Description'); ?></div>
    142                     <?php endif; ?>
     141                    <?php if ( ! $wp_customize->is_theme_active() ) :
     142                        if ( $screenshot ) : ?>
     143                            <img class="theme-screenshot" src="<?php echo esc_url( $screenshot ); ?>" />
     144                        <?php endif; ?>
     145
     146                        <?php if ( $wp_customize->theme()->get('Description') ): ?>
     147                            <div class="theme-description"><?php echo $wp_customize->theme()->display('Description'); ?></div>
     148                        <?php endif;
     149                    else:
     150                        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.' );
     151                    endif; ?>
    143152                </div>
    144153                <?php endif; ?>
  • trunk/src/wp-admin/js/customize-controls.js

    r29031 r29034  
    917917            body = $( document.body ),
    918918            overlay = body.children( '.wp-full-overlay' ),
     919            title = $( '#customize-info .theme-name.site-title' ),
    919920            closeBtn = $( '.customize-controls-close' ),
    920921            saveBtn = $( '#save' );
     
    11121113            event.preventDefault();
    11131114        });
     1115
     1116        // Bind site title display to the corresponding field.
     1117        if ( title.length ) {
     1118            $( '#customize-control-blogname input' ).on( 'input', function() {
     1119                title.text(  this.value );
     1120            } );
     1121        }
    11141122
    11151123        // Create a potential postMessage connection with the parent frame.
Note: See TracChangeset for help on using the changeset viewer.