WordPress.org
Get WordPress

Make WordPress Core

Ticket #30409: 30409.4.diff

File 30409.4.diff, 17.1 KB (added by ocean90, 11 years ago)

  • src/wp-content/themes/twentyfifteen/inc/customizer.php

     
    2727                'transport'         => 'postMessage',
    2828        ) );
    2929
    30         $wp_customize->add_setting( 'color_scheme_css', array(
    31                 'default'   => '',
    32                 'transport' => 'postMessage',
    33         ) );
    34 
    3530        $wp_customize->add_control( 'color_scheme', array(
    3631                'label'    => esc_html__( 'Base Color Scheme', 'twentyfifteen' ),
    3732                'section'  => 'colors',
    … …  
    231226 */
    232227function twentyfifteen_color_scheme_css() {
    233228        $color_scheme_option = get_theme_mod( 'color_scheme', 'default' );
    234         $color_scheme_css    = get_theme_mod( 'color_scheme_css', '' );
    235229
    236230        // Don't do anything if the default color scheme is selected.
    237         if ( 'default' === $color_scheme_option || empty( $color_scheme_css ) ) {
     231        if ( 'default' === $color_scheme_option ) {
    238232                return;
    239233        }
    240234
     235        $color_scheme = twentyfifteen_get_color_scheme();
     236
     237        // Convert main and sidebar text hex color to rgba.
     238        $color_main_text_rgb        = twentyfifteen_hex2rgb( $color_scheme[3] );
     239        $color_sidebar_link_rgb     = twentyfifteen_hex2rgb( $color_scheme[4] );
     240        $colors = array(
     241                'background_color'            => $color_scheme[0],
     242                'header_background_color'     => $color_scheme[1],
     243                'box_background_color'        => $color_scheme[2],
     244                'textcolor'                   => $color_scheme[3],
     245                'secondary_textcolor'         => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.7)', $color_main_text_rgb ),
     246                'border_color'                => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.1)', $color_main_text_rgb ),
     247                'border_focus_color'          => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.3)', $color_main_text_rgb ),
     248                'sidebar_textcolor'           => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.7)', $color_sidebar_link_rgb ),
     249                'sidebar_border_color'        => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.1)', $color_sidebar_link_rgb ),
     250                'sidebar_border_focus_color'  => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.3)', $color_sidebar_link_rgb ),
     251                'secondary_sidebar_textcolor' => $color_scheme[4],
     252                'meta_box_background_color'   => $color_scheme[5],
     253        );
     254
     255        $color_scheme_css = twentyfifteen_get_color_scheme_css( $colors );
     256
    241257        wp_add_inline_style( 'twentyfifteen-style', $color_scheme_css );
    242258}
    243259add_action( 'wp_enqueue_scripts', 'twentyfifteen_color_scheme_css' );
    … …  
    266282add_action( 'customize_preview_init', 'twentyfifteen_customize_preview_js' );
    267283
    268284/**
    269  * Output an Underscore template for generating CSS for the color scheme.
     285 * Returns CSS for the color schemes.
    270286 *
    271  * The template generates the css dynamically for instant display in the Customizer
    272  * preview, and to be saved in a `theme_mod` for display on the front-end.
     287 * @since Twenty Fifteen 1.0
    273288 *
    274  * @since Twenty Fifteen 1.0
     289 * @param array $colors Color scheme colors.
     290 * @return string Color scheme CSS.
    275291 */
    276 function twentyfifteen_color_scheme_css_template() {
    277         ?>
    278         <script type="text/html" id="tmpl-twentyfifteen-color-scheme">
     292function twentyfifteen_get_color_scheme_css( $colors ) {
     293        $colors = wp_parse_args( $colors, array(
     294                'background_color'            => '',
     295                'header_background_color'     => '',
     296                'box_background_color'        => '',
     297                'textcolor'                   => '',
     298                'secondary_textcolor'         => '',
     299                'border_color'                => '',
     300                'border_focus_color'          => '',
     301                'sidebar_textcolor'           => '',
     302                'sidebar_border_color'        => '',
     303                'sidebar_border_focus_color'  => '',
     304                'secondary_sidebar_textcolor' => '',
     305                'meta_box_background_color'   => '',
     306        ) );
     307
     308        $css = <<<CSS
    279309        /* Color Scheme */
    280310
    281311        /* Background Color */
    282312        body {
    283                 background-color: {{ data.background_color }};
     313                background-color: {$colors['background_color']};
    284314        }
    285315
    286316        /* Sidebar Background Color */
    287317        body:before,
    288318        .site-header {
    289                 background-color: {{ data.header_background_color }};
     319                background-color: {$colors['header_background_color']};
    290320        }
    291321
    292322        /* Box Background Color */
    … …  
    298328        .page-header,
    299329        .page-content,
    300330        .comments-area {
    301                 background-color: {{ data.box_background_color }};
     331                background-color: {$colors['box_background_color']};
    302332        }
    303333
    304334        /* Box Background Color */
    … …  
    315345        .page-links a:hover,
    316346        .page-links a:focus,
    317347        .sticky-post {
    318                 color: {{ data.box_background_color }};
     348                color: {$colors['box_background_color']};
    319349        }
    320350
    321351        /* Main Text Color */
    … …  
    328358        .widget_calendar tbody a,
    329359        .page-links a,
    330360        .sticky-post {
    331                 background-color: {{ data.textcolor }};
     361                background-color: {$colors['textcolor']};
    332362        }
    333363
    334364        /* Main Text Color */
    … …  
    352382        .comment-list .reply a:focus,
    353383        .site-info a:hover,
    354384        .site-info a:focus {
    355                 color: {{ data.textcolor }};
     385                color: {$colors['textcolor']};
    356386        }
    357387
    358388        /* Main Text Color */
    … …  
    369399        .pingback .edit-link a:hover,
    370400        .comment-list .reply a:hover,
    371401        .site-info a:hover {
    372                 border-color: {{ data.textcolor }};
     402                border-color: {$colors['textcolor']};
    373403        }
    374404
    375405        /* Secondary Text Color */
    … …  
    389419        .widget_calendar tbody a:focus,
    390420        .page-links a:hover,
    391421        .page-links a:focus {
    392                 background-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
    393                 background-color: {{ data.secondary_textcolor }};
     422                background-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
     423                background-color: {$colors['secondary_textcolor']};
    394424        }
    395425
    396426        /* Secondary Text Color */
    … …  
    429459        .wp-caption-text,
    430460        .gallery-caption,
    431461        .comment-list .reply a {
    432                 color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
    433                 color: {{ data.secondary_textcolor }};
     462                color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
     463                color: {$colors['secondary_textcolor']};
    434464        }
    435465
    436466        /* Secondary Text Color */
    437467        blockquote,
    438468        .logged-in-as a:hover,
    439469        .comment-author a:hover {
    440                 border-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
    441                 border-color: {{ data.secondary_textcolor }};
     470                border-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
     471                border-color: {$colors['secondary_textcolor']};
    442472        }
    443473
    444474        /* Border Color */
    445475        hr,
    446476        .dropdown-toggle:hover,
    447477        .dropdown-toggle:focus {
    448                 background-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
    449                 background-color: {{ data.border_color }};
     478                background-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
     479                background-color: {$colors['border_color']};
    450480        }
    451481
    452482        /* Border Color */
    … …  
    481511        .comment-list .trackback,
    482512        .comment-list .reply a,
    483513        .no-comments {
    484                 border-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
    485                 border-color: {{ data.border_color }};
     514                border-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
     515                border-color: {$colors['border_color']};
    486516        }
    487517
    488518        /* Border Focus Color */
    489519        a:focus,
    490520        button:focus,
    491521        input:focus {
    492                 outline-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
    493                 outline-color: {{ data.border_focus_color }};
     522                outline-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
     523                outline-color: {$colors['border_focus_color']};
    494524        }
    495525
    496526        input:focus,
    497527        textarea:focus {
    498                 border-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
    499                 border-color: {{ data.border_focus_color }};
     528                border-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
     529                border-color: {$colors['border_focus_color']};
    500530        }
    501531
    502532        /* Sidebar Link Color */
    503533        .secondary-toggle:before {
    504                 color: {{ data.sidebar_textcolor }};
     534                color: {$colors['sidebar_textcolor']};
    505535        }
    506536
    507537        .site-title a,
    508538        .site-description {
    509                 color: {{ data.sidebar_textcolor }};
     539                color: {$colors['sidebar_textcolor']};
    510540        }
    511541
    512542        /* Sidebar Text Color */
    513543        .site-title a:hover,
    514544        .site-title a:focus {
    515                 color: {{ data.secondary_sidebar_textcolor }};
     545                color: {$colors['secondary_sidebar_textcolor']};
    516546        }
    517547
    518548        /* Sidebar Border Color */
    519549        .secondary-toggle {
    520                 border-color: {{ data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */
    521                 border-color: {{ data.sidebar_border_color }};
     550                border-color: {$colors['sidebar_textcolor']}; /* Fallback for IE7 and IE8 */
     551                border-color: {$colors['sidebar_border_color']};
    522552        }
    523553
    524554        /* Sidebar Border Focus Color */
    525555        .secondary-toggle:hover,
    526556        .secondary-toggle:focus {
    527                 border-color: {{ data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */
    528                 border-color: {{ data.sidebar_border_focus_color }};
     557                border-color: {$colors['sidebar_textcolor']}; /* Fallback for IE7 and IE8 */
     558                border-color: {$colors['sidebar_border_focus_color']};
    529559        }
    530560
    531561        .site-title a {
    532                 outline-color: {{ data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */
    533                 outline-color: {{ data.sidebar_border_focus_color }};
     562                outline-color: {$colors['sidebar_textcolor']}; /* Fallback for IE7 and IE8 */
     563                outline-color: {$colors['sidebar_border_focus_color']};
    534564        }
    535565
    536566        /* Meta Background Color */
    537567        .entry-footer {
    538                 background-color: {{ data.meta_box_background_color }};
     568                background-color: {$colors['meta_box_background_color']};
    539569        }
    540570
    541571        @media screen and (min-width: 38.75em) {
    542572                /* Main Text Color */
    543573                .page-header {
    544                         border-color: {{ data.textcolor }};
     574                        border-color: {$colors['textcolor']};
    545575                }
    546576        }
    547577
    … …  
    560590                .widget_calendar tbody a,
    561591                .widget_calendar tbody a:hover,
    562592                .widget_calendar tbody a:focus {
    563                         color: {{ data.header_background_color }};
     593                        color: {$colors['header_background_color']};
    564594                }
    565595
    566596                /* Sidebar Link Color */
    … …  
    569599                .widget-title,
    570600                .widget blockquote cite,
    571601                .widget blockquote small {
    572                         color: {{ data.sidebar_textcolor }};
     602                        color: {$colors['sidebar_textcolor']};
    573603                }
    574604
    575605                .widget button,
    … …  
    577607                .widget input[type="reset"],
    578608                .widget input[type="submit"],
    579609                .widget_calendar tbody a {
    580                         background-color: {{ data.sidebar_textcolor }};
     610                        background-color: {$colors['sidebar_textcolor']};
    581611                }
    582612
    583613                .textwidget a {
    584                         border-color: {{ data.sidebar_textcolor }};
     614                        border-color: {$colors['sidebar_textcolor']};
    585615                }
    586616
    587617                /* Sidebar Text Color */
    … …  
    592622                .widget blockquote,
    593623                .widget .wp-caption-text,
    594624                .widget .gallery-caption {
    595                         color: {{ data.secondary_sidebar_textcolor }};
     625                        color: {$colors['secondary_sidebar_textcolor']};
    596626                }
    597627
    598628                .widget button:hover,
    … …  
    605635                .widget input[type="submit"]:focus,
    606636                .widget_calendar tbody a:hover,
    607637                .widget_calendar tbody a:focus {
    608                         background-color: {{ data.secondary_sidebar_textcolor }};
     638                        background-color: {$colors['secondary_sidebar_textcolor']};
    609639                }
    610640
    611641                .widget blockquote {
    612                         border-color: {{ data.secondary_sidebar_textcolor }};
     642                        border-color: {$colors['secondary_sidebar_textcolor']};
    613643                }
    614644
    615645                /* Sidebar Border Color */
    … …  
    626656                .widget_nav_menu .sub-menu,
    627657                .widget_pages .children,
    628658                .widget abbr[title] {
    629                         border-color: {{ data.sidebar_border_color }};
     659                        border-color: {$colors['sidebar_border_color']};
    630660                }
    631661
    632662                .dropdown-toggle:hover,
    633663                .dropdown-toggle:focus,
    634664                .widget hr {
    635                         background-color: {{ data.sidebar_border_color }};
     665                        background-color: {$colors['sidebar_border_color']};
    636666                }
    637667
    638668                .widget input:focus,
    639669                .widget textarea:focus {
    640                         border-color: {{ data.sidebar_border_focus_color }};
     670                        border-color: {$colors['sidebar_border_focus_color']};
    641671                }
    642672
    643673                .sidebar a:focus,
    644674                .dropdown-toggle:focus {
    645                         outline-color: {{ data.sidebar_border_focus_color }};
     675                        outline-color: {$colors['sidebar_border_focus_color']};
    646676                }
    647677        }
     678CSS;
     679
     680        return $css;
     681}
     682
     683/**
     684 * Output an Underscore template for generating CSS for the color scheme.
     685 *
     686 * The template generates the css dynamically for instant display in the Customizer
     687 * preview.
     688 *
     689 * @since Twenty Fifteen 1.0
     690 */
     691function twentyfifteen_color_scheme_css_template() {
     692        $colors = array(
     693                'background_color'            => '{{ data.background_color }}',
     694                'header_background_color'     => '{{ data.header_background_color }}',
     695                'box_background_color'        => '{{ data.box_background_color }}',
     696                'textcolor'                   => '{{ data.textcolor }}',
     697                'secondary_textcolor'         => '{{ data.secondary_textcolor }}',
     698                'border_color'                => '{{ data.border_color }}',
     699                'border_focus_color'          => '{{ data.border_focus_color }}',
     700                'sidebar_textcolor'           => '{{ data.sidebar_textcolor }}',
     701                'sidebar_border_color'        => '{{ data.sidebar_border_color }}',
     702                'sidebar_border_focus_color'  => '{{ data.sidebar_border_focus_color }}',
     703                'secondary_sidebar_textcolor' => '{{ data.secondary_sidebar_textcolor }}',
     704                'meta_box_background_color'   => '{{ data.meta_box_background_color }}',
     705        );
     706        ?>
     707        <script type="text/html" id="tmpl-twentyfifteen-color-scheme">
     708                <?php echo twentyfifteen_get_color_scheme_css( $colors ); ?>
    648709        </script>
    649710        <?php
    650711}

  • src/wp-content/themes/twentyfifteen/js/color-scheme-control.js

     
    4747        } );
    4848
    4949        // Generate the CSS for the current Color Scheme.
    50         function getCSS() {
    51                 var scheme = api( 'color_scheme' )(),
     50        function updateCSS() {
     51                var scheme = api( 'color_scheme' )(), css,
    5252                        colors = _.object( colorSchemeKeys, colorScheme[ scheme ].colors );
    5353
    5454                // Merge in color scheme overrides.
    … …  
    6464                colors.sidebar_border_color = Color( colors.sidebar_textcolor ).toCSS( 'rgba', 0.1 );
    6565                colors.sidebar_border_focus_color = Color( colors.sidebar_textcolor ).toCSS( 'rgba', 0.3 );
    6666
    67                 return cssTemplate( colors );
     67                css = cssTemplate( colors );
     68
     69                api.previewer.send( 'update-color-scheme-css', css );
    6870        }
    6971
    7072        // Update the CSS whenever a color setting is changed.
    7173        _.each( colorSettings, function( setting ) {
    7274                api( setting, function( setting ) {
    73                         setting.bind( _.throttle( function() {
    74                                 api( 'color_scheme_css' ).set( getCSS() );
    75                         }, 250 ) );
     75                        setting.bind( updateCSS );
    7676                } );
    7777        } );
    7878} )( wp.customize );

  • src/wp-content/themes/twentyfifteen/js/customize-preview.js

     
    33 */
    44
    55( function( $ ) {
    6         var $style = $( '#twentyfifteen-color-scheme-css' );
     6        var $style = $( '#twentyfifteen-color-scheme-css' ),
     7                api = wp.customize;
    78
    89        if ( ! $style.length ) {
    910                $style = $( 'head' ).append( '<style type="text/css" id="twentyfifteen-color-scheme-css" />' )
    … …  
    1112        }
    1213
    1314        // Site title.
    14         wp.customize( 'blogname', function( value ) {
     15        api( 'blogname', function( value ) {
    1516                value.bind( function( to ) {
    1617                        $( '.site-title a' ).text( to );
    1718                } );
    1819        } );
    1920
    2021        // Site tagline.
    21         wp.customize( 'blogdescription', function( value ) {
     22        api( 'blogdescription', function( value ) {
    2223                value.bind( function( to ) {
    2324                        $( '.site-description' ).text( to );
    2425                } );
    2526        } );
    2627
    2728        // Color Scheme CSS.
    28         wp.customize( 'color_scheme_css', function( value ) {
    29                 value.bind( function( to ) {
    30                         $style.html( to );
     29        api.bind( 'preview-ready', function() {
     30                api.preview.bind( 'update-color-scheme-css', function( css ) {
     31                        $style.html( css );
    3132                } );
    3233        } );
    3334

  • src/wp-includes/js/customize-preview.js

     
    6767                if ( ! api.settings )
    6868                        return;
    6969
    70                 var preview, bg;
     70                var bg;
    7171
    72                 preview = new api.Preview({
     72                api.preview = new api.Preview({
    7373                        url: window.location.href,
    7474                        channel: api.settings.channel
    7575                });
    7676
    77                 preview.bind( 'settings', function( values ) {
     77                api.preview.bind( 'settings', function( values ) {
    7878                        $.each( values, function( id, value ) {
    7979                                if ( api.has( id ) )
    8080                                        api( id ).set( value );
    … …  
    8383                        });
    8484                });
    8585
    86                 preview.trigger( 'settings', api.settings.values );
     86                api.preview.trigger( 'settings', api.settings.values );
    8787
    88                 preview.bind( 'setting', function( args ) {
     88                api.preview.bind( 'setting', function( args ) {
    8989                        var value;
    9090
    9191                        args = args.slice();
    … …  
    9494                                value.set.apply( value, args );
    9595                });
    9696
    97                 preview.bind( 'sync', function( events ) {
     97                api.preview.bind( 'sync', function( events ) {
    9898                        $.each( events, function( event, args ) {
    99                                 preview.trigger( event, args );
     99                                api.preview.trigger( event, args );
    100100                        });
    101                         preview.send( 'synced' );
     101                        api.preview.send( 'synced' );
    102102                });
    103103
    104                 preview.bind( 'active', function() {
     104                api.preview.bind( 'active', function() {
    105105                        if ( api.settings.nonce ) {
    106                                 preview.send( 'nonce', api.settings.nonce );
     106                                api.preview.send( 'nonce', api.settings.nonce );
    107107                        }
    108108
    109                         preview.send( 'documentTitle', document.title );
     109                        api.preview.send( 'documentTitle', document.title );
    110110                });
    111111
    112                 preview.send( 'ready', {
     112                api.preview.send( 'ready', {
    113113                        activePanels: api.settings.activePanels,
    114114                        activeSections: api.settings.activeSections,
    115115                        activeControls: api.settings.activeControls
    … …  
    154154                                this.bind( update );
    155155                        });
    156156                });
     157
     158                api.trigger( 'preview-ready' );
    157159        });
    158160
    159161})( wp, jQuery );