Skip to content
This repository has been archived by the owner on Jan 15, 2019. It is now read-only.

Commit

Permalink
Merge pull request #373 from WordPress/try/sync-customizer-colors-to-…
Browse files Browse the repository at this point in the history 
…gutenberg

Sync customizer color settings to Gutenberg and frontend

- Adds default and custom color support to the customizer
- Combines color options with feature image overlay option
  • Loading branch information
@allancole
allancole authored Oct 29, 2018
2 parents 2713bc2 + 2b84034 commit fdf458b
Show file tree
Hide file tree
Showing 16 changed files with 641 additions and 152 deletions.
49 changes: 36 additions & 13 deletions functions.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,18 +68,6 @@ function twentynineteen_setup() {
)
);

// Set up the WordPress core custom background feature.
add_theme_support(
'custom-background',
apply_filters(
'twentynineteen_custom_background_args',
array(
'default-color' => 'ffffff',
'default-image' => '',
)
)
);

/**
* Add support for core custom logo.
*
Expand Down Expand Up @@ -107,6 +95,18 @@ function twentynineteen_setup() {
// Enqueue editor styles
add_editor_style( 'style-editor.css' );

// Add custom color to the editor color palette
add_theme_support(
'editor-color-palette',
array(
array(
'name' => esc_html__( 'Primary Color', 'twentynineteen' ),
'slug' => 'primary',
'color' => twentynineteen_hsl_hex( absint( get_theme_mod( 'colorscheme_hue', '199' ) ), 100, 33, ),
),
)
);

}
endif;
add_action( 'after_setup_theme', 'twentynineteen_setup' );
Expand Down Expand Up @@ -152,11 +152,34 @@ function twentynineteen_scripts() {
* Enqueue supplemental block editor styles
*/
function twentynineteen_editor_frame_styles() {

// Include color patterns
require_once( get_parent_theme_file_path( '/inc/color-patterns.php' ) );

wp_enqueue_style( 'twentynineteen-editor-frame-styles', get_theme_file_uri( '/style-editor-frame.css' ), false, '1.0', 'all' );
wp_add_inline_style( 'twentynineteen-editor-frame-styles', twentynineteen_custom_colors_css() );
}

add_action( 'enqueue_block_editor_assets', 'twentynineteen_editor_frame_styles' );

/**
* Display custom color CSS in customizer and on frontend.
*/
function twentynineteen_colors_css_wrap() {
if ( 'custom' !== get_theme_mod( 'colorscheme' ) && ! is_customize_preview() ) {
return;
}

require_once( get_parent_theme_file_path( '/inc/color-patterns.php' ) );
$hue = absint( get_theme_mod( 'colorscheme_hue', 250 ) );
?>

<style type="text/css" id="custom-theme-colors" <?php echo is_customize_preview() ? 'data-hue="' . $hue . '"' : ''; ?>>
<?php echo twentynineteen_custom_colors_css(); ?>
</style>
<?php
}
add_action( 'wp_head', 'twentynineteen_colors_css_wrap' );

/**
* SVG Icons class.
*/
Expand Down
211 changes: 211 additions & 0 deletions inc/color-patterns.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,211 @@
<?php
/**
* Twenty Nineteen: Color Patterns
*
* @package WordPress
* @subpackage TwentyNineteen
* @since 1.0
*/

