WordPress.org
Get WordPress

Make WordPress Core

Ticket #30409: 30409.2.diff

File 30409.2.diff, 10.0 KB (added by georgestephanis, 11 years ago)

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

     
    274274 * @since Twenty Fifteen 1.0
    275275 */
    276276function twentyfifteen_color_scheme_css_template() {
     277        $js_defaults = array(
     278                'background_color'            => '{{ data.background_color }}',
     279                'header_background_color'     => '{{ data.header_background_color }}',
     280                'box_background_color'        => '{{ data.box_background_color }}',
     281                'textcolor'                   => '{{ data.textcolor }}',
     282                'secondary_textcolor'         => '{{ data.secondary_textcolor }}',
     283                'border_color'                => '{{ data.border_color }}',
     284                'border_focus_color'          => '{{ data.border_focus_color }}',
     285                'sidebar_textcolor'           => '{{ data.sidebar_textcolor }}',
     286                'sidebar_border_color'        => '{{ data.sidebar_border_color }}',
     287                'sidebar_border_focus_color'  => '{{ data.sidebar_border_focus_color }}',
     288                'secondary_sidebar_textcolor' => '{{ data.secondary_sidebar_textcolor }}',
     289                'meta_box_background_color'   => '{{ data.meta_box_background_color }}',
     290        );
    277291        ?>
    278292        <script type="text/html" id="tmpl-twentyfifteen-color-scheme">
     293        <?php echo twentyfifteen_get_color_scheme_css( $js_defaults ); ?>
     294        </script>
     295        <?php
     296}
     297add_action( 'customize_controls_print_footer_scripts', 'twentyfifteen_color_scheme_css_template' );
     298
     299function twentyfifteen_get_color_scheme_css( $colors = array() ) {
     300        $css_vars = wp_parse_args( $colors, array(
     301                'background_color'            => '',
     302                'header_background_color'     => '',
     303                'box_background_color'        => '',
     304                'textcolor'                   => '',
     305                'secondary_textcolor'         => '',
     306                'border_color'                => '',
     307                'border_focus_color'          => '',
     308                'sidebar_textcolor'           => '',
     309                'sidebar_border_color'        => '',
     310                'sidebar_border_focus_color'  => '',
     311                'secondary_sidebar_textcolor' => '',
     312                'meta_box_background_color'   => '',
     313        ) );
     314
     315        $css = <<<CSS
    279316        /* Color Scheme */
    280317
    281318        /* Background Color */
    282319        body {
    283                 background-color: {{ data.background_color }};
     320                background-color: {$css_vars['background_color']};
    284321        }
    285322
    286323        /* Sidebar Background Color */
    287324        body:before,
    288325        .site-header {
    289                 background-color: {{ data.header_background_color }};
     326                background-color: {$css_vars['header_background_color']};
    290327        }
    291328
    292329        /* Box Background Color */
    … …  
    298335        .page-header,
    299336        .page-content,
    300337        .comments-area {
    301                 background-color: {{ data.box_background_color }};
     338                background-color: {$css_vars['box_background_color']};
    302339        }
    303340
    304341        /* Box Background Color */
    … …  
    315352        .page-links a:hover,
    316353        .page-links a:focus,
    317354        .sticky-post {
    318                 color: {{ data.box_background_color }};
     355                color: {$css_vars['box_background_color']};
    319356        }
    320357
    321358        /* Main Text Color */
    … …  
    328365        .widget_calendar tbody a,
    329366        .page-links a,
    330367        .sticky-post {
    331                 background-color: {{ data.textcolor }};
     368                background-color: {$css_vars['textcolor']};
    332369        }
    333370
    334371        /* Main Text Color */
    … …  
    352389        .comment-list .reply a:focus,
    353390        .site-info a:hover,
    354391        .site-info a:focus {
    355                 color: {{ data.textcolor }};
     392                color: {$css_vars['textcolor']};
    356393        }
    357394
    358395        /* Main Text Color */
    … …  
    369406        .pingback .edit-link a:hover,
    370407        .comment-list .reply a:hover,
    371408        .site-info a:hover {
    372                 border-color: {{ data.textcolor }};
     409                border-color: {$css_vars['textcolor']};
    373410        }
    374411
    375412        /* Secondary Text Color */
    … …  
    389426        .widget_calendar tbody a:focus,
    390427        .page-links a:hover,
    391428        .page-links a:focus {
    392                 background-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
    393                 background-color: {{ data.secondary_textcolor }};
     429                background-color: {$css_vars['textcolor']}; /* Fallback for IE7 and IE8 */
     430                background-color: {$css_vars['secondary_textcolor']};
    394431        }
    395432
    396433        /* Secondary Text Color */
    … …  
    429466        .wp-caption-text,
    430467        .gallery-caption,
    431468        .comment-list .reply a {
    432                 color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
    433                 color: {{ data.secondary_textcolor }};
     469                color: {$css_vars['textcolor']}; /* Fallback for IE7 and IE8 */
     470                color: {$css_vars['secondary_textcolor']};
    434471        }
    435472
    436473        /* Secondary Text Color */
    … …  
    437474        blockquote,
    438475        .logged-in-as a:hover,
    439476        .comment-author a:hover {
    440                 border-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
    441                 border-color: {{ data.secondary_textcolor }};
     477                border-color: {$css_vars['textcolor']}; /* Fallback for IE7 and IE8 */
     478                border-color: {$css_vars['secondary_textcolor']};
    442479        }
    443480
    444481        /* Border Color */
    … …  
    445482        hr,
    446483        .dropdown-toggle:hover,
    447484        .dropdown-toggle:focus {
    448                 background-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
    449                 background-color: {{ data.border_color }};
     485                background-color: {$css_vars['textcolor']}; /* Fallback for IE7 and IE8 */
     486                background-color: {$css_vars['border_color']};
    450487        }
    451488
    452489        /* Border Color */
    … …  
    481518        .comment-list .trackback,
    482519        .comment-list .reply a,
    483520        .no-comments {
    484                 border-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
    485                 border-color: {{ data.border_color }};
     521                border-color: {$css_vars['textcolor']}; /* Fallback for IE7 and IE8 */
     522                border-color: {$css_vars['border_color']};
    486523        }
    487524
    488525        /* Border Focus Color */
    … …  
    489526        a:focus,
    490527        button:focus,
    491528        input:focus {
    492                 outline-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
    493                 outline-color: {{ data.border_focus_color }};
     529                outline-color: {$css_vars['textcolor']}; /* Fallback for IE7 and IE8 */
     530                outline-color: {$css_vars['border_focus_color']};
    494531        }
    495532
    496533        input:focus,
    497534        textarea:focus {
    498                 border-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
    499                 border-color: {{ data.border_focus_color }};
     535                border-color: {$css_vars['textcolor']}; /* Fallback for IE7 and IE8 */
     536                border-color: {$css_vars['border_focus_color']};
    500537        }
    501538
    502539        /* Sidebar Link Color */
    503540        .secondary-toggle:before {
    504                 color: {{ data.sidebar_textcolor }};
     541                color: {$css_vars['sidebar_textcolor']};
    505542        }
    506543
    507544        .site-title a,
    508545        .site-description {
    509                 color: {{ data.sidebar_textcolor }};
     546                color: {$css_vars['sidebar_textcolor']};
    510547        }
    511548
    512549        /* Sidebar Text Color */
    513550        .site-title a:hover,
    514551        .site-title a:focus {
    515                 color: {{ data.secondary_sidebar_textcolor }};
     552                color: {$css_vars['secondary_sidebar_textcolor']};
    516553        }
    517554
    518555        /* Sidebar Border Color */
    519556        .secondary-toggle {
    520                 border-color: {{ data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */
    521                 border-color: {{ data.sidebar_border_color }};
     557                border-color: {$css_vars['sidebar_textcolor']}; /* Fallback for IE7 and IE8 */
     558                border-color: {$css_vars['sidebar_border_color']};
    522559        }
    523560
    524561        /* Sidebar Border Focus Color */
    525562        .secondary-toggle:hover,
    526563        .secondary-toggle:focus {
    527                 border-color: {{ data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */
    528                 border-color: {{ data.sidebar_border_focus_color }};
     564                border-color: {$css_vars['sidebar_textcolor']}; /* Fallback for IE7 and IE8 */
     565                border-color: {$css_vars['sidebar_border_focus_color']};
    529566        }
    530567
    531568        .site-title a {
    532                 outline-color: {{ data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */
    533                 outline-color: {{ data.sidebar_border_focus_color }};
     569                outline-color: {$css_vars['sidebar_textcolor']}; /* Fallback for IE7 and IE8 */
     570                outline-color: {$css_vars['sidebar_border_focus_color']};
    534571        }
    535572
    536573        /* Meta Background Color */
    537574        .entry-footer {
    538                 background-color: {{ data.meta_box_background_color }};
     575                background-color: {$css_vars['meta_box_background_color']};
    539576        }
    540577
    541578        @media screen and (min-width: 38.75em) {
    542579                /* Main Text Color */
    543580                .page-header {
    544                         border-color: {{ data.textcolor }};
     581                        border-color: {$css_vars['textcolor']};
    545582                }
    546583        }
    547584
    … …  
    560597                .widget_calendar tbody a,
    561598                .widget_calendar tbody a:hover,
    562599                .widget_calendar tbody a:focus {
    563                         color: {{ data.header_background_color }};
     600                        color: {$css_vars['header_background_color']};
    564601                }
    565602
    566603                /* Sidebar Link Color */
    … …  
    569606                .widget-title,
    570607                .widget blockquote cite,
    571608                .widget blockquote small {
    572                         color: {{ data.sidebar_textcolor }};
     609                        color: {$css_vars['sidebar_textcolor']};
    573610                }
    574611
    575612                .widget button,
    … …  
    577614                .widget input[type="reset"],
    578615                .widget input[type="submit"],
    579616                .widget_calendar tbody a {
    580                         background-color: {{ data.sidebar_textcolor }};
     617                        background-color: {$css_vars['sidebar_textcolor']};
    581618                }
    582619
    583620                .textwidget a {
    584                         border-color: {{ data.sidebar_textcolor }};
     621                        border-color: {$css_vars['sidebar_textcolor']};
    585622                }
    586623
    587624                /* Sidebar Text Color */
    … …  
    592629                .widget blockquote,
    593630                .widget .wp-caption-text,
    594631                .widget .gallery-caption {
    595                         color: {{ data.secondary_sidebar_textcolor }};
     632                        color: {$css_vars['secondary_sidebar_textcolor']};
    596633                }
    597634
    598635                .widget button:hover,
    … …  
    605642                .widget input[type="submit"]:focus,
    606643                .widget_calendar tbody a:hover,
    607644                .widget_calendar tbody a:focus {
    608                         background-color: {{ data.secondary_sidebar_textcolor }};
     645                        background-color: {$css_vars['secondary_sidebar_textcolor']};
    609646                }
    610647
    611648                .widget blockquote {
    612                         border-color: {{ data.secondary_sidebar_textcolor }};
     649                        border-color: {$css_vars['secondary_sidebar_textcolor']};
    613650                }
    614651
    615652                /* Sidebar Border Color */
    … …  
    626663                .widget_nav_menu .sub-menu,
    627664                .widget_pages .children,
    628665                .widget abbr[title] {
    629                         border-color: {{ data.sidebar_border_color }};
     666                        border-color: {$css_vars['sidebar_border_color']};
    630667                }
    631668
    632669                .dropdown-toggle:hover,
    633670                .dropdown-toggle:focus,
    634671                .widget hr {
    635                         background-color: {{ data.sidebar_border_color }};
     672                        background-color: {$css_vars['sidebar_border_color']};
    636673                }
    637674
    638675                .widget input:focus,
    639676                .widget textarea:focus {
    640                         border-color: {{ data.sidebar_border_focus_color }};
     677                        border-color: {$css_vars['sidebar_border_focus_color']};
    641678                }
    642679
    643680                .sidebar a:focus,
    644681                .dropdown-toggle:focus {
    645                         outline-color: {{ data.sidebar_border_focus_color }};
     682                        outline-color: {$css_vars['sidebar_border_focus_color']};
    646683                }
    647684        }
    648         </script>
    649         <?php
    650 }
    651 add_action( 'customize_controls_print_footer_scripts', 'twentyfifteen_color_scheme_css_template' );
     685CSS;
     686
     687        return $css;
     688}
     689 No newline at end of file