@wordpress/block-library 11.0.2-next.v.202609171837.0 → 11.2.0

package/src/cover/embed-video-utils.js

@@ -94,17 +94,19 @@ function findVideoEmbedProvider(
 /**
  * Modifies embed HTML to use background video parameters.
  *
- * @param {string} html The original embed HTML.
+ * @param {string}  html             The original embed HTML.
+ * @param {Object}  options          Options.
+ * @param {boolean} options.autoplay Whether the video should start playing on load.
  * @return {string|null} The modified embed HTML, or null if not possible.
  */
-export function getBackgroundEmbedHtml( html ) {
+export function getBackgroundEmbedHtml( html, { autoplay = true } = {} ) {
 	const srcMatch = html?.match( /src=["']([^"']+)["']/ );
 	if ( ! srcMatch ) {
 		return null;
 	}
 
 	const iframeSrc = srcMatch[ 1 ];
-	const backgroundSrc = getBackgroundVideoSrc( iframeSrc );
+	const backgroundSrc = getBackgroundVideoSrc( iframeSrc, { autoplay } );
 	return html.replace( iframeSrc, backgroundSrc );
 }
 
@@ -150,10 +152,12 @@ export function detectProviderFromSrc( src ) {
  * Modifies an iframe src URL to add background video parameters.
  * Automatically detects the provider from the URL.
  *
- * @param {string} src The iframe src URL.
+ * @param {string}  src              The iframe src URL.
+ * @param {Object}  options          Options.
+ * @param {boolean} options.autoplay Whether the video should start playing on load.
  * @return {string} The modified URL.
  */
-export function getBackgroundVideoSrc( src ) {
+export function getBackgroundVideoSrc( src, { autoplay = true } = {} ) {
 	if ( ! src ) {
 		return src;
 	}
@@ -164,11 +168,14 @@ export function getBackgroundVideoSrc( src ) {
 		// Detect provider from the iframe src URL
 		const provider = detectProviderFromSrc( src );
 
+		if ( autoplay ) {
+			url.searchParams.set( 'autoplay', '1' );
+		}
+
 		// Add provider-specific parameters for background video behavior
 		switch ( provider ) {
 			case 'youtube':
 				// YouTube parameters for background video
-				url.searchParams.set( 'autoplay', '1' );
 				url.searchParams.set( 'mute', '1' );
 				url.searchParams.set( 'loop', '1' );
 				url.searchParams.set( 'controls', '0' );
@@ -185,24 +192,25 @@ export function getBackgroundVideoSrc( src ) {
 
 			case 'vimeo':
 				// Vimeo parameters for background video
-				url.searchParams.set( 'autoplay', '1' );
 				url.searchParams.set( 'muted', '1' );
 				url.searchParams.set( 'loop', '1' );
-				url.searchParams.set( 'background', '1' );
+				// Vimeo's background mode always autoplays, so it can only be
+				// used when autoplay is allowed.
+				if ( autoplay ) {
+					url.searchParams.set( 'background', '1' );
+				}
 				url.searchParams.set( 'controls', '0' );
 				break;
 
 			case 'videopress':
 			case 'wordpress-tv':
 				// VideoPress parameters
-				url.searchParams.set( 'autoplay', '1' );
 				url.searchParams.set( 'loop', '1' );
 				url.searchParams.set( 'muted', '1' );
 				break;
 
 			default:
 				// Generic parameters that might work for other providers
-				url.searchParams.set( 'autoplay', '1' );
 				url.searchParams.set( 'muted', '1' );
 				url.searchParams.set( 'loop', '1' );
 				break;

package/src/cover/index.php

@@ -26,6 +26,10 @@ function render_block_core_cover( $attributes, $content ) {
 	) {
 		$url = $attributes['url'];
 
+		// The view script decides whether the embed may autoplay, so it is only
+		// needed for embed backgrounds.
+		wp_enqueue_script_module( '@wordpress/block-library/cover/view' );
+
 		// Use WordPress's native oEmbed processing (includes caching).
 		$oembed_html = wp_oembed_get( $url );
 
@@ -50,7 +54,8 @@ function render_block_core_cover( $attributes, $content ) {
 				}
 
 				// Modify iframe src to add background video parameters based on provider.
-				$parsed_url = wp_parse_url( $iframe_src );
+				$parsed_url         = wp_parse_url( $iframe_src );
+				$reduced_motion_src = null;
 				if ( $parsed_url && isset( $parsed_url['host'] ) ) {
 					// Parse existing query parameters.
 					$query_params = array();
@@ -58,9 +63,12 @@ function render_block_core_cover( $attributes, $content ) {
 						parse_str( $parsed_url['query'], $query_params );
 					}
 
-					// Add background video parameters based on provider.
+					// Add background video parameters based on provider. The
+					// autoplay parameters are kept separate so a source without
+					// them can also be built, which the view script swaps in for
+					// a visitor who has asked for reduced motion.
+					$autoplay_params = array();
 					if ( 'youtube' === $provider ) {
-						$query_params['autoplay']       = '1';
 						$query_params['mute']           = '1';
 						$query_params['loop']           = '1';
 						$query_params['controls']       = '0';
@@ -74,32 +82,53 @@ function render_block_core_cover( $attributes, $content ) {
 						if ( $video_id ) {
 								$query_params['playlist'] = $video_id;
 						}
+
+						$autoplay_params['autoplay'] = '1';
 					} elseif ( 'vimeo' === $provider ) {
-						$query_params['autoplay']    = '1';
 						$query_params['muted']       = '1';
 						$query_params['loop']        = '1';
-						$query_params['background']  = '1';
 						$query_params['controls']    = '0';
 						$query_params['transparent'] = '0';
+
+						// Vimeo's background mode always autoplays, so it can only
+						// be used when autoplay is allowed.
+						$autoplay_params['autoplay']   = '1';
+						$autoplay_params['background'] = '1';
 					} elseif ( 'videopress' === $provider || 'wordpress-tv' === $provider ) {
-						$query_params['autoplay'] = '1';
-						$query_params['loop']     = '1';
-						$query_params['muted']    = '1';
+						$query_params['loop']  = '1';
+						$query_params['muted'] = '1';
+
+						$autoplay_params['autoplay'] = '1';
 					}
 
 					// Rebuild the URL with new parameters.
-					$iframe_src = $parsed_url['scheme'] . '://' . $parsed_url['host'];
+					$iframe_base = $parsed_url['scheme'] . '://' . $parsed_url['host'];
 					if ( isset( $parsed_url['path'] ) ) {
-						$iframe_src .= $parsed_url['path'];
-					}
-					if ( ! empty( $query_params ) ) {
-						$iframe_src .= '?' . http_build_query( $query_params );
+						$iframe_base .= $parsed_url['path'];
 					}
+
+					$reduced_motion_src = empty( $query_params )
+						? $iframe_base
+						: $iframe_base . '?' . http_build_query( $query_params );
+
+					$iframe_src = empty( $autoplay_params )
+						? $reduced_motion_src
+						: $iframe_base . '?' . http_build_query( array_merge( $query_params, $autoplay_params ) );
 				}
 
-				// Build the iframe HTML that will replace the figure.
+				// Build the iframe HTML that will replace the figure. The server
+				// renders the autoplaying source, and the view script swaps in the
+				// one without autoplay for a visitor who prefers reduced motion.
 				$iframe_html = sprintf(
-					'<div class="wp-block-cover__video-background wp-block-cover__embed-background"><iframe src="%s" title="Background video" frameborder="0" allow="autoplay; fullscreen"></iframe></div>',
+					'<div class="wp-block-cover__video-background wp-block-cover__embed-background" data-wp-interactive="core/cover" data-wp-context=\'%s\'><iframe src="%s" data-wp-bind--src="state.videoSrc" title="Background video" frameborder="0" allow="autoplay; fullscreen"></iframe></div>',
+					esc_attr(
+						wp_json_encode(
+							array(
+								'src'              => $iframe_src,
+								'reducedMotionSrc' => $reduced_motion_src,
+							)
+						)
+					),
 					esc_url( $iframe_src )
 				);
 

package/src/cover/test/edit.browser.test.js

@@ -1,12 +1,44 @@
-import { beforeEach, describe, expect, test } from 'vitest';
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
 import { userEvent } from 'vitest/browser';
+import {
+	cleanup as cleanupBrowser,
+	render as renderBrowser,
+} from 'vitest-browser-react';
 import { screen, act, within, waitFor } from '@testing-library/react';
-import { createBlock } from '@wordpress/blocks';
+import {
+	createBlock,
+	getBlockTypes,
+	unregisterBlockType,
+} from '@wordpress/blocks';
+import { createElement, useState } from '@wordpress/element';
+import { dispatch, select } from '@wordpress/data';
+import {
+	store as richTextStore,
+	unregisterFormatType,
+} from '@wordpress/rich-text';
+import {
+	BlockInspector,
+	privateApis as blockEditorPrivateApis,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
 import {
 	initializeEditor,
 	selectBlock,
 } from '@wordpress/integration-tests/helpers/integration-test-editor';
 import { registerCoreBlocks } from '@wordpress/block-library';
+// Keep the matrix popover above the block toolbar, as in the editor.
+import '../../../../block-editor/src/components/block-popover/style.scss';
+import '../../../../components/src/popover/style.scss';
+import { unlock } from '../../lock-unlock';
+import { getMediaColor } from '../edit/color-utils';
+
+vi.mock( import( '../edit/color-utils' ), { spy: true } );
+
+const {
+	ExperimentalBlockCanvas: BlockCanvas,
+	ExperimentalBlockEditorProvider: BlockEditorProvider,
+	openMediaEditorModalKey,
+} = unlock( blockEditorPrivateApis );
 const defaultSettings = {
 	__experimentalFeatures: {
 		color: {
@@ -66,6 +98,16 @@ async function openStylesTabIfAvailable() {
 	}
 }
 
+async function openSettingsTabIfAvailable() {
+	const settingsTab = screen.queryByRole( 'tab', {
+		name: 'Settings',
+	} );
+
+	if ( settingsTab ) {
+		await userEvent.click( settingsTab );
+	}
+}
+
 describe( 'Cover block', () => {
 	beforeEach( () => registerCoreBlocks() );
 
@@ -197,6 +239,154 @@ describe( 'Cover block', () => {
 		} );
 	} );
 
+	describe( 'media editor Undo', () => {
+		const originalUrl =
+			'data:image/svg+xml,' +
+			encodeURIComponent(
+				'<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><rect width="10" height="10" fill="black"/></svg>'
+			);
+		const updatedImage = { id: 11, url: `${ originalUrl }#edited` };
+
+		beforeEach( () => {
+			vi.mocked( getMediaColor ).mockResolvedValue( '#ffffff' );
+		} );
+
+		afterEach( async () => {
+			await cleanupBrowser();
+			getBlockTypes().forEach( ( { name } ) =>
+				unregisterBlockType( name )
+			);
+			select( richTextStore )
+				.getFormatTypes()
+				.forEach( ( { name } ) => unregisterFormatType( name ) );
+		} );
+
+		async function openMediaEditor( initialAttributes = {} ) {
+			const openModal = vi.fn();
+			const block = createBlock( 'core/cover', {
+				id: 10,
+				url: originalUrl,
+				backgroundType: 'image',
+				sizeSlug: 'medium',
+				overlayColor: 'black',
+				isDark: true,
+				isUserOverlayColor: false,
+				...initialAttributes,
+			} );
+			function TestEditor() {
+				const [ blocks, setBlocks ] = useState( [ block ] );
+				return createElement(
+					BlockEditorProvider,
+					{
+						value: blocks,
+						onInput: setBlocks,
+						onChange: setBlocks,
+						useSubRegistry: false,
+						settings: {
+							...defaultSettings,
+							[ openMediaEditorModalKey ]: openModal,
+						},
+					},
+					createElement( BlockInspector ),
+					createElement( BlockCanvas, {
+						height: '100%',
+						shouldIframe: false,
+					} )
+				);
+			}
+			await renderBrowser( createElement( TestEditor ) );
+			await userEvent.click( screen.getByLabelText( 'Block: Cover' ) );
+			await userEvent.click(
+				screen.getByRole( 'button', { name: 'Edit image' } )
+			);
+			const { clientId } = select( blockEditorStore ).getBlocks()[ 0 ];
+			return {
+				...openModal.mock.calls[ 0 ][ 0 ],
+				getAttributes: () =>
+					select( blockEditorStore ).getBlockAttributes( clientId ),
+				editAttributes: ( attributes ) =>
+					dispatch( blockEditorStore ).updateBlockAttributes(
+						clientId,
+						attributes
+					),
+			};
+		}
+
+		test( 'restores only the previous image without reverting Cover settings', async () => {
+			const { onUpdate, onUndo, getAttributes, editAttributes } =
+				await openMediaEditor();
+			await act( () => onUpdate( updatedImage ) );
+			expect( getAttributes() ).toMatchObject( {
+				id: 11,
+				sizeSlug: 'full',
+				overlayColor: 'white',
+				isDark: false,
+			} );
+			await act( () =>
+				editAttributes( { dimRatio: 75, sizeSlug: 'large' } )
+			);
+			const beforeUndo = getAttributes();
+
+			act( () => onUndo() );
+
+			expect( getAttributes() ).toEqual( {
+				...beforeUndo,
+				id: 10,
+				url: originalUrl,
+			} );
+		} );
+
+		test( 'preserves an overlay chosen after saving when undoing the media update', async () => {
+			const { onUpdate, onUndo, getAttributes, editAttributes } =
+				await openMediaEditor();
+			await act( () => onUpdate( updatedImage ) );
+			await act( () =>
+				editAttributes( {
+					overlayColor: undefined,
+					customOverlayColor: '#000000',
+					isUserOverlayColor: true,
+					dimRatio: 90,
+					isDark: true,
+				} )
+			);
+
+			const beforeUndo = getAttributes();
+			act( () => onUndo() );
+
+			expect( getAttributes() ).toEqual( {
+				...beforeUndo,
+				id: 10,
+				url: originalUrl,
+			} );
+		} );
+
+		test( 'does not reapply a media update when Undo runs before its color loads', async () => {
+			const { onUpdate, onUndo, getAttributes } = await openMediaEditor();
+			const previous = getAttributes();
+			let resolveColor;
+			vi.mocked( getMediaColor ).mockReturnValueOnce(
+				new Promise( ( resolve ) => {
+					resolveColor = resolve;
+				} )
+			);
+			let updatePromise;
+			act( () => {
+				updatePromise = onUpdate( updatedImage );
+			} );
+
+			act( () => onUndo() );
+			await act( async () => {
+				resolveColor( '#ffffff' );
+				await updatePromise;
+			} );
+
+			expect( getAttributes() ).toEqual( previous );
+			expect(
+				screen.getByRole( 'button', { name: 'Edit image' } )
+			).toBeEnabled();
+		} );
+	} );
+
 	describe( 'Inspector controls', () => {
 		describe( 'Media settings', () => {
 			test( 'does not display media settings panel if url is not set', async () => {
@@ -207,11 +397,12 @@ describe( 'Cover block', () => {
 					} )
 				).not.toBeInTheDocument();
 			} );
-			test( 'does not display settings tab when media settings are empty', async () => {
+			test( 'does not display settings panel in the settings tab when the block has no media', async () => {
 				await createAndSelectBlock();
 
+				await openSettingsTabIfAvailable();
 				expect(
-					screen.queryByRole( 'tab', {
+					screen.queryByRole( 'heading', {
 						name: 'Settings',
 					} )
 				).not.toBeInTheDocument();
@@ -227,6 +418,7 @@ describe( 'Cover block', () => {
 				} );
 
 				await selectBlock( 'Block: Cover' );
+				await openSettingsTabIfAvailable();
 				expect(
 					await screen.findByRole( 'heading', { name: 'Settings' } )
 				).toBeInTheDocument();
@@ -241,6 +433,7 @@ describe( 'Cover block', () => {
 				'has-parallax'
 			);
 			await selectBlock( 'Block: Cover' );
+			await openSettingsTabIfAvailable();
 			await userEvent.click(
 				await screen.findByLabelText( 'Fixed background' )
 			);
@@ -257,6 +450,7 @@ describe( 'Cover block', () => {
 				'is-repeated'
 			);
 			await selectBlock( 'Block: Cover' );
+			await openSettingsTabIfAvailable();
 			await userEvent.click(
 				await screen.findByLabelText( 'Repeated background' )
 			);
@@ -271,6 +465,7 @@ describe( 'Cover block', () => {
 			} );
 
 			await selectBlock( 'Block: Cover' );
+			await openSettingsTabIfAvailable();
 			await userEvent.clear( await screen.findByLabelText( 'Left' ) );
 			await userEvent.type( screen.getByLabelText( 'Left' ), '100' );
 
@@ -288,6 +483,7 @@ describe( 'Cover block', () => {
 			} );
 
 			await selectBlock( 'Block: Cover' );
+			await openSettingsTabIfAvailable();
 			await userEvent.type(
 				await screen.findByLabelText( 'Alternative text' ),
 				'Me'

package/src/cover/test/embed-video-utils.test.js

@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest';
+import {
+	getBackgroundEmbedHtml,
+	getBackgroundVideoSrc,
+} from '../embed-video-utils';
+
+const YOUTUBE_SRC = 'https://www.youtube.com/embed/abc123?feature=oembed';
+const VIMEO_SRC = 'https://player.vimeo.com/video/123456';
+
+describe( 'getBackgroundVideoSrc', () => {
+	it( 'adds autoplay by default', () => {
+		const url = new URL( getBackgroundVideoSrc( YOUTUBE_SRC ) );
+
+		expect( url.searchParams.get( 'autoplay' ) ).toBe( '1' );
+		expect( url.searchParams.get( 'loop' ) ).toBe( '1' );
+	} );
+
+	it( 'leaves out autoplay when autoplay is disabled', () => {
+		const url = new URL(
+			getBackgroundVideoSrc( YOUTUBE_SRC, { autoplay: false } )
+		);
+
+		expect( url.searchParams.has( 'autoplay' ) ).toBe( false );
+		expect( url.searchParams.get( 'loop' ) ).toBe( '1' );
+	} );
+
+	it( 'uses Vimeo background mode only when autoplay is enabled', () => {
+		const autoplayUrl = new URL( getBackgroundVideoSrc( VIMEO_SRC ) );
+		const pausedUrl = new URL(
+			getBackgroundVideoSrc( VIMEO_SRC, { autoplay: false } )
+		);
+
+		expect( autoplayUrl.searchParams.get( 'background' ) ).toBe( '1' );
+		expect( pausedUrl.searchParams.has( 'background' ) ).toBe( false );
+		expect( pausedUrl.searchParams.has( 'autoplay' ) ).toBe( false );
+	} );
+} );
+
+describe( 'getBackgroundEmbedHtml', () => {
+	it( 'passes the autoplay option through to the iframe src', () => {
+		const html = `<iframe src="${ YOUTUBE_SRC }"></iframe>`;
+
+		expect( getBackgroundEmbedHtml( html ) ).toContain( 'autoplay=1' );
+		expect(
+			getBackgroundEmbedHtml( html, { autoplay: false } )
+		).not.toContain( 'autoplay' );
+	} );
+} );

package/src/cover/view.js

@@ -0,0 +1,22 @@
+import { getContext, store } from '@wordpress/interactivity';
+import { prefersReducedMotion } from '@wordpress/a11y';
+
+store(
+	'core/cover',
+	{
+		state: {
+			get videoSrc() {
+				const { src, reducedMotionSrc } = getContext();
+
+				// The server renders the autoplaying source, so it is only
+				// replaced for a visitor who has asked for reduced motion.
+				if ( reducedMotionSrc && prefersReducedMotion() ) {
+					return reducedMotionSrc;
+				}
+
+				return src;
+			},
+		},
+	},
+	{ lock: true }
+);

package/src/details/README.md

@@ -26,15 +26,23 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 
 - [`align`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#align): `"wide"`, `"full"`
 - [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `true`
+- [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#background):
+  - `backgroundImage`: `true`
+  - `backgroundSize`: `true`
+  - `gradient`: `true`
 - [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
   - [`gradients`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-gradients): `true`
   - [`link`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-link): `true`
+  - [`heading`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-heading): `true`
+  - [`button`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-button): `true`
 - [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false`
 - [`shadow`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#shadow): `true`
 - [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
   - `margin`: `true`
   - `padding`: `true`
   - `blockGap`: `true`
+- [`dimensions`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#dimensions):
+  - `minWidth`: `true`
 - [`typography`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography):
   - [`fontSize`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-fontsize): `true`
   - [`lineHeight`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-lineheight): `true`

package/src/details/block.json

@@ -32,9 +32,20 @@
 		"__experimentalOnEnter": true,
 		"align": [ "wide", "full" ],
 		"anchor": true,
+		"background": {
+			"backgroundImage": true,
+			"backgroundSize": true,
+			"gradient": true,
+			"__experimentalDefaultControls": {
+				"backgroundImage": true,
+				"gradient": true
+			}
+		},
 		"color": {
 			"gradients": true,
 			"link": true,
+			"heading": true,
+			"button": true,
 			"__experimentalDefaultControls": {
 				"background": true,
 				"text": true
@@ -56,6 +67,9 @@
 				"padding": false
 			}
 		},
+		"dimensions": {
+			"minWidth": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

package/src/embed/README.md

@@ -28,8 +28,12 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 
 - [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `true`
 - [`align`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#align): `true`
+- [`dimensions`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#dimensions):
+  - `minHeight`: `true`
+  - `minWidth`: `true`
 - [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
   - `margin`: `true`
+  - `padding`: `true`
 - [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity):
   - `clientNavigation`: `true`
 

package/src/embed/block.json

@@ -43,8 +43,13 @@
 	"supports": {
 		"anchor": true,
 		"align": true,
+		"dimensions": {
+			"minHeight": true,
+			"minWidth": true
+		},
 		"spacing": {
-			"margin": true
+			"margin": true,
+			"padding": true
 		},
 		"interactivity": {
 			"clientNavigation": true

package/src/embed/style.scss

@@ -17,7 +17,9 @@
 }
 
 // Supply a min-width when inside a cover block, to prevent it from collapsing.
-.wp-block-cover .wp-block-embed {
+// :root :where() matches Global Styles specificity so a minimum set there can
+// win, since block library styles load first.
+:root :where(.wp-block-cover .wp-block-embed) {
 	min-width: 320px;
 	min-height: 240px;
 }
@@ -25,6 +27,10 @@
 // Allow embeds to grow and shrink inside flex group blocks (Stack/Row), preventing collapse while fitting available space.
 .wp-block-group.is-layout-flex .wp-block-embed {
 	flex: 1 1 0%;
+}
+
+// Lowered like the cover minimums above.
+:root :where(.wp-block-group.is-layout-flex .wp-block-embed) {
 	min-width: 0;
 }
 

package/src/file/README.md

@@ -33,13 +33,21 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 
 - [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `true`
 - [`align`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#align): `true`
+- [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#background):
+  - `backgroundImage`: `true`
+  - `backgroundSize`: `true`
+  - `gradient`: `true`
 - [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
   - `margin`: `true`
   - `padding`: `true`
+- [`dimensions`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#dimensions):
+  - `minHeight`: `true`
+  - `minWidth`: `true`
 - [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
   - [`gradients`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-gradients): `true`
   - [`link`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-link): `true`
   - [`text`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-text): `false`
+- [`shadow`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#shadow): `true`
 - [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity): `true`
 
 ## Block Markup