WordPress.org

Make WordPress Core

Opened 13 months ago

Closed 13 months ago

Last modified 13 months ago

#38949 closed defect (bug) (fixed)

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

Reported by: celloexpressions Owned by: davidakennedy
Milestone: 4.7 Priority: normal
Severity: normal Version: 4.7
Component: Bundled Theme Keywords: has-patch commit dev-reviewed
Focuses: Cc:

Description

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.

Attachments (2)

38949.diff (735 bytes) - added by celloexpressions 13 months ago.
Add filter to twentyseventeen_custom_colors_css().
38949.1.diff (733 bytes) - added by celloexpressions 13 months ago.
Fix filter docs

Download all attachments as: .zip

Change History (11)

@celloexpressions
13 months ago

Add filter to twentyseventeen_custom_colors_css().

#1 @celloexpressions
13 months ago

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.

This ticket was mentioned in Slack in #core-themes by davidakennedy. View the logs.


13 months ago

#3 @davidakennedy
13 months ago

  • Keywords commit added
  • Owner set to davidakennedy
  • Status changed from new to assigned

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.

This ticket was mentioned in Slack in #core by helen. View the logs.


13 months ago

#5 @helen
13 months ago

  • Keywords dev-reviewed added

#6 @swissspidy
13 months ago

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
13 months ago

Fix filter docs

#7 @celloexpressions
13 months ago

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

#8 @davidakennedy
13 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

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.

#9 @ocean90
13 months ago

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.

Note: See TracTickets for help on using tickets.