Make WordPress Core

Changeset 55216


Ignore:
Timestamp:
02/03/2023 06:23:55 PM (21 months 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:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/class-wp-theme-json.php

    r55192 r55216  
    10081008
    10091009    /**
     1010     * Processes the CSS, to apply nesting.
     1011     *
     1012     * @since 6.2.0
     1013     *
     1014     * @param string $css      The CSS to process.
     1015     * @param string $selector The selector to nest.
     1016     * @return string The processed CSS.
     1017     */
     1018    protected function process_blocks_custom_css( $css, $selector ) {
     1019        $processed_css = '';
     1020
     1021        // Split CSS nested rules.
     1022        $parts = explode( '&', $css );
     1023        foreach ( $parts as $part ) {
     1024            $processed_css .= ( ! str_contains( $part, '{' ) )
     1025                ? trim( $selector ) . '{' . trim( $part ) . '}' // If the part doesn't contain braces, it applies to the root level.
     1026                : trim( $selector . $part ); // Prepend the selector, which effectively replaces the "&" character.
     1027        }
     1028        return $processed_css;
     1029    }
     1030
     1031    /**
    10101032     * Returns the global styles custom css.
    10111033     *
    10121034     * @since 6.2.0
    10131035     *
    1014      * @return string
     1036     * @return string The global styles custom CSS.
    10151037     */
    10161038    public function get_custom_css() {
  • trunk/tests/phpunit/tests/theme/wpThemeJson.php

    r55192 r55216  
    46254625        );
    46264626    }
     4627
     4628    /**
     4629     * @dataProvider data_process_blocks_custom_css
     4630     *
     4631     * @param array  $input    An array containing the selector and css to test.
     4632     * @param string $expected Expected results.
     4633     */
     4634    public function test_process_blocks_custom_css( $input, $expected ) {
     4635        $theme_json = new WP_Theme_JSON(
     4636            array(
     4637                'version' => WP_Theme_JSON::LATEST_SCHEMA,
     4638                'styles'  => array(),
     4639            )
     4640        );
     4641        $reflection = new ReflectionMethod( $theme_json, 'process_blocks_custom_css' );
     4642        $reflection->setAccessible( true );
     4643
     4644        $this->assertEquals( $expected, $reflection->invoke( $theme_json, $input['css'], $input['selector'] ) );
     4645    }
     4646
     4647    /**
     4648     * Data provider.
     4649     *
     4650     * @return array[]
     4651     */
     4652    public function data_process_blocks_custom_css() {
     4653        return array(
     4654            // Simple CSS without any child selectors.
     4655            'no child selectors'                => array(
     4656                'input'    => array(
     4657                    'selector' => '.foo',
     4658                    'css'      => 'color: red; margin: auto;',
     4659                ),
     4660                'expected' => '.foo{color: red; margin: auto;}',
     4661            ),
     4662            // CSS with child selectors.
     4663            'with children'                     => array(
     4664                'input'    => array(
     4665                    'selector' => '.foo',
     4666                    'css'      => 'color: red; margin: auto; & .bar{color: blue;}',
     4667                ),
     4668                'expected' => '.foo{color: red; margin: auto;}.foo .bar{color: blue;}',
     4669            ),
     4670            // CSS with child selectors and pseudo elements.
     4671            'with children and pseudo elements' => array(
     4672                'input'    => array(
     4673                    'selector' => '.foo',
     4674                    'css'      => 'color: red; margin: auto; & .bar{color: blue;} &::before{color: green;}',
     4675                ),
     4676                'expected' => '.foo{color: red; margin: auto;}.foo .bar{color: blue;}.foo::before{color: green;}',
     4677            ),
     4678        );
     4679    }
    46274680}
Note: See TracChangeset for help on using the changeset viewer.