Prototype: merge block CSS with theme.json styles

lib/experimental/class-wp-theme-json-resolver-gutenberg.php

@@ -98,4 +98,84 @@ 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 ( isset( $block_type->supports['__experimentalStyle'] ) ) {
+				$config['styles']['blocks'][ $block_name ] = static::remove_JSON_comments( $block_type->supports['__experimentalStyle'] );
+			}
+		}
+
+		// 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( $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.
+	 *
+	 * There are three sources of data (origins) for a site:
+	 * default, theme, and custom. The custom's has higher priority
+	 * than the theme's, and the theme's higher than default's.
+	 *
+	 * Unlike the getters {@link get_core_data},
+	 * {@link get_theme_data}, and {@link get_user_data},
+	 * this method returns data after it has been merged
+	 * with the previous origins. This means that if the same piece of data
+	 * is declared in different origins (user, theme, and core),
+	 * the last origin overrides the previous.
+	 *
+	 * For example, if the user has set a background color
+	 * for the paragraph block, and the theme has done it as well,
+	 * the user preference wins.
+	 *
+	 * @since 5.8.0
+	 * @since 5.9.0 Added user data, removed the `$settings` parameter,
+	 *              added the `$origin` parameter.
+	 *
+	 * @param string $origin Optional. To what level should we merge data.
+	 *                       Valid values are 'theme' or 'custom'. Default 'custom'.
+	 * @return WP_Theme_JSON
+	 */
+	public static function get_merged_data( $origin = 'custom' ) {
+		if ( is_array( $origin ) ) {
+			_deprecated_argument( __FUNCTION__, '5.9' );
+		}
+
+		$result = new WP_Theme_JSON_Gutenberg();
+		$result->merge( static::get_core_data() );
+		$result->merge( static::get_block_data() );
+		$result->merge( static::get_theme_data() );
+		if ( 'custom' === $origin ) {
+			$result->merge( static::get_user_data() );
+		}
+
+		return $result;
+	}
+
+
 }

packages/block-library/src/button/block.json

@@ -89,7 +89,30 @@
 				"radius": true
 			}
 		},
-		"__experimentalSelector": ".wp-block-button__link"
+		"__experimentalSelector": ".wp-block-button__link",
+		"__experimentalStyle": {
+			"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)"
+				}
+			}
+		}
 	},
 	"styles": [
 		{ "name": "fill", "label": "Fill", "isDefault": true },

packages/block-library/src/button/style.scss

@@ -4,14 +4,9 @@ $blocks-block__margin: 0.5em;
 // Prefer the link selector instead of the regular button classname
 // to support the previous markup in addition to the new one.
 .wp-block-button__link {
-	color: $white;
-	background-color: #32373c;
-	border-radius: 9999px; // 100% causes an oval, but any explicit but really high value retains the pill shape.
 	box-shadow: none;
 	cursor: pointer;
 	display: inline-block;
-	font-size: 1.125em;
-	padding: calc(0.667em + 2px) calc(1.333em + 2px); // The extra 2px are added to size solids the same as the outline versions.
 	text-align: center;
 	text-decoration: none;
 	word-break: break-word; // overflow-wrap doesn't work well if a link is wrapped in the div, so use word-break here.