@wordpress/block-library 10.1.1-next.v.202607070741.0 → 10.3.0

package/build-style/video/editor-rtl.css

@@ -83,7 +83,7 @@
   color: #757575;
   text-transform: uppercase;
   font-size: 11px;
-  font-weight: 499;
+  font-weight: var(--wpds-typography-font-weight-emphasis, 600);
   display: block;
 }
 

package/build-style/video/editor.css

@@ -83,7 +83,7 @@
   color: #757575;
   text-transform: uppercase;
   font-size: 11px;
-  font-weight: 499;
+  font-weight: var(--wpds-typography-font-weight-emphasis, 600);
   display: block;
 }
 

package/build-types/table-of-contents/list.d.ts

@@ -6,7 +6,7 @@ import type { MouseEvent, ReactElement } from 'react';
  * Internal dependencies
  */
 import type { NestedHeadingData } from './utils';
-export default function TableOfContentsList({ nestedHeadingList, disableLinkActivation, onClick, ordered }: {
+export default function TableOfContentsList({ nestedHeadingList, disableLinkActivation, onClick, ordered, }: {
     nestedHeadingList: NestedHeadingData[];
     disableLinkActivation?: boolean;
     onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;

package/build-types/table-of-contents/list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../src/table-of-contents/list.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAEtD;;GAEG;AACH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAIjD,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAE,EAC5C,iBAAiB,EACjB,qBAAqB,EACrB,OAAO,EACP,OAAc,EACd,EAAE;IACF,iBAAiB,EAAE,iBAAiB,EAAE,CAAC;IACvC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,OAAO,CAAC,EAAE,CAAE,KAAK,EAAE,UAAU,CAAE,iBAAiB,CAAE,KAAM,IAAI,CAAC;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB,GAAI,YAAY,CAmDhB"}
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../src/table-of-contents/list.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAEtD;;GAEG;AACH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAIjD,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAE,EAC5C,iBAAiB,EACjB,qBAAqB,EACrB,OAAO,EACP,OAAc,GACd,EAAE;IACF,iBAAiB,EAAE,iBAAiB,EAAE,CAAC;IACvC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,OAAO,CAAC,EAAE,CAAE,KAAK,EAAE,UAAU,CAAE,iBAAiB,CAAE,KAAM,IAAI,CAAC;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB,GAAI,YAAY,CAmDhB"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "10.1.1-next.v.202607070741.0+a51d59513",
+	"version": "10.3.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -73,6 +73,7 @@
 					"wp_enqueue_block_support_styles",
 					"wp_get_typography_font_size_value",
 					"wp_style_engine_get_styles",
+					"wp_get_global_styles",
 					"wp_get_global_settings"
 				],
 				"suffixClasses": [
@@ -91,52 +92,53 @@
 		"build-module/*/init.mjs"
 	],
 	"dependencies": {
-		"@arraypress/waveform-player": "^1.19.0",
-		"@wordpress/a11y": "^4.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/api-fetch": "^7.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/autop": "^4.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/base-styles": "^10.3.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/blob": "^4.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/block-editor": "^16.0.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/blocks": "^15.23.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/components": "^37.0.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/compose": "^8.3.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/core-data": "^7.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/data": "^10.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/date": "^5.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/deprecated": "^4.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/dom": "^4.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/element": "^8.2.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/escape-html": "^3.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/hooks": "^4.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/html-entities": "^4.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/i18n": "^6.23.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/icons": "^15.1.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/interactivity": "^6.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/interactivity-router": "^2.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/keyboard-shortcuts": "^5.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/keycodes": "^4.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/latex-to-mathml": "^1.18.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/notices": "^5.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/patterns": "^2.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/primitives": "^4.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/private-apis": "^1.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/reusable-blocks": "^5.51.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/rich-text": "^7.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/server-side-render": "^6.26.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/shortcode": "^4.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/ui": "^0.18.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/upload-media": "^0.36.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/url": "^4.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/viewport": "^6.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/wordcount": "^4.50.1-next.v.202607070741.0+a51d59513",
+		"@arraypress/waveform-player": "^1.23.0",
+		"@wordpress/a11y": "^4.52.0",
+		"@wordpress/api-fetch": "^7.52.0",
+		"@wordpress/autop": "^4.52.0",
+		"@wordpress/base-styles": "^12.0.0",
+		"@wordpress/blob": "^4.52.0",
+		"@wordpress/block-editor": "^16.1.0",
+		"@wordpress/blocks": "^15.25.0",
+		"@wordpress/components": "^38.0.0",
+		"@wordpress/compose": "^8.5.0",
+		"@wordpress/core-data": "^7.52.0",
+		"@wordpress/data": "^10.52.0",
+		"@wordpress/date": "^5.52.0",
+		"@wordpress/deprecated": "^4.52.0",
+		"@wordpress/dom": "^4.52.0",
+		"@wordpress/element": "^8.4.0",
+		"@wordpress/escape-html": "^3.52.0",
+		"@wordpress/global-styles-engine": "^1.19.0",
+		"@wordpress/hooks": "^4.52.0",
+		"@wordpress/html-entities": "^4.52.0",
+		"@wordpress/i18n": "^6.25.0",
+		"@wordpress/icons": "^15.3.0",
+		"@wordpress/interactivity": "^6.52.0",
+		"@wordpress/interactivity-router": "^2.52.0",
+		"@wordpress/keyboard-shortcuts": "^5.52.0",
+		"@wordpress/keycodes": "^4.52.0",
+		"@wordpress/latex-to-mathml": "^1.20.0",
+		"@wordpress/notices": "^5.52.0",
+		"@wordpress/patterns": "^2.52.0",
+		"@wordpress/primitives": "^4.52.0",
+		"@wordpress/private-apis": "^1.52.0",
+		"@wordpress/reusable-blocks": "^5.52.0",
+		"@wordpress/rich-text": "^7.52.0",
+		"@wordpress/server-side-render": "^6.28.0",
+		"@wordpress/shortcode": "^4.52.0",
+		"@wordpress/ui": "^0.19.0",
+		"@wordpress/upload-media": "^0.37.0",
+		"@wordpress/url": "^4.52.0",
+		"@wordpress/viewport": "^6.52.0",
+		"@wordpress/wordcount": "^4.52.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.3",
 		"fast-average-color": "^9.1.1",
 		"fast-deep-equal": "^3.1.3",
 		"html-react-parser": "^5.2.11",
-		"memize": "^2.1.0",
+		"memize": "^2.1.1",
 		"remove-accents": "^0.5.0",
 		"uuid": "^14.0.0"
 	},
@@ -150,9 +152,9 @@
 		"deep-freeze": "^0.0.1"
 	},
 	"peerDependencies": {
-		"@types/react": "^18.3.27",
-		"react": "^18.0.0",
-		"react-dom": "^18.0.0"
+		"@types/react": "^18 || ^19",
+		"react": "^18 || ^19",
+		"react-dom": "^18 || ^19"
 	},
 	"peerDependenciesMeta": {
 		"@types/react": {
@@ -162,5 +164,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "f637726e370c8b23695ed9af82adbe171ad235d8"
+	"gitHead": "7e8b17a983f9391d3ebc7717af2a1c9ed7efc7ab"
 }

package/src/accordion/README.md

@@ -35,6 +35,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`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):
   - [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-background): `true`
   - [`gradients`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-gradients): `true`

package/src/accordion/block.json

@@ -13,6 +13,7 @@
 		"background": {
 			"backgroundImage": true,
 			"backgroundSize": true,
+			"gradient": true,
 			"__experimentalDefaultControls": {
 				"backgroundImage": true
 			}

package/src/accordion-panel/block.json

@@ -8,6 +8,7 @@
 	"parent": [ "core/accordion-item" ],
 	"usesContext": [ "core/accordion-open-by-default" ],
 	"supports": {
+		"__experimentalOnEnter": true,
 		"html": false,
 		"color": {
 			"background": true,

package/src/breadcrumbs/index.php

@@ -183,9 +183,11 @@ function render_block_core_breadcrumbs( $attributes, $content, $block ) {
 		return '';
 	}
 
+	$separator_attr     = $attributes['separator'] ?? null;
+	$separator          = is_string( $separator_attr ) ? addcslashes( $separator_attr, '\\"' ) : '';
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(
-			'style'      => '--separator: "' . addcslashes( $attributes['separator'], '\\"' ) . '";',
+			'style'      => '--separator: "' . $separator . '";',
 			'aria-label' => __( 'Breadcrumbs' ),
 		)
 	);

package/src/button/edit.js

@@ -7,12 +7,7 @@ import {
 	useMemo,
 	createInterpolateElement,
 } from '@wordpress/element';
-import {
-	TextControl,
-	ToolbarButton,
-	Popover,
-	ExternalLink,
-} from '@wordpress/components';
+import { TextControl, ToolbarButton, Popover } from '@wordpress/components';
 import {
 	BlockControls,
 	InspectorControls,
@@ -45,6 +40,11 @@ import {
 	privateApis as composePrivateApis,
 } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
+import { Link } from '@wordpress/ui';
+
+/**
+ * Internal dependencies
+ */
 import { NEW_TAB_TARGET, NOFOLLOW_REL } from './constants';
 import { getUpdatedLinkAttributes } from './get-updated-link-attributes';
 import removeAnchorTag from '../utils/remove-anchor-tag';
@@ -63,19 +63,22 @@ const LINK_SETTINGS = [
 	},
 ];
 
-function useEnter( props ) {
+function useEnter( clientId ) {
 	const { replaceBlocks, selectionChange } = useDispatch( blockEditorStore );
-	const { getBlock, getBlockRootClientId, getBlockIndex } =
-		useSelect( blockEditorStore );
-	const propsRef = useRef( props );
-	propsRef.current = props;
+	const {
+		getBlock,
+		getBlockAttributes,
+		getBlockRootClientId,
+		getBlockIndex,
+	} = useSelect( blockEditorStore );
+
 	return useRefEffect( ( element ) => {
 		function onKeyDown( event ) {
 			if ( event.defaultPrevented || event.keyCode !== ENTER ) {
 				return;
 			}
-			const { content, clientId } = propsRef.current;
-			if ( content.length ) {
+			const { text } = getBlockAttributes( clientId ) ?? {};
+			if ( text?.length ) {
 				return;
 			}
 			event.preventDefault();
@@ -266,7 +269,7 @@ function ButtonEdit( props ) {
 		[ url, opensInNewTab, nofollow ]
 	);
 
-	const useEnterRef = useEnter( { content: text, clientId } );
+	const useEnterRef = useEnter( clientId );
 	const mergedRef = useMergeRefs( [ useEnterRef, richTextRef ] );
 
 	const [ fluidTypographySettings, layout, dimensionSizes ] = useSettings(
@@ -456,7 +459,10 @@ function ButtonEdit( props ) {
 							),
 							{
 								a: (
-									<ExternalLink href="https://developer.mozilla.org/docs/Web/HTML/Attributes/rel" />
+									<Link
+										openInNewTab
+										href="https://developer.mozilla.org/docs/Web/HTML/Attributes/rel"
+									/>
 								),
 							}
 						) }

package/src/button/index.php

@@ -62,7 +62,7 @@ function render_block_core_button( $attributes, $content ) {
 
 	$width = $attributes['style']['dimensions']['width'] ?? null;
 
-	if ( $width ) {
+	if ( is_string( $width ) && '' !== $width ) {
 		// Resolve preset references to their actual values.
 		$resolved_width = $width;
 		$is_preset      = str_starts_with( $width, 'var:preset|dimension|' );

package/src/code/edit.js

@@ -26,8 +26,13 @@ export default function CodeEdit( {
 				aria-label={ __( 'Code' ) }
 				preserveWhiteSpace
 				__unstablePastePlainText
-				__unstableOnSplitAtDoubleLineEnd={ () =>
-					insertBlocksAfter( createBlock( getDefaultBlockName() ) )
+				__unstableOnSplitAtDoubleLineEnd={
+					insertBlocksAfter
+						? () =>
+								insertBlocksAfter(
+									createBlock( getDefaultBlockName() )
+								)
+						: undefined
 				}
 				style={ { whiteSpace: 'break-spaces' } }
 			/>

package/src/cover/README.md

@@ -1,5 +1,64 @@
 # Cover
 
+## Restricting video embed providers
+
+The Cover block can use a background video embedded from a URL. The `allowedVideoProviders` attribute controls which providers are offered when embedding a video. It accepts an array of provider slugs and defaults to all supported providers: `youtube`, `vimeo`, `videopress`, `animoto`, `tiktok`, and `wordpress-tv`.
+
+This attribute can only _remove_ providers from the supported list, never add new ones. If no providers remain allowed, the "Embed video from URL" option is hidden entirely.
+
+You can apply this attribute directly in the block markup. For example, the following markup allows only YouTube and Vimeo.
+
+```html
+<!-- wp:cover {"allowedVideoProviders":["youtube","vimeo"]} -->
+<div class="wp-block-cover">
+	<span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim"></span>
+	<div class="wp-block-cover__inner-container"></div>
+</div>
+<!-- /wp:cover -->
+```
+
+You can also use [block filters](https://developer.wordpress.org/block-editor/reference-guides/filters/block-filters/) to set the default value globally. The example below removes YouTube from every Cover block while keeping the other providers.
+
+```php
+function example_restrict_cover_video_providers( $args, $block_type ) {
+
+	if ( 'core/cover' !== $block_type ) {
+		return $args;
+	}
+
+	if ( ! isset( $args['attributes']['allowedVideoProviders']['default'] ) ) {
+		return $args;
+	}
+
+	// Remove YouTube.
+	$args['attributes']['allowedVideoProviders']['default'] = array_values(
+		array_diff(
+			$args['attributes']['allowedVideoProviders']['default'],
+			[ 'youtube' ]
+		)
+	);
+
+	return $args;
+}
+add_filter( 'register_block_type_args', 'example_restrict_cover_video_providers', 10, 2 );
+```
+
+To disable video embeds entirely, either `unset` the attribute's default or set it to an empty array. The example below removes it for every Cover block.
+
+```php
+function example_disable_cover_video_embeds( $args, $block_type ) {
+
+	if ( 'core/cover' !== $block_type ) {
+		return $args;
+	}
+
+	unset( $args['attributes']['allowedVideoProviders']['default'] );
+
+	return $args;
+}
+add_filter( 'register_block_type_args', 'example_disable_cover_video_embeds', 10, 2 );
+```
+
 <!-- START TOKEN(Autogenerated block API docs) -->
 Add an image or video with a text overlay.
 
@@ -36,6 +95,7 @@ _Defined via the [`attributes`](https://developer.wordpress.org/block-editor/ref
 | `tagName` | `string` | `"div"` | — |
 | `sizeSlug` | `string` | — | — |
 | `poster` | `string` | — | [Source](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `attribute`. [Selector](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `video`. [HTML attr](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#attribute-source): `poster` |
+| `allowedVideoProviders` | `array` | `["youtube","vimeo","videopress","animoto","tiktok","wordpress-tv"]` | — |
 
 ## Supports
 

package/src/cover/block.json

@@ -85,10 +85,22 @@
 			"source": "attribute",
 			"selector": "video",
 			"attribute": "poster"
+		},
+		"allowedVideoProviders": {
+			"type": "array",
+			"default": [
+				"youtube",
+				"vimeo",
+				"videopress",
+				"animoto",
+				"tiktok",
+				"wordpress-tv"
+			]
 		}
 	},
 	"usesContext": [ "postId", "postType" ],
 	"supports": {
+		"__experimentalOnEnter": true,
 		"anchor": true,
 		"align": true,
 		"html": false,

package/src/cover/edit/block-controls.js

@@ -20,6 +20,7 @@ import { crop, link } from '@wordpress/icons';
 import { ALLOWED_MEDIA_TYPES, EMBED_VIDEO_BACKGROUND_TYPE } from '../shared';
 import { unlock } from '../../lock-unlock';
 import EmbedVideoUrlInput from './embed-video-url-input';
+import { getAllowedVideoProviders } from '../embed-video-utils';
 
 const { cleanEmptyObject } = unlock( blockEditorPrivateApis );
 
@@ -34,6 +35,7 @@ export default function CoverBlockControls( {
 	onEditMedia,
 	editMediaButtonRef,
 	showEditMediaButton,
+	isEditMediaDisabled,
 	blockEditingMode,
 } ) {
 	const {
@@ -43,9 +45,15 @@ export default function CoverBlockControls( {
 		minHeight,
 		minHeightUnit,
 		backgroundType,
+		allowedVideoProviders,
 	} = attributes;
 	const { hasInnerBlocks, url } = currentSettings;
 
+	const filteredVideoProviders = getAllowedVideoProviders(
+		allowedVideoProviders
+	);
+	const hasAllowedVideoProviders = filteredVideoProviders.length > 0;
+
 	const [ prevMinHeightValue, setPrevMinHeightValue ] = useState( minHeight );
 	const [ prevMinHeightUnit, setPrevMinHeightUnit ] =
 		useState( minHeightUnit );
@@ -116,6 +124,10 @@ export default function CoverBlockControls( {
 							label={ __( 'Crop background image' ) }
 							onClick={ onEditMedia }
 							aria-haspopup="dialog"
+							// Disable rather than hide while the edited image
+							// loads, so the button keeps focus when the modal
+							// closes instead of dropping it to the canvas.
+							disabled={ isEditMediaDisabled }
 						/>
 					) }
 				</BlockControls>
@@ -132,17 +144,19 @@ export default function CoverBlockControls( {
 					onReset={ onClearMedia }
 					variant="toolbar"
 				>
-					{ ( { onClose } ) => (
-						<MenuItem
-							icon={ link }
-							onClick={ () => {
-								setIsEmbedUrlInputOpen( true );
-								onClose();
-							} }
-						>
-							{ __( 'Embed video from URL' ) }
-						</MenuItem>
-					) }
+					{ ( { onClose } ) =>
+						hasAllowedVideoProviders ? (
+							<MenuItem
+								icon={ link }
+								onClick={ () => {
+									setIsEmbedUrlInputOpen( true );
+									onClose();
+								} }
+							>
+								{ __( 'Embed video from URL' ) }
+							</MenuItem>
+						) : null
+					}
 				</MediaReplaceFlow>
 			</BlockControls>
 			{ isEmbedUrlInputOpen && (
@@ -156,6 +170,7 @@ export default function CoverBlockControls( {
 							? url
 							: ''
 					}
+					allowedVideoProviders={ filteredVideoProviders }
 				/>
 			) }
 		</>

package/src/cover/edit/embed-video-url-input.js

@@ -4,11 +4,11 @@
 import { useState } from '@wordpress/element';
 import {
 	__experimentalConfirmDialog as ConfirmDialog,
-	__experimentalVStack as VStack,
 	TextControl,
 	Notice,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { Stack } from '@wordpress/ui';
 
 /**
  * Internal dependencies
@@ -19,6 +19,7 @@ export default function EmbedVideoUrlInput( {
 	onSubmit,
 	onClose,
 	initialUrl = '',
+	allowedVideoProviders,
 } ) {
 	const [ url, setUrl ] = useState( initialUrl );
 	const [ error, setError ] = useState( '' );
@@ -29,7 +30,7 @@ export default function EmbedVideoUrlInput( {
 			return;
 		}
 
-		if ( ! isValidVideoEmbedUrl( url ) ) {
+		if ( ! isValidVideoEmbedUrl( url, allowedVideoProviders ) ) {
 			setError(
 				__(
 					'This URL is not supported. Please enter a valid video link from a supported provider.'
@@ -50,7 +51,7 @@ export default function EmbedVideoUrlInput( {
 			confirmButtonText={ __( 'Add video' ) }
 			size="medium"
 		>
-			<VStack spacing={ 4 }>
+			<Stack direction="column" gap="lg">
 				{ error && (
 					<Notice status="error" isDismissible={ false }>
 						{ error }
@@ -71,7 +72,7 @@ export default function EmbedVideoUrlInput( {
 						'Add a background video to the cover block that will autoplay in a loop.'
 					) }
 				/>
-			</VStack>
+			</Stack>
 		</ConfirmDialog>
 	);
 }