From 7e98a6647e5fe52da8a3a2fd017e24ff1cc6eb74 Mon Sep 17 00:00:00 2001 From: Dominik Schilling Date: Tue, 16 Dec 2014 12:27:26 +0000 Subject: [PATCH] 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. Built from https://develop.svn.wordpress.org/trunk@30893 git-svn-id: http://core.svn.wordpress.org/trunk@30883 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- .../themes/twentyfifteen/inc/customizer.php | 179 ++++++++++++------ .../twentyfifteen/js/color-scheme-control.js | 12 +- .../twentyfifteen/js/customize-preview.js | 13 +- 3 files changed, 133 insertions(+), 71 deletions(-) diff --git a/wp-content/themes/twentyfifteen/inc/customizer.php b/wp-content/themes/twentyfifteen/inc/customizer.php index de7a4f67ce..d44162bb58 100644 --- a/wp-content/themes/twentyfifteen/inc/customizer.php +++ b/wp-content/themes/twentyfifteen/inc/customizer.php @@ -27,11 +27,6 @@ function twentyfifteen_customize_register( $wp_customize ) { 'transport' => 'postMessage', ) ); - $wp_customize->add_setting( 'color_scheme_css', array( - 'default' => '', - 'transport' => 'postMessage', - ) ); - $wp_customize->add_control( 'color_scheme', array( 'label' => esc_html__( 'Base Color Scheme', 'twentyfifteen' ), 'section' => 'colors', @@ -231,13 +226,34 @@ endif; // twentyfifteen_sanitize_color_scheme */ function twentyfifteen_color_scheme_css() { $color_scheme_option = get_theme_mod( 'color_scheme', 'default' ); - $color_scheme_css = get_theme_mod( 'color_scheme_css', '' ); // Don't do anything if the default color scheme is selected. - if ( 'default' === $color_scheme_option || empty( $color_scheme_css ) ) { + if ( 'default' === $color_scheme_option ) { return; } + $color_scheme = twentyfifteen_get_color_scheme(); + + // Convert main and sidebar text hex color to rgba. + $color_textcolor_rgb = twentyfifteen_hex2rgb( $color_scheme[3] ); + $color_sidebar_textcolor_rgb = twentyfifteen_hex2rgb( $color_scheme[4] ); + $colors = array( + 'background_color' => $color_scheme[0], + 'header_background_color' => $color_scheme[1], + 'box_background_color' => $color_scheme[2], + 'textcolor' => $color_scheme[3], + 'secondary_textcolor' => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.7)', $color_textcolor_rgb ), + 'border_color' => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.1)', $color_textcolor_rgb ), + 'border_focus_color' => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.3)', $color_textcolor_rgb ), + 'sidebar_textcolor' => $color_scheme[4], + 'sidebar_border_color' => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.1)', $color_sidebar_textcolor_rgb ), + 'sidebar_border_focus_color' => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.3)', $color_sidebar_textcolor_rgb ), + 'secondary_sidebar_textcolor' => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.7)', $color_sidebar_textcolor_rgb ), + 'meta_box_background_color' => $color_scheme[5], + ); + + $color_scheme_css = twentyfifteen_get_color_scheme_css( $colors ); + wp_add_inline_style( 'twentyfifteen-style', $color_scheme_css ); } add_action( 'wp_enqueue_scripts', 'twentyfifteen_color_scheme_css' ); @@ -250,7 +266,7 @@ add_action( 'wp_enqueue_scripts', 'twentyfifteen_color_scheme_css' ); * @since Twenty Fifteen 1.0 */ function twentyfifteen_customize_control_js() { - wp_enqueue_script( 'color-scheme-control', get_template_directory_uri() . '/js/color-scheme-control.js', array( 'customize-controls', 'iris', 'underscore', 'wp-util' ), '', true ); + wp_enqueue_script( 'color-scheme-control', get_template_directory_uri() . '/js/color-scheme-control.js', array( 'customize-controls', 'iris', 'underscore', 'wp-util' ), '20141216', true ); wp_localize_script( 'color-scheme-control', 'colorScheme', twentyfifteen_get_color_schemes() ); } add_action( 'customize_controls_enqueue_scripts', 'twentyfifteen_customize_control_js' ); @@ -261,32 +277,46 @@ add_action( 'customize_controls_enqueue_scripts', 'twentyfifteen_customize_contr * @since Twenty Fifteen 1.0 */ function twentyfifteen_customize_preview_js() { - wp_enqueue_script( 'twentyfifteen-customize-preview', get_template_directory_uri() . '/js/customize-preview.js', array( 'customize-preview' ), '20141029', true ); + wp_enqueue_script( 'twentyfifteen-customize-preview', get_template_directory_uri() . '/js/customize-preview.js', array( 'customize-preview' ), '20141216', true ); } add_action( 'customize_preview_init', 'twentyfifteen_customize_preview_js' ); /** - * Output an Underscore template for generating CSS for the color scheme. - * - * The template generates the css dynamically for instant display in the Customizer - * preview, and to be saved in a `theme_mod` for display on the front-end. + * Returns CSS for the color schemes. * * @since Twenty Fifteen 1.0 + * + * @param array $colors Color scheme colors. + * @return string Color scheme CSS. */ -function twentyfifteen_color_scheme_css_template() { - ?> - ' ) @@ -11,23 +12,23 @@ } // Site title. - wp.customize( 'blogname', function( value ) { + api( 'blogname', function( value ) { value.bind( function( to ) { $( '.site-title a' ).text( to ); } ); } ); // Site tagline. - wp.customize( 'blogdescription', function( value ) { + api( 'blogdescription', function( value ) { value.bind( function( to ) { $( '.site-description' ).text( to ); } ); } ); // Color Scheme CSS. - wp.customize( 'color_scheme_css', function( value ) { - value.bind( function( to ) { - $style.html( to ); + api.bind( 'preview-ready', function() { + api.preview.bind( 'update-color-scheme-css', function( css ) { + $style.html( css ); } ); } );