WordPress.org
Get WordPress

Make WordPress Core

Changeset 30893


Ignore:
Timestamp:
12/16/2014 12:26:49 PM (10 years ago)
Author:
ocean90
Message:

Twenty Fifteen: Don't save unfiltered CSS in a setting.

Introduce twentyfifteen_get_color_scheme_css( $colors ) which will be used for Underscore/Backbone and the PHP side. Let twentyfifteen_color_scheme_css() handle the color calculation on PHP side.

see #30409.

Location:
trunk/src/wp-content/themes/twentyfifteen
Files:
3 edited

Legend:

Unmodified
Added
Removed

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

    r30802 r30893  
    2626        'sanitize_callback' => 'twentyfifteen_sanitize_color_scheme',
    2727        'transport'         => 'postMessage',
    28     ) );
    29 
    30     $wp_customize->add_setting( 'color_scheme_css', array(
    31         'default'   => '',
    32         'transport' => 'postMessage',
    3328    ) );
    3429
    … …  
    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_textcolor_rgb         = twentyfifteen_hex2rgb( $color_scheme[3] );
     239    $color_sidebar_textcolor_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_textcolor_rgb ),
     246        'border_color'                => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.1)', $color_textcolor_rgb ),
     247        'border_focus_color'          => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.3)', $color_textcolor_rgb ),
     248        'sidebar_textcolor'           => $color_scheme[4],
     249        'sidebar_border_color'        => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.1)', $color_sidebar_textcolor_rgb ),
     250        'sidebar_border_focus_color'  => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.3)', $color_sidebar_textcolor_rgb ),
     251        'secondary_sidebar_textcolor' => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.7)', $color_sidebar_textcolor_rgb ),
     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}
    … …  
    251267 */
    252268function twentyfifteen_customize_control_js() {
    253     wp_enqueue_script( 'color-scheme-control', get_template_directory_uri() . '/js/color-scheme-control.js', array( 'customize-controls', 'iris', 'underscore', 'wp-util' ), '', true );
     269    wp_enqueue_script( 'color-scheme-control', get_template_directory_uri() . '/js/color-scheme-control.js', array( 'customize-controls', 'iris', 'underscore', 'wp-util' ), '20141216', true );
    254270    wp_localize_script( 'color-scheme-control', 'colorScheme', twentyfifteen_get_color_schemes() );
    255271}
    … …  
    262278 */
    263279function twentyfifteen_customize_preview_js() {
    264     wp_enqueue_script( 'twentyfifteen-customize-preview', get_template_directory_uri() . '/js/customize-preview.js', array( 'customize-preview' ), '20141029', true );
     280    wp_enqueue_script( 'twentyfifteen-customize-preview', get_template_directory_uri() . '/js/customize-preview.js', array( 'customize-preview' ), '20141216', true );
    265281}
    266282add_action( 'customize_preview_init', 'twentyfifteen_customize_preview_js' );
    267283
    268284/**
    269  * Output an Underscore template for generating CSS for the color scheme.
    270  *
    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.
    273  *
    274  * @since Twenty Fifteen 1.0
    275  */
    276 function twentyfifteen_color_scheme_css_template() {
    277     ?>
    278     <script type="text/html" id="tmpl-twentyfifteen-color-scheme">
     285 * Returns CSS for the color schemes.
     286 *
     287 * @since Twenty Fifteen 1.0
     288 *
     289 * @param array $colors Color scheme colors.
     290 * @return string Color scheme CSS.
     291 */
     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
    … …  
    287317    body:before,
    288318    .site-header {
    289         background-color: {{ data.header_background_color }};
     319        background-color: {$colors['header_background_color']};
    290320    }
    291321
    … …  
    299329    .page-content,
    300330    .comments-area {
    301         background-color: {{ data.box_background_color }};
     331        background-color: {$colors['box_background_color']};
    302332    }
    303333
    … …  
    316346    .page-links a:focus,
    317347    .sticky-post {
    318         color: {{ data.box_background_color }};
     348        color: {$colors['box_background_color']};
    319349    }
    320350
    … …  
    329359    .page-links a,
    330360    .sticky-post {
    331         background-color: {{ data.textcolor }};
     361        background-color: {$colors['textcolor']};
    332362    }
    333363
    … …  
    353383    .site-info a:hover,
    354384    .site-info a:focus {
    355         color: {{ data.textcolor }};
     385        color: {$colors['textcolor']};
    356386    }
    357387
    … …  
    370400    .comment-list .reply a:hover,
    371401    .site-info a:hover {
    372         border-color: {{ data.textcolor }};
     402        border-color: {$colors['textcolor']};
    373403    }
    374404
    … …  
    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
    … …  
    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
    … …  
    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
    … …  
    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
    … …  
    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
    … …  
    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
    … …  
    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
    … …  
    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
    … …  
    542572        /* Main Text Color */
    543573        .page-header {
    544             border-color: {{ data.textcolor }};
     574            border-color: {$colors['textcolor']};
    545575        }
    546576    }
    … …  
    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
    … …  
    570600        .widget blockquote cite,
    571601        .widget blockquote small {
    572             color: {{ data.sidebar_textcolor }};
     602            color: {$colors['sidebar_textcolor']};
    573603        }
    574604
    … …  
    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
    … …  
    593623        .widget .wp-caption-text,
    594624        .widget .gallery-caption {
    595             color: {{ data.secondary_sidebar_textcolor }};
     625            color: {$colors['secondary_sidebar_textcolor']};
    596626        }
    597627
    … …  
    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
    … …  
    627657        .widget_pages .children,
    628658        .widget abbr[title] {
    629             border-color: {{ data.sidebar_border_color }};
     659            border-color: {$colors['sidebar_border_color']};
    630660        }
    631661
    … …  
    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 }};
    646         }
    647     }
     675            outline-color: {$colors['sidebar_border_focus_color']};
     676        }
     677    }
     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

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

    r30325 r30893  
    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
    … …  
    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
    … …  
    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    } );

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

    r30806 r30893  
    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 ) {
    … …  
    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 );
    … …  
    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 );
    … …  
    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    } );
Note: See TracChangeset for help on using the changeset viewer.