Make WordPress Core

Ticket #29988: 29988.js.patch

File 29988.js.patch, 25.7 KB (added by bradyvercher, 10 years ago)
  • src/wp-content/themes/twentyfifteen/inc/customizer.php

    diff --git src/wp-content/themes/twentyfifteen/inc/customizer.php src/wp-content/themes/twentyfifteen/inc/customizer.php
    index 87636e7..69d8b17 100644
    function twentyfifteen_customize_register( $wp_customize ) { 
    1919
    2020        $wp_customize->get_setting( 'blogname' )->transport         = 'postMessage';
    2121        $wp_customize->get_setting( 'blogdescription' )->transport  = 'postMessage';
    22         $wp_customize->get_setting( 'background_color' )->transport = 'refresh';
     22        $wp_customize->get_setting( 'background_color' )->transport = 'postMessage';
    2323
    2424        // Add color scheme setting and control.
    2525        $wp_customize->add_setting( 'color_scheme', array(
    2626                'default'           => 'default',
    2727                'sanitize_callback' => 'twentyfifteen_sanitize_color_scheme',
     28                'transport'         => 'postMessage',
     29        ) );
     30
     31        $wp_customize->add_setting( 'color_scheme_css', array(
     32                'default'           => '',
     33                'sanitize_callback' => 'esc_html',
     34                'transport'         => 'postMessage',
    2835        ) );
    2936
    3037        $wp_customize->add_control( 'color_scheme', array(
    function twentyfifteen_customize_register( $wp_customize ) { 
    3946        $wp_customize->add_setting( 'sidebar_textcolor', array(
    4047                'default'           => $color_scheme[4],
    4148                'sanitize_callback' => 'sanitize_hex_color',
     49                'transport'         => 'postMessage',
    4250        ) );
    4351
    4452        $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'sidebar_textcolor', array(
    function twentyfifteen_customize_register( $wp_customize ) { 
    5361        $wp_customize->add_setting( 'header_background_color', array(
    5462                'default'           => $color_scheme[1],
    5563                'sanitize_callback' => 'sanitize_hex_color',
     64                'transport'         => 'postMessage',
    5665        ) );
    5766
    5867        $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_background_color', array(
    endif; // twentyfifteen_sanitize_color_scheme 
    217226 */
    218227function twentyfifteen_color_scheme_css() {
    219228        $color_scheme_option = get_theme_mod( 'color_scheme', 'default' );
     229        $color_scheme_css    = get_theme_mod( 'color_scheme_css', '' );
    220230
    221231        // Don't do anything if the default color scheme is selected.
    222         if ( 'default' === $color_scheme_option ) {
     232        if ( 'default' === $color_scheme_option || empty( $color_scheme_css ) ) {
    223233                return;
    224234        }
    225235
    226         // If we get this far, we have custom styles. Let's do this.
    227         $color_scheme = twentyfifteen_get_color_scheme();
     236        wp_add_inline_style( 'twentyfifteen-style', $color_scheme_css );
     237}
     238add_action( 'wp_enqueue_scripts', 'twentyfifteen_color_scheme_css' );
    228239
    229         // Convert main and sidebar text hex color to rgba.
    230         $color_main_text_rgb        = twentyfifteen_hex2rgb( $color_scheme[3] );
    231         $color_sidebar_link_rgb     = twentyfifteen_hex2rgb( $color_scheme[4] );
    232 
    233         $color_background           = $color_scheme[0];
    234         $color_sidebar_background   = $color_scheme[1];
    235         $color_box_background       = $color_scheme[2];
    236         $color_main_text            = $color_scheme[3];
    237         $color_secondary_text       = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.7)', $color_main_text_rgb );
    238         $color_border               = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.1)', $color_main_text_rgb );
    239         $color_border_focus         = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.3)', $color_main_text_rgb );
    240         $color_sidebar_link         = $color_scheme[4];
    241         $color_sidebar_text         = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.7)', $color_sidebar_link_rgb );
    242         $color_sidebar_border       = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.1)', $color_sidebar_link_rgb );
    243         $color_sidebar_border_focus = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.3)', $color_sidebar_link_rgb );
    244         $color_meta_box             = $color_scheme[5];
    245 
    246         $css = '
    247                 /* Color Scheme */
    248 
    249                 /* Background Color */
    250                 body {
    251                         background-color: %1$s;
    252                 }
     240/**
     241 * Binds JS listener to make Customizer color_scheme control.
     242 * Passes color scheme data as colorScheme global.
     243 *
     244 * @since Twenty Fifteen 1.0
     245 */
     246function twentyfifteen_customize_control_js() {
     247        wp_enqueue_script( 'color-scheme-control', get_template_directory_uri() . '/js/color-scheme-control.js', array( 'customize-controls', 'iris', 'underscore', 'wp-util' ), '', true  );
     248        wp_localize_script( 'color-scheme-control', 'colorScheme', twentyfifteen_get_color_schemes() );
     249}
     250add_action( 'customize_controls_enqueue_scripts', 'twentyfifteen_customize_control_js' );
    253251
    254                 /* Sidebar Background Color */
    255                 body:before,
    256                 .site-header {
    257                         background-color: %2$s;
    258                 }
     252/**
     253 * Binds JS handlers to make Customizer preview reload changes asynchronously.
     254 *
     255 * @since Twenty Fifteen 1.0
     256 */
     257function twentyfifteen_customize_preview_js() {
     258        wp_enqueue_script( 'twentyfifteen-customizer', get_template_directory_uri() . '/js/customizer.js', array( 'customize-preview' ), '20141005', true );
     259}
     260add_action( 'customize_preview_init', 'twentyfifteen_customize_preview_js' );
     261
     262/**
     263 * Output an Underscore template for generating CSS for the color scheme.
     264 *
     265 * @since Twenty Fifteen 1.0
     266 */
     267function twentyfifteen_color_scheme_css_template() {
     268        ?>
     269        <script type="text/html" id="tmpl-twentyfifteen-color-scheme">
     270        /* Color Scheme */
     271
     272        /* Background Color */
     273        body {
     274                background-color: {{ data.background_color }};
     275        }
     276
     277        /* Sidebar Background Color */
     278        body:before,
     279        .site-header {
     280                background-color: {{ data.header_background_color }};
     281        }
     282
     283        /* Box Background Color */
     284        .post-navigation,
     285        .pagination,
     286        .secondary,
     287        .site-footer,
     288        .hentry,
     289        .page-header,
     290        .page-content,
     291        .comments-area {
     292                background-color: {{ data.box_background_color }};
     293        }
     294
     295        /* Box Background Color */
     296        button,
     297        input[type="button"],
     298        input[type="reset"],
     299        input[type="submit"],
     300        .pagination .prev,
     301        .pagination .next,
     302        .pagination .prev:before,
     303        .pagination .next:before,
     304        .widget_calendar tbody a,
     305        .widget_calendar tbody a:hover,
     306        .widget_calendar tbody a:focus,
     307        .entry-content .page-links a,
     308        .entry-content .page-links a:hover,
     309        .entry-content .page-links a:focus,
     310        .sticky-post {
     311                color: {{ data.box_background_color }};
     312        }
     313
     314        /* Main Text Color */
     315        button,
     316        input[type="button"],
     317        input[type="reset"],
     318        input[type="submit"],
     319        .pagination .prev,
     320        .pagination .next,
     321        .widget_calendar tbody a,
     322        .page-links a,
     323        .sticky-post {
     324                background-color: {{ data.textcolor }};
     325        }
     326
     327        /* Main Text Color */
     328        body,
     329        blockquote cite,
     330        blockquote small,
     331        a,
     332        .dropdown-toggle:after,
     333        .image-navigation a:hover,
     334        .image-navigation a:focus,
     335        .comment-navigation a:hover,
     336        .comment-navigation a:focus,
     337        .widget-title,
     338        .entry-footer a:hover,
     339        .entry-footer a:focus,
     340        .comment-metadata a:hover,
     341        .comment-metadata a:focus,
     342        .pingback .edit-link a:hover,
     343        .pingback .edit-link a:focus,
     344        .comment-list .reply a:hover,
     345        .comment-list .reply a:focus,
     346        .site-info a:hover,
     347        .site-info a:focus {
     348                color: {{ data.textcolor }};
     349        }
     350
     351        /* Main Text Color */
     352        .entry-content a,
     353        .entry-summary a,
     354        .page-content a,
     355        .comment-content a,
     356        .pingback .comment-body > a,
     357        .author-description a,
     358        .taxonomy-description a,
     359        .textwidget a,
     360        .entry-footer a:hover,
     361        .comment-metadata a:hover,
     362        .pingback .edit-link a:hover,
     363        .comment-list .reply a:hover,
     364        .site-info a:hover {
     365                border-color: {{ data.textcolor }};
     366        }
     367
     368        /* Secondary Text Color */
     369        button:hover,
     370        button:focus,
     371        input[type="button"]:hover,
     372        input[type="button"]:focus,
     373        input[type="reset"]:hover,
     374        input[type="reset"]:focus,
     375        input[type="submit"]:hover,
     376        input[type="submit"]:focus,
     377        .pagination .prev:hover,
     378        .pagination .prev:focus,
     379        .pagination .next:hover,
     380        .pagination .next:focus,
     381        .widget_calendar tbody a:hover,
     382        .widget_calendar tbody a:focus,
     383        .page-links a:hover,
     384        .page-links a:focus {
     385                background-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
     386                background-color: {{ data.secondary_textcolor }};
     387        }
     388
     389        /* Secondary Text Color */
     390        blockquote,
     391        a:hover,
     392        a:focus,
     393        .main-navigation .menu-item-description,
     394        .post-navigation .meta-nav,
     395        .post-navigation a:hover .post-title,
     396        .post-navigation a:focus .post-title,
     397        .image-navigation,
     398        .image-navigation a,
     399        .comment-navigation,
     400        .comment-navigation a,
     401        .widget,
     402        .author-heading,
     403        .entry-footer,
     404        .entry-footer a,
     405        .taxonomy-description,
     406        .page-links > .page-links-title,
     407        .entry-caption,
     408        .comment-author,
     409        .comment-metadata,
     410        .comment-metadata a,
     411        .pingback .edit-link,
     412        .pingback .edit-link a,
     413        .post-password-form label,
     414        .comment-form label,
     415        .comment-notes,
     416        .comment-awaiting-moderation,
     417        .logged-in-as,
     418        .form-allowed-tags,
     419        .no-comments,
     420        .site-info,
     421        .site-info a,
     422        .wp-caption-text,
     423        .gallery-caption,
     424        .comment-list .reply a {
     425                color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
     426                color: {{ data.secondary_textcolor }};
     427        }
     428
     429        /* Secondary Text Color */
     430        blockquote,
     431        .logged-in-as a:hover,
     432        .comment-author a:hover {
     433                border-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
     434                border-color: {{ data.secondary_textcolor }};
     435        }
     436
     437        /* Border Color */
     438        hr,
     439        .dropdown-toggle:hover,
     440        .dropdown-toggle:focus {
     441                background-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
     442                background-color: {{ data.border_color }};
     443        }
     444
     445        /* Border Color */
     446        pre,
     447        abbr[title],
     448        table,
     449        th,
     450        td,
     451        input,
     452        textarea,
     453        .main-navigation ul,
     454        .main-navigation li,
     455        .post-navigation,
     456        .pagination,
     457        .comment-navigation,
     458        .widget li,
     459        .widget_categories .children,
     460        .widget_nav_menu .sub-menu,
     461        .widget_pages .children,
     462        .site-header,
     463        .site-footer,
     464        .hentry + .hentry,
     465        .author-info,
     466        .entry-content .page-links a,
     467        .page-links > span,
     468        .page-header,
     469        .comments-area,
     470        .comment-list + .comment-respond,
     471        .comment-list article,
     472        .comment-list .pingback,
     473        .comment-list .trackback,
     474        .comment-list .reply a,
     475        .no-comments {
     476                border-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
     477                border-color: {{ data.border_color }};
     478        }
     479
     480        .post-navigation .nav-previous:not(.has-post-thumbnail) + .nav-next:not(.has-post-thumbnail) {
     481                border-color: {{ data.border_color }};
     482        }
     483
     484        /* Border Focus Color */
     485        a:focus,
     486        button:focus,
     487        input:focus {
     488                outline-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
     489                outline-color: {{ data.border_focus_color }};
     490        }
     491
     492        input:focus,
     493        textarea:focus {
     494                border-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
     495                border-color: {{ data.border_focus_color }};
     496        }
     497
     498        /* Sidebar Link Color */
     499        .secondary-toggle:before {
     500                color: {{ data.sidebar_textcolor }};
     501        }
     502
     503        .site-title a,
     504        .site-description {
     505                color: {{ data.sidebar_textcolor }};
     506        }
     507
     508        /* Sidebar Text Color */
     509        .site-title a:hover,
     510        .site-title a:focus {
     511                color: {{ data.sidebar_textcolor2 }};
     512        }
     513
     514        /* Sidebar Border Color */
     515        .secondary-toggle {
     516                border-color: {{ data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */
     517                border-color: {{ data.sidebar_border_color }};
     518        }
     519
     520        /* Sidebar Border Focus Color */
     521        .secondary-toggle:hover,
     522        .secondary-toggle:focus {
     523                border-color: {{ data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */
     524                border-color: {{ data.sidebar_border_focus_color }};
     525        }
     526
     527        .site-title a {
     528                outline-color: {{ data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */
     529                outline-color: {{ data.sidebar_border_focus_color }};
     530        }
     531
     532        /* Meta Background Color */
     533        .entry-footer {
     534                background-color: {{ data.meta_box_background_color }};
     535        }
    259536
    260                 /* Box Background Color */
    261                 .post-navigation,
    262                 .pagination,
    263                 .secondary,
    264                 .site-footer,
    265                 .hentry,
    266                 .page-header,
    267                 .page-content,
    268                 .comments-area {
    269                         background-color: %3$s;
     537        @media screen and (min-width: 38.75em) {
     538                /* Main Text Color */
     539                .page-header {
     540                        border-color: {{ data.textcolor }};
    270541                }
     542        }
    271543
    272                 /* Box Background Color */
    273                 button,
    274                 input[type="button"],
    275                 input[type="reset"],
    276                 input[type="submit"],
    277                 .pagination .prev,
    278                 .pagination .next,
    279                 .pagination .prev:before,
    280                 .pagination .next:before,
    281                 .widget_calendar tbody a,
    282                 .widget_calendar tbody a:hover,
    283                 .widget_calendar tbody a:focus,
    284                 .entry-content .page-links a,
    285                 .entry-content .page-links a:hover,
    286                 .entry-content .page-links a:focus,
    287                 .sticky-post {
    288                         color: %3$s;
     544        @media screen and (min-width: 59.6875em) {
     545                /* Make sure its transparent on desktop */
     546                .site-header,
     547                .secondary {
     548                        background-color: transparent;
    289549                }
    290550
    291                 /* Main Text Color */
    292                 button,
    293                 input[type="button"],
    294                 input[type="reset"],
    295                 input[type="submit"],
    296                 .pagination .prev,
    297                 .pagination .next,
     551                /* Sidebar Background Color */
     552                .widget button,
     553                .widget input[type="button"],
     554                .widget input[type="reset"],
     555                .widget input[type="submit"],
    298556                .widget_calendar tbody a,
    299                 .page-links a,
    300                 .sticky-post {
    301                         background-color: %4$s;
     557                .widget_calendar tbody a:hover,
     558                .widget_calendar tbody a:focus {
     559                        color: {{ data.header_background_color }};
    302560                }
    303561
    304                 /* Main Text Color */
    305                 body,
    306                 blockquote cite,
    307                 blockquote small,
    308                 a,
     562                /* Sidebar Link Color */
     563                .secondary a,
    309564                .dropdown-toggle:after,
    310                 .image-navigation a:hover,
    311                 .image-navigation a:focus,
    312                 .comment-navigation a:hover,
    313                 .comment-navigation a:focus,
    314565                .widget-title,
    315                 .entry-footer a:hover,
    316                 .entry-footer a:focus,
    317                 .comment-metadata a:hover,
    318                 .comment-metadata a:focus,
    319                 .pingback .edit-link a:hover,
    320                 .pingback .edit-link a:focus,
    321                 .comment-list .reply a:hover,
    322                 .comment-list .reply a:focus,
    323                 .site-info a:hover,
    324                 .site-info a:focus {
    325                         color: %4$s;
     566                .widget blockquote cite,
     567                .widget blockquote small {
     568                        color: {{ data.sidebar_textcolor }};
    326569                }
    327570
    328                 /* Main Text Color */
    329                 .entry-content a,
    330                 .entry-summary a,
    331                 .page-content a,
    332                 .comment-content a,
    333                 .pingback .comment-body > a,
    334                 .author-description a,
    335                 .taxonomy-description a,
    336                 .textwidget a,
    337                 .entry-footer a:hover,
    338                 .comment-metadata a:hover,
    339                 .pingback .edit-link a:hover,
    340                 .comment-list .reply a:hover,
    341                 .site-info a:hover {
    342                         border-color: %4$s;
     571                .widget button,
     572                .widget input[type="button"],
     573                .widget input[type="reset"],
     574                .widget input[type="submit"],
     575                .widget_calendar tbody a {
     576                        background-color: {{ data.sidebar_textcolor }};
    343577                }
    344578
    345                 /* Secondary Text Color */
    346                 button:hover,
    347                 button:focus,
    348                 input[type="button"]:hover,
    349                 input[type="button"]:focus,
    350                 input[type="reset"]:hover,
    351                 input[type="reset"]:focus,
    352                 input[type="submit"]:hover,
    353                 input[type="submit"]:focus,
    354                 .pagination .prev:hover,
    355                 .pagination .prev:focus,
    356                 .pagination .next:hover,
    357                 .pagination .next:focus,
    358                 .widget_calendar tbody a:hover,
    359                 .widget_calendar tbody a:focus,
    360                 .page-links a:hover,
    361                 .page-links a:focus {
    362                         background-color: %4$s; /* Fallback for IE7 and IE8 */
    363                         background-color: %5$s;
     579                .textwidget a {
     580                        border-color: {{ data.sidebar_textcolor }};
    364581                }
    365582
    366                 /* Secondary Text Color */
    367                 blockquote,
    368                 a:hover,
    369                 a:focus,
     583                /* Sidebar Text Color */
     584                .secondary a:hover,
     585                .secondary a:focus,
    370586                .main-navigation .menu-item-description,
    371                 .post-navigation .meta-nav,
    372                 .post-navigation a:hover .post-title,
    373                 .post-navigation a:focus .post-title,
    374                 .image-navigation,
    375                 .image-navigation a,
    376                 .comment-navigation,
    377                 .comment-navigation a,
    378587                .widget,
    379                 .author-heading,
    380                 .entry-footer,
    381                 .entry-footer a,
    382                 .taxonomy-description,
    383                 .page-links > .page-links-title,
    384                 .entry-caption,
    385                 .comment-author,
    386                 .comment-metadata,
    387                 .comment-metadata a,
    388                 .pingback .edit-link,
    389                 .pingback .edit-link a,
    390                 .post-password-form label,
    391                 .comment-form label,
    392                 .comment-notes,
    393                 .comment-awaiting-moderation,
    394                 .logged-in-as,
    395                 .form-allowed-tags,
    396                 .no-comments,
    397                 .site-info,
    398                 .site-info a,
    399                 .wp-caption-text,
    400                 .gallery-caption,
    401                 .comment-list .reply a {
    402                         color: %4$s; /* Fallback for IE7 and IE8 */
    403                         color: %5$s;
     588                .widget blockquote,
     589                .widget .wp-caption-text,
     590                .widget .gallery-caption {
     591                        color: {{ data.sidebar_textcolor2 }};
    404592                }
    405593
    406                 /* Secondary Text Color */
    407                 blockquote,
    408                 .logged-in-as a:hover,
    409                 .comment-author a:hover {
    410                         border-color: %4$s; /* Fallback for IE7 and IE8 */
    411                         border-color: %5$s;
     594                .widget button:hover,
     595                .widget button:focus,
     596                .widget input[type="button"]:hover,
     597                .widget input[type="button"]:focus,
     598                .widget input[type="reset"]:hover,
     599                .widget input[type="reset"]:focus,
     600                .widget input[type="submit"]:hover,
     601                .widget input[type="submit"]:focus,
     602                .widget_calendar tbody a:hover,
     603                .widget_calendar tbody a:focus {
     604                        background-color: {{ data.sidebar_textcolor2 }};
    412605                }
    413606
    414                 /* Border Color */
    415                 hr,
    416                 .dropdown-toggle:hover,
    417                 .dropdown-toggle:focus {
    418                         background-color: %4$s; /* Fallback for IE7 and IE8 */
    419                         background-color: %6$s;
     607                .widget blockquote {
     608                        border-color: {{ data.sidebar_textcolor2 }};
    420609                }
    421610
    422                 /* Border Color */
    423                 pre,
    424                 abbr[title],
    425                 table,
    426                 th,
    427                 td,
    428                 input,
    429                 textarea,
     611                /* Sidebar Border Color */
    430612                .main-navigation ul,
    431613                .main-navigation li,
    432                 .post-navigation,
    433                 .pagination,
    434                 .comment-navigation,
     614                .widget input,
     615                .widget textarea,
     616                .widget table,
     617                .widget th,
     618                .widget td,
     619                .widget pre,
    435620                .widget li,
    436621                .widget_categories .children,
    437622                .widget_nav_menu .sub-menu,
    438623                .widget_pages .children,
    439                 .site-header,
    440                 .site-footer,
    441                 .hentry + .hentry,
    442                 .author-info,
    443                 .entry-content .page-links a,
    444                 .page-links > span,
    445                 .page-header,
    446                 .comments-area,
    447                 .comment-list + .comment-respond,
    448                 .comment-list article,
    449                 .comment-list .pingback,
    450                 .comment-list .trackback,
    451                 .comment-list .reply a,
    452                 .no-comments {
    453                         border-color: %4$s; /* Fallback for IE7 and IE8 */
    454                         border-color: %6$s;
    455                 }
    456 
    457                 .post-navigation .nav-previous:not(.has-post-thumbnail) + .nav-next:not(.has-post-thumbnail) {
    458                         border-color: %6$s;
    459                 }
    460 
    461                 /* Border Focus Color */
    462                 a:focus,
    463                 button:focus,
    464                 input:focus {
    465                         outline-color: %4$s; /* Fallback for IE7 and IE8 */
    466                         outline-color: %7$s;
     624                .widget abbr[title] {
     625                        border-color: {{ data.sidebar_border_color }};
    467626                }
    468627
    469                 input:focus,
    470                 textarea:focus {
    471                         border-color: %4$s; /* Fallback for IE7 and IE8 */
    472                         border-color: %7$s;
    473                 }
    474 
    475                 /* Sidebar Link Color */
    476                 .secondary-toggle:before {
    477                         color: %8$s;
    478                 }
    479 
    480                 .site-title a,
    481                 .site-description {
    482                         color: %8$s;
    483                 }
    484 
    485                 /* Sidebar Text Color */
    486                 .site-title a:hover,
    487                 .site-title a:focus {
    488                         color: %9$s;
    489                 }
    490 
    491                 /* Sidebar Border Color */
    492                 .secondary-toggle {
    493                         border-color: %8$s; /* Fallback for IE7 and IE8 */
    494                         border-color: %10$s;
    495                 }
    496 
    497                 /* Sidebar Border Focus Color */
    498                 .secondary-toggle:hover,
    499                 .secondary-toggle:focus {
    500                         border-color: %8$s; /* Fallback for IE7 and IE8 */
    501                         border-color: %11$s;
    502                 }
    503 
    504                 .site-title a {
    505                         outline-color: %8$s; /* Fallback for IE7 and IE8 */
    506                         outline-color: %11$s;
    507                 }
    508 
    509                 /* Meta Background Color */
    510                 .entry-footer {
    511                         background-color: %12$s;
     628                .dropdown-toggle:hover,
     629                .dropdown-toggle:focus,
     630                .widget hr {
     631                        background-color: {{ data.sidebar_border_color }};
    512632                }
    513633
    514                 @media screen and (min-width: 38.75em) {
    515                         /* Main Text Color */
    516                         .page-header {
    517                                 border-color: %4$s;
    518                         }
     634                .widget input:focus,
     635                .widget textarea:focus {
     636                        border-color: {{ data.sidebar_border_focus_color }};
    519637                }
    520638
    521                 @media screen and (min-width: 59.6875em) {
    522                         /* Make sure its transparent on desktop */
    523                         .site-header,
    524                         .secondary {
    525                                 background-color: transparent;
    526                         }
    527 
    528                         /* Sidebar Background Color */
    529                         .widget button,
    530                         .widget input[type="button"],
    531                         .widget input[type="reset"],
    532                         .widget input[type="submit"],
    533                         .widget_calendar tbody a,
    534                         .widget_calendar tbody a:hover,
    535                         .widget_calendar tbody a:focus {
    536                                 color: %2$s;
    537                         }
    538 
    539                         /* Sidebar Link Color */
    540                         .secondary a,
    541                         .dropdown-toggle:after,
    542                         .widget-title,
    543                         .widget blockquote cite,
    544                         .widget blockquote small {
    545                                 color: %8$s;
    546                         }
    547 
    548                         .widget button,
    549                         .widget input[type="button"],
    550                         .widget input[type="reset"],
    551                         .widget input[type="submit"],
    552                         .widget_calendar tbody a {
    553                                 background-color: %8$s;
    554                         }
    555 
    556                         .textwidget a {
    557                                 border-color: %8$s;
    558                         }
    559 
    560                         /* Sidebar Text Color */
    561                         .secondary a:hover,
    562                         .secondary a:focus,
    563                         .main-navigation .menu-item-description,
    564                         .widget,
    565                         .widget blockquote,
    566                         .widget .wp-caption-text,
    567                         .widget .gallery-caption {
    568                                 color: %9$s;
    569                         }
    570 
    571                         .widget button:hover,
    572                         .widget button:focus,
    573                         .widget input[type="button"]:hover,
    574                         .widget input[type="button"]:focus,
    575                         .widget input[type="reset"]:hover,
    576                         .widget input[type="reset"]:focus,
    577                         .widget input[type="submit"]:hover,
    578                         .widget input[type="submit"]:focus,
    579                         .widget_calendar tbody a:hover,
    580                         .widget_calendar tbody a:focus {
    581                                 background-color: %9$s;
    582                         }
    583 
    584                         .widget blockquote {
    585                                 border-color: %9$s;
    586                         }
    587 
    588                         /* Sidebar Border Color */
    589                         .main-navigation ul,
    590                         .main-navigation li,
    591                         .widget input,
    592                         .widget textarea,
    593                         .widget table,
    594                         .widget th,
    595                         .widget td,
    596                         .widget pre,
    597                         .widget li,
    598                         .widget_categories .children,
    599                         .widget_nav_menu .sub-menu,
    600                         .widget_pages .children,
    601                         .widget abbr[title] {
    602                                 border-color: %10$s;
    603                         }
    604 
    605                         .dropdown-toggle:hover,
    606                         .dropdown-toggle:focus,
    607                         .widget hr {
    608                                 background-color: %10$s;
    609                         }
    610 
    611                         .widget input:focus,
    612                         .widget textarea:focus {
    613                                 border-color: %11$s;
    614                         }
    615 
    616                         .sidebar a:focus,
    617                         .dropdown-toggle:focus {
    618                                 outline-color: %11$s;
    619                         }
     639                .sidebar a:focus,
     640                .dropdown-toggle:focus {
     641                        outline-color: {{ data.sidebar_border_focus_color }};
    620642                }
    621         ';
    622 
    623         wp_add_inline_style( 'twentyfifteen-style', sprintf( $css,
    624                 $color_background,
    625                 $color_sidebar_background,
    626                 $color_box_background,
    627                 $color_main_text,
    628                 $color_secondary_text,
    629                 $color_border,
    630                 $color_border_focus,
    631                 $color_sidebar_link,
    632                 $color_sidebar_text,
    633                 $color_sidebar_border,
    634                 $color_sidebar_border_focus,
    635                 $color_meta_box
    636         ) );
    637 }
    638 add_action( 'wp_enqueue_scripts', 'twentyfifteen_color_scheme_css' );
    639 
    640 /**
    641  * Binds JS listener to make Customizer color_scheme control.
    642  * Passes color scheme data as colorScheme global.
    643  *
    644  * @since Twenty Fifteen 1.0
    645  */
    646 function twentyfifteen_customize_control_js() {
    647         wp_enqueue_script( 'color-scheme-control', get_template_directory_uri() . '/js/color-scheme-control.js', array( 'customize-controls' ), '', true  );
    648         wp_localize_script( 'color-scheme-control', 'colorScheme', twentyfifteen_get_color_schemes() );
    649 }
    650 add_action( 'customize_controls_enqueue_scripts', 'twentyfifteen_customize_control_js' );
    651 
    652 /**
    653  * Binds JS handlers to make Customizer preview reload changes asynchronously.
    654  *
    655  * @since Twenty Fifteen 1.0
    656  */
    657 function twentyfifteen_customize_preview_js() {
    658         wp_enqueue_script( 'twentyfifteen-customizer', get_template_directory_uri() . '/js/customizer.js', array( 'customize-preview' ), '20141005', true );
     643        }
     644        </script>
     645        <?php
    659646}
    660 add_action( 'customize_preview_init', 'twentyfifteen_customize_preview_js' );
    661  No newline at end of file
     647add_action( 'customize_controls_print_footer_scripts', 'twentyfifteen_color_scheme_css_template' );
  • src/wp-content/themes/twentyfifteen/js/color-scheme-control.js

    diff --git src/wp-content/themes/twentyfifteen/js/color-scheme-control.js src/wp-content/themes/twentyfifteen/js/color-scheme-control.js
    index 7480e57..116c99c 100644
     
    66 */
    77
    88( function( api ) {
     9        var cssTemplate = wp.template( 'twentyfifteen-color-scheme' ),
     10                colorSchemeKeys = [
     11                        'background_color',
     12                        'header_background_color',
     13                        'box_background_color',
     14                        'textcolor',
     15                        'sidebar_textcolor',
     16                        'meta_box_background_color'
     17                ],
     18                colorSettings = [
     19                        'background_color',
     20                        'header_background_color',
     21                        'sidebar_textcolor'
     22                ];
     23
    924        api.controlConstructor.select = api.Control.extend( {
    1025                ready: function() {
    1126                        if ( 'color_scheme' === this.id ) {
     
    3146                        }
    3247                }
    3348        } );
     49
     50        function getCSS() {
     51                var scheme = api( 'color_scheme' )(),
     52                        colors = _.object( colorSchemeKeys, colorScheme[ scheme ].colors );
     53
     54                // Merge in color scheme overrides.
     55                _.each( colorSettings, function( setting ) {
     56                        colors[ setting ] = api( setting )();
     57                });
     58
     59                // Add additional colors.
     60                colors['secondary_textcolor'] = Color( colors.textcolor ).toCSS( 'rgba', 0.7 );
     61                colors['border_color'] = Color( colors.textcolor ).toCSS( 'rgba', 0.1 );
     62                colors['border_focus_color'] = Color( colors.textcolor ).toCSS( 'rgba', 0.3 );
     63                colors['sidebar_textcolor2'] = Color( colors.sidebar_textcolor ).toCSS( 'rgba', 0.7 );
     64                colors['sidebar_border_color'] = Color( colors.sidebar_textcolor ).toCSS( 'rgba', 0.1 );
     65                colors['sidebar_border_focus_color'] = Color( colors.sidebar_textcolor ).toCSS( 'rgba', 0.3 );
     66
     67                return cssTemplate( colors );
     68        }
     69
     70        // Update the CSS whenever a color setting is changed.
     71        _.each( colorSettings, function( setting ) {
     72                api( setting, function( setting ) {
     73                        setting.bind( _.throttle( function( value ) {
     74                                api( 'color_scheme_css' ).set( getCSS() );
     75                        }, 250 ) );
     76                } );
     77        } );
    3478} )( wp.customize );
  • src/wp-content/themes/twentyfifteen/js/customizer.js

    diff --git src/wp-content/themes/twentyfifteen/js/customizer.js src/wp-content/themes/twentyfifteen/js/customizer.js
    index 0aa9728..c2120b2 100644
     
    55 */
    66
    77( function( $ ) {
     8        var $style = $( '#twentyfifteen-color-scheme-css' ).next( 'style' );
     9
     10        if ( ! $style.length ) {
     11                $style = $( 'head' ).append( '<style type="text/css" id="twentyfifteen-color-scheme-css" />' )
     12                                    .find( '#twentyfifteen-color-scheme-css' );
     13        }
     14
    815        // Site title and description.
    916        wp.customize( 'blogname', function( value ) {
    1017                value.bind( function( to ) {
    1118                        $( '.site-title a' ).text( to );
    1219                } );
    1320        } );
     21
    1422        wp.customize( 'blogdescription', function( value ) {
    1523                value.bind( function( to ) {
    1624                        $( '.site-description' ).text( to );
    1725                } );
    1826        } );
     27
     28        wp.customize( 'color_scheme_css', function( value ) {
     29                value.bind( function( to ) {
     30                        $style.html( to );
     31                } );
     32        } );
    1933} )( jQuery );
     34 No newline at end of file