Changeset 58089 for trunk/src/wp-includes/style-engine/class-wp-style-engine-css-rule.php

Timestamp:

05/03/2024 04:45:20 AM (7 months ago)

Author:

isabel_brison

Message:

Editor: add Style Engine support for nested CSS rules.

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.

File:

• trunk/src/wp-includes/style-engine/class-wp-style-engine-css-rule.php (modified) (6 diffs)

trunk/src/wp-includes/style-engine/class-wp-style-engine-css-rule.php

@@ -37 +37 @@
 
     /**
+     * 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.
@@ -46 +56 @@
      *                                                                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 );
     }
 
@@ -91 +104 @@
 
     /**
+     * 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.
      *
@@ -116 +154 @@
      *
      * @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.
@@ -124 +163 @@
      */
     public function get_css( $should_prettify = false, $indent_count = 0 ) {
-        $rule_indent         = $should_prettify ? str_repeat( "\t", $indent_count ) : '';
-        $declarations_indent = $should_prettify ? $indent_count + 1 : 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 );
+        $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 ? ' ' : '';
+        // 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 ) ) {
@@ -135 +180 @@
         }
 
+        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}}";
     }