WordPress.org
Get WordPress

Make WordPress Core

Ticket #30409: 30409.4.1.diff

File 30409.4.1.diff, 18.2 KB (added by georgestephanis, 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        $colors = array(
     238                'background_color'            => $color_scheme[0],
     239                'header_background_color'     => $color_scheme[1],
     240                'box_background_color'        => $color_scheme[2],
     241                'textcolor'                   => $color_scheme[3],
     242                'secondary_sidebar_textcolor' => $color_scheme[4],
     243                'meta_box_background_color'   => $color_scheme[5],
     244        );
     245
     246        $color_scheme_css = twentyfifteen_get_color_scheme_css( $colors );
     247
    241248        wp_add_inline_style( 'twentyfifteen-style', $color_scheme_css );
    242249}
    243250add_action( 'wp_enqueue_scripts', 'twentyfifteen_color_scheme_css' );
    … …  
    266273add_action( 'customize_preview_init', 'twentyfifteen_customize_preview_js' );
    267274
    268275/**
    269  * Output an Underscore template for generating CSS for the color scheme.
     276 * Returns CSS for the color schemes.
    270277 *
    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.
     278 * @since Twenty Fifteen 1.0
    273279 *
    274  * @since Twenty Fifteen 1.0
     280 * @param array $colors Color scheme colors.
     281 * @return string Color scheme CSS.
    275282 */
    276 function twentyfifteen_color_scheme_css_template() {
    277         ?>
    278         <script type="text/html" id="tmpl-twentyfifteen-color-scheme">
     283function twentyfifteen_get_color_scheme_css( $colors ) {
     284        $colors = wp_parse_args( $colors, array(
     285                'background_color'            => '',
     286                'header_background_color'     => '',
     287                'box_background_color'        => '',
     288                'textcolor'                   => '',
     289                'secondary_textcolor'         => '', // Will be calculated from textcolor if omitted
     290                'border_color'                => '', // Will be calculated from textcolor if omitted
     291                'border_focus_color'          => '', // Will be calculated from textcolor if omitted
     292                'sidebar_textcolor'           => '', // Will be calculated from secondary_sidebar_textcolor if omitted
     293                'sidebar_border_color'        => '', // Will be calculated from secondary_sidebar_textcolor if omitted
     294                'sidebar_border_focus_color'  => '', // Will be calculated from secondary_sidebar_textcolor if omitted
     295                'secondary_sidebar_textcolor' => '',
     296                'meta_box_background_color'   => '',
     297        ) );
     298
     299        // Calculate textcolor derivatives if any have been omitted
     300        if ( empty( $colors['secondary_textcolor'] ) || empty( $colors['border_color'] ) || empty( $colors['border_focus_color'] ) ) {
     301                $textcolor_rgb = twentyfifteen_hex2rgb( $colors['textcolor'] );
     302       
     303                if ( empty( $colors['secondary_textcolor'] ) ) {
     304                        $colors['secondary_textcolor'] = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.7)', $textcolor_rgb );
     305                }
     306       
     307                if ( empty( $colors['border_color'] ) ) {
     308                        $colors['border_color'] = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.1)', $textcolor_rgb );
     309                }
     310       
     311                if ( empty( $colors['border_focus_color'] ) ) {
     312                        $colors['border_focus_color'] = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.3)', $textcolor_rgb );
     313                }
     314        }
     315
     316        // Calculate secondary_sidebar_textcolor derivatives if any have been omitted
     317        if ( empty( $colors['sidebar_textcolor'] ) || empty( $colors['sidebar_border_color'] ) || empty( $colors['sidebar_border_focus_color'] ) ) {
     318                $secondary_sidebar_textcolor_rgb = twentyfifteen_hex2rgb( $colors['secondary_sidebar_textcolor'] );
     319
     320                if ( empty( $colors['sidebar_textcolor'] ) ) {
     321                        $colors['sidebar_textcolor'] = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.7)', $secondary_sidebar_textcolor_rgb );
     322                }
     323       
     324                if ( empty( $colors['sidebar_border_color'] ) ) {
     325                        $colors['sidebar_border_color'] = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.1)', $secondary_sidebar_textcolor_rgb );
     326                }
     327       
     328                if ( empty( $colors['sidebar_border_focus_color'] ) ) {
     329                        $colors['sidebar_border_focus_color'] = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.3)', $secondary_sidebar_textcolor_rgb );
     330                }
     331        }
     332
     333        $css = <<<CSS
    279334        /* Color Scheme */
    280335
    281336        /* Background Color */
    282337        body {
    283                 background-color: {{ data.background_color }};
     338                background-color: {$colors['background_color']};
    284339        }
    285340
    286341        /* Sidebar Background Color */
    287342        body:before,
    288343        .site-header {
    289                 background-color: {{ data.header_background_color }};
     344                background-color: {$colors['header_background_color']};
    290345        }
    291346
    292347        /* Box Background Color */
    … …  
    298353        .page-header,
    299354        .page-content,
    300355        .comments-area {
    301                 background-color: {{ data.box_background_color }};
     356                background-color: {$colors['box_background_color']};
    302357        }
    303358
    304359        /* Box Background Color */
    … …  
    315370        .page-links a:hover,
    316371        .page-links a:focus,
    317372        .sticky-post {
    318                 color: {{ data.box_background_color }};
     373                color: {$colors['box_background_color']};
    319374        }
    320375
    321376        /* Main Text Color */
    … …  
    328383        .widget_calendar tbody a,
    329384        .page-links a,
    330385        .sticky-post {
    331                 background-color: {{ data.textcolor }};
     386                background-color: {$colors['textcolor']};
    332387        }
    333388
    334389        /* Main Text Color */
    … …  
    352407        .comment-list .reply a:focus,
    353408        .site-info a:hover,
    354409        .site-info a:focus {
    355                 color: {{ data.textcolor }};
     410                color: {$colors['textcolor']};
    356411        }
    357412
    358413        /* Main Text Color */
    … …  
    369424        .pingback .edit-link a:hover,
    370425        .comment-list .reply a:hover,
    371426        .site-info a:hover {
    372                 border-color: {{ data.textcolor }};
     427                border-color: {$colors['textcolor']};
    373428        }
    374429
    375430        /* Secondary Text Color */
    … …  
    389444        .widget_calendar tbody a:focus,
    390445        .page-links a:hover,
    391446        .page-links a:focus {
    392                 background-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
    393                 background-color: {{ data.secondary_textcolor }};
     447                background-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
     448                background-color: {$colors['secondary_textcolor']};
    394449        }
    395450
    396451        /* Secondary Text Color */
    … …  
    429484        .wp-caption-text,
    430485        .gallery-caption,
    431486        .comment-list .reply a {
    432                 color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
    433                 color: {{ data.secondary_textcolor }};
     487                color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
     488                color: {$colors['secondary_textcolor']};
    434489        }
    435490
    436491        /* Secondary Text Color */
    … …  
    437492        blockquote,
    438493        .logged-in-as a:hover,
    439494        .comment-author a:hover {
    440                 border-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
    441                 border-color: {{ data.secondary_textcolor }};
     495                border-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
     496                border-color: {$colors['secondary_textcolor']};
    442497        }
    443498
    444499        /* Border Color */
    … …  
    445500        hr,
    446501        .dropdown-toggle:hover,
    447502        .dropdown-toggle:focus {
    448                 background-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
    449                 background-color: {{ data.border_color }};
     503                background-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
     504                background-color: {$colors['border_color']};
    450505        }
    451506
    452507        /* Border Color */
    … …  
    481536        .comment-list .trackback,
    482537        .comment-list .reply a,
    483538        .no-comments {
    484                 border-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
    485                 border-color: {{ data.border_color }};
     539                border-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
     540                border-color: {$colors['border_color']};
    486541        }
    487542
    488543        /* Border Focus Color */
    … …  
    489544        a:focus,
    490545        button:focus,
    491546        input:focus {
    492                 outline-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
    493                 outline-color: {{ data.border_focus_color }};
     547                outline-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
     548                outline-color: {$colors['border_focus_color']};
    494549        }
    495550
    496551        input:focus,
    497552        textarea:focus {
    498                 border-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
    499                 border-color: {{ data.border_focus_color }};
     553                border-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
     554                border-color: {$colors['border_focus_color']};
    500555        }
    501556
    502557        /* Sidebar Link Color */
    503558        .secondary-toggle:before {
    504                 color: {{ data.sidebar_textcolor }};
     559                color: {$colors['sidebar_textcolor']};
    505560        }
    506561
    507562        .site-title a,
    508563        .site-description {
    509                 color: {{ data.sidebar_textcolor }};
     564                color: {$colors['sidebar_textcolor']};
    510565        }
    511566
    512567        /* Sidebar Text Color */
    513568        .site-title a:hover,
    514569        .site-title a:focus {
    515                 color: {{ data.secondary_sidebar_textcolor }};
     570                color: {$colors['secondary_sidebar_textcolor']};
    516571        }
    517572
    518573        /* Sidebar Border Color */
    519574        .secondary-toggle {
    520                 border-color: {{ data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */
    521                 border-color: {{ data.sidebar_border_color }};
     575                border-color: {$colors['sidebar_textcolor']}; /* Fallback for IE7 and IE8 */
     576                border-color: {$colors['sidebar_border_color']};
    522577        }
    523578
    524579        /* Sidebar Border Focus Color */
    525580        .secondary-toggle:hover,
    526581        .secondary-toggle:focus {
    527                 border-color: {{ data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */
    528                 border-color: {{ data.sidebar_border_focus_color }};
     582                border-color: {$colors['sidebar_textcolor']}; /* Fallback for IE7 and IE8 */
     583                border-color: {$colors['sidebar_border_focus_color']};
    529584        }
    530585
    531586        .site-title a {
    532                 outline-color: {{ data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */
    533                 outline-color: {{ data.sidebar_border_focus_color }};
     587                outline-color: {$colors['sidebar_textcolor']}; /* Fallback for IE7 and IE8 */
     588                outline-color: {$colors['sidebar_border_focus_color']};
    534589        }
    535590
    536591        /* Meta Background Color */
    537592        .entry-footer {
    538                 background-color: {{ data.meta_box_background_color }};
     593                background-color: {$colors['meta_box_background_color']};
    539594        }
    540595
    541596        @media screen and (min-width: 38.75em) {
    542597                /* Main Text Color */
    543598                .page-header {
    544                         border-color: {{ data.textcolor }};
     599                        border-color: {$colors['textcolor']};
    545600                }
    546601        }
    547602
    … …  
    560615                .widget_calendar tbody a,
    561616                .widget_calendar tbody a:hover,
    562617                .widget_calendar tbody a:focus {
    563                         color: {{ data.header_background_color }};
     618                        color: {$colors['header_background_color']};
    564619                }
    565620
    566621                /* Sidebar Link Color */
    … …  
    569624                .widget-title,
    570625                .widget blockquote cite,
    571626                .widget blockquote small {
    572                         color: {{ data.sidebar_textcolor }};
     627                        color: {$colors['sidebar_textcolor']};
    573628                }
    574629
    575630                .widget button,
    … …  
    577632                .widget input[type="reset"],
    578633                .widget input[type="submit"],
    579634                .widget_calendar tbody a {
    580                         background-color: {{ data.sidebar_textcolor }};
     635                        background-color: {$colors['sidebar_textcolor']};
    581636                }
    582637
    583638                .textwidget a {
    584                         border-color: {{ data.sidebar_textcolor }};
     639                        border-color: {$colors['sidebar_textcolor']};
    585640                }
    586641
    587642                /* Sidebar Text Color */
    … …  
    592647                .widget blockquote,
    593648                .widget .wp-caption-text,
    594649                .widget .gallery-caption {
    595                         color: {{ data.secondary_sidebar_textcolor }};
     650                        color: {$colors['secondary_sidebar_textcolor']};
    596651                }
    597652
    598653                .widget button:hover,
    … …  
    605660                .widget input[type="submit"]:focus,
    606661                .widget_calendar tbody a:hover,
    607662                .widget_calendar tbody a:focus {
    608                         background-color: {{ data.secondary_sidebar_textcolor }};
     663                        background-color: {$colors['secondary_sidebar_textcolor']};
    609664                }
    610665
    611666                .widget blockquote {
    612                         border-color: {{ data.secondary_sidebar_textcolor }};
     667                        border-color: {$colors['secondary_sidebar_textcolor']};
    613668                }
    614669
    615670                /* Sidebar Border Color */
    … …  
    626681                .widget_nav_menu .sub-menu,
    627682                .widget_pages .children,
    628683                .widget abbr[title] {
    629                         border-color: {{ data.sidebar_border_color }};
     684                        border-color: {$colors['sidebar_border_color']};
    630685                }
    631686
    632687                .dropdown-toggle:hover,
    633688                .dropdown-toggle:focus,
    634689                .widget hr {
    635                         background-color: {{ data.sidebar_border_color }};
     690                        background-color: {$colors['sidebar_border_color']};
    636691                }
    637692
    638693                .widget input:focus,
    639694                .widget textarea:focus {
    640                         border-color: {{ data.sidebar_border_focus_color }};
     695                        border-color: {$colors['sidebar_border_focus_color']};
    641696                }
    642697
    643698                .sidebar a:focus,
    644699                .dropdown-toggle:focus {
    645                         outline-color: {{ data.sidebar_border_focus_color }};
     700                        outline-color: {$colors['sidebar_border_focus_color']};
    646701                }
    647702        }
     703CSS;
     704
     705        return $css;
     706}
     707
     708/**
     709 * Output an Underscore template for generating CSS for the color scheme.
     710 *
     711 * The template generates the css dynamically for instant display in the Customizer
     712 * preview.
     713 *
     714 * @since Twenty Fifteen 1.0
     715 */
     716function twentyfifteen_color_scheme_css_template() {
     717        $colors = array(
     718                'background_color'            => '{{ data.background_color }}',
     719                'header_background_color'     => '{{ data.header_background_color }}',
     720                'box_background_color'        => '{{ data.box_background_color }}',
     721                'textcolor'                   => '{{ data.textcolor }}',
     722                'secondary_textcolor'         => '{{ data.secondary_textcolor }}',
     723                'border_color'                => '{{ data.border_color }}',
     724                'border_focus_color'          => '{{ data.border_focus_color }}',
     725                'sidebar_textcolor'           => '{{ data.sidebar_textcolor }}',
     726                'sidebar_border_color'        => '{{ data.sidebar_border_color }}',
     727                'sidebar_border_focus_color'  => '{{ data.sidebar_border_focus_color }}',
     728                'secondary_sidebar_textcolor' => '{{ data.secondary_sidebar_textcolor }}',
     729                'meta_box_background_color'   => '{{ data.meta_box_background_color }}',
     730        );
     731        ?>
     732        <script type="text/html" id="tmpl-twentyfifteen-color-scheme">
     733                <?php echo twentyfifteen_get_color_scheme_css( $colors ); ?>
    648734        </script>
    649735        <?php
    650736}

  • 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 );