Style engine: support nested CSS rules (or CSS containers) #58797
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,123 @@ | ||
| <?php | ||
| /** | ||
| * WP_Style_Engine_CSS_Rules_Container | ||
| * | ||
| * A container for WP_Style_Engine_CSS_Rule objects. | ||
| * | ||
| * @package Gutenberg | ||
| */ | ||
|
|
||
| if ( ! class_exists( 'WP_Style_Engine_CSS_Rules_Container' ) ) { | ||
|
There was a problem hiding this comment. New class with a similar interface to This is intentional so that the relevant getter class methods such as Also so There was a problem hiding this comment. TODO - I'd say the former to maintain separation of concerns. Reason being, with nested CSS, the container rule should also be able to have declarations. This can be handled by the existing API, indicated by passing a container and not a selector: wp_style_engine_get_stylesheet_from_css_rules(
array(
'container' => 'fieldset',
'declarations' => array( .... )
),
array(
'container' => 'fieldset',
'container' => 'textarea',
'declarations' => array( .... )
)
)
/*
Output:
fieldset {
...declarations;
textarea {
...declarations;
}
}
*/ |
||
| /** | ||
| * Holds, sanitizes, processes and prints nested CSS rules for the Style Engine. | ||
| * | ||
| * @access private | ||
| */ | ||
| class WP_Style_Engine_CSS_Rules_Container extends WP_Style_Engine_CSS_Rule { | ||
| /** | ||
| * The container declarations. | ||
| * | ||
| * Contains a WP_Style_Engine_CSS_Rule object. | ||
| * | ||
| * @var WP_Style_Engine_CSS_Rule[] | ||
| */ | ||
| protected $rules = array(); | ||
|
|
||
| /** | ||
| * Constructor | ||
| * | ||
| * @param string $selector A parent CSS selector in the case of nested CSS, or a CSS nested @rule, | ||
| * such as `@media (min-width: 80rem)` or `@layer module`. | ||
| * @param WP_Style_Engine_CSS_Rule[]|WP_Style_Engine_CSS_Rule $rule Optional. A WP_Style_Engine_CSS_Rule object. | ||
| */ | ||
| public function __construct( $selector = '', $rule = array() ) { | ||
| $this->set_selector( $selector ); | ||
| $this->add_rules( $rule ); | ||
| } | ||
|
|
||
| /** | ||
| * Gets all nested rules. | ||
| * | ||
| * @return WP_Style_Engine_CSS_Rule[] | ||
| */ | ||
| public function get_rules() { | ||
| return $this->rules; | ||
| } | ||
|
|
||
| /** | ||
| * Gets a stored nested rules. | ||
| * | ||
| * @return WP_Style_Engine_CSS_Rule | ||
| */ | ||
| public function get_rule( $selector ) { | ||
| return $this->rules[ $selector ] ?? null; | ||
| } | ||
|
|
||
| /** | ||
| * Adds the rules. | ||
| * | ||
| * @param WP_Style_Engine_CSS_Rule|WP_Style_Engine_CSS_Rule[] $container_rules An array of declarations (property => value pairs), | ||
| * or a WP_Style_Engine_CSS_Declarations object. | ||
| * | ||
| * @return WP_Style_Engine_CSS_Rules_Container Returns the object to allow chaining of methods. | ||
| */ | ||
| public function add_rules( $rules ) { | ||
| if ( empty( $rules ) ) { | ||
| return $this; | ||
| } | ||
|
|
||
| if ( ! is_array( $rules ) ) { | ||
| $rules = array( $rules ); | ||
| } | ||
|
|
||
| foreach ( $rules as $rule ) { | ||
| if ( ! $rule instanceof WP_Style_Engine_CSS_Rule ) { | ||
| _doing_it_wrong( | ||
|
There was a problem hiding this comment. I can't seem to unit test this using |
||
| __METHOD__, | ||
| __( 'Rules passed to WP_Style_Engine_CSS_Rules_Container must be an instance of WP_Style_Engine_CSS_Rule', 'default' ), | ||
| '6.6.0' | ||
| ); | ||
| continue; | ||
| } | ||
|
|
||
| $selector = $rule->get_selector(); | ||
|
|
||
| if ( isset( $this->rules[ $selector ] ) ) { | ||
| $this->rules[ $selector ]->add_declarations( $rule->get_declarations() ); | ||
| } else { | ||
| $this->rules[ $selector ] = $rule; | ||
| } | ||
| } | ||
|
|
||
| return $this; | ||
| } | ||
|
|
||
| /** | ||
| * Gets the nested CSS. | ||
| * | ||
| * @param bool $should_prettify Whether to add spacing, new lines and indents. | ||
| * @param number $indent_count The number of tab indents to apply to the rule. Applies if `prettify` is `true`. | ||
| * | ||
| * @return string | ||
| */ | ||
| public function get_css( $should_prettify = false, $indent_count = 0 ) { | ||
| $css = ''; | ||
| $indent_count = $should_prettify ? $indent_count + 1 : $indent_count; | ||
|
There was a problem hiding this comment. Bumps the indent count for nested rules |
||
| $new_line = $should_prettify ? "\n" : ''; | ||
| $spacer = $should_prettify ? ' ' : ''; | ||
| $css .= ! empty( $this->declarations ) ? $this->declarations->get_declarations_string( $should_prettify, $indent_count ) : ''; | ||
| $css .= $should_prettify && $css ? "\n" : ''; | ||
|
|
||
| foreach ( $this->rules as $rule ) { | ||
| $css .= $rule->get_css( $should_prettify, $indent_count ); | ||
| $css .= $should_prettify ? "\n" : ''; | ||
| } | ||
|
|
||
| if ( empty( $css ) ) { | ||
| return $css; | ||
| } | ||
|
|
||
| return "{$this->selector}{$spacer}{{$new_line}{$css}}"; | ||
| } | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Aside from this copy update, these changes just revert those in #58867