WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
12/16/2014 12:26:49 PM (12 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.

File:
1 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
Note: See TracChangeset for help on using the changeset viewer.