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

Feature/customizer color controll for featured image color overlay #113

Merged
merged 9 commits into from
Oct 29, 2018
Merged

Feature/customizer color controll for featured image color overlay #113

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
f1cce8f
Merge pull request #5 from WordPress/master
fabiankaegy Oct 18, 2018
418e655
Merge pull request #6 from WordPress/master
fabiankaegy Oct 18, 2018
f254535
Merge pull request #7 from WordPress/master
fabiankaegy Oct 19, 2018
924f4df
Merge pull request #8 from WordPress/master
fabiankaegy Oct 19, 2018
3fb0305
Merge pull request #9 from WordPress/master
fabiankaegy Oct 22, 2018
30a323f
Merge pull request #10 from WordPress/master
fabiankaegy Oct 23, 2018
ed41d5e
Added ability to change primary color of theme
fabiankaegy Oct 18, 2018
f5834d2
very crude working version
fabiankaegy Oct 24, 2018
2fd0c30
Fix minor variable typo
kjellr Oct 25, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions functions.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,22 @@ 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' => esc_attr( get_theme_mod( 'primary-color', '#0073aa' ) ),
),
array(
'name' => esc_html__( 'Primary Color Hover', 'twentynineteen' ),
'slug' => 'primaryhover',
'color' => esc_attr( get_theme_mod( 'primary-color-hover', '#005177' ) ),
)
)
);

}
endif;
add_action( 'after_setup_theme', 'twentynineteen_setup' );
Expand Down
177 changes: 177 additions & 0 deletions inc/customizer.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,32 @@ function twentynineteen_customize_register( $wp_customize ) {
)
);
}

// Add page primary color setting and control.
$wp_customize->add_setting( 'primary-color', array(
'default' => '#0073aa',
'sanitize_callback' => 'sanitize_hex_color',
'transport' => 'postMessage',
) );

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

// Add page primary color hover setting and control.
$wp_customize->add_setting( 'primary-color-hover', array(
'default' => '#005177',
'sanitize_callback' => 'sanitize_hex_color',
'transport' => 'postMessage',
) );

$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'primary-color-hover', array(
'label' => __( 'Primary Color Hover' ),
'description' => __( 'Changes the Hover State color of Buttons, Links etc.' ),
'section' => 'colors',
) ) );
}
add_action( 'customize_register', 'twentynineteen_customize_register' );

Expand Down Expand Up @@ -60,3 +86,154 @@ function twentynineteen_customize_preview_js() {
wp_enqueue_script( 'twentynineteen-customizer', get_template_directory_uri() . '/js/customizer.js', array( 'customize-preview' ), '20151215', true );
}
add_action( 'customize_preview_init', 'twentynineteen_customize_preview_js' );


/**
* Enqueues front-end CSS for the page background color.
*
* @since Twenty Sixteen 1.0
*
* @see wp_add_inline_style()
*/
function twentynineteen_primary_color_css() {
$default_color = '#0073aa';
$primary_color = get_theme_mod( 'primary-color', $default_color );

// Don't do anything if the current color is the default.
if ( $primary_color === $default_color ) {
return;
}

$css = '

/* Set background for:
* - featured image :before
* - featured image :before
* - post thumbmail :before
* - post thumbmail :before
* - wp block button
* - other buttons
* - Submenu
* - Sticky Post
* - WP Block Button
*/
.site-header.featured-image .hentry:before,
.site-header.featured-image .hentry:after,
.image-filters-enabled .hentry .post-thumbnail:before,
.image-filters-enabled .hentry .post-thumbnail:after,
.entry-content .wp-block-button .wp-block-button__link,
.button, button, input[type="button"], input[type="reset"], input[type="submit"],
.main-navigation .sub-menu,
.sticky-post,
.entry-content .wp-block-button .wp-block-button__link,
.entry-content .wp-block-pullquote.is-style-solid-color:not(.has-background-color),
.entry-content .wp-block-file .wp-block-file__button {
background: %1$s;
}

/* 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,
.hentry .entry-meta a:hover, .hentry .entry-footer a:hover,
.hentry .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,
.entry-content .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color),
.entry-content .wp-block-button.is-style-outline .wp-block-button__link:focus:not(.has-text-color),
.entry-content .wp-block-button.is-style-outline .wp-block-button__link:active:not(.has-text-color) {
color: %1$s;
}

/* Set left border color for:
* wp block quote
*/
.entry-content .wp-block-quote:not(.is-large), .entry-content .wp-block-quote:not(.is-style-large) {
border-left-color: %1$s;
}

/* 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,
.entry-content .wp-block-button.is-style-outline .wp-block-button__link,
.entry-content .wp-block-button.is-style-outline .wp-block-button__link:focus,
.entry-content .wp-block-button.is-style-outline .wp-block-button__link:active {
border-color: %1$s
}

.gallery-item > div > a:focus {
box-shadow: 0 0 0 2px %1$s;
}
';

wp_add_inline_style( 'twentynineteen-style', sprintf( $css, $primary_color ) );
}
add_action( 'wp_enqueue_scripts', 'twentynineteen_primary_color_css', 11 );


/**
* Enqueues front-end CSS for the page background color.
*
* @since Twenty Sixteen 1.0
*
* @see wp_add_inline_style()
*/
function twentynineteen_primary_color_hover_css() {
$default_color = '#005177';
$primary_color_hover = get_theme_mod( 'primary-color-hover', $default_color );

// Don't do anything if the current color is the default.
if ( $primary_color_hover === $default_color ) {
return;
}

$css = '
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,
.comment .comment-author .fn a:hover,
.comment-reply-link:hover,
#cancel-comment-reply-link:hover {
color: %1$s;
}

.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: %1$s;
}
';

