WordPress · aristath · Oct 7, 2021 · Jun 8, 2021 · Jun 9, 2021 · Jun 9, 2021
@@ -512,3 +512,111 @@ function gutenberg_migrate_old_typography_shape( $metadata ) {
 if ( ! function_exists( 'wp_migrate_old_typography_shape' ) ) {
 	add_filter( 'block_type_metadata', 'gutenberg_migrate_old_typography_shape' );
 }
+
+if ( ! function_exists( 'wp_enqueue_block_style' ) ) {
+	/**
+	 * Enqueue a stylesheet for a specific block.
+	 *
+	 * If the theme has opted-in to separate-styles loading,
+	 * then the stylesheet will be enqueued on-render,
+	 * otherwise when the block inits.
+	 *
+	 * @param string $block_name The block-name, including namespace.
+	 * @param array  $args       An array of arguments [handle,src,deps,ver,media].
+	 *
+	 * @return void
+	 */
+	function wp_enqueue_block_style( $block_name, $args ) {
+		$args = wp_parse_args(
+			$args,
+			array(
+				'handle' => '',
+				'src'    => '',
+				'deps'   => array(),
+				'ver'    => false,
+				'media'  => 'all',
+			)
+		);
+
+		/**
+		 * Callback function to register and enqueue styles.
+		 *
+		 * @param string $content When the callback is used for the render_block filter,
+		 *                        the content needs to be returned so the function parameter
+		 *                        is to ensure the content exists.
+		 *
+		 * @return string
+		 */
+		$callback = function( $content ) use ( $args ) {
+			// Register the stylesheet.
+			if ( ! empty( $args['src'] ) ) {
+				wp_register_style( $args['handle'], $args['src'], $args['deps'], $args['ver'], $args['media'] );
+			}
+
+			// Add `path` data if provided.
+			if ( isset( $args['path'] ) ) {
+				wp_style_add_data( $args['handle'], 'path', $args['path'] );
+
+				// Get the RTL file path.
+				$rtl_file_path = str_replace( '.css', '-rtl.css', $args['path'] );
+
+				// Add RTL stylesheet.
+				if ( file_exists( $rtl_file_path ) ) {
+					wp_style_add_data( $args['hanle'], 'rtl', 'replace' );
+
+					if ( is_rtl() ) {
+						wp_style_add_data( $args['handle'], 'path', $rtl_file_path );
+					}
+				}
+			}
+
+			// Enqueue the stylesheet.
+			wp_enqueue_style( $args['handle'] );
+
+			return $content;
+		};
+
+		$hook = did_action( 'wp_enqueue_scripts' ) ? 'wp_footer' : 'wp_enqueue_scripts';
+		if ( wp_should_load_separate_core_block_assets() ) {
+			$hook = "render_block_$block_name";
+		}
+
+		// Enqueue assets in the frontend.
+		add_filter( $hook, $callback );
+
+		// Enqueue assets in the editor.
+		add_action( 'enqueue_block_assets', $callback );
+	}
+}
+
+/**
+ * Allow multiple block styles.
+ *
+ * @param array $metadata Metadata for registering a block type.
+ *
+ * @return array
+ */
+function gutenberg_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 ) {
+				$args = array( 'handle' => $handle );
+				if ( 0 === strpos( $handle, 'file:' ) && isset( $metadata['file'] ) ) {
+					$style_path = remove_block_asset_path_prefix( $handle );
+					$args       = array(
+						'handle' => $style_path,
+						'src'    => plugins_url( $style_path, $metadata['file'] ),
+					);
+				}
+
+				wp_enqueue_block_style( $metadata['name'], $args );
+			}
+
+			// Only return the 1st item in the array.
+			$metadata[ $key ] = $default_style;
+		}
+	}
+	return $metadata;
+}
+add_filter( 'block_type_metadata', 'gutenberg_multiple_block_styles' );
@@ -22,5 +22,5 @@
 			"lineHeight": true
 		}
 	},
-	"style": "wp-block-post-comments-form"
+	"style": [ "wp-block-post-comments-form", "wp-block-buttons", "wp-block-button" ]
 }
@@ -61,17 +61,3 @@ function gutenberg_comment_form_block_form_defaults( $fields ) {
 	return $fields;
 }
 add_filter( 'comment_form_defaults', 'gutenberg_comment_form_block_form_defaults' );
