Allow the style property of block.json to be an array and add support for object-based block styles

src/wp-includes/block-editor.php

@@ -325,7 +325,15 @@ function _wp_get_iframed_editor_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 ) ) {
+				foreach ( $block_type->style as $single_style ) {
+					if ( is_string( $single_style ) ) {
+						$style_handles[] = $single_style;
+					}
+				}
+			} else {
+				$style_handles[] = $block_type->style;
+			}
 		}
 
 		if ( ! empty( $block_type->editor_style ) ) {

src/wp-includes/blocks.php

@@ -142,54 +142,96 @@ function register_block_script_handle( $metadata, $field_name ) {
 /**
  * Finds a style handle for the block metadata field. It detects when a path
  * to file was provided and registers the style under automatically
- * generated handle name. It returns unprocessed style handle otherwise.
+ * generated handle name.
  *
  * @since 5.5.0
+ * @since 6.1.0 Accepts arrays as $metadata[ $field_name ].
  *
  * @param array  $metadata   Block metadata.
  * @param string $field_name Field name to pick from metadata.
- * @return string|false Style handle provided directly or created through
- *                      style's registration, or false on failure.
+ * @return array|string|false Style handle provided directly or created through
+ *                            style's registration, or false on failure.
+ *                            If $metadata[ $field_name ] is an array, this function
+ *                            only maps that array to replace the stylesheet paths
+ *                            with registered style handles.
  */
 function register_block_style_handle( $metadata, $field_name ) {
 	if ( empty( $metadata[ $field_name ] ) ) {
 		return false;
 	}
+	$style_data = $metadata[ $field_name ];
+	if ( ! is_array( $style_data ) ) {
+		return register_single_style_handle_for_block( $metadata, $field_name, $style_data );
+	}
+
+	/*
+	 * $style_data is a list of stylesheet paths and
+	 * style arrays such as { "color": { "text": "#fff" } }.
+	 *
+	 * In here, we replace the stylesheet paths with registered style handles.
+	 */
+	$handles = array();
+	foreach ( $style_data as $style_item ) {
+		if ( is_array( $style_item ) ) {
+			$handles[] = $style_item;
+		} else {
+			$handles[] = register_single_style_handle_for_block( $metadata, $field_name, $style_item );
+		}
+	}
+
+	return $handles;
+}
+
+/**
+ * Finds a style handle for the block metadata field. It detects when a path
+ * to file was provided and registers the style under automatically
+ * generated handle name. It returns unprocessed style handle otherwise.
+ *
+ * @since 6.1.0
+ *
+ * @param array  $metadata   Block metadata.
+ * @param string $field_name Field name to append to the generated style handle.
+ * @param string $style_data Style information. Can either be a path or an array of block styles.
+ * @return string|false Style handle provided directly or created through
+ *                      style's registration, or false on failure.
+ */
+function register_single_style_handle_for_block( $metadata, $field_name, $style_data ) {
 	$wpinc_path_norm = wp_normalize_path( realpath( ABSPATH . WPINC ) );
 	$theme_path_norm = wp_normalize_path( get_theme_file_path() );
-	$is_core_block   = isset( $metadata['file'] ) && 0 === strpos( $metadata['file'], $wpinc_path_norm );
+
+	$block_json_file_path = isset( $metadata['file'] ) ? $metadata['file'] : null;
+	$is_core_block        = $block_json_file_path && 0 === strpos( $block_json_file_path, $wpinc_path_norm );
+	$version              = ! $is_core_block && isset( $metadata['version'] ) ? $metadata['version'] : false;
+
 	if ( $is_core_block && ! wp_should_load_separate_core_block_assets() ) {
 		return false;
 	}
 
 	// Check whether styles should have a ".min" suffix or not.
-	$suffix = SCRIPT_DEBUG ? '' : '.min';
-
-	$style_handle = $metadata[ $field_name ];
-	$style_path   = remove_block_asset_path_prefix( $metadata[ $field_name ] );
-
-	if ( $style_handle === $style_path && ! $is_core_block ) {
-		return $style_handle;
+	$suffix     = SCRIPT_DEBUG ? '' : '.min';
+	$style_path = remove_block_asset_path_prefix( $style_data );
+	if ( $style_data === $style_path && ! $is_core_block ) {
+		return $style_data;
 	}
 
-	$style_uri = plugins_url( $style_path, $metadata['file'] );
+	$block_name = $metadata['name'];
+	$style_uri  = plugins_url( $style_path, $block_json_file_path );
 	if ( $is_core_block ) {
 		$style_path = "style$suffix.css";
-		$style_uri  = includes_url( 'blocks/' . str_replace( 'core/', '', $metadata['name'] ) . "/style$suffix.css" );
+		$style_uri  = includes_url( 'blocks/' . str_replace( 'core/', '', $block_name ) . "/style$suffix.css" );
 	}
 
-	$style_path_norm = wp_normalize_path( realpath( dirname( $metadata['file'] ) . '/' . $style_path ) );
+	$style_path_norm = wp_normalize_path( realpath( dirname( $block_json_file_path ) . '/' . $style_path ) );
 	$is_theme_block  = 0 === strpos( $style_path_norm, $theme_path_norm );
 
 	if ( $is_theme_block ) {
 		$style_uri = get_theme_file_uri( str_replace( $theme_path_norm, '', $style_path_norm ) );
 	}
 
-	$style_handle   = generate_block_asset_handle( $metadata['name'], $field_name );
-	$block_dir      = dirname( $metadata['file'] );
+	$style_handle   = generate_block_asset_handle( $block_name, $field_name );
+	$block_dir      = dirname( $block_json_file_path );
 	$style_file     = realpath( "$block_dir/$style_path" );
 	$has_style_file = false !== $style_file;
-	$version        = ! $is_core_block && isset( $metadata['version'] ) ? $metadata['version'] : false;
 	$style_uri      = $has_style_file ? $style_uri : false;
 	$result         = wp_register_style(
 		$style_handle,
@@ -1239,8 +1281,12 @@ function get_query_pagination_arrow( $block, $is_next ) {
 function _wp_multiple_block_styles( $metadata ) {
 	foreach ( array( 'style', 'editorStyle' ) as $key ) {
 		if ( ! empty( $metadata[ $key ] ) && is_array( $metadata[ $key ] ) ) {
-			$default_style = array_shift( $metadata[ $key ] );
 			foreach ( $metadata[ $key ] as $handle ) {
+				// Do not enqueue style arrays such as { "color": { "text": "#fff" } }.
+				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 );
@@ -1262,9 +1308,6 @@ function _wp_multiple_block_styles( $metadata ) {
 
 				wp_enqueue_block_style( $metadata['name'], $args );
 			}
-
-			// Only return the 1st item in the array.
-			$metadata[ $key ] = $default_style;
 		}
 	}
 	return $metadata;

src/wp-includes/class-wp-block.php

@@ -268,7 +268,21 @@ public function render( $options = array() ) {
 		}
 
 		if ( ! empty( $this->block_type->style ) ) {
-			wp_enqueue_style( $this->block_type->style );
+			/*
+			 * $this->block_type->style is a list of stylesheet handles and
+			 * style arrays such as { "color": { "text": "#fff" } }.
+			 *
+			 * This code enqueues the stylesheet handles and omit the style arrays.
+			 */
+			if ( is_array( $this->block_type->style ) ) {
+				foreach ( $this->block_type->style as $handle_maybe ) {
+					if ( is_string( $handle_maybe ) ) {
+						wp_enqueue_style( $handle_maybe );
+					}
+				}
+			} else {
+				wp_enqueue_style( $this->block_type->style );
+			}
 		}
 
 		/**

src/wp-includes/script-loader.php

@@ -2502,7 +2502,15 @@ function wp_enqueue_registered_block_scripts_and_styles() {
 	foreach ( $block_registry->get_all_registered() as $block_name => $block_type ) {
 		// Front-end styles.
 		if ( ! empty( $block_type->style ) ) {
-			wp_enqueue_style( $block_type->style );
+			if ( is_array( $block_type->style ) ) {
+				foreach ( $block_type->style as $single_style ) {
+					if ( is_string( $single_style ) ) {
+						wp_enqueue_style( $single_style );
+					}
+				}
+			} else {
+				wp_enqueue_style( $block_type->style );
+			}
 		}
 
 		// Front-end script.