wp_add_inline_style( 'twentynineteen-style', sprintf( $css, $primary_color_hover ) );
}
add_action( 'wp_enqueue_scripts', 'twentynineteen_primary_color_hover_css', 11 );
145 changes: 143 additions & 2 deletions js/customizer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,147 @@
* Contains handlers to make Theme Customizer preview reload changes asynchronously.
*/

( function( $ ) { // jshint ignore:line
( function( value ) {
//Update site header overlay color...
wp.customize( 'primary-color', function( value ) {
value.bind( function( newval ) {
var css = `
/* Set background for:
* - featured image :before
* - featured image :before
* - post thumbmail :before
* - post thumbmail :before
* - wp block button
* - other buttons
* - Submenu
* - Sticky Post
* - WP Block Button
*/
.site-header.featured-image .hentry:before,
.site-header.featured-image .hentry:after,
.image-filters-enabled .hentry .post-thumbnail:before,
.image-filters-enabled .hentry .post-thumbnail:after,
.entry-content .wp-block-button .wp-block-button__link,
.button, button, input[type="button"], input[type="reset"], input[type="submit"],
.main-navigation .sub-menu,
.sticky-post,
.entry-content .wp-block-button .wp-block-button__link,
.entry-content .wp-block-pullquote.is-style-solid-color:not(.has-background-color),
.entry-content .wp-block-file .wp-block-file__button {
background: ${newval};
}

} )( jQuery );
/* 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,
.hentry .entry-meta a:hover, .hentry .entry-footer a:hover,
.hentry .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,
.entry-content .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color),
.entry-content .wp-block-button.is-style-outline .wp-block-button__link:focus:not(.has-text-color),
.entry-content .wp-block-button.is-style-outline .wp-block-button__link:active:not(.has-text-color) {
color: ${newval};
}

/* Set left border color for:
* wp block quote
*/
.entry-content .wp-block-quote:not(.is-large), .entry-content .wp-block-quote:not(.is-style-large) {
border-left-color: ${newval};
}

/* 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,
.entry-content .wp-block-button.is-style-outline .wp-block-button__link,
.entry-content .wp-block-button.is-style-outline .wp-block-button__link:focus,
.entry-content .wp-block-button.is-style-outline .wp-block-button__link:active {
border-color: ${newval}
}

.gallery-item > div > a:focus {
box-shadow: 0 0 0 2px ${newval};
}
`,
head = document.head || document.getElementsByTagName( 'head' )[0],
style = document.createElement( 'style' );

style.type = 'text/css';
if ( style.styleSheet ){
// This is required for IE8 and below.
style.styleSheet.cssText = css;
} else {
style.appendChild( document.createTextNode( css ) );
}
head.appendChild( style );

} );
} );

wp.customize( 'primary-color-hover', function( value ) {
value.bind( function( newval ) {

var css = `
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,
.comment .comment-author .fn a:hover,
.comment-reply-link:hover,
#cancel-comment-reply-link:hover {
color: ${newval};
}

.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: ${newval};
}
`,
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should avoid duplicating the CSS in the JavaScript file. My recommended approach is to do something like this:

`value.bind( function( to ) {

// Update custom color CSS
var style = $( '#twentyseventeen--color' ), // Selector of output style element.
    color = style.data( 'color' ),
    css = style.html();
css = css.split( color ).join( to ); // equivalent to css.replaceAll.
style.html( css )
       .data( 'color', to );

} );

See https://celloexpressions.com/blog/a-strategy-for-custom-colors-in-the-customizer/ for the full explanation of this approach.

head = document.head || document.getElementsByTagName( 'head' )[0],
style = document.createElement( 'style' );

style.type = 'text/css';
if ( style.styleSheet ){
// This is required for IE8 and below.
style.styleSheet.cssText = css;
} else {
style.appendChild( document.createTextNode( css ) );
}
head.appendChild( style );

} );
} );

} )()