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

Sync customizer color settings to Gutenberg and frontend #373

Merged
merged 49 commits into from
Oct 29, 2018
Merged

Sync customizer color settings to Gutenberg and frontend #373

Show file tree
Hide file tree
Changes from 24 commits
Commits
Show all changes
49 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
8f2f569
Merge branch 'master' into try/sync-customizer-colors-to-gutenberg
allancole Oct 27, 2018
a800aef
Fixing merge problems
allancole Oct 27, 2018
ee3040b
recompiling styles and fixing old hentry selectors
allancole Oct 27, 2018
a1a06f4
rename primary-color-hover strings
allancole Oct 27, 2018
816ea9e
Site title and site footer should not inherit color options
allancole Oct 27, 2018
629438c
syncing color styles between backend and frontend
allancole Oct 27, 2018
2962e9f
Fixes cover image editor colors
allancole Oct 27, 2018
4e18c94
Add custom color support for media&text block
allancole Oct 27, 2018
69d6ee0
SYncing button styles between editor and frontend
allancole Oct 27, 2018
7b1cefd
Clean up pull-quote styles in editor/frontend
allancole Oct 27, 2018
99ad81e
Cleaning up floating for pullquotes in editor
allancole Oct 27, 2018
aff372b
removing unused function
allancole Oct 27, 2018
410eb6f
Fix pullquote color overrides
allancole Oct 27, 2018
effdcbc
Cleaning up styles
allancole Oct 27, 2018
fd84047
recompiling styles
allancole Oct 27, 2018
9e45cb1
Adds HSL support for better contrast consitency
allancole Oct 28, 2018
8fe4e67
More improvements and code clean up
allancole Oct 28, 2018
d470e64
Various styling improvements for editor and frontend
allancole Oct 28, 2018
09cc925
Re-syncing with master, add HSL color support, add dynamic styles for…
allancole Oct 28, 2018
3c5a128
Code tidying
allancole Oct 28, 2018
2112c57
Avoid overwriting changes from #375
kjellr Oct 29, 2018
22636e6
Restore body selector to pullquote editor styles.
kjellr Oct 29, 2018
86a0abf
Compile editor styles.
kjellr Oct 29, 2018
fbca675
Set pullquote background color to custom color by default.
kjellr Oct 29, 2018
9d5e057
Fix issue where site title would appear black on single post pages wi…
kjellr Oct 29, 2018
cd896fc
Fix footer hover color, border for blockquotes inserted via classic e…
kjellr Oct 29, 2018
ce784c1
Add hover colors for Gutenberg text.
kjellr Oct 29, 2018
cd4891e
Fix solid color pullquote link color.
kjellr Oct 29, 2018
78a870a
Make sure we don't overwrite editor color styles for links that are o…
kjellr Oct 29, 2018
3935cff
Fixing display of text on blocks that use the custom primary color.
kjellr Oct 29, 2018
d36b6aa
Fix hover colors in post footers.
kjellr Oct 29, 2018
a6ea555
Fix classic editor blockquote color in Gutenberg.
kjellr Oct 29, 2018
8ccd08f
code tidying
allancole Oct 29, 2018
f3b83d3
Merge branch 'master' into try/sync-customizer-colors-to-gutenberg
allancole Oct 29, 2018
338751e
Add a default color option
allancole Oct 29, 2018
c134e19
Fixing travis.ci errors
allancole Oct 29, 2018
6a1ca76
recompiling styles
allancole Oct 29, 2018
4368a52
More fixes for travis.ci error
allancole Oct 29, 2018
04f8036
More travius.ci errors fixed
allancole Oct 29, 2018
2b84034
Fixeing more travis errors
allancole Oct 29, 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
24 changes: 11 additions & 13 deletions functions.php
View file
Open in desktop
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,17 @@ 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' ) ),
)
)
);

}
endif;
add_action( 'after_setup_theme', 'twentynineteen_setup' );
Expand Down Expand Up @@ -154,7 +153,6 @@ function twentynineteen_scripts() {
function twentynineteen_editor_frame_styles() {
wp_enqueue_style( 'twentynineteen-editor-frame-styles', get_theme_file_uri( '/style-editor-frame.css' ), false, '1.0', 'all' );
}

add_action( 'enqueue_block_editor_assets', 'twentynineteen_editor_frame_styles' );

/**
Expand Down
216 changes: 216 additions & 0 deletions inc/customizer.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,52 @@ 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(
Copy link

Choose a reason for hiding this comment

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

As was noted in the colors issue, it would be more appropriate to use a hue picker than the full color picker for this theme, similar to Twenty Seventeen. This is enabled, here, by adding the line:
'mode' => 'hue',

The sanitize callback and default values should be updated to absint and the integer equivalent accordingly. All of the CSSS would then be revised to use HSL equivalent colors for the custom color options. While this requires a minor tenchical effort (should take less than an hour), it eliminates the concerns regarding color contrast and makes accessibility much more achievable for end users.

'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-hover-color', array(
'default' => '#005177',
'sanitize_callback' => 'sanitize_hex_color',
'transport' => 'postMessage',
) );

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

$wp_customize->add_setting(
'image_filter',
array(
'default' => 'active',
'sanitize_callback' => 'twentynineteen_sanitize_image_filter',
'transport' => 'postMessage',
) );

$wp_customize->add_control(
'image_filter',
array(
'label' => __( 'Featured Image Color Filter', 'twentynineteen' ),
'section' => 'colors',
'type' => 'radio',
'description' => __( "Twenty Nineteen adds a color filter to featured images using your site's primary color. If you disable this effect, the theme will use a black filter in individual posts to keep text readable when it appears on top of the featured image.", 'twentynineteen' ) . '<br/><span style="font-style: normal; display: block; margin-top: 16px;">' . __( 'On Featured Images, apply', 'twentynineteen' ) . '</span>',
'choices' => array(
'active' => __( 'A color filter', 'twentynineteen' ),
'inactive' => __( 'A black filter', 'twentynineteen' ),
) ) );
}
add_action( 'customize_register', 'twentynineteen_customize_register' );

Expand Down Expand Up @@ -61,3 +107,173 @@ 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 colors.
*
* @since Twenty Sixteen 1.0
Copy link

Choose a reason for hiding this comment

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

This is not Twenty Sixteen.

*
* @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 = '
Copy link

Choose a reason for hiding this comment

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

I recommend defining the color CSS in a separate file to make it easier to locate and adjust. It would be great to match the patter established with Twenty Seventeen by creating a color-patterns.php file with the 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
* - 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,
.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 > *[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 .has-primary-background-color {
background-color: %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,
.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,
.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),
.entry-content > *[class^="wp-block-"] .has-primary-color,
.entry-content > *[class^="wp-block-"].is-style-solid-color .has-primary-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 {
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 ) );
Copy link

Choose a reason for hiding this comment

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

Similar to Twenty Seventeen and other themes that use instant custom color previews, we need to expose a data attribute with a the color in the customize preview here. This allows us to avoid duplicating the CSS rules in JS. Instead of wp_add_inline_style, this should be:

	$customize_preview_data_color = '';
	if ( is_customize_preview() ) {
		$customize_preview_data_color = 'data-color="' . $primary_color . '"';
	}
?>
	<style type="text/css" id="twentynineteen-colors" <?php echo $customize_preview_data_color; ?>>
		<?php echo $css; ?>
	</style>
<?php

}
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_hover_color_css() {
$default_color = '#005177';
$primary_hover_color = get_theme_mod( 'primary-hover-color', $default_color );

// Don't do anything if the current color is the default.
if ( $primary_hover_color === $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_hover_color ) );
}
add_action( 'wp_enqueue_scripts', 'twentynineteen_primary_hover_color_css', 11 );

/**
* Sanitize image filter choice.
*
* @param string $choice Whether image filter is active.
*
* @return string
*/
function twentynineteen_sanitize_image_filter( $choice ) {
$valid = array(
'active',
'inactive',
);
if ( in_array( $choice, $valid, true ) ) {
return $choice;
}
return 'active';
}
3 changes: 3 additions & 0 deletions inc/template-functions.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,9 @@ function twentynineteen_can_show_post_thumbnail() {
* Returns true if image filters are enabled on the theme options.
*/
function twentynineteen_image_filters_enabled() {
if ( 'inactive' === get_theme_mod( 'image_filter' ) ) {
return false;
}
return true;
}

Expand Down
7 changes: 0 additions & 7 deletions inc/ui-icons.php
View file
Open in desktop

This file was deleted.

Loading