Twenty Seventeen: child themes can't easily extend custom color patterns

[celloexpressions]

Child themes of Twenty Seventeen may elect to retain the base custom colors functionality, for example if the child theme makes primarily functional rather than visual changes. However, it is currently not possible to extend the base custom colors CSS directly.

Rather than adding separate functions and style elements to print child theme-specific extensions of the base theme colors CSS, and manually adding a live-preview mechanism for the customizer, child themes should be able to filter the generated CSS directly, with direct access to the current hue and saturation as well.

The forthcoming patch adds the filter to twentyseventeen_custom_colors_css() and will be followed by an example. This allows child themes (or plugins) to add CSS in one place without needing to add previewing logic or even deal with outputting the CSS.

Note: the dark color scheme can be easily supported within the child theme's main CSS file or a separate one, by scoping CSS to .colors-dark. A filter is needed for custom color schemes.

[celloexpressions]

Add filter to twentyseventeen_custom_colors_css().

[celloexpressions]

With 38949.diff​, themes can do something along the lines of:

// Add child theme selectors for color schemes.
function dynamic_seventeen_custom_colors_css( $css, $hue, $saturation ) {
	$css .= '
	.colors-custom .content-menu > article:not(.has-post-thumbnail),
	.colors-custom .content-menu > section:not(.has-post-thumbnail) {
		border-top-color: hsl( ' . $hue . ', ' . $saturation . ', 87% ); /* base: #ddd; */
	}';
	return $css;
}
add_filter( 'twentyseventeen_custom_colors_css', 'dynamic_seventeen_custom_colors_css', 10, 3 );

To add any custom styles that need color schemes to apply.

[davidakennedy]

Thanks for the report and patch @celloexpressions! I tested this out, both with the regular theme, and with a child theme using your example code. Works perfectly. This should be good to go.

[swissspidy]

Summary in the docblock should use a third-person singular verb as per the inline docs standards.

Also, string not String and int instead of integer.

See ​https://make.wordpress.org/core/handbook/best-practices/inline-documentation-standards/php/

[celloexpressions]

Fix filter docs

[celloexpressions]

38949.1.diff​ fixes the filter docs; note that integer is used elsewhere in Twenty Seventeen so I was aiming for consistency with that.

[davidakennedy]

In 39386:

Twenty Seventeen: Allow child themes to easily extend custom color patterns

By adding a filter, child themes can add additional selectors onto the custom color scheme CSS. Like so:

// Add child theme selectors for color schemes.
function dynamic_seventeen_custom_colors_css( $css, $hue, $saturation ) {
	$css .= '
	.colors-custom .content-menu > article:not(.has-post-thumbnail),
	.colors-custom .content-menu > section:not(.has-post-thumbnail) {
		border-top-color: hsl( ' . $hue . ', ' . $saturation . ', 87% ); /* base: #ddd; */
	}';
	return $css;
}
add_filter( 'twentyseventeen_custom_colors_css', 'dynamic_seventeen_custom_colors_css', 10, 3 );

Props celloexpressions.

Fixes #38949.

[ocean90]

In 39387:

Twenty Seventeen: Allow child themes to easily extend custom color patterns

By adding a filter, child themes can add additional selectors onto the custom color scheme CSS. Like so:

// Add child theme selectors for color schemes.
function dynamic_seventeen_custom_colors_css( $css, $hue, $saturation ) {
	$css .= '
	.colors-custom .content-menu > article:not(.has-post-thumbnail),
	.colors-custom .content-menu > section:not(.has-post-thumbnail) {
		border-top-color: hsl( ' . $hue . ', ' . $saturation . ', 87% ); /* base: #ddd; */
	}';
	return $css;
}
add_filter( 'twentyseventeen_custom_colors_css', 'dynamic_seventeen_custom_colors_css', 10, 3 );

Merge of [39386] to the 4.7 branch.

Props celloexpressions.
See #38949.