Changeset 56254

Timestamp:

07/18/2023 12:00:49 AM (3 years ago)

Author:

flixos90

Message:

Editor: Fix bug where it was not possible to style custom block elements in theme.json.

This changeset resolves a bug where WordPress would only allow HTML elements within core's own blocks to be styled in theme.json. Prior to this change, any theme.json rules applying to elements in custom blocks were ignored. With this fix it is now possible to style third-party block elements in theme.json.

Props flixos90, azaozz, costdev, glendaviesnz, spacedmonkey, oandregal.
Fixes #57868.

Location:

trunk

Files:

• src/wp-includes/global-styles-and-settings.php (modified) (2 diffs)
• tests/phpunit/data/themedir1/block-theme/theme.json (modified) (1 diff)
• tests/phpunit/tests/theme/wpAddGlobalStylesForBlocks.php (modified) (1 diff)

trunk/src/wp-includes/global-styles-and-settings.php

@@ -321 +321 @@
                 // The likes of block element styles from theme.json do not have  $metadata['name'] set.
                 if ( ! isset( $metadata['name'] ) && ! empty( $metadata['path'] ) ) {
-                        $result = array_values(
-                                array_filter(
-                                        $metadata['path'],
-                                        static function ( $item ) {
-                                                if ( str_contains( $item, 'core/' ) ) {
-                                                        return true;
-                                                }
-                                                return false;
-                                        }
-                                )
-                        );
-                        if ( isset( $result[0] ) ) {
-                                if ( str_starts_with( $result[0], 'core/' ) ) {
-                                        $block_name        = str_replace( 'core/', '', $result[0] );
+                        $block_name = wp_get_block_name_from_theme_json_path( $metadata['path'] );
+                        if ( $block_name ) {
+                                if ( str_starts_with( $block_name, 'core/' ) ) {
+                                        $block_name        = str_replace( 'core/', '', $block_name );
                                         $stylesheet_handle = 'wp-block-' . $block_name;
                                 }
@@ -341 +331 @@
                 }
         }
+}
+
+/**
+ * Gets the block name from a given theme.json path.
+ *
+ * @since 6.3.0
+ * @access private
+ *
+ * @param array $path An array of keys describing the path to a property in theme.json.
+ * @return string Identified block name, or empty string if none found.
+ */
+function wp_get_block_name_from_theme_json_path( $path ) {
+        // Block name is expected to be the third item after 'styles' and 'blocks'.
+        if (
+                count( $path ) >= 3
+                && 'styles' === $path[0]
+                && 'blocks' === $path[1]
+                && str_contains( $path[2], '/' )
+        ) {
+                return $path[2];
+        }
+
+        /*
+         * As fallback and for backward compatibility, allow any core block to be
+         * at any position.
+         */
+        $result = array_values(
+                array_filter(
+                        $path,
+                        static function ( $item ) {
+                                if ( str_contains( $item, 'core/' ) ) {
+                                        return true;
+                                }
+                                return false;
+                        }
+                )
+        );
+        if ( isset( $result[0] ) ) {
+                return $result[0];
+        }
+        return '';
 }
 

trunk/tests/phpunit/data/themedir1/block-theme/theme.json

@@ -74 +74 @@
                                 "color": {
                                         "background": "hotpink"
+                                },
+                                "elements": {
+                                        "cite": {
+                                                "color": {
+                                                        "text": "white"
+                                                }
+                                        }
                                 }
                         }

trunk/tests/phpunit/tests/theme/wpAddGlobalStylesForBlocks.php

@@ -140 +140 @@
         }
 
+        /**
+         * @ticket 57868
+         */
+        public function test_third_party_blocks_inline_styles_for_elements_get_rendered_when_per_block() {
+                $this->set_up_third_party_block();
+                add_filter( 'should_load_separate_core_block_assets', '__return_true' );
+
+                wp_register_style( 'global-styles', false, array(), true, true );
+                wp_enqueue_style( 'global-styles' );
+                wp_add_global_styles_for_blocks();
+
+                $actual = get_echo( 'wp_print_styles' );
+
+                $this->assertStringContainsString(
+                        '.wp-block-my-third-party-block cite{color: white;}',
+                        $actual
+                );
+        }
+
+        /**
+         * @ticket 57868
+         */
+        public function test_third_party_blocks_inline_styles_for_elements_get_rendered() {
+                wp_register_style( 'global-styles', false, array(), true, true );
+                wp_enqueue_style( 'global-styles' );
+                wp_add_global_styles_for_blocks();
+
+                $actual = get_echo( 'wp_print_styles' );
+
+                $this->assertStringContainsString(
+                        '.wp-block-my-third-party-block cite{color: white;}',
+                        $actual
+                );
+        }
+
+        /**
+         * @ticket 57868
+         *
+         * @dataProvider data_wp_get_block_name_from_theme_json_path
+         *
+         * @param array  $path     An array of keys describing the path to a property in theme.json.
+         * @param string $expected The expected block name.
+         */
+        public function test_wp_get_block_name_from_theme_json_path( $path, $expected ) {
+                $block_name = wp_get_block_name_from_theme_json_path( $path );
+                $this->assertSame( $expected, $block_name );
+        }
+
+        /**
+         * Data provider.
+         *
+         * @return array[]
+         */
+        public function data_wp_get_block_name_from_theme_json_path() {
+                return array(
+                        'core block styles'             => array(
+                                array( 'styles', 'blocks', 'core/navigation' ),
+                                'core/navigation',
+                        ),
+                        'core block element styles'     => array(
+                                array( 'styles', 'blocks', 'core/navigation', 'elements', 'link' ),
+                                'core/navigation',
+                        ),
+                        'custom block styles'           => array(
+                                array( 'styles', 'blocks', 'my/third-party-block' ),
+                                'my/third-party-block',
+                        ),
+                        'custom block element styles'   => array(
+                                array( 'styles', 'blocks', 'my/third-party-block', 'elements', 'cite' ),
+                                'my/third-party-block',
+                        ),
+                        'custom block wrong format'     => array(
+                                array( 'styles', 'my/third-party-block' ),
+                                '',
+                        ),
+                        'invalid path but works for BC' => array(
+                                array( 'something', 'core/image' ),
+                                'core/image',
+                        ),
+                );
+        }
+
         private function set_up_third_party_block() {
                 switch_theme( 'block-theme' );