From 9b75e054e44badb5ff45217b0e136f4fec2a2dab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Wed, 22 Jun 2022 14:28:37 +0200 Subject: [PATCH 01/12] Source styles from $block_type->style instead of the supports array --- .../class-wp-theme-json-resolver-gutenberg.php | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/lib/experimental/class-wp-theme-json-resolver-gutenberg.php b/lib/experimental/class-wp-theme-json-resolver-gutenberg.php index a4d4e4dfc7066d..f239d1a345e1e2 100644 --- a/lib/experimental/class-wp-theme-json-resolver-gutenberg.php +++ b/lib/experimental/class-wp-theme-json-resolver-gutenberg.php @@ -109,8 +109,12 @@ public static function get_block_data() { $blocks = $registry->get_all_registered(); $config = array( 'version' => 1 ); foreach ( $blocks as $block_name => $block_type ) { - if ( isset( $block_type->supports['__experimentalStyle'] ) ) { - $config['styles']['blocks'][ $block_name ] = static::remove_JSON_comments( $block_type->supports['__experimentalStyle'] ); + if ( is_array( $block_type->style ) ) { + foreach ( $block_type->style as $style_override_maybe ) { + if ( is_array( $style_override_maybe ) ) { + $config['styles']['blocks'][ $block_name ] = static::remove_JSON_comments( $style_override_maybe ); + } + } } if ( From b617e297405395f010038848abd7bc727e43c0b0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Thu, 23 Jun 2022 15:21:31 +0200 Subject: [PATCH 02/12] Do not flatten the styles array in the block_type_metadata filter --- lib/compat/wordpress-6.1/blocks.php | 47 ++++++++++++++++++++ packages/block-library/src/button/block.json | 27 ++++++++++- 2 files changed, 73 insertions(+), 1 deletion(-) diff --git a/lib/compat/wordpress-6.1/blocks.php b/lib/compat/wordpress-6.1/blocks.php index ed41c5aa8cd098..c2974d7e32c4c8 100644 --- a/lib/compat/wordpress-6.1/blocks.php +++ b/lib/compat/wordpress-6.1/blocks.php @@ -178,3 +178,50 @@ function gutenberg_block_type_metadata_multiple_view_scripts( $metadata ) { return $metadata; } add_filter( 'block_type_metadata', 'gutenberg_block_type_metadata_multiple_view_scripts' ); + + +/** + * Allow multiple block styles. + * + * @since 5.9.0 + * + * @param array $metadata Metadata for registering a block type. + * + * @return array + */ +function gutenberg_multiple_block_styles_compat_61_( $metadata ) { + foreach ( array( 'style', 'editorStyle' ) as $key ) { + if ( ! empty( $metadata[ $key ] ) && is_array( $metadata[ $key ] ) ) { + foreach ( $metadata[ $key ] as $handle ) { + if ( is_array( $handle ) ) { + continue; + } + + $args = array( 'handle' => $handle ); + if ( 0 === strpos( $handle, 'file:' ) && isset( $metadata['file'] ) ) { + $style_path = remove_block_asset_path_prefix( $handle ); + $theme_path_norm = wp_normalize_path( get_theme_file_path() ); + $style_path_norm = wp_normalize_path( realpath( dirname( $metadata['file'] ) . '/' . $style_path ) ); + $is_theme_block = isset( $metadata['file'] ) && 0 === strpos( $metadata['file'], $theme_path_norm ); + + $style_uri = plugins_url( $style_path, $metadata['file'] ); + + if ( $is_theme_block ) { + $style_uri = get_theme_file_uri( str_replace( $theme_path_norm, '', $style_path_norm ) ); + } + + $args = array( + 'handle' => sanitize_key( "{$metadata['name']}-{$style_path}" ), + 'src' => $style_uri, + ); + } + + wp_enqueue_block_style( $metadata['name'], $args ); + } + } + } + return $metadata; +} +remove_filter( 'block_type_metadata', 'gutenberg_multiple_block_styles' ); +remove_filter( 'block_type_metadata', 'gutenberg_multiple_block_styles' ); +add_filter( 'block_type_metadata', 'gutenberg_multiple_block_styles_compat_61_' ); diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json index f86030c7460a57..bc6d2514b9dfd5 100644 --- a/packages/block-library/src/button/block.json +++ b/packages/block-library/src/button/block.json @@ -96,5 +96,30 @@ { "name": "outline", "label": "Outline" } ], "editorStyle": "wp-block-button-editor", - "style": "wp-block-button" + "style": [ + "wp-block-button", + { + "border": { + "//": "100% causes an oval, but any explicit but really high value retains the pill shape.", + "radius": "9999px" + }, + "color": { + "text": "#fff", + "background": "#32373c" + }, + "typography": { + "fontSize": "1.125em", + "textDecoration": "none" + }, + "spacing": { + "padding": { + "//": "The extra 2px are added to size solids the same as the outline versions.", + "top": "calc(0.667em + 2px)", + "right": "calc(1.333em + 2px)", + "bottom": "calc(0.667em + 2px)", + "left": "calc(1.333em + 2px)" + } + } + } + ] } From c667496937a38a0dae4dff903ebc63f558b66dc4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Thu, 23 Jun 2022 15:24:13 +0200 Subject: [PATCH 03/12] Lint --- lib/compat/wordpress-6.1/blocks.php | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/lib/compat/wordpress-6.1/blocks.php b/lib/compat/wordpress-6.1/blocks.php index c2974d7e32c4c8..e485569f06761d 100644 --- a/lib/compat/wordpress-6.1/blocks.php +++ b/lib/compat/wordpress-6.1/blocks.php @@ -179,7 +179,6 @@ function gutenberg_block_type_metadata_multiple_view_scripts( $metadata ) { } add_filter( 'block_type_metadata', 'gutenberg_block_type_metadata_multiple_view_scripts' ); - /** * Allow multiple block styles. * @@ -189,10 +188,11 @@ function gutenberg_block_type_metadata_multiple_view_scripts( $metadata ) { * * @return array */ -function gutenberg_multiple_block_styles_compat_61_( $metadata ) { +function gutenberg_multiple_block_styles_compat_6_1( $metadata ) { foreach ( array( 'style', 'editorStyle' ) as $key ) { if ( ! empty( $metadata[ $key ] ) && is_array( $metadata[ $key ] ) ) { foreach ( $metadata[ $key ] as $handle ) { + // Do not enqueue style arrays such as { "color": { "text": "#fff" } }. if ( is_array( $handle ) ) { continue; } @@ -222,6 +222,7 @@ function gutenberg_multiple_block_styles_compat_61_( $metadata ) { } return $metadata; } + remove_filter( 'block_type_metadata', 'gutenberg_multiple_block_styles' ); remove_filter( 'block_type_metadata', 'gutenberg_multiple_block_styles' ); -add_filter( 'block_type_metadata', 'gutenberg_multiple_block_styles_compat_61_' ); +add_filter( 'block_type_metadata', 'gutenberg_multiple_block_styles_compat_6_1', 9 ); From 9cfc4bb5c4d6cf82444a5980001d48a8dbdc6ffe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Thu, 23 Jun 2022 15:48:48 +0200 Subject: [PATCH 04/12] Handle arrays of styles in gutenberg_resolve_assets --- lib/compat/wordpress-6.0/client-assets.php | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/lib/compat/wordpress-6.0/client-assets.php b/lib/compat/wordpress-6.0/client-assets.php index 0c5697817a94a8..9bb4cf954420f5 100644 --- a/lib/compat/wordpress-6.0/client-assets.php +++ b/lib/compat/wordpress-6.0/client-assets.php @@ -61,7 +61,11 @@ function gutenberg_resolve_assets() { foreach ( $block_registry->get_all_registered() as $block_type ) { if ( ! empty( $block_type->style ) ) { - $style_handles[] = $block_type->style; + if ( is_array( $block_type->style ) ) { + $style_handles[] = $block_type->style[0]; + } else { + $style_handles[] = $block_type->style; + } } if ( ! empty( $block_type->editor_style ) ) { From e1524c92379d7beeb7bbb40706f242d3e92d89ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Thu, 23 Jun 2022 15:49:30 +0200 Subject: [PATCH 05/12] Give the button block an unusually large padding --- packages/block-library/src/button/block.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json index bc6d2514b9dfd5..442491f682acd3 100644 --- a/packages/block-library/src/button/block.json +++ b/packages/block-library/src/button/block.json @@ -116,7 +116,7 @@ "//": "The extra 2px are added to size solids the same as the outline versions.", "top": "calc(0.667em + 2px)", "right": "calc(1.333em + 2px)", - "bottom": "calc(0.667em + 2px)", + "bottom": "calc(0.667em + 200px) !important", "left": "calc(1.333em + 2px)" } } From 72fa87b0c44158df0ae51aa226c539bd224cf004 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Mon, 27 Jun 2022 14:31:23 +0200 Subject: [PATCH 06/12] Enqueue all style handles and not just the first one --- lib/compat/wordpress-6.0/client-assets.php | 6 +++++- lib/compat/wordpress-6.1/blocks.php | 2 +- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/lib/compat/wordpress-6.0/client-assets.php b/lib/compat/wordpress-6.0/client-assets.php index 9bb4cf954420f5..66286636a11f76 100644 --- a/lib/compat/wordpress-6.0/client-assets.php +++ b/lib/compat/wordpress-6.0/client-assets.php @@ -62,7 +62,11 @@ function gutenberg_resolve_assets() { foreach ( $block_registry->get_all_registered() as $block_type ) { if ( ! empty( $block_type->style ) ) { if ( is_array( $block_type->style ) ) { - $style_handles[] = $block_type->style[0]; + foreach ( $block_type->style as $single_style ) { + if ( is_string( $single_style ) ) { + $style_handles[] = $single_style; + } + } } else { $style_handles[] = $block_type->style; } diff --git a/lib/compat/wordpress-6.1/blocks.php b/lib/compat/wordpress-6.1/blocks.php index e485569f06761d..da3c507a5438fc 100644 --- a/lib/compat/wordpress-6.1/blocks.php +++ b/lib/compat/wordpress-6.1/blocks.php @@ -223,6 +223,6 @@ function gutenberg_multiple_block_styles_compat_6_1( $metadata ) { return $metadata; } -remove_filter( 'block_type_metadata', 'gutenberg_multiple_block_styles' ); +remove_filter( 'block_type_metadata', '_wp_multiple_block_styles' ); remove_filter( 'block_type_metadata', 'gutenberg_multiple_block_styles' ); add_filter( 'block_type_metadata', 'gutenberg_multiple_block_styles_compat_6_1', 9 ); From dbf1f45a232ef55c5bf6807e62a40fd1d61c5257 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Tue, 5 Jul 2022 09:37:25 +0300 Subject: [PATCH 07/12] Update packages/block-library/src/button/block.json Co-authored-by: Adam Zielinski --- packages/block-library/src/button/block.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json index 442491f682acd3..97bf9a11dbf88c 100644 --- a/packages/block-library/src/button/block.json +++ b/packages/block-library/src/button/block.json @@ -116,7 +116,7 @@ "//": "The extra 2px are added to size solids the same as the outline versions.", "top": "calc(0.667em + 2px)", "right": "calc(1.333em + 2px)", - "bottom": "calc(0.667em + 200px) !important", + "bottom": "calc(0.667em + 2px) !important", "left": "calc(1.333em + 2px)" } } From 1e61e7e1904020e57d362e30e40fd975cf4e21e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Mon, 1 Aug 2022 12:36:06 +0200 Subject: [PATCH 08/12] Remove an obsolete reference to gutenberg_multiple_block_styles --- lib/compat/wordpress-6.1/blocks.php | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/compat/wordpress-6.1/blocks.php b/lib/compat/wordpress-6.1/blocks.php index da3c507a5438fc..02164ca77faf9f 100644 --- a/lib/compat/wordpress-6.1/blocks.php +++ b/lib/compat/wordpress-6.1/blocks.php @@ -224,5 +224,4 @@ function gutenberg_multiple_block_styles_compat_6_1( $metadata ) { } remove_filter( 'block_type_metadata', '_wp_multiple_block_styles' ); -remove_filter( 'block_type_metadata', 'gutenberg_multiple_block_styles' ); add_filter( 'block_type_metadata', 'gutenberg_multiple_block_styles_compat_6_1', 9 ); From 3b949e87790e22c7ac458239c33dd24c33ac2a3b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Mon, 1 Aug 2022 13:54:34 +0200 Subject: [PATCH 09/12] Move the updated get_block_data logic to compat/wordpress-6.0 --- .../class-wp-theme-json-resolver-6-0.php | 50 +++++++++++++++++++ ...class-wp-theme-json-resolver-gutenberg.php | 50 ------------------- 2 files changed, 50 insertions(+), 50 deletions(-) diff --git a/lib/compat/wordpress-6.0/class-wp-theme-json-resolver-6-0.php b/lib/compat/wordpress-6.0/class-wp-theme-json-resolver-6-0.php index b85e8e335037af..86ca0f683a1a3e 100644 --- a/lib/compat/wordpress-6.0/class-wp-theme-json-resolver-6-0.php +++ b/lib/compat/wordpress-6.0/class-wp-theme-json-resolver-6-0.php @@ -258,6 +258,56 @@ public static function get_user_data() { return static::$user; } + /** + * Gets the styles for blocks from the block.json file. + * + * @return WP_Theme_JSON + */ + public static function get_block_data() { + $registry = WP_Block_Type_Registry::get_instance(); + $blocks = $registry->get_all_registered(); + $config = array( 'version' => 1 ); + foreach ( $blocks as $block_name => $block_type ) { + if ( is_array( $block_type->style ) ) { + foreach ( $block_type->style as $style_override_maybe ) { + if ( is_array( $style_override_maybe ) ) { + $config['styles']['blocks'][ $block_name ] = static::remove_JSON_comments( $style_override_maybe ); + } + } + } + + if ( + isset( $block_type->supports['spacing']['blockGap']['__experimentalDefault'] ) && + null === _wp_array_get( $config, array( 'styles', 'blocks', $block_name, 'spacing', 'blockGap' ), null ) + ) { + // Ensure an empty placeholder value exists for the block, if it provides a default blockGap value. + // The real blockGap value to be used will be determined when the styles are rendered for output. + $config['styles']['blocks'][ $block_name ]['spacing']['blockGap'] = null; + } + } + + // Core here means it's the lower level part of the styles chain. + // It can be a core or a third-party block. + return new WP_Theme_JSON_Gutenberg( $config, 'core' ); + } + + /** + * When given an array, this will remove any keys with the name `//`. + * + * @param array $array The array to filter. + * @return array The filtered array. + */ + private static function remove_JSON_comments( $array ) { + unset( $array['//'] ); + foreach ( $array as $k => $v ) { + if ( is_array( $v ) ) { + $array[ $k ] = static::remove_JSON_comments( $v ); + } + } + + return $array; + } + /** * There are three sources of data (origins) for a site: * default, theme, and custom. The custom's has higher priority diff --git a/lib/experimental/class-wp-theme-json-resolver-gutenberg.php b/lib/experimental/class-wp-theme-json-resolver-gutenberg.php index f239d1a345e1e2..7d5fcb637ec989 100644 --- a/lib/experimental/class-wp-theme-json-resolver-gutenberg.php +++ b/lib/experimental/class-wp-theme-json-resolver-gutenberg.php @@ -99,56 +99,6 @@ public static function get_theme_data( $deprecated = array(), $settings = array( return $with_theme_supports; } - /** - * Gets the styles for blocks from the block.json file. - * - * @return WP_Theme_JSON - */ - public static function get_block_data() { - $registry = WP_Block_Type_Registry::get_instance(); - $blocks = $registry->get_all_registered(); - $config = array( 'version' => 1 ); - foreach ( $blocks as $block_name => $block_type ) { - if ( is_array( $block_type->style ) ) { - foreach ( $block_type->style as $style_override_maybe ) { - if ( is_array( $style_override_maybe ) ) { - $config['styles']['blocks'][ $block_name ] = static::remove_JSON_comments( $style_override_maybe ); - } - } - } - - if ( - isset( $block_type->supports['spacing']['blockGap']['__experimentalDefault'] ) && - null === _wp_array_get( $config, array( 'styles', 'blocks', $block_name, 'spacing', 'blockGap' ), null ) - ) { - // Ensure an empty placeholder value exists for the block, if it provides a default blockGap value. - // The real blockGap value to be used will be determined when the styles are rendered for output. - $config['styles']['blocks'][ $block_name ]['spacing']['blockGap'] = null; - } - } - - // Core here means it's the lower level part of the styles chain. - // It can be a core or a third-party block. - return new WP_Theme_JSON_Gutenberg( $config, 'core' ); - } - - /** - * When given an array, this will remove any keys with the name `//`. - * - * @param array $array The array to filter. - * @return array The filtered array. - */ - private static function remove_JSON_comments( $array ) { - unset( $array['//'] ); - foreach ( $array as $k => $v ) { - if ( is_array( $v ) ) { - $array[ $k ] = static::remove_JSON_comments( $v ); - } - } - - return $array; - } - /** * Returns the data merged from multiple origins. * From 99902b68a25796ca85ab55de6718f23e492d2eb4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Mon, 1 Aug 2022 13:54:49 +0200 Subject: [PATCH 10/12] Expand support for style arrays to editor styles --- lib/compat/wordpress-6.0/client-assets.php | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/lib/compat/wordpress-6.0/client-assets.php b/lib/compat/wordpress-6.0/client-assets.php index 66286636a11f76..a0487c5c7f7ffc 100644 --- a/lib/compat/wordpress-6.0/client-assets.php +++ b/lib/compat/wordpress-6.0/client-assets.php @@ -73,7 +73,15 @@ function gutenberg_resolve_assets() { } if ( ! empty( $block_type->editor_style ) ) { - $style_handles[] = $block_type->editor_style; + if ( is_array( $block_type->editor_style ) ) { + foreach ( $block_type->editor_style as $single_style ) { + if ( is_string( $single_style ) ) { + $style_handles[] = $single_style; + } + } + } else { + $style_handles[] = $block_type->editor_style; + } } if ( ! empty( $block_type->script ) ) { From 1119b4c8910e8b91fbb415dc90953f042601d8c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Mon, 1 Aug 2022 14:02:11 +0200 Subject: [PATCH 11/12] Add object-of-object based style property to block.json schema --- schemas/json/block.json | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/schemas/json/block.json b/schemas/json/block.json index fd7bd5a06f708e..0dbc5d2f539536 100644 --- a/schemas/json/block.json +++ b/schemas/json/block.json @@ -464,7 +464,10 @@ { "type": "array", "items": { - "type": "string" + "oneOf": [ + { "type": "string" }, + { "type": "object" } + ] } } ] @@ -478,7 +481,10 @@ { "type": "array", "items": { - "type": "string" + "oneOf": [ + { "type": "string" }, + { "type": "object" } + ] } } ] From 91172ee71445a1612abde8a4dcb04a5d6b2e4b80 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Mon, 1 Aug 2022 15:51:30 +0200 Subject: [PATCH 12/12] Ensure gutenberg_multiple_block_styles_compat_6_1 runs after block_type_metadata --- lib/compat/wordpress-6.1/blocks.php | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/lib/compat/wordpress-6.1/blocks.php b/lib/compat/wordpress-6.1/blocks.php index 02164ca77faf9f..8949362860f21c 100644 --- a/lib/compat/wordpress-6.1/blocks.php +++ b/lib/compat/wordpress-6.1/blocks.php @@ -223,5 +223,23 @@ function gutenberg_multiple_block_styles_compat_6_1( $metadata ) { return $metadata; } -remove_filter( 'block_type_metadata', '_wp_multiple_block_styles' ); -add_filter( 'block_type_metadata', 'gutenberg_multiple_block_styles_compat_6_1', 9 ); +/* + * Priority 11 is used to ensure this runs *after* _wp_multiple_block_styles. + * + * The order of execution matters in WordPress 6.0 where style arrays such as below are unsupported: + * + * { + * "style": [ "wp-block-button", { + * "border": { + * "radius": "9999px" + * } + * } ] + * } + * + * _wp_multiple_block_styles flattens the above definition to just {"style": "wp-block-button"} which + * is supported in WordPress 6.0. + * + * In WordPress 6.1, _wp_multiple_block_styles is deprecated and doesn't do anything so the full style + * definition is preserved in block metadata for further processing in the theme resolver. + */ +add_filter( 'block_type_metadata', 'gutenberg_multiple_block_styles_compat_6_1', 11 );