Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Global styles: output :root selector for CSS custom properties and remove unused vars #6489

Closed
wants to merge 3 commits into from
Closed

Global styles: output :root selector for CSS custom properties and remove unused vars #6489

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3fb13c0
Synching https://github.com/WordPress/gutenberg/pull/42084
ramonjd May 3, 2024
367ab6e
unit tests
ramonjd May 3, 2024
039620d
Update class-wp-duotone.php - added since annotation
ramonjd May 9, 2024
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
3 changes: 2 additions & 1 deletion src/wp-includes/class-wp-duotone.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -809,12 +809,13 @@ private static function get_svg_definitions( $sources ) {
* @internal
*
* @since 6.3.0
* @since 6.6.0 Replaced body selector with `WP_Theme_JSON::ROOT_CSS_PROPERTIES_SELECTOR`.
*
* @param array $sources The duotone presets.
* @return string The CSS for global styles.
*/
private static function get_global_styles_presets( $sources ) {
$css = 'body{';
ramonjd marked this conversation as resolved.
Show resolved Hide resolved
$css = WP_Theme_JSON::ROOT_CSS_PROPERTIES_SELECTOR . '{';
foreach ( $sources as $filter_id => $filter_data ) {
$slug = $filter_data['slug'];
$colors = $filter_data['colors'];
Expand Down
45 changes: 26 additions & 19 deletions src/wp-includes/class-wp-theme-json.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,14 @@ class WP_Theme_JSON {
*/
protected static $blocks_metadata = array();

/**
* The CSS selector for the top-level preset settings.
*
* @since 6.6.0
* @var string
*/
const ROOT_CSS_PROPERTIES_SELECTOR = ':root';

/**
* The CSS selector for the top-level styles.
*
Expand Down Expand Up @@ -1708,14 +1716,15 @@ static function ( $carry, $element ) {
*
* @since 5.8.0
* @since 5.9.0 Added the `$origins` parameter.
* @since 6.6.0 Added check for root CSS properties selector.
*
* @param array $settings Settings to process.
* @param string $selector Selector wrapping the classes.
* @param string[] $origins List of origins to process.
* @return string The result of processing the presets.
*/
protected static function compute_preset_classes( $settings, $selector, $origins ) {
if ( static::ROOT_BLOCK_SELECTOR === $selector ) {
if ( static::ROOT_BLOCK_SELECTOR === $selector || static::ROOT_CSS_PROPERTIES_SELECTOR === $selector ) {
/*
* Classes at the global level do not need any CSS prefixed,
* and we don't want to increase its specificity.
Expand Down Expand Up @@ -2233,7 +2242,7 @@ protected static function get_setting_nodes( $theme_json, $selectors = array() )
// Top-level.
$nodes[] = array(
'path' => array( 'settings' ),
'selector' => static::ROOT_BLOCK_SELECTOR,
'selector' => static::ROOT_CSS_PROPERTIES_SELECTOR,
);

// Calculate paths for blocks.
Expand Down Expand Up @@ -2614,6 +2623,7 @@ static function ( $pseudo_selector ) use ( $selector ) {
* Outputs the CSS for layout rules on the root.
*
* @since 6.1.0
* @since 6.6.0 Use `ROOT_CSS_PROPERTIES_SELECTOR` for CSS custom properties.
*
* @param string $selector The root node selector.
* @param array $block_metadata The metadata for the root block.
Expand All @@ -2624,16 +2634,6 @@ public function get_root_layout_rules( $selector, $block_metadata ) {
$settings = isset( $this->theme_json['settings'] ) ? $this->theme_json['settings'] : array();
$use_root_padding = isset( $this->theme_json['settings']['useRootPaddingAwareAlignments'] ) && true === $this->theme_json['settings']['useRootPaddingAwareAlignments'];

/*
* Reset default browser margin on the root body element.
* This is set on the root selector **before** generating the ruleset
* from the `theme.json`. This is to ensure that if the `theme.json` declares
* `margin` in its `spacing` declaration for the `body` element then these
* user-generated values take precedence in the CSS cascade.
* @link https://github.com/WordPress/gutenberg/issues/36147.
*/
$css .= 'body { margin: 0;';

/*
* If there are content and wide widths in theme.json, output them
* as custom properties on the body element so all blocks can use them.
Expand All @@ -2643,11 +2643,19 @@ public function get_root_layout_rules( $selector, $block_metadata ) {
$content_size = static::is_safe_css_declaration( 'max-width', $content_size ) ? $content_size : 'initial';
$wide_size = isset( $settings['layout']['wideSize'] ) ? $settings['layout']['wideSize'] : $settings['layout']['contentSize'];
$wide_size = static::is_safe_css_declaration( 'max-width', $wide_size ) ? $wide_size : 'initial';
$css .= '--wp--style--global--content-size: ' . $content_size . ';';
$css .= '--wp--style--global--wide-size: ' . $wide_size . ';';
$css .= static::ROOT_CSS_PROPERTIES_SELECTOR . ' { --wp--style--global--content-size: ' . $content_size . ';';
$css .= '--wp--style--global--wide-size: ' . $wide_size . '; }';
}

$css .= ' }';
/*
* Reset default browser margin on the body element.
* This is set on the body selector **before** generating the ruleset
* from the `theme.json`. This is to ensure that if the `theme.json` declares
* `margin` in its `spacing` declaration for the `body` element then these
* user-generated values take precedence in the CSS cascade.
* @link https://github.com/WordPress/gutenberg/issues/36147.
*/
$css .= 'body { margin: 0; }';

if ( $use_root_padding ) {
// Top and bottom padding are applied to the outer block container.
Expand All @@ -2670,16 +2678,15 @@ public function get_root_layout_rules( $selector, $block_metadata ) {
$css .= '.wp-site-blocks > .alignright { float: right; margin-left: 2em; }';
$css .= '.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';

$block_gap_value = isset( $this->theme_json['styles']['spacing']['blockGap'] ) ? $this->theme_json['styles']['spacing']['blockGap'] : '0.5em';
$has_block_gap_support = isset( $this->theme_json['settings']['spacing']['blockGap'] );
if ( $has_block_gap_support ) {
// Block gap styles will be output unless explicitly set to `null`. See static::PROTECTED_PROPERTIES.
if ( isset( $this->theme_json['settings']['spacing']['blockGap'] ) ) {
$block_gap_value = static::get_property_value( $this->theme_json, array( 'styles', 'spacing', 'blockGap' ) );
$css .= ":where(.wp-site-blocks) > * { margin-block-start: $block_gap_value; margin-block-end: 0; }";
$css .= ':where(.wp-site-blocks) > :first-child:first-child { margin-block-start: 0; }';
$css .= ':where(.wp-site-blocks) > :last-child:last-child { margin-block-end: 0; }';

// For backwards compatibility, ensure the legacy block gap CSS variable is still available.
$css .= "$selector { --wp--style--block-gap: $block_gap_value; }";
$css .= static::ROOT_CSS_PROPERTIES_SELECTOR . " { --wp--style--block-gap: $block_gap_value; }";
}
$css .= $this->get_layout_styles( $block_metadata );

Expand Down
Loading
Loading