Upstream/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2024-12-22 09:07:59 +01:00
Code Issues Projects Releases Wiki Activity

Editor: add Style Engine support for nested CSS rules.

Browse Source 
Adds support for passing a `$rules_group` string to wp_style_engine_get_stylesheet_from_css_rules(), so rules can be nested under a media query, layer or other rule.

Props isabel_brison, ramonopoly.
Fixes #61099.

Built from https://develop.svn.wordpress.org/trunk@58089


git-svn-id: http://core.svn.wordpress.org/trunk@57554 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
isabel_brison 2024-05-03 04:47:12 +00:00
parent b83d7e4589
commit 629273d54f
6 changed files with 102 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
wp-includes/style-engine.php
View File

@ -113,11 +113,14 @@ function wp_style_engine_get_styles( $block_styles, $options = array() ) {
* .elephant-are-cool{color:gray;width:3em}
*
* @since 6.1.0
* @since 6.6.0 Added support for `$rules_group` in the `$css_rules` array.
*
* @param array $css_rules {
* Required. A collection of CSS rules.
*
* @type array ...$0 {
* @type string $rules_group A parent CSS selector in the case of nested CSS,
* or a CSS nested @rule, such as `@media (min-width: 80rem)` or `@layer module`.
* @type string $selector A CSS selector.
* @type string[] $declarations An associative array of CSS definitions,
* e.g. `array( "$property" => "$value", "$property" => "$value" )`.
@ -154,11 +157,12 @@ function wp_style_engine_get_stylesheet_from_css_rules( $css_rules, $options = a
continue;
}
$rules_group = $css_rule['rules_group'] ?? null;
if ( ! empty( $options['context'] ) ) {
WP_Style_Engine::store_css_rule( $options['context'], $css_rule['selector'], $css_rule['declarations'] );
WP_Style_Engine::store_css_rule( $options['context'], $css_rule['selector'], $css_rule['declarations'], $rules_group );
}
$css_rule_objects[] = new WP_Style_Engine_CSS_Rule( $css_rule['selector'], $css_rule['declarations'] );
$css_rule_objects[] = new WP_Style_Engine_CSS_Rule( $css_rule['selector'], $css_rule['declarations'], $rules_group );
}
if ( empty( $css_rule_objects ) ) {

56
wp-includes/style-engine/class-wp-style-engine-css-rule.php
View File

@ -35,20 +35,33 @@ class WP_Style_Engine_CSS_Rule {
*/
protected $declarations;
/**
* A parent CSS selector in the case of nested CSS, or a CSS nested @rule,
* such as `@media (min-width: 80rem)` or `@layer module`.
*
* @since 6.6.0
* @var string
*/
protected $rules_group;
/**
* Constructor.
*
* @since 6.1.0
* @since 6.6.0 Added the `$rules_group` parameter.
*
* @param string $selector Optional. The CSS selector. Default empty string.
* @param string[]|WP_Style_Engine_CSS_Declarations $declarations Optional. An associative array of CSS definitions,
* e.g. `array( "$property" => "$value", "$property" => "$value" )`,
* or a WP_Style_Engine_CSS_Declarations object.
* Default empty array.
* @param string $rules_group A parent CSS selector in the case of nested CSS, or a CSS nested @rule,
* such as `@media (min-width: 80rem)` or `@layer module`.
*/
public function __construct( $selector = '', $declarations = array() ) {
public function __construct( $selector = '', $declarations = array(), $rules_group = '' ) {
$this->set_selector( $selector );
$this->add_declarations( $declarations );
$this->set_rules_group( $rules_group );
}
/**
@ -89,6 +102,31 @@ class WP_Style_Engine_CSS_Rule {
return $this;
}
/**
* Sets the rules group.
*
* @since 6.6.0
*
* @param string $rules_group A parent CSS selector in the case of nested CSS, or a CSS nested @rule,
* such as `@media (min-width: 80rem)` or `@layer module`.
* @return WP_Style_Engine_CSS_Rule Returns the object to allow chaining of methods.
*/
public function set_rules_group( $rules_group ) {
$this->rules_group = $rules_group;
return $this;
}
/**
* Gets the rules group.
*
* @since 6.6.0
*
* @return string
*/
public function get_rules_group() {
return $this->rules_group;
}
/**
* Gets the declarations object.
*
@ -115,6 +153,7 @@ class WP_Style_Engine_CSS_Rule {
* Gets the CSS.
*
* @since 6.1.0
* @since 6.6.0 Added support for nested CSS with rules groups.
*
* @param bool $should_prettify Optional. Whether to add spacing, new lines and indents.
* Default false.
@ -124,16 +163,27 @@ class WP_Style_Engine_CSS_Rule {
*/
public function get_css( $should_prettify = false, $indent_count = 0 ) {
$rule_indent = $should_prettify ? str_repeat( "\t", $indent_count ) : '';
$nested_rule_indent = $should_prettify ? str_repeat( "\t", $indent_count + 1 ) : '';
$declarations_indent = $should_prettify ? $indent_count + 1 : 0;
$nested_declarations_indent = $should_prettify ? $indent_count + 2 : 0;
$suffix = $should_prettify ? "\n" : '';
$spacer = $should_prettify ? ' ' : '';
$selector = $should_prettify ? str_replace( ',', ",\n", $this->get_selector() ) : $this->get_selector();
$css_declarations = $this->declarations->get_declarations_string( $should_prettify, $declarations_indent );
// Trims any multiple selectors strings.
$selector = $should_prettify ? implode( ',', array_map( 'trim', explode( ',', $this->get_selector() ) ) ) : $this->get_selector();
$selector = $should_prettify ? str_replace( array( ',' ), ",\n", $selector ) : $selector;
$rules_group = $this->get_rules_group();
$has_rules_group = ! empty( $rules_group );
$css_declarations = $this->declarations->get_declarations_string( $should_prettify, $has_rules_group ? $nested_declarations_indent : $declarations_indent );
if ( empty( $css_declarations ) ) {
return '';
}
if ( $has_rules_group ) {
$selector = "{$rule_indent}{$rules_group}{$spacer}{{$suffix}{$nested_rule_indent}{$selector}{$spacer}{{$suffix}{$css_declarations}{$suffix}{$nested_rule_indent}}{$suffix}{$rule_indent}}";
return $selector;
}
return "{$rule_indent}{$selector}{$spacer}{{$suffix}{$css_declarations}{$suffix}{$rule_indent}}";
}
}

15
wp-includes/style-engine/class-wp-style-engine-css-rules-store.php
View File

@ -121,19 +121,30 @@ class WP_Style_Engine_CSS_Rules_Store {
* If the rule does not exist, it will be created.
*
* @since 6.1.0
* @since 6.6.0 Added the $rules_group parameter.
*
* @param string $selector The CSS selector.
* @param string $rules_group A parent CSS selector in the case of nested CSS, or a CSS nested @rule,
* such as `@media (min-width: 80rem)` or `@layer module`.
* @return WP_Style_Engine_CSS_Rule|void Returns a WP_Style_Engine_CSS_Rule object,
* or void if the selector is empty.
*/
public function add_rule( $selector ) {
$selector = trim( $selector );
public function add_rule( $selector, $rules_group = '' ) {
$selector = $selector ? trim( $selector ) : '';
$rules_group = $rules_group ? trim( $rules_group ) : '';
// Bail early if there is no selector.
if ( empty( $selector ) ) {
return;
}
if ( ! empty( $rules_group ) ) {
if ( empty( $this->rules[ "$rules_group $selector" ] ) ) {
$this->rules[ "$rules_group $selector" ] = new WP_Style_Engine_CSS_Rule( $selector, array(), $rules_group );
}
return $this->rules[ "$rules_group $selector" ];
}
// Create the rule if it doesn't exist.
if ( empty( $this->rules[ $selector ] ) ) {
$this->rules[ $selector ] = new WP_Style_Engine_CSS_Rule( $selector );

19
wp-includes/style-engine/class-wp-style-engine-processor.php
View File

@ -58,6 +58,7 @@ class WP_Style_Engine_Processor {
* Adds rules to be processed.
*
* @since 6.1.0
* @since 6.6.0 Added support for rules_group.
*
* @param WP_Style_Engine_CSS_Rule|WP_Style_Engine_CSS_Rule[] $css_rules A single, or an array of,
* WP_Style_Engine_CSS_Rule objects
@ -71,6 +72,23 @@ class WP_Style_Engine_Processor {
foreach ( $css_rules as $rule ) {
$selector = $rule->get_selector();
$rules_group = $rule->get_rules_group();
/**
* If there is a rules_group and it already exists in the css_rules array,
* add the rule to it.
* Otherwise, create a new entry for the rules_group.
*/
if ( ! empty( $rules_group ) ) {
if ( isset( $this->css_rules[ "$rules_group $selector" ] ) ) {
$this->css_rules[ "$rules_group $selector" ]->add_declarations( $rule->get_declarations() );
continue;
}
$this->css_rules[ "$rules_group $selector" ] = $rule;
continue;
}
// If the selector already exists, add the declarations to it.
if ( isset( $this->css_rules[ $selector ] ) ) {
$this->css_rules[ $selector ]->add_declarations( $rule->get_declarations() );
continue;
@ -117,6 +135,7 @@ class WP_Style_Engine_Processor {
// Build the CSS.
$css = '';
foreach ( $this->css_rules as $rule ) {
// See class WP_Style_Engine_CSS_Rule for the get_css method.
$css .= $rule->get_css( $options['prettify'] );
$css .= $options['prettify'] ? "\n" : '';
}

7
wp-includes/style-engine/class-wp-style-engine.php
View File

@ -364,6 +364,7 @@ final class WP_Style_Engine {
* Stores a CSS rule using the provided CSS selector and CSS declarations.
*
* @since 6.1.0
* @since 6.6.0 Added the `$rules_group` parameter.
*
* @param string $store_name A valid store key.
* @param string $css_selector When a selector is passed, the function will return
@ -371,12 +372,14 @@ final class WP_Style_Engine {
* otherwise a concatenated string of properties and values.
* @param string[] $css_declarations An associative array of CSS definitions,
* e.g. `array( "$property" => "$value", "$property" => "$value" )`.
* @param string $rules_group Optional. A parent CSS selector in the case of nested CSS, or a CSS nested @rule,
* such as `@media (min-width: 80rem)` or `@layer module`.
*/
public static function store_css_rule( $store_name, $css_selector, $css_declarations ) {
public static function store_css_rule( $store_name, $css_selector, $css_declarations, $rules_group = '' ) {
if ( empty( $store_name ) || empty( $css_selector ) || empty( $css_declarations ) ) {
return;
}
static::get_store( $store_name )->add_rule( $css_selector )->add_declarations( $css_declarations );
static::get_store( $store_name )->add_rule( $css_selector, $rules_group )->add_declarations( $css_declarations );
}
/**

2
wp-includes/version.php
View File

@ -16,7 +16,7 @@
*
* @global string $wp_version
*/
$wp_version = '6.6-alpha-58085';
$wp_version = '6.6-alpha-58089';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.