/**
* Generate the CSS for the current custom color scheme.
*/
function twentynineteen_custom_colors_css() {

$default_primary_color = 199;
$primary_color = absint( get_theme_mod( 'colorscheme_hue', $default_primary_color ) );

/**
* Filter Twenty Nineteen default saturation level.
*
* @since Twenty Nineteen 1.0
*
* @param int $saturation Color saturation level.
*/

$saturation = absint( apply_filters( 'twentynineteen_custom_colors_saturation', 100 ) );
$reduced_saturation = ( .8 * $saturation ) . '%';
$saturation = $saturation . '%';

$theme_css = '
/*
* Set background for:
* - featured image :before
* - featured image :before
* - post thumbmail :before
* - post thumbmail :before
* - Submenu
* - Sticky Post
* - buttons
* - WP Block Button
* - Blocks
*/
.image-filters-enabled .site-header.featured-image .site-featured-image:before,
.image-filters-enabled .site-header.featured-image .site-featured-image:after,
.image-filters-enabled .entry .post-thumbnail:before,
.image-filters-enabled .entry .post-thumbnail:after,
.main-navigation .sub-menu,
.sticky-post,
.entry-content .wp-block-button .wp-block-button__link,
.button, button, input[type="button"], input[type="reset"], input[type="submit"],
.entry-content > .has-primary-background-color,
.entry-content > *[class^="wp-block-"].has-primary-background-color,
.entry-content > *[class^="wp-block-"] .has-primary-background-color,
.entry-content > *[class^="wp-block-"].is-style-solid-color,
.entry-content > *[class^="wp-block-"].is-style-solid-color .has-primary-background-color,
.entry-content .wp-block-file .wp-block-file__button {
background-color: hsl( ' . $primary_color . ', ' . $saturation . ', 33% ); /* base: #0073a8; */
}
/*
* Set Color for:
* - all links
* - main navigation links
* - Post navigation links
* - Post entry meta hover
* - Post entry header more-link hover
* - main navigation svg
* - comment navigation
* - Comment edit link hover
* - Site Footer Link hover
*/
a,
a:visited,
.main-navigation ul.main-menu > li > a,
.post-navigation .post-title,
.entry .entry-meta a:hover,
.entry .entry-footer a:hover,
.entry .entry-content .more-link:hover,
.main-navigation .main-menu > li > a + svg,
.comment-navigation .nav-previous a:hover,
.comment-navigation .nav-next a:hover,
.comment .comment-metadata .comment-edit-link:hover,
.site-footer a:hover,
#colophon a:hover,
.entry-content .wp-block-button.is-style-outline .wp-block-button__link,
.entry-content .wp-block-button.is-style-outline .wp-block-button__link,
.entry-content .wp-block-button.is-style-outline .wp-block-button__link,
.entry-content > *[class^="wp-block-"] .has-primary-color,
.entry-content > *[class^="wp-block-"].is-style-solid-color .has-primary-color {
color: hsl( ' . $primary_color . ', ' . $saturation . ', 33% ); /* base: #0073a8; */
}
/*
* Set left border color for:
* wp block quote
*/
.entry-content blockquote,
.entry-content .wp-block-quote:not(.is-large),
.entry-content .wp-block-quote:not(.is-style-large) {
border-left-color: hsl( ' . $primary_color . ', ' . $saturation . ', 33% ); /* base: #0073a8; */
}
/*
* Set border color for:
* :focus
*/
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
border-color: hsl( ' . $primary_color . ', ' . $saturation . ', 33% ); /* base: #0073a8; */
}
.gallery-item > div > a:focus {
box-shadow: 0 0 0 2px hsl( ' . $primary_color . ', ' . $saturation . ', 33% ); /* base: #0073a8; */
}
/* Hover colors */
a:hover, a:active,
.main-navigation .main-menu > li > a:hover,
.main-navigation .main-menu > li > a:hover + svg,
.post-navigation .nav-links a:hover .post-title,
.author-bio .author-description .author-link:hover,
.comment .comment-author .fn a:hover,
.comment-reply-link:hover,
#cancel-comment-reply-link:hover {
color: hsl( ' . $primary_color . ', ' . $saturation . ', 23% ); /* base: #005177; */
}
.main-navigation .sub-menu > li > a:hover,
.main-navigation .sub-menu > li > a:focus,
.main-navigation .sub-menu > li > a:hover:after,
.main-navigation .sub-menu > li > a:focus:after {
background: hsl( ' . $primary_color . ', ' . $saturation . ', 23% ); /* base: #005177; */
}';

