From cfef497a083d1f986ad8a2c14abc79c32e371ffb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Thu, 23 Jun 2022 15:21:31 +0200
Subject: [PATCH] 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 85e124306161a..9a7c1afe2c779 100644
--- a/lib/compat/wordpress-6.1/blocks.php
+++ b/lib/compat/wordpress-6.1/blocks.php
@@ -158,3 +158,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 f86030c7460a5..bc6d2514b9dfd 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)"
+				}
+			}
+		}
+	]
 }