-
-add_action(
-	'wp_enqueue_scripts',
-	/**
-	 * Add the button stylesheet as a dependency for the post-comment form stylesheet.
-	 */
-	function() {
-		global $wp_styles;
-		if ( ! empty( $wp_styles->registered ) && ! empty( $wp_styles->registered['wp-block-post-comments-form'] ) ) {
-			$wp_styles->registered['wp-block-post-comments-form']->deps[] = 'wp-block-button';
-		}
-	},
-	1
-);
@@ -0,0 +1,44 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Test Iframed Multiple Stylesheets
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-iframed-multiple-stylesheets
+ */
+
+add_action(
+	'setup_theme',
+	function() {
+		add_theme_support( 'block-templates' );
+	}
+);
+
+add_action(
+	'init',
+	function() {
+		wp_register_script(
+			'iframed-multiple-stylesheets-editor-script',
+			plugin_dir_url( __FILE__ ) . 'iframed-multiple-stylesheets/editor.js',
+			array(
+				'wp-blocks',
+				'wp-block-editor',
+				'wp-element',
+			),
+			filemtime( plugin_dir_path( __FILE__ ) . 'iframed-multiple-stylesheets/editor.js' )
+		);
+		wp_register_style(
+			'iframed-multiple-stylesheets-style',
+			plugin_dir_url( __FILE__ ) . 'iframed-multiple-stylesheets/style.css',
+			array(),
+			filemtime( plugin_dir_path( __FILE__ ) . 'iframed-multiple-stylesheets/style.css' )
+		);
+		wp_register_style(
+			'iframed-multiple-stylesheets-style2',
+			plugin_dir_url( __FILE__ ) . 'iframed-multiple-stylesheets/style2.css',
+			array(),
+			filemtime( plugin_dir_path( __FILE__ ) . 'iframed-multiple-stylesheets/style2.css' )
+		);
+		register_block_type_from_metadata( __DIR__ . '/iframed-multiple-stylesheets' );
+	}
+);
@@ -0,0 +1,15 @@
+{
+	"apiVersion": 2,
+	"name": "test/iframed-multiple-stylesheets",
+	"title": "Iframed Multiple Stylesheets",
+	"category": "text",
+	"icon": "smiley",
+	"description": "",
+	"supports": {
+		"html": false
+	},
+	"textdomain": "iframed-multiple-stylesheets",
+	"editorScript": "iframed-multiple-stylesheets-editor-script",
+	"editorStyle": "file:./editor.css",
+	"style": [ "iframed-multiple-stylesheets-style", "iframed-multiple-stylesheets-style2" ]
+}
@@ -0,0 +1,6 @@
+/**
+ * The following styles get applied inside the editor only.
+ */
+.wp-block-test-iframed-inline-styles {
+	border: 1px dotted #f00;
+}
@@ -0,0 +1,15 @@
+( ( { wp: { element, blocks, blockEditor } } ) => {
+	const { createElement: el } = element;
+	const { registerBlockType } = blocks;
+	const { useBlockProps } = blockEditor;
+
+	registerBlockType( 'test/iframed-multiple-stylesheets', {
+		apiVersion: 2,
+		edit: function Edit() {
+			return el( 'div', useBlockProps(), 'Edit' );
+		},
+		save: function Save() {
+			return el( 'div', useBlockProps.save(), 'Save' );
+		},
+	} );
+} )( window );
@@ -0,0 +1,7 @@
+/**
+ * The following styles get applied both on the front of your site and in the
+ * editor.
+ */
+.wp-block-test-iframed-multiple-stylesheets {
+	border-style: dashed;
+}
@@ -0,0 +1,7 @@
+/**
+ * The following styles get applied both on the front of your site and in the
+ * editor.
+ */
+.wp-block-test-iframed-multiple-stylesheets {
+	border-color: #f00 !important;
+}
@@ -0,0 +1,66 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	activatePlugin,
+	createNewPost,
+	deactivatePlugin,
+	insertBlock,
+	openDocumentSettingsSidebar,
+	clickButton,
+	canvas,
+} from '@wordpress/e2e-test-utils';
+
+async function getComputedStyle( context, property ) {
+	await context.waitForSelector(
+		'.wp-block-test-iframed-multiple-stylesheets'
+	);
+	return await context.evaluate( ( prop ) => {
+		const container = document.querySelector(
+			'.wp-block-test-iframed-multiple-stylesheets'
+		);
+		return window.getComputedStyle( container )[ prop ];
+	}, property );
+}
+
+describe( 'iframed multiple block stylesheets', () => {
+	beforeEach( async () => {
+		await activatePlugin( 'gutenberg-test-iframed-multiple-stylesheets' );
+		await createNewPost( { postType: 'page' } );
+	} );
+
+	afterEach( async () => {
+		await deactivatePlugin( 'gutenberg-test-iframed-multiple-stylesheets' );
+	} );
+
+	it( 'should load multiple block stylesheets in iframe', async () => {
+		await insertBlock( 'Iframed Multiple Stylesheets' );
+
+		await page.waitForSelector(
+			'.wp-block-test-iframed-multiple-stylesheets'
+		);
+		await openDocumentSettingsSidebar();
+		await clickButton( 'Page' );
+		await clickButton( 'Template' );
+		await clickButton( 'New' );
+		await page.keyboard.press( 'Tab' );
+		await page.keyboard.press( 'Tab' );
+		await page.keyboard.type( 'Iframed Test' );
+		await clickButton( 'Create' );
+		await page.waitForSelector( 'iframe[name="editor-canvas"]' );
+
+		// Style loaded from the main stylesheet.
+		expect( await getComputedStyle( canvas(), 'border-style' ) ).toBe(
+			'dashed'
+		);
+
+		// Style loaded from the additional stylesheet.
+		expect( await getComputedStyle( canvas(), 'border-color' ) ).toBe(
+			'rgb(255, 0, 0)'
+		);
+
+		// Skip errors related to block-styles enqueing and the use of add_editor_style.
+		// The issue is tracked on https://github.com/WordPress/gutenberg/issues/33212.
+		expect( console ).toHaveErrored();
+	} );
+} );