IntenseWebs/WordPress
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Twenty Fifteen: add instant updating of color schemes to the customizer with postMessage.

Browse Source 
Props celloexpressions, bradyvercher, westonruter, fixes #29988.



Built from https://develop.svn.wordpress.org/trunk@30274


git-svn-id: http://core.svn.wordpress.org/trunk@30274 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Ian Stewart 2014-11-07 20:55:23 +00:00
parent 066967be6c
commit fa81522cb2
4 changed files with 449 additions and 417 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
wp-content/themes/twentyfifteen/css/admin-custom-header.css
View File

@ -35,7 +35,9 @@ Description: Used to style the header image displayed on the Appearance > Header
} }
/* Hide the header text color option */ /* Hide the header text color option */
.appearance_page_custom-header tr.displaying-header-text { .appearance_page_custom-header tr.displaying-header-text,
.appearance_page_custom-header tr.displaying-header-text td,
.appearance_page_custom-header tr.displaying-header-text th {
display: none; display: none;
} }

198
wp-content/themes/twentyfifteen/inc/customizer.php
View File

@ -19,12 +19,18 @@ function twentyfifteen_customize_register( $wp_customize ) {
$wp_customize->get_setting( 'blogname' )->transport = 'postMessage'; $wp_customize->get_setting( 'blogname' )->transport = 'postMessage';
$wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage'; $wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';
$wp_customize->get_setting( 'background_color' )->transport = 'refresh';
// Add color scheme setting and control. // Add color scheme setting and control.
$wp_customize->add_setting( 'color_scheme', array( $wp_customize->add_setting( 'color_scheme', array(
'default' => 'default', 'default' => 'default',
'sanitize_callback' => 'twentyfifteen_sanitize_color_scheme', 'sanitize_callback' => 'twentyfifteen_sanitize_color_scheme',
'transport' => 'postMessage',
) );
$wp_customize->add_setting( 'color_scheme_css', array(
'default' => '',
'sanitize_callback' => 'esc_html',
'transport' => 'postMessage',
) ); ) );
$wp_customize->add_control( 'color_scheme', array( $wp_customize->add_control( 'color_scheme', array(
@ -39,6 +45,7 @@ function twentyfifteen_customize_register( $wp_customize ) {
$wp_customize->add_setting( 'sidebar_textcolor', array( $wp_customize->add_setting( 'sidebar_textcolor', array(
'default' => $color_scheme[4], 'default' => $color_scheme[4],
'sanitize_callback' => 'sanitize_hex_color', 'sanitize_callback' => 'sanitize_hex_color',
'transport' => 'postMessage',
) ); ) );
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'sidebar_textcolor', array( $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'sidebar_textcolor', array(
@ -54,6 +61,7 @@ function twentyfifteen_customize_register( $wp_customize ) {
$wp_customize->add_setting( 'header_background_color', array( $wp_customize->add_setting( 'header_background_color', array(
'default' => $color_scheme[1], 'default' => $color_scheme[1],
'sanitize_callback' => 'sanitize_hex_color', 'sanitize_callback' => 'sanitize_hex_color',
'transport' => 'postMessage',
) ); ) );
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_background_color', array( $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_background_color', array(
@ -222,44 +230,58 @@ endif; // twentyfifteen_sanitize_color_scheme
*/ */
function twentyfifteen_color_scheme_css() { function twentyfifteen_color_scheme_css() {
$color_scheme_option = get_theme_mod( 'color_scheme', 'default' ); $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. // Don't do anything if the default color scheme is selected.
if ( 'default' === $color_scheme_option ) { if ( 'default' === $color_scheme_option || empty( $color_scheme_css ) ) {
return; return;
} }
// If we get this far, we have custom styles. Let's do this. wp_add_inline_style( 'twentyfifteen-style', $color_scheme_css );
$color_scheme = twentyfifteen_get_color_scheme(); }
add_action( 'wp_enqueue_scripts', 'twentyfifteen_color_scheme_css' );
// Convert main and sidebar text hex color to rgba. /**
$color_main_text_rgb = twentyfifteen_hex2rgb( $color_scheme[3] ); * Binds JS listener to make Customizer color_scheme control.
$color_sidebar_link_rgb = twentyfifteen_hex2rgb( $color_scheme[4] ); * Passes color scheme data as colorScheme global.
*
* @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_localize_script( 'color-scheme-control', 'colorScheme', twentyfifteen_get_color_schemes() );
}
add_action( 'customize_controls_enqueue_scripts', 'twentyfifteen_customize_control_js' );
$color_background = $color_scheme[0]; /**
$color_sidebar_background = $color_scheme[1]; * Binds JS handlers to make Customizer preview reload changes asynchronously.
$color_box_background = $color_scheme[2]; *
$color_main_text = $color_scheme[3]; * @since Twenty Fifteen 1.0
$color_secondary_text = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.7)', $color_main_text_rgb ); */
$color_border = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.1)', $color_main_text_rgb ); function twentyfifteen_customize_preview_js() {
$color_border_focus = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.3)', $color_main_text_rgb ); wp_enqueue_script( 'twentyfifteen-customize-preview', get_template_directory_uri() . '/js/customize-preview.js', array( 'customize-preview' ), '20141029', true );
$color_sidebar_link = $color_scheme[4]; }
$color_sidebar_text = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.7)', $color_sidebar_link_rgb ); add_action( 'customize_preview_init', 'twentyfifteen_customize_preview_js' );
$color_sidebar_border = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.1)', $color_sidebar_link_rgb );
$color_sidebar_border_focus = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.3)', $color_sidebar_link_rgb );
$color_meta_box = $color_scheme[5];
$css = ' /**
* Output an Underscore template for generating CSS for the color scheme.
*
* @since Twenty Fifteen 1.0
*/
function twentyfifteen_color_scheme_css_template() {
?>
<script type="text/html" id="tmpl-twentyfifteen-color-scheme">
/* Color Scheme */ /* Color Scheme */
/* Background Color */ /* Background Color */
body { body {
background-color: %1$s; background-color: {{ data.background_color }};
} }
/* Sidebar Background Color */ /* Sidebar Background Color */
body:before, body:before,
.site-header { .site-header {
background-color: %2$s; background-color: {{ data.header_background_color }};
} }
/* Box Background Color */ /* Box Background Color */
@ -271,7 +293,7 @@ function twentyfifteen_color_scheme_css() {
.page-header, .page-header,
.page-content, .page-content,
.comments-area { .comments-area {
background-color: %3$s; background-color: {{ data.box_background_color }};
} }
/* Box Background Color */ /* Box Background Color */
@ -290,7 +312,7 @@ function twentyfifteen_color_scheme_css() {
.entry-content .page-links a:hover, .entry-content .page-links a:hover,
.entry-content .page-links a:focus, .entry-content .page-links a:focus,
.sticky-post { .sticky-post {
color: %3$s; color: {{ data.box_background_color }};
} }
/* Main Text Color */ /* Main Text Color */
@ -303,7 +325,7 @@ function twentyfifteen_color_scheme_css() {
.widget_calendar tbody a, .widget_calendar tbody a,
.page-links a, .page-links a,
.sticky-post { .sticky-post {
background-color: %4$s; background-color: {{ data.textcolor }};
} }
/* Main Text Color */ /* Main Text Color */
@ -327,7 +349,7 @@ function twentyfifteen_color_scheme_css() {
.comment-list .reply a:focus, .comment-list .reply a:focus,
.site-info a:hover, .site-info a:hover,
.site-info a:focus { .site-info a:focus {
color: %4$s; color: {{ data.textcolor }};
} }
/* Main Text Color */ /* Main Text Color */
@ -344,7 +366,7 @@ function twentyfifteen_color_scheme_css() {
.pingback .edit-link a:hover, .pingback .edit-link a:hover,
.comment-list .reply a:hover, .comment-list .reply a:hover,
.site-info a:hover { .site-info a:hover {
border-color: %4$s; border-color: {{ data.textcolor }};
} }
/* Secondary Text Color */ /* Secondary Text Color */
@ -364,8 +386,8 @@ function twentyfifteen_color_scheme_css() {
.widget_calendar tbody a:focus, .widget_calendar tbody a:focus,
.page-links a:hover, .page-links a:hover,
.page-links a:focus { .page-links a:focus {
background-color: %4$s; /* Fallback for IE7 and IE8 */ background-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
background-color: %5$s; background-color: {{ data.secondary_textcolor }};
} }
/* Secondary Text Color */ /* Secondary Text Color */
@ -404,24 +426,24 @@ function twentyfifteen_color_scheme_css() {
.wp-caption-text, .wp-caption-text,
.gallery-caption, .gallery-caption,
.comment-list .reply a { .comment-list .reply a {
color: %4$s; /* Fallback for IE7 and IE8 */ color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
color: %5$s; color: {{ data.secondary_textcolor }};
} }
/* Secondary Text Color */ /* Secondary Text Color */
blockquote, blockquote,
.logged-in-as a:hover, .logged-in-as a:hover,
.comment-author a:hover { .comment-author a:hover {
border-color: %4$s; /* Fallback for IE7 and IE8 */ border-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
border-color: %5$s; border-color: {{ data.secondary_textcolor }};
} }
/* Border Color */ /* Border Color */
hr, hr,
.dropdown-toggle:hover, .dropdown-toggle:hover,
.dropdown-toggle:focus { .dropdown-toggle:focus {
background-color: %4$s; /* Fallback for IE7 and IE8 */ background-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
background-color: %6$s; background-color: {{ data.border_color }};
} }
/* Border Color */ /* Border Color */
@ -443,83 +465,83 @@ function twentyfifteen_color_scheme_css() {
.widget_pages .children, .widget_pages .children,
.site-header, .site-header,
.site-footer, .site-footer,
.hentry + .hentry, .hentry .hentry,
.author-info, .author-info,
.entry-content .page-links a, .entry-content .page-links a,
.page-links > span, .page-links > span,
.page-header, .page-header,
.comments-area, .comments-area,
.comment-list + .comment-respond, .comment-list .comment-respond,
.comment-list article, .comment-list article,
.comment-list .pingback, .comment-list .pingback,
.comment-list .trackback, .comment-list .trackback,
.comment-list .reply a, .comment-list .reply a,
.no-comments { .no-comments {
border-color: %4$s; /* Fallback for IE7 and IE8 */ border-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
border-color: %6$s; border-color: {{ data.border_color }};
} }
.post-navigation .nav-previous:not(.has-post-thumbnail) + .nav-next:not(.has-post-thumbnail) { .post-navigation .nav-previous:not(.has-post-thumbnail) .nav-next:not(.has-post-thumbnail) {
border-color: %6$s; border-color: {{ data.border_color }};
} }
/* Border Focus Color */ /* Border Focus Color */
a:focus, a:focus,
button:focus, button:focus,
input:focus { input:focus {
outline-color: %4$s; /* Fallback for IE7 and IE8 */ outline-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
outline-color: %7$s; outline-color: {{ data.border_focus_color }};
} }
input:focus, input:focus,
textarea:focus { textarea:focus {
border-color: %4$s; /* Fallback for IE7 and IE8 */ border-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
border-color: %7$s; border-color: {{ data.border_focus_color }};
} }
/* Sidebar Link Color */ /* Sidebar Link Color */
.secondary-toggle:before { .secondary-toggle:before {
color: %8$s; color: {{ data.sidebar_textcolor }};
} }
.site-title a, .site-title a,
.site-description { .site-description {
color: %8$s; color: {{ data.sidebar_textcolor }};
} }
/* Sidebar Text Color */ /* Sidebar Text Color */
.site-title a:hover, .site-title a:hover,
.site-title a:focus { .site-title a:focus {
color: %9$s; color: {{ data.sidebar_textcolor2 }};
} }
/* Sidebar Border Color */ /* Sidebar Border Color */
.secondary-toggle { .secondary-toggle {
border-color: %8$s; /* Fallback for IE7 and IE8 */ border-color: {{ data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */
border-color: %10$s; border-color: {{ data.sidebar_border_color }};
} }
/* Sidebar Border Focus Color */ /* Sidebar Border Focus Color */
.secondary-toggle:hover, .secondary-toggle:hover,
.secondary-toggle:focus { .secondary-toggle:focus {
border-color: %8$s; /* Fallback for IE7 and IE8 */ border-color: {{ data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */
border-color: %11$s; border-color: {{ data.sidebar_border_focus_color }};
} }
.site-title a { .site-title a {
outline-color: %8$s; /* Fallback for IE7 and IE8 */ outline-color: {{ data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */
outline-color: %11$s; outline-color: {{ data.sidebar_border_focus_color }};
} }
/* Meta Background Color */ /* Meta Background Color */
.entry-footer { .entry-footer {
background-color: %12$s; background-color: {{ data.meta_box_background_color }};
} }
@media screen and (min-width: 38.75em) { @media screen and (min-width: 38.75em) {
/* Main Text Color */ /* Main Text Color */
.page-header { .page-header {
border-color: %4$s; border-color: {{ data.textcolor }};
} }
} }
@ -538,7 +560,7 @@ function twentyfifteen_color_scheme_css() {
.widget_calendar tbody a, .widget_calendar tbody a,
.widget_calendar tbody a:hover, .widget_calendar tbody a:hover,
.widget_calendar tbody a:focus { .widget_calendar tbody a:focus {
color: %2$s; color: {{ data.header_background_color }};
} }
/* Sidebar Link Color */ /* Sidebar Link Color */
@ -547,7 +569,7 @@ function twentyfifteen_color_scheme_css() {
.widget-title, .widget-title,
.widget blockquote cite, .widget blockquote cite,
.widget blockquote small { .widget blockquote small {
color: %8$s; color: {{ data.sidebar_textcolor }};
} }
.widget button, .widget button,
@ -555,11 +577,11 @@ function twentyfifteen_color_scheme_css() {
.widget input[type="reset"], .widget input[type="reset"],
.widget input[type="submit"], .widget input[type="submit"],
.widget_calendar tbody a { .widget_calendar tbody a {
background-color: %8$s; background-color: {{ data.sidebar_textcolor }};
} }
.textwidget a { .textwidget a {
border-color: %8$s; border-color: {{ data.sidebar_textcolor }};
} }
/* Sidebar Text Color */ /* Sidebar Text Color */
@ -570,7 +592,7 @@ function twentyfifteen_color_scheme_css() {
.widget blockquote, .widget blockquote,
.widget .wp-caption-text, .widget .wp-caption-text,
.widget .gallery-caption { .widget .gallery-caption {
color: %9$s; color: {{ data.sidebar_textcolor2 }};
} }
.widget button:hover, .widget button:hover,
@ -583,11 +605,11 @@ function twentyfifteen_color_scheme_css() {
.widget input[type="submit"]:focus, .widget input[type="submit"]:focus,
.widget_calendar tbody a:hover, .widget_calendar tbody a:hover,
.widget_calendar tbody a:focus { .widget_calendar tbody a:focus {
background-color: %9$s; background-color: {{ data.sidebar_textcolor2 }};
} }
.widget blockquote { .widget blockquote {
border-color: %9$s; border-color: {{ data.sidebar_textcolor2 }};
} }
/* Sidebar Border Color */ /* Sidebar Border Color */
@ -604,62 +626,26 @@ function twentyfifteen_color_scheme_css() {
.widget_nav_menu .sub-menu, .widget_nav_menu .sub-menu,
.widget_pages .children, .widget_pages .children,
.widget abbr[title] { .widget abbr[title] {
border-color: %10$s; border-color: {{ data.sidebar_border_color }};
} }
.dropdown-toggle:hover, .dropdown-toggle:hover,
.dropdown-toggle:focus, .dropdown-toggle:focus,
.widget hr { .widget hr {
background-color: %10$s; background-color: {{ data.sidebar_border_color }};
} }
.widget input:focus, .widget input:focus,
.widget textarea:focus { .widget textarea:focus {
border-color: %11$s; border-color: {{ data.sidebar_border_focus_color }};
} }
.sidebar a:focus, .sidebar a:focus,
.dropdown-toggle:focus { .dropdown-toggle:focus {
outline-color: %11$s; outline-color: {{ data.sidebar_border_focus_color }};
} }
} }
'; </script>
<?php
wp_add_inline_style( 'twentyfifteen-style', sprintf( $css,
$color_background,
$color_sidebar_background,
$color_box_background,
$color_main_text,
$color_secondary_text,
$color_border,
$color_border_focus,
$color_sidebar_link,
$color_sidebar_text,
$color_sidebar_border,
$color_sidebar_border_focus,
$color_meta_box
) );
} }
add_action( 'wp_enqueue_scripts', 'twentyfifteen_color_scheme_css' ); add_action( 'customize_controls_print_footer_scripts', 'twentyfifteen_color_scheme_css_template' );
/**
* Binds JS listener to make Customizer color_scheme control.
* Passes color scheme data as colorScheme global.
*
* @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' ), '', true );
wp_localize_script( 'color-scheme-control', 'colorScheme', twentyfifteen_get_color_schemes() );
}
add_action( 'customize_controls_enqueue_scripts', 'twentyfifteen_customize_control_js' );
/**
* Binds JS handlers to make Customizer preview reload changes asynchronously.
*
* @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 );
}
add_action( 'customize_preview_init', 'twentyfifteen_customize_preview_js' );

44
wp-content/themes/twentyfifteen/js/color-scheme-control.js
View File

@ -4,6 +4,21 @@
*/ */
( function( api ) { ( function( api ) {
var cssTemplate = wp.template( 'twentyfifteen-color-scheme' ),
colorSchemeKeys = [
'background_color',
'header_background_color',
'box_background_color',
'textcolor',
'sidebar_textcolor',
'meta_box_background_color'
],
colorSettings = [
'background_color',
'header_background_color',
'sidebar_textcolor'
];
api.controlConstructor.select = api.Control.extend( { api.controlConstructor.select = api.Control.extend( {
ready: function() { ready: function() {
if ( 'color_scheme' === this.id ) { if ( 'color_scheme' === this.id ) {
@ -29,4 +44,33 @@
} }
} }
} ); } );
function getCSS() {
var scheme = api( 'color_scheme' )(),
colors = _.object( colorSchemeKeys, colorScheme[ scheme ].colors );
// Merge in color scheme overrides.
_.each( colorSettings, function( setting ) {
colors[ setting ] = api( setting )();
});
// Add additional colors.
colors['secondary_textcolor'] = Color( colors.textcolor ).toCSS( 'rgba', 0.7 );
colors['border_color'] = Color( colors.textcolor ).toCSS( 'rgba', 0.1 );
colors['border_focus_color'] = Color( colors.textcolor ).toCSS( 'rgba', 0.3 );
colors['sidebar_textcolor2'] = Color( colors.sidebar_textcolor ).toCSS( 'rgba', 0.7 );
colors['sidebar_border_color'] = Color( colors.sidebar_textcolor ).toCSS( 'rgba', 0.1 );
colors['sidebar_border_focus_color'] = Color( colors.sidebar_textcolor ).toCSS( 'rgba', 0.3 );
return cssTemplate( colors );
}
// Update the CSS whenever a color setting is changed.
_.each( colorSettings, function( setting ) {
api( setting, function( setting ) {
setting.bind( _.throttle( function( value ) {
api( 'color_scheme_css' ).set( getCSS() );
}, 250 ) );
} );
} );
} )( wp.customize ); } )( wp.customize );

2
wp-includes/version.php
View File

@ -4,7 +4,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '4.1-alpha-30273'; $wp_version = '4.1-alpha-30274';
/** /**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.