$editor_css = '
/*
* Set colors for:
* - links
* - blockquote
* - pullquote (solid color)
* - buttons
*/
.editor-block-list__layout .editor-block-list__block a,
.editor-block-list__layout .editor-block-list__block .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color),
.editor-block-list__layout .editor-block-list__block .wp-block-button.is-style-outline:hover .wp-block-button__link:not(.has-text-color),
.editor-block-list__layout .editor-block-list__block .wp-block-button.is-style-outline:focus .wp-block-button__link:not(.has-text-color),
.editor-block-list__layout .editor-block-list__block .wp-block-button.is-style-outline:active .wp-block-button__link:not(.has-text-color) {
color: hsl( ' . $primary_color . ', ' . $saturation . ', 33% ); /* base: #0073a8; */
}
.editor-block-list__layout .editor-block-list__block .wp-block-quote:not(.is-large):not(.is-style-large),
.editor-styles-wrapper .editor-block-list__layout .wp-block-freeform blockquote {
border-left: 2px solid hsl( ' . $primary_color . ', ' . $saturation . ', 33% ); /* base: #0073a8; */
}
.editor-block-list__layout .editor-block-list__block .wp-block-pullquote.is-style-solid-color:not(.has-background-color) {
background-color: hsl( ' . $primary_color . ', ' . $saturation . ', 33% ); /* base: #0073a8; */
}
.editor-block-list__layout .editor-block-list__block .wp-block-file .wp-block-file__button,
.editor-block-list__layout .editor-block-list__block .wp-block-button:not(.is-style-outline) .wp-block-button__link,
.editor-block-list__layout .editor-block-list__block .wp-block-button:not(.is-style-outline) .wp-block-button__link:active,
.editor-block-list__layout .editor-block-list__block .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus,
.editor-block-list__layout .editor-block-list__block .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
background-color: hsl( ' . $primary_color . ', ' . $saturation . ', 33% ); /* base: #0073a8; */
}
/* Hover colors */
.editor-block-list__layout .editor-block-list__block a:hover,
.editor-block-list__layout .editor-block-list__block a:active {
color: hsl( ' . $primary_color . ', ' . $saturation . ', 23% ); /* base: #005177; */
}
/* Do not overwrite solid color pullquote or cover links */
.editor-block-list__layout .editor-block-list__block .wp-block-pullquote.is-style-solid-color a,
.editor-block-list__layout .editor-block-list__block .wp-block-cover a {
color: inherit;
}
';
$css = '';
if ( function_exists( 'register_block_type' ) && is_admin() ) {
$css .= $editor_css;
} else if ( ! is_admin() ) {
$css = $theme_css;
}

/**
* Filters Twenty Nineteen custom colors CSS.
*
* @since Twenty Nineteen 1.0
*
* @param string $css Base theme colors CSS.
* @param int $primary_color The user's selected color hue.
* @param string $saturation Filtered theme color saturation level.
*/
return apply_filters( 'twentynineteen_custom_colors_css', $css, $primary_color, $saturation );
}
80 changes: 78 additions & 2 deletions inc/customizer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,55 @@ function twentynineteen_customize_register( $wp_customize ) {
);
}

/**
* Custom colors.
*/
$wp_customize->add_setting(
'colorscheme',
array(
'default' => 'default',
'transport' => 'postMessage',
'sanitize_callback' => 'twentynineteen_sanitize_color_option',
)
);

$wp_customize->add_control(
'colorscheme',
array(
'type' => 'radio',
'label' => __( 'Color Scheme', 'twentynineteen' ),
'choices' => array(
'default' => __( 'Default', 'twentynineteen' ),
'custom' => __( 'Custom', 'twentynineteen' ),
),
'section' => 'colors',
'priority' => 5,
)
);

// Add primary color setting and control.
$wp_customize->add_setting(
'colorscheme_hue',
array(
'default' => 199,
'transport' => 'postMessage',
'sanitize_callback' => 'absint',
)
);

$wp_customize->add_control(
new WP_Customize_Color_Control(
$wp_customize,
'colorscheme_hue',
array(
'label' => __( 'Primary Color' ),
'description' => __( 'Changes the Color of the Featured Image overlay, Buttons, Links etc.' ),
'section' => 'colors',
'mode' => 'hue',
)
)
);

$wp_customize->add_setting(
'image_filter',
array(
Expand Down Expand Up @@ -78,13 +127,40 @@ function twentynineteen_customize_partial_blogdescription() {
}

/**
* Binds JS handlers to make Theme Customizer preview reload changes asynchronously.
* Bind JS handlers to instantly live-preview changes.
*/
function twentynineteen_customize_preview_js() {
wp_enqueue_script( 'twentynineteen-customizer', get_template_directory_uri() . '/js/customizer.js', array( 'customize-preview' ), '20151215', true );
wp_enqueue_script( 'twentynineteen-customize-preview', get_theme_file_uri( '/js/customize-preview.js' ), array( 'customize-preview' ), '20151215', true );
}
add_action( 'customize_preview_init', 'twentynineteen_customize_preview_js' );

/**
* Load dynamic logic for the customizer controls area.
*/
function twentynineteen_panels_js() {
wp_enqueue_script( 'twentynineteen-customize-controls', get_theme_file_uri( '/js/customize-controls.js' ), array(), '1.0', true );
}
add_action( 'customize_controls_enqueue_scripts', 'twentynineteen_panels_js' );

/**
* Sanitize image filter choice.
*
* @param string $choice Whether image filter is active.
*
* @return string
*/
function twentynineteen_sanitize_color_option( $choice ) {
$valid = array(
'default',
'custom',
);

if ( in_array( $choice, $valid, true ) ) {
return $choice;
}

return 'default';
}
/**
* Sanitize image filter choice.
*
Expand Down
Loading

0 comments on commit fdf458b

Please sign in to comment.