WordPress.org

Make WordPress Core

Opened 9 months ago

Closed 9 months ago

Last modified 9 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 9 months ago.
Add filter to twentyseventeen_custom_colors_css().
38949.1.diff (733 bytes) - added by celloexpressions 9 months ago.
Fix filter docs

Download all attachments as: .zip

Change History (11)

@celloexpressions
9 months ago

Add filter to twentyseventeen_custom_colors_css().

#1 @celloexpressions
9 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.


9 months ago

#3 @davidakennedy
9 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.


9 months ago

#5 @helen
9 months ago

  • Keywords dev-reviewed added

#6 @swissspidy
9 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
9 months ago

Fix filter docs

#7 @celloexpressions
9 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
9 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
9 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.