WordPress.org
Get WordPress

Make WordPress Core

Ticket #30409: 30409.3.diff

File 30409.3.diff, 13.9 KB (added by ocean90, 9 years ago)

@todo preview

  • 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        if ( empty( $colors ) ) {
     294                return '';
     295        }
     296
     297        $colors = wp_parse_args( $colors, array(
     298                'background_color'            => '',
     299                'header_background_color'     => '',
     300                'box_background_color'        => '',
     301                'textcolor'                   => '',
     302                'secondary_textcolor'         => '',
     303                'border_color'                => '',
     304                'border_focus_color'          => '',
     305                'sidebar_textcolor'           => '',
     306                'sidebar_border_color'        => '',
     307                'sidebar_border_focus_color'  => '',
     308                'secondary_sidebar_textcolor' => '',
     309                'meta_box_background_color'   => '',
     310        ) );
     311
     312        $css = <<<CSS
    279313        /* Color Scheme */
    280314
    281315        /* Background Color */
    282316        body {
    283                 background-color: {{ data.background_color }};
     317                background-color: {$colors['background_color']};
    284318        }
    285319
    286320        /* Sidebar Background Color */
    287321        body:before,
    288322        .site-header {
    289                 background-color: {{ data.header_background_color }};
     323                background-color: {$colors['header_background_color']};
    290324        }
    291325
    292326        /* Box Background Color */
    … …  
    298332        .page-header,
    299333        .page-content,
    300334        .comments-area {
    301                 background-color: {{ data.box_background_color }};
     335                background-color: {$colors['box_background_color']};
    302336        }
    303337
    304338        /* Box Background Color */
    … …  
    315349        .page-links a:hover,
    316350        .page-links a:focus,
    317351        .sticky-post {
    318                 color: {{ data.box_background_color }};
     352                color: {$colors['box_background_color']};
    319353        }
    320354
    321355        /* Main Text Color */
    … …  
    328362        .widget_calendar tbody a,
    329363        .page-links a,
    330364        .sticky-post {
    331                 background-color: {{ data.textcolor }};
     365                background-color: {$colors['textcolor']};
    332366        }
    333367
    334368        /* Main Text Color */
    … …  
    352386        .comment-list .reply a:focus,
    353387        .site-info a:hover,
    354388        .site-info a:focus {
    355                 color: {{ data.textcolor }};
     389                color: {$colors['textcolor']};
    356390        }
    357391
    358392        /* Main Text Color */
    … …  
    369403        .pingback .edit-link a:hover,
    370404        .comment-list .reply a:hover,
    371405        .site-info a:hover {
    372                 border-color: {{ data.textcolor }};
     406                border-color: {$colors['textcolor']};
    373407        }
    374408
    375409        /* Secondary Text Color */
    … …  
    389423        .widget_calendar tbody a:focus,
    390424        .page-links a:hover,
    391425        .page-links a:focus {
    392                 background-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
    393                 background-color: {{ data.secondary_textcolor }};
     426                background-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
     427                background-color: {$colors['secondary_textcolor']};
    394428        }
    395429
    396430        /* Secondary Text Color */
    … …  
    429463        .wp-caption-text,
    430464        .gallery-caption,
    431465        .comment-list .reply a {
    432                 color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
    433                 color: {{ data.secondary_textcolor }};
     466                color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
     467                color: {$colors['secondary_textcolor']};
    434468        }
    435469
    436470        /* Secondary Text Color */
    437471        blockquote,
    438472        .logged-in-as a:hover,
    439473        .comment-author a:hover {
    440                 border-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
    441                 border-color: {{ data.secondary_textcolor }};
     474                border-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
     475                border-color: {$colors['secondary_textcolor']};
    442476        }
    443477
    444478        /* Border Color */
    445479        hr,
    446480        .dropdown-toggle:hover,
    447481        .dropdown-toggle:focus {
    448                 background-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
    449                 background-color: {{ data.border_color }};
     482                background-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
     483                background-color: {$colors['border_color']};
    450484        }
    451485
    452486        /* Border Color */
    … …  
    481515        .comment-list .trackback,
    482516        .comment-list .reply a,
    483517        .no-comments {
    484                 border-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
    485                 border-color: {{ data.border_color }};
     518                border-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
     519                border-color: {$colors['border_color']};
    486520        }
    487521
    488522        /* Border Focus Color */
    489523        a:focus,
    490524        button:focus,
    491525        input:focus {
    492                 outline-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
    493                 outline-color: {{ data.border_focus_color }};
     526                outline-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
     527                outline-color: {$colors['border_focus_color']};
    494528        }
    495529
    496530        input:focus,
    497531        textarea:focus {
    498                 border-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
    499                 border-color: {{ data.border_focus_color }};
     532                border-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
     533                border-color: {$colors['border_focus_color']};
    500534        }
    501535
    502536        /* Sidebar Link Color */
    503537        .secondary-toggle:before {
    504                 color: {{ data.sidebar_textcolor }};
     538                color: {$colors['sidebar_textcolor']};
    505539        }
    506540
    507541        .site-title a,
    508542        .site-description {
    509                 color: {{ data.sidebar_textcolor }};
     543                color: {$colors['sidebar_textcolor']};
    510544        }
    511545
    512546        /* Sidebar Text Color */
    513547        .site-title a:hover,
    514548        .site-title a:focus {
    515                 color: {{ data.secondary_sidebar_textcolor }};
     549                color: {$colors['secondary_sidebar_textcolor']};
    516550        }
    517551
    518552        /* Sidebar Border Color */
    519553        .secondary-toggle {
    520                 border-color: {{ data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */
    521                 border-color: {{ data.sidebar_border_color }};
     554                border-color: {$colors['sidebar_textcolor']}; /* Fallback for IE7 and IE8 */
     555                border-color: {$colors['sidebar_border_color']};
    522556        }
    523557
    524558        /* Sidebar Border Focus Color */
    525559        .secondary-toggle:hover,
    526560        .secondary-toggle:focus {
    527                 border-color: {{ data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */
    528                 border-color: {{ data.sidebar_border_focus_color }};
     561                border-color: {$colors['sidebar_textcolor']}; /* Fallback for IE7 and IE8 */
     562                border-color: {$colors['sidebar_border_focus_color']};
    529563        }
    530564
    531565        .site-title a {
    532                 outline-color: {{ data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */
    533                 outline-color: {{ data.sidebar_border_focus_color }};
     566                outline-color: {$colors['sidebar_textcolor']}; /* Fallback for IE7 and IE8 */
     567                outline-color: {$colors['sidebar_border_focus_color']};
    534568        }
    535569
    536570        /* Meta Background Color */
    537571        .entry-footer {
    538                 background-color: {{ data.meta_box_background_color }};
     572                background-color: {$colors['meta_box_background_color']};
    539573        }
    540574
    541575        @media screen and (min-width: 38.75em) {
    542576                /* Main Text Color */
    543577                .page-header {
    544                         border-color: {{ data.textcolor }};
     578                        border-color: {$colors['textcolor']};
    545579                }
    546580        }
    547581
    … …  
    560594                .widget_calendar tbody a,
    561595                .widget_calendar tbody a:hover,
    562596                .widget_calendar tbody a:focus {
    563                         color: {{ data.header_background_color }};
     597                        color: {$colors['header_background_color']};
    564598                }
    565599
    566600                /* Sidebar Link Color */
    … …  
    569603                .widget-title,
    570604                .widget blockquote cite,
    571605                .widget blockquote small {
    572                         color: {{ data.sidebar_textcolor }};
     606                        color: {$colors['sidebar_textcolor']};
    573607                }
    574608
    575609                .widget button,
    … …  
    577611                .widget input[type="reset"],
    578612                .widget input[type="submit"],
    579613                .widget_calendar tbody a {
    580                         background-color: {{ data.sidebar_textcolor }};
     614                        background-color: {$colors['sidebar_textcolor']};
    581615                }
    582616
    583617                .textwidget a {
    584                         border-color: {{ data.sidebar_textcolor }};
     618                        border-color: {$colors['sidebar_textcolor']};
    585619                }
    586620
    587621                /* Sidebar Text Color */
    … …  
    592626                .widget blockquote,
    593627                .widget .wp-caption-text,
    594628                .widget .gallery-caption {
    595                         color: {{ data.secondary_sidebar_textcolor }};
     629                        color: {$colors['secondary_sidebar_textcolor']};
    596630                }
    597631
    598632                .widget button:hover,
    … …  
    605639                .widget input[type="submit"]:focus,
    606640                .widget_calendar tbody a:hover,
    607641                .widget_calendar tbody a:focus {
    608                         background-color: {{ data.secondary_sidebar_textcolor }};
     642                        background-color: {$colors['secondary_sidebar_textcolor']};
    609643                }
    610644
    611645                .widget blockquote {
    612                         border-color: {{ data.secondary_sidebar_textcolor }};
     646                        border-color: {$colors['secondary_sidebar_textcolor']};
    613647                }
    614648
    615649                /* Sidebar Border Color */
    … …  
    626660                .widget_nav_menu .sub-menu,
    627661                .widget_pages .children,
    628662                .widget abbr[title] {
    629                         border-color: {{ data.sidebar_border_color }};
     663                        border-color: {$colors['sidebar_border_color']};
    630664                }
    631665
    632666                .dropdown-toggle:hover,
    633667                .dropdown-toggle:focus,
    634668                .widget hr {
    635                         background-color: {{ data.sidebar_border_color }};
     669                        background-color: {$colors['sidebar_border_color']};
    636670                }
    637671
    638672                .widget input:focus,
    639673                .widget textarea:focus {
    640                         border-color: {{ data.sidebar_border_focus_color }};
     674                        border-color: {$colors['sidebar_border_focus_color']};
    641675                }
    642676
    643677                .sidebar a:focus,
    644678                .dropdown-toggle:focus {
    645                         outline-color: {{ data.sidebar_border_focus_color }};
     679                        outline-color: {$colors['sidebar_border_focus_color']};
    646680                }
    647681        }
     682CSS;
     683
     684        return $css;
     685}
     686
     687/**
     688 * Output an Underscore template for generating CSS for the color scheme.
     689 *
     690 * The template generates the css dynamically for instant display in the Customizer
     691 * preview.
     692 *
     693 * @since Twenty Fifteen 1.0
     694 */
     695function twentyfifteen_color_scheme_css_template() {
     696        $colors = array(
     697                'background_color'            => '{{ data.background_color }}',
     698                'header_background_color'     => '{{ data.header_background_color }}',
     699                'box_background_color'        => '{{ data.box_background_color }}',
     700                'textcolor'                   => '{{ data.textcolor }}',
     701                'secondary_textcolor'         => '{{ data.secondary_textcolor }}',
     702                'border_color'                => '{{ data.border_color }}',
     703                'border_focus_color'          => '{{ data.border_focus_color }}',
     704                'sidebar_textcolor'           => '{{ data.sidebar_textcolor }}',
     705                'sidebar_border_color'        => '{{ data.sidebar_border_color }}',
     706                'sidebar_border_focus_color'  => '{{ data.sidebar_border_focus_color }}',
     707                'secondary_sidebar_textcolor' => '{{ data.secondary_sidebar_textcolor }}',
     708                'meta_box_background_color'   => '{{ data.meta_box_background_color }}',
     709        );
     710        ?>
     711        <script type="text/html" id="tmpl-twentyfifteen-color-scheme">
     712                <?php echo twentyfifteen_get_color_scheme_css( $colors ); ?>
    648713        </script>
    649714        <?php
    650715}

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

     
    4747        } );
    4848
    4949        // Generate the CSS for the current Color Scheme.
    50         function getCSS() {
     50        function updateCSS() {
    5151                var scheme = api( 'color_scheme' )(),
    5252                        colors = _.object( colorSchemeKeys, colorScheme[ scheme ].colors );
    5353
    … …  
    7171        _.each( colorSettings, function( setting ) {
    7272                api( setting, function( setting ) {
    7373                        setting.bind( _.throttle( function() {
    74                                 api( 'color_scheme_css' ).set( getCSS() );
     74                                updateCSS();
    7575                        }, 250 ) );
    7676                } );
    7777        } );

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

     
    2525        } );
    2626
    2727        // Color Scheme CSS.
    28         wp.customize( 'color_scheme_css', function( value ) {
    29                 value.bind( function( to ) {
    30                         $style.html( to );
    31                 } );
    32         } );
     28        // @todo
    3329
    3430} )( jQuery );