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,26 +325,18 @@ function _wp_get_iframed_editor_assets() {
 
 	foreach ( $block_registry->get_all_registered() as $block_type ) {
 		if ( ! empty( $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;
-					}
+			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 ) ) {
-			if ( is_array( $block_type->editor_style ) ) {
-				foreach ( $block_type->editor_style as $single_style ) {
-					if ( is_string( $single_style ) ) {
-						$style_handles[] = $single_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;
 			}
 		}
 

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

@@ -405,3 +405,47 @@ public function get_attributes() {
 			array();
 	}
 }
+
+function _wp_normalize_block_styles_from_mixed_format_to_array( $args ) {
+	foreach ( $args as $property_name => $property_value ) {
+		/*
+		 * The style and editor_style properties may be defined in any of the following ways:
+		 *
+		 * String handle:
+		 *    { "style": "my-block" }
+		 *
+		 * Style definition:
+		 *    { "style": { "color": { "text": "#fff" } } }
+		 *
+		 * An array with a string handle:
+		 *    { "style": [ "my-block" ] }
+		 *
+		 * A mixed array of string handle and style definitions:
+		 *    { "style": [ "my-block", { "color": { "text": "#fff" } } ] }
+		 *
+		 * That's a lot of work for the developer to handle, so we'll handle it for them.
+		 * The code below always stores the styles in the mixed array format.
+		 */
+		if (
+			! is_null( $property_value ) &&
+			in_array( $property_name, array( 'style', 'editor_style' ), true )
+		) {
+			/*
+			 * Tests for an associative array.
+			 * * true  if the value is like array("color" => ...)
+			 * * false if the value is like array("handle", array())
+			 */
+			$is_style_definition = is_array( $property_value ) && count( array_filter( array_keys( $property_value ), 'is_string' ) ) > 0;
+			$is_style_handle     = is_string( $property_value );
+			$is_style_element    = $is_style_definition || $is_style_handle;
+
+			if ( $is_style_element ) {
+				$args[ $property_name ] = array( $property_value );
+			}
+		}
+	}
+
+	return $args;
+}
+
+add_filter( 'register_block_type_args', '_wp_normalize_block_styles_from_mixed_format_to_array', 10 );

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

@@ -274,14 +274,10 @@ public function render( $options = array() ) {
 			 *
 			 * 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 );
-					}
+			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,14 +2502,10 @@ 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 ) ) {
-			if ( is_array( $block_type->style ) ) {
-				foreach ( $block_type->style as $single_style ) {
-					if ( is_string( $single_style ) ) {
-						wp_enqueue_style( $single_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 );
 			}
 		}
 
@@ -2520,14 +2516,10 @@ function wp_enqueue_registered_block_scripts_and_styles() {
 
 		// Editor styles.
 		if ( $load_editor_scripts && ! empty( $block_type->editor_style ) ) {
-			if ( is_array( $block_type->editor_style ) ) {
-				foreach ( $block_type->editor_style as $single_style ) {
-					if ( is_string( $single_style ) ) {
-						wp_enqueue_style( $single_style );
-					}
+			foreach ( $block_type->editor_style as $single_style ) {
+				if ( is_string( $single_style ) ) {
+					wp_enqueue_style( $single_style );
 				}
-			} else {
-				wp_enqueue_style( $block_type->editor_style );
 			}
 		}