WordPress/wp-content/themes/twentyfifteen/inc/customizer.php
Gary Pendergast aaf99e6913 Code is Poetry.
WordPress' code just... wasn't.
This is now dealt with.

Props jrf, pento, netweb, GaryJ, jdgrimes, westonruter, Greg Sherwood from PHPCS, and everyone who's ever contributed to WPCS and PHPCS.
Fixes #41057.


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


git-svn-id: http://core.svn.wordpress.org/trunk@42172 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-11-30 23:11:00 +00:00

798 lines
21 KiB
PHP

<?php
/**
* Twenty Fifteen Customizer functionality
*
* @package WordPress
* @subpackage Twenty_Fifteen
* @since Twenty Fifteen 1.0
*/
/**
* Add postMessage support for site title and description for the Customizer.
*
* @since Twenty Fifteen 1.0
*
* @param WP_Customize_Manager $wp_customize Customizer object.
*/
function twentyfifteen_customize_register( $wp_customize ) {
$color_scheme = twentyfifteen_get_color_scheme();
$wp_customize->get_setting( 'blogname' )->transport = 'postMessage';
$wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';
if ( isset( $wp_customize->selective_refresh ) ) {
$wp_customize->selective_refresh->add_partial(
'blogname', array(
'selector' => '.site-title a',
'container_inclusive' => false,
'render_callback' => 'twentyfifteen_customize_partial_blogname',
)
);
$wp_customize->selective_refresh->add_partial(
'blogdescription', array(
'selector' => '.site-description',
'container_inclusive' => false,
'render_callback' => 'twentyfifteen_customize_partial_blogdescription',
)
);
}
// Add color scheme setting and control.
$wp_customize->add_setting(
'color_scheme', array(
'default' => 'default',
'sanitize_callback' => 'twentyfifteen_sanitize_color_scheme',
'transport' => 'postMessage',
)
);
$wp_customize->add_control(
'color_scheme', array(
'label' => __( 'Base Color Scheme', 'twentyfifteen' ),
'section' => 'colors',
'type' => 'select',
'choices' => twentyfifteen_get_color_scheme_choices(),
'priority' => 1,
)
);
// Add custom header and sidebar text color setting and control.
$wp_customize->add_setting(
'sidebar_textcolor', array(
'default' => $color_scheme[4],
'sanitize_callback' => 'sanitize_hex_color',
'transport' => 'postMessage',
)
);
$wp_customize->add_control(
new WP_Customize_Color_Control(
$wp_customize, 'sidebar_textcolor', array(
'label' => __( 'Header and Sidebar Text Color', 'twentyfifteen' ),
'description' => __( 'Applied to the header on small screens and the sidebar on wide screens.', 'twentyfifteen' ),
'section' => 'colors',
)
)
);
// Remove the core header textcolor control, as it shares the sidebar text color.
$wp_customize->remove_control( 'header_textcolor' );
// Add custom header and sidebar background color setting and control.
$wp_customize->add_setting(
'header_background_color', array(
'default' => $color_scheme[1],
'sanitize_callback' => 'sanitize_hex_color',
'transport' => 'postMessage',
)
);
$wp_customize->add_control(
new WP_Customize_Color_Control(
$wp_customize, 'header_background_color', array(
'label' => __( 'Header and Sidebar Background Color', 'twentyfifteen' ),
'description' => __( 'Applied to the header on small screens and the sidebar on wide screens.', 'twentyfifteen' ),
'section' => 'colors',
)
)
);
// Add an additional description to the header image section.
$wp_customize->get_section( 'header_image' )->description = __( 'Applied to the header on small screens and the sidebar on wide screens.', 'twentyfifteen' );
}
add_action( 'customize_register', 'twentyfifteen_customize_register', 11 );
/**
* Render the site title for the selective refresh partial.
*
* @since Twenty Fifteen 1.5
* @see twentyfifteen_customize_register()
*
* @return void
*/
function twentyfifteen_customize_partial_blogname() {
bloginfo( 'name' );
}
/**
* Render the site tagline for the selective refresh partial.
*
* @since Twenty Fifteen 1.5
* @see twentyfifteen_customize_register()
*
* @return void
*/
function twentyfifteen_customize_partial_blogdescription() {
bloginfo( 'description' );
}
/**
* Register color schemes for Twenty Fifteen.
*
* Can be filtered with {@see 'twentyfifteen_color_schemes'}.
*
* The order of colors in a colors array:
* 1. Main Background Color.
* 2. Sidebar Background Color.
* 3. Box Background Color.
* 4. Main Text and Link Color.
* 5. Sidebar Text and Link Color.
* 6. Meta Box Background Color.
*
* @since Twenty Fifteen 1.0
*
* @return array An associative array of color scheme options.
*/
function twentyfifteen_get_color_schemes() {
/**
* Filter the color schemes registered for use with Twenty Fifteen.
*
* The default schemes include 'default', 'dark', 'yellow', 'pink', 'purple', and 'blue'.
*
* @since Twenty Fifteen 1.0
*
* @param array $schemes {
* Associative array of color schemes data.
*
* @type array $slug {
* Associative array of information for setting up the color scheme.
*
* @type string $label Color scheme label.
* @type array $colors HEX codes for default colors prepended with a hash symbol ('#').
* Colors are defined in the following order: Main background, sidebar
* background, box background, main text and link, sidebar text and link,
* meta box background.
* }
* }
*/
return apply_filters(
'twentyfifteen_color_schemes', array(
'default' => array(
'label' => __( 'Default', 'twentyfifteen' ),
'colors' => array(
'#f1f1f1',
'#ffffff',
'#ffffff',
'#333333',
'#333333',
'#f7f7f7',
),
),
'dark' => array(
'label' => __( 'Dark', 'twentyfifteen' ),
'colors' => array(
'#111111',
'#202020',
'#202020',
'#bebebe',
'#bebebe',
'#1b1b1b',
),
),
'yellow' => array(
'label' => __( 'Yellow', 'twentyfifteen' ),
'colors' => array(
'#f4ca16',
'#ffdf00',
'#ffffff',
'#111111',
'#111111',
'#f1f1f1',
),
),
'pink' => array(
'label' => __( 'Pink', 'twentyfifteen' ),
'colors' => array(
'#ffe5d1',
'#e53b51',
'#ffffff',
'#352712',
'#ffffff',
'#f1f1f1',
),
),
'purple' => array(
'label' => __( 'Purple', 'twentyfifteen' ),
'colors' => array(
'#674970',
'#2e2256',
'#ffffff',
'#2e2256',
'#ffffff',
'#f1f1f1',
),
),
'blue' => array(
'label' => __( 'Blue', 'twentyfifteen' ),
'colors' => array(
'#e9f2f9',
'#55c3dc',
'#ffffff',
'#22313f',
'#ffffff',
'#f1f1f1',
),
),
)
);
}
if ( ! function_exists( 'twentyfifteen_get_color_scheme' ) ) :
/**
* Get the current Twenty Fifteen color scheme.
*
* @since Twenty Fifteen 1.0
*
* @return array An associative array of either the current or default color scheme hex values.
*/
function twentyfifteen_get_color_scheme() {
$color_scheme_option = get_theme_mod( 'color_scheme', 'default' );
$color_schemes = twentyfifteen_get_color_schemes();
if ( array_key_exists( $color_scheme_option, $color_schemes ) ) {
return $color_schemes[ $color_scheme_option ]['colors'];
}
return $color_schemes['default']['colors'];
}
endif; // twentyfifteen_get_color_scheme
if ( ! function_exists( 'twentyfifteen_get_color_scheme_choices' ) ) :
/**
* Returns an array of color scheme choices registered for Twenty Fifteen.
*
* @since Twenty Fifteen 1.0
*
* @return array Array of color schemes.
*/
function twentyfifteen_get_color_scheme_choices() {
$color_schemes = twentyfifteen_get_color_schemes();
$color_scheme_control_options = array();
foreach ( $color_schemes as $color_scheme => $value ) {
$color_scheme_control_options[ $color_scheme ] = $value['label'];
}
return $color_scheme_control_options;
}
endif; // twentyfifteen_get_color_scheme_choices
if ( ! function_exists( 'twentyfifteen_sanitize_color_scheme' ) ) :
/**
* Sanitization callback for color schemes.
*
* @since Twenty Fifteen 1.0
*
* @param string $value Color scheme name value.
* @return string Color scheme name.
*/
function twentyfifteen_sanitize_color_scheme( $value ) {
$color_schemes = twentyfifteen_get_color_scheme_choices();
if ( ! array_key_exists( $value, $color_schemes ) ) {
$value = 'default';
}
return $value;
}
endif; // twentyfifteen_sanitize_color_scheme
/**
* Enqueues front-end CSS for color scheme.
*
* @since Twenty Fifteen 1.0
*
* @see wp_add_inline_style()
*/
function twentyfifteen_color_scheme_css() {
$color_scheme_option = get_theme_mod( 'color_scheme', 'default' );
// Don't do anything if the default color scheme is selected.
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' );
/**
* 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', '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' );
/**
* Binds JS handlers to make the 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' ), '20141216', true );
}
add_action( 'customize_preview_init', 'twentyfifteen_customize_preview_js' );
/**
* Returns CSS for the color schemes.
*
* @since Twenty Fifteen 1.0
*
* @param array $colors Color scheme colors.
* @return string Color scheme CSS.
*/
function twentyfifteen_get_color_scheme_css( $colors ) {
$colors = wp_parse_args(
$colors, array(
'background_color' => '',
'header_background_color' => '',
'box_background_color' => '',
'textcolor' => '',
'secondary_textcolor' => '',
'border_color' => '',
'border_focus_color' => '',
'sidebar_textcolor' => '',
'sidebar_border_color' => '',
'sidebar_border_focus_color' => '',
'secondary_sidebar_textcolor' => '',
'meta_box_background_color' => '',
)
);
$css = <<<CSS
/* Color Scheme */
/* Background Color */
body {
background-color: {$colors['background_color']};
}
/* Sidebar Background Color */
body:before,
.site-header {
background-color: {$colors['header_background_color']};
}
/* Box Background Color */
.post-navigation,
.pagination,
.secondary,
.site-footer,
.hentry,
.page-header,
.page-content,
.comments-area,
.widecolumn {
background-color: {$colors['box_background_color']};
}
/* Box Background Color */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.pagination .prev,
.pagination .next,
.widget_calendar tbody a,
.widget_calendar tbody a:hover,
.widget_calendar tbody a:focus,
.page-links a,
.page-links a:hover,
.page-links a:focus,
.sticky-post {
color: {$colors['box_background_color']};
}
/* Main Text Color */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.pagination .prev,
.pagination .next,
.widget_calendar tbody a,
.page-links a,
.sticky-post {
background-color: {$colors['textcolor']};
}
/* Main Text Color */
body,
blockquote cite,
blockquote small,
a,
.dropdown-toggle:after,
.image-navigation a:hover,
.image-navigation a:focus,
.comment-navigation a:hover,
.comment-navigation a:focus,
.widget-title,
.entry-footer a:hover,
.entry-footer a:focus,
.comment-metadata a:hover,
.comment-metadata a:focus,
.pingback .edit-link a:hover,
.pingback .edit-link a:focus,
.comment-list .reply a:hover,
.comment-list .reply a:focus,
.site-info a:hover,
.site-info a:focus {
color: {$colors['textcolor']};
}
/* Main Text Color */
.entry-content a,
.entry-summary a,
.page-content a,
.comment-content a,
.pingback .comment-body > a,
.author-description a,
.taxonomy-description a,
.textwidget a,
.entry-footer a:hover,
.comment-metadata a:hover,
.pingback .edit-link a:hover,
.comment-list .reply a:hover,
.site-info a:hover {
border-color: {$colors['textcolor']};
}
/* Secondary Text Color */
button:hover,
button:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
.pagination .prev:hover,
.pagination .prev:focus,
.pagination .next:hover,
.pagination .next:focus,
.widget_calendar tbody a:hover,
.widget_calendar tbody a:focus,
.page-links a:hover,
.page-links a:focus {
background-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
background-color: {$colors['secondary_textcolor']};
}
/* Secondary Text Color */
blockquote,
a:hover,
a:focus,
.main-navigation .menu-item-description,
.post-navigation .meta-nav,
.post-navigation a:hover .post-title,
.post-navigation a:focus .post-title,
.image-navigation,
.image-navigation a,
.comment-navigation,
.comment-navigation a,
.widget,
.author-heading,
.entry-footer,
.entry-footer a,
.taxonomy-description,
.page-links > .page-links-title,
.entry-caption,
.comment-author,
.comment-metadata,
.comment-metadata a,
.pingback .edit-link,
.pingback .edit-link a,
.post-password-form label,
.comment-form label,
.comment-notes,
.comment-awaiting-moderation,
.logged-in-as,
.form-allowed-tags,
.no-comments,
.site-info,
.site-info a,
.wp-caption-text,
.gallery-caption,
.comment-list .reply a,
.widecolumn label,
.widecolumn .mu_register label {
color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
color: {$colors['secondary_textcolor']};
}
/* Secondary Text Color */
blockquote,
.logged-in-as a:hover,
.comment-author a:hover {
border-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
border-color: {$colors['secondary_textcolor']};
}
/* Border Color */
hr,
.dropdown-toggle:hover,
.dropdown-toggle:focus {
background-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
background-color: {$colors['border_color']};
}
/* Border Color */
pre,
abbr[title],
table,
th,
td,
input,
textarea,
.main-navigation ul,
.main-navigation li,
.post-navigation,
.post-navigation div + div,
.pagination,
.comment-navigation,
.widget li,
.widget_categories .children,
.widget_nav_menu .sub-menu,
.widget_pages .children,
.site-header,
.site-footer,
.hentry + .hentry,
.author-info,
.entry-content .page-links a,
.page-links > span,
.page-header,
.comments-area,
.comment-list + .comment-respond,
.comment-list article,
.comment-list .pingback,
.comment-list .trackback,
.comment-list .reply a,
.no-comments {
border-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
border-color: {$colors['border_color']};
}
/* Border Focus Color */
a:focus,
button:focus,
input:focus {
outline-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
outline-color: {$colors['border_focus_color']};
}
input:focus,
textarea:focus {
border-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
border-color: {$colors['border_focus_color']};
}
/* Sidebar Link Color */
.secondary-toggle:before {
color: {$colors['sidebar_textcolor']};
}
.site-title a,
.site-description {
color: {$colors['sidebar_textcolor']};
}
/* Sidebar Text Color */
.site-title a:hover,
.site-title a:focus {
color: {$colors['secondary_sidebar_textcolor']};
}
/* Sidebar Border Color */
.secondary-toggle {
border-color: {$colors['sidebar_textcolor']}; /* Fallback for IE7 and IE8 */
border-color: {$colors['sidebar_border_color']};
}
/* Sidebar Border Focus Color */
.secondary-toggle:hover,
.secondary-toggle:focus {
border-color: {$colors['sidebar_textcolor']}; /* Fallback for IE7 and IE8 */
border-color: {$colors['sidebar_border_focus_color']};
}
.site-title a {
outline-color: {$colors['sidebar_textcolor']}; /* Fallback for IE7 and IE8 */
outline-color: {$colors['sidebar_border_focus_color']};
}
/* Meta Background Color */
.entry-footer {
background-color: {$colors['meta_box_background_color']};
}
@media screen and (min-width: 38.75em) {
/* Main Text Color */
.page-header {
border-color: {$colors['textcolor']};
}
}
@media screen and (min-width: 59.6875em) {
/* Make sure its transparent on desktop */
.site-header,
.secondary {
background-color: transparent;
}
/* Sidebar Background Color */
.widget button,
.widget input[type="button"],
.widget input[type="reset"],
.widget input[type="submit"],
.widget_calendar tbody a,
.widget_calendar tbody a:hover,
.widget_calendar tbody a:focus {
color: {$colors['header_background_color']};
}
/* Sidebar Link Color */
.secondary a,
.dropdown-toggle:after,
.widget-title,
.widget blockquote cite,
.widget blockquote small {
color: {$colors['sidebar_textcolor']};
}
.widget button,
.widget input[type="button"],
.widget input[type="reset"],
.widget input[type="submit"],
.widget_calendar tbody a {
background-color: {$colors['sidebar_textcolor']};
}
.textwidget a {
border-color: {$colors['sidebar_textcolor']};
}
/* Sidebar Text Color */
.secondary a:hover,
.secondary a:focus,
.main-navigation .menu-item-description,
.widget,
.widget blockquote,
.widget .wp-caption-text,
.widget .gallery-caption {
color: {$colors['secondary_sidebar_textcolor']};
}
.widget button:hover,
.widget button:focus,
.widget input[type="button"]:hover,
.widget input[type="button"]:focus,
.widget input[type="reset"]:hover,
.widget input[type="reset"]:focus,
.widget input[type="submit"]:hover,
.widget input[type="submit"]:focus,
.widget_calendar tbody a:hover,
.widget_calendar tbody a:focus {
background-color: {$colors['secondary_sidebar_textcolor']};
}
.widget blockquote {
border-color: {$colors['secondary_sidebar_textcolor']};
}
/* Sidebar Border Color */
.main-navigation ul,
.main-navigation li,
.widget input,
.widget textarea,
.widget table,
.widget th,
.widget td,
.widget pre,
.widget li,
.widget_categories .children,
.widget_nav_menu .sub-menu,
.widget_pages .children,
.widget abbr[title] {
border-color: {$colors['sidebar_border_color']};
}
.dropdown-toggle:hover,
.dropdown-toggle:focus,
.widget hr {
background-color: {$colors['sidebar_border_color']};
}
.widget input:focus,
.widget textarea:focus {
border-color: {$colors['sidebar_border_focus_color']};
}
.sidebar a:focus,
.dropdown-toggle:focus {
outline-color: {$colors['sidebar_border_focus_color']};
}
}
CSS;
return $css;
}
/**
* Output an Underscore template for generating CSS for the color scheme.
*
* The template generates the css dynamically for instant display in the Customizer
* preview.
*
* @since Twenty Fifteen 1.0
*/
function twentyfifteen_color_scheme_css_template() {
$colors = array(
'background_color' => '{{ data.background_color }}',
'header_background_color' => '{{ data.header_background_color }}',
'box_background_color' => '{{ data.box_background_color }}',
'textcolor' => '{{ data.textcolor }}',
'secondary_textcolor' => '{{ data.secondary_textcolor }}',
'border_color' => '{{ data.border_color }}',
'border_focus_color' => '{{ data.border_focus_color }}',
'sidebar_textcolor' => '{{ data.sidebar_textcolor }}',
'sidebar_border_color' => '{{ data.sidebar_border_color }}',
'sidebar_border_focus_color' => '{{ data.sidebar_border_focus_color }}',
'secondary_sidebar_textcolor' => '{{ data.secondary_sidebar_textcolor }}',
'meta_box_background_color' => '{{ data.meta_box_background_color }}',
);
?>
<script type="text/html" id="tmpl-twentyfifteen-color-scheme">
<?php echo twentyfifteen_get_color_scheme_css( $colors ); ?>
</script>
<?php
}
add_action( 'customize_controls_print_footer_scripts', 'twentyfifteen_color_scheme_css_template' );