Changeset 55216

Timestamp:

02/03/2023 06:23:55 PM (4 years ago)

Author:

flixos90

Message:

Editor: Add missing WP_Theme_JSON::process_blocks_custom_css() method.

Follow up to [55192].

Props aristath, mamaduka, mukesh27, hellofromtonya.
Fixes #57621.

Location:

trunk

Files:

• src/wp-includes/class-wp-theme-json.php (modified) (1 diff)
• tests/phpunit/tests/theme/wpThemeJson.php (modified) (1 diff)

trunk/src/wp-includes/class-wp-theme-json.php

@@ -1008 +1008 @@
 
         /**
+         * Processes the CSS, to apply nesting.
+         *
+         * @since 6.2.0
+         *
+         * @param string $css      The CSS to process.
+         * @param string $selector The selector to nest.
+         * @return string The processed CSS.
+         */
+        protected function process_blocks_custom_css( $css, $selector ) {
+                $processed_css = '';
+
+                // Split CSS nested rules.
+                $parts = explode( '&', $css );
+                foreach ( $parts as $part ) {
+                        $processed_css .= ( ! str_contains( $part, '{' ) )
+                                ? trim( $selector ) . '{' . trim( $part ) . '}' // If the part doesn't contain braces, it applies to the root level.
+                                : trim( $selector . $part ); // Prepend the selector, which effectively replaces the "&" character.
+                }
+                return $processed_css;
+        }
+
+        /**
          * Returns the global styles custom css.
          *
          * @since 6.2.0
          *
-         * @return string
+         * @return string The global styles custom CSS.
          */
         public function get_custom_css() {

trunk/tests/phpunit/tests/theme/wpThemeJson.php

@@ -4625 +4625 @@
                 );
         }
+
+        /**
+         * @dataProvider data_process_blocks_custom_css
+         *
+         * @param array  $input    An array containing the selector and css to test.
+         * @param string $expected Expected results.
+         */
+        public function test_process_blocks_custom_css( $input, $expected ) {
+                $theme_json = new WP_Theme_JSON(
+                        array(
+                                'version' => WP_Theme_JSON::LATEST_SCHEMA,
+                                'styles'  => array(),
+                        )
+                );
+                $reflection = new ReflectionMethod( $theme_json, 'process_blocks_custom_css' );
+                $reflection->setAccessible( true );
+
+                $this->assertEquals( $expected, $reflection->invoke( $theme_json, $input['css'], $input['selector'] ) );
+        }
+
+        /**
+         * Data provider.
+         *
+         * @return array[]
+         */
+        public function data_process_blocks_custom_css() {
+                return array(
+                        // Simple CSS without any child selectors.
+                        'no child selectors'                => array(
+                                'input'    => array(
+                                        'selector' => '.foo',
+                                        'css'      => 'color: red; margin: auto;',
+                                ),
+                                'expected' => '.foo{color: red; margin: auto;}',
+                        ),
+                        // CSS with child selectors.
+                        'with children'                     => array(
+                                'input'    => array(
+                                        'selector' => '.foo',
+                                        'css'      => 'color: red; margin: auto; & .bar{color: blue;}',
+                                ),
+                                'expected' => '.foo{color: red; margin: auto;}.foo .bar{color: blue;}',
+                        ),
+                        // CSS with child selectors and pseudo elements.
+                        'with children and pseudo elements' => array(
+                                'input'    => array(
+                                        'selector' => '.foo',
+                                        'css'      => 'color: red; margin: auto; & .bar{color: blue;} &::before{color: green;}',
+                                ),
+                                'expected' => '.foo{color: red; margin: auto;}.foo .bar{color: blue;}.foo::before{color: green;}',
+                        ),
+                );
+        }
 }