@wordpress/block-library 9.35.1-next.dc3f6d3c1.0 → 9.36.1-next.8b30e05b0.0

package/src/accordion-heading/block.json

@@ -57,7 +57,7 @@
 			}
 		},
 		"shadow": true,
-		"blockVisibility": false,
+		"visibility": false,
 		"lock": false
 	},
 	"selectors": {

package/src/accordion-heading/deprecated.js

@@ -74,7 +74,7 @@ const v1 = {
 			},
 		},
 		shadow: true,
-		blockVisibility: false,
+		visibility: false,
 	},
 	save( { attributes } ) {
 		const { level, title, iconPosition, showIcon } = attributes;

package/src/accordion-heading/style.scss

@@ -1,12 +1,4 @@
-// In many classic themes, selectors like `.entry-content h1` are used,
-// potentially applying relatively high specificity (such as `0-1-1`) to
-// heading elements. To properly override those styles, use a selector
-// with a specificity of `0-2-0`.
-.wp-block-accordion-heading.wp-block-accordion-heading {
-	// Some themes may have an explicit width. Since it's unpredictable
-	// what CSS specificity should be used to override them, ensure 100%
-	// width using min-width instead.
-	min-width: 100%;
+.wp-block-accordion-heading {
 	// Some classic themes apply default margins to heading elements,
 	// so those styles need to be reset.
 	margin: 0;

package/src/accordion-item/index.php

@@ -36,6 +36,7 @@ function block_core_accordion_item_render( $attributes, $content ) {
 		$p->set_attribute( 'data-wp-context', '{ "id": "' . $unique_id . '", "openByDefault": ' . $open_by_default . ' }' );
 		$p->set_attribute( 'data-wp-class--is-open', 'state.isOpen' );
 		$p->set_attribute( 'data-wp-init', 'callbacks.initAccordionItems' );
+		$p->set_attribute( 'data-wp-on-window--hashchange', 'callbacks.hashChange' );
 
 		if ( $p->next_tag( array( 'class_name' => 'wp-block-accordion-heading__toggle' ) ) ) {
 			$p->set_attribute( 'data-wp-on--click', 'actions.toggle' );

package/src/accordion-item/style.scss

@@ -1,13 +1,6 @@
 .wp-block-accordion-item {
-	display: grid;
-	grid-template-rows: max-content 0fr;
-
-	&.is-open {
-		grid-template-rows: max-content 1fr;
-
-		> .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
-			transform: rotate(45deg);
-		}
+	&.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
+		transform: rotate(45deg);
 	}
 
 	/* Add transitions only for users who do not prefer reduced motion */

package/src/accordion-panel/block.json

@@ -50,7 +50,7 @@
 		"layout": {
 			"allowEditing": false
 		},
-		"blockVisibility": false,
+		"visibility": false,
 		"contentRole": true,
 		"allowedBlocks": true,
 		"lock": false

package/src/accordion-panel/style.scss

@@ -1,8 +1,4 @@
-// Some classic themes may use selectors like `.wp-block .wp-block`
-// and apply some kind of width to the blocks. To properly override
-// those styles, use a selector with a specificity of `0-2-0`.
-.wp-block-accordion-panel.wp-block-accordion-panel {
-	min-width: 100%;
+.wp-block-accordion-panel {
 
 	// Prevent blockGap from Accordion Content block from adding extra margin between accordions.
 	&[inert],

package/src/audio/index.js

@@ -3,6 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { audio as icon } from '@wordpress/icons';
+import { privateApis as blocksPrivateApis } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -13,6 +14,9 @@ import edit from './edit';
 import metadata from './block.json';
 import save from './save';
 import transforms from './transforms';
+import { unlock } from '../lock-unlock';
+
+const { fieldsKey, formKey } = unlock( blocksPrivateApis );
 
 const { name } = metadata;
 
@@ -33,14 +37,14 @@ export const settings = {
 };
 
 if ( window.__experimentalContentOnlyPatternInsertion ) {
-	settings.fields = [
+	settings[ fieldsKey ] = [
 		{
+			id: 'audio',
 			label: __( 'Audio' ),
-			type: 'Media',
-			shownByDefault: true,
+			type: 'media',
 			mapping: {
 				id: 'id',
-				src: 'src',
+				url: 'src',
 			},
 			args: {
 				allowedTypes: [ 'audio' ],
@@ -48,14 +52,14 @@ if ( window.__experimentalContentOnlyPatternInsertion ) {
 			},
 		},
 		{
+			id: 'caption',
 			label: __( 'Caption' ),
-			type: 'RichText',
-			shownByDefault: false,
-			mapping: {
-				value: 'caption',
-			},
+			type: 'richtext',
 		},
 	];
+	settings[ formKey ] = {
+		fields: [ 'audio' ],
+	};
 }
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/breadcrumbs/index.php

@@ -26,9 +26,9 @@ function render_block_core_breadcrumbs( $attributes, $content, $block ) {
 
 	if ( $attributes['showHomeLink'] ) {
 		if ( ! $is_home_or_front_page ) {
-			$breadcrumb_items[] = block_core_breadcrumbs_create_link(
-				home_url( '/' ),
-				__( 'Home' )
+			$breadcrumb_items[] = array(
+				'label' => __( 'Home' ),
+				'url'   => home_url( '/' ),
 			);
 		} else {
 			$breadcrumb_items[] = block_core_breadcrumbs_create_item( __( 'Home' ), block_core_breadcrumbs_is_paged() );
@@ -53,8 +53,8 @@ function render_block_core_breadcrumbs( $attributes, $content, $block ) {
 		}
 	} elseif ( is_404() ) {
 		// Handle 404 pages.
-		$breadcrumb_items[] = block_core_breadcrumbs_create_current_item(
-			__( 'Page not found' )
+		$breadcrumb_items[] = array(
+			'label' => __( 'Page not found' ),
 		);
 	} elseif ( is_archive() ) {
 		// Handle archive pages (taxonomy, post type, date, author archives).
@@ -100,7 +100,23 @@ function render_block_core_breadcrumbs( $attributes, $content, $block ) {
 			$show_terms = $attributes['prefersTaxonomy'];
 		}
 
-		// Build breadcrumb trail.
+		// Add post type archive link if applicable.
+		$post_type_object = get_post_type_object( $post_type );
+		$archive_link     = get_post_type_archive_link( $post_type );
+		if ( $archive_link && untrailingslashit( home_url() ) !== untrailingslashit( $archive_link ) ) {
+			$label = $post_type_object->labels->archives;
+			if ( 'post' === $post_type ) {
+				$page_for_posts = get_option( 'page_for_posts' );
+				if ( $page_for_posts ) {
+					$label = block_core_breadcrumbs_get_post_title( $page_for_posts );
+				}
+			}
+			$breadcrumb_items[] = array(
+				'label' => $label,
+				'url'   => $archive_link,
+			);
+		}
+		// Build breadcrumb trail based on hierarchical structure or taxonomy terms.
 		if ( ! $show_terms ) {
 			$breadcrumb_items = array_merge( $breadcrumb_items, block_core_breadcrumbs_get_hierarchical_post_type_breadcrumbs( $post_id ) );
 		} else {
@@ -112,17 +128,17 @@ function render_block_core_breadcrumbs( $attributes, $content, $block ) {
 		$title    = block_core_breadcrumbs_get_post_title( $post );
 
 		if ( $is_paged ) {
-			$breadcrumb_items[] = block_core_breadcrumbs_create_link(
-				get_permalink( $post ),
-				$title,
-				true
+			$breadcrumb_items[] = array(
+				'label'      => $title,
+				'url'        => get_permalink( $post ),
+				'allow_html' => true,
 			);
 
 			$breadcrumb_items[] = block_core_breadcrumbs_create_page_number_item( 'page' );
 		} else {
-			$breadcrumb_items[] = block_core_breadcrumbs_create_current_item(
-				$title,
-				true
+			$breadcrumb_items[] = array(
+				'label'      => $title,
+				'allow_html' => true,
 			);
 		}
 	}
@@ -150,7 +166,11 @@ function render_block_core_breadcrumbs( $attributes, $content, $block ) {
 			'',
 			array_map(
 				static function ( $item ) {
-					return '<li>' . $item . '</li>';
+					$label = ! empty( $item['allow_html'] ) ? wp_kses_post( $item['label'] ) : esc_html( $item['label'] );
+					if ( ! empty( $item['url'] ) ) {
+						return '<li><a href="' . esc_url( $item['url'] ) . '">' . $label . '</a></li>';
+					}
+					return '<li><span aria-current="page">' . $label . '</span></li>';
 				},
 				$breadcrumb_items
 			)
@@ -177,52 +197,20 @@ function block_core_breadcrumbs_is_paged() {
  *
  * @since 7.0.0
  * @param string $query_var Optional. Query variable to get current page number. Default 'paged'.
- * @return string The "Page X" breadcrumb HTML.
+ * @return array The "Page X" breadcrumb item data.
  */
 function block_core_breadcrumbs_create_page_number_item( $query_var = 'paged' ) {
 	$paged = (int) get_query_var( $query_var );
 
-	return block_core_breadcrumbs_create_current_item(
-		/* translators: %s: page number */
-		sprintf( __( 'Page %s' ), number_format_i18n( $paged ) )
-	);
-}
-
-/**
- * Creates a breadcrumb link item.
- *
- * @since 7.0.0
- *
- * @param string $url        The URL for the link (will be escaped).
- * @param string $text       The link text (will be escaped).
- * @param bool   $allow_html Whether to allow HTML in the text. If true, uses wp_kses_post(), otherwise uses esc_html(). Default false.
- *
- * @return string The breadcrumb link HTML.
- */
-function block_core_breadcrumbs_create_link( $url, $text, $allow_html = false ) {
-	return sprintf(
-		'<a href="%s">%s</a>',
-		esc_url( $url ),
-		$allow_html ? wp_kses_post( $text ) : esc_html( $text )
+	return array(
+		'label' => sprintf(
+			/* translators: %s: page number */
+			__( 'Page %s' ),
+			number_format_i18n( $paged )
+		),
 	);
 }
 
-/**
- * Creates a breadcrumb current page item.
- *
- * @since 7.0.0
- *
- * @param string $text       The text content (will be escaped).
- * @param bool   $allow_html Whether to allow HTML in the text. If true, uses wp_kses_post(), otherwise uses esc_html(). Default false.
- *
- * @return string The breadcrumb current page HTML.
- */
-function block_core_breadcrumbs_create_current_item( $text, $allow_html = false ) {
-	return sprintf(
-		'<span aria-current="page">%s</span>',
-		$allow_html ? wp_kses_post( $text ) : esc_html( $text )
-	);
-}
 
 /**
  * Creates a breadcrumb item that's either a link or current page item.
@@ -232,17 +220,17 @@ function block_core_breadcrumbs_create_current_item( $text, $allow_html = false
  *
  * @since 7.0.0
  *
- * @param string $text       The text content (will be escaped).
+ * @param string $text       The text content.
  * @param bool   $is_paged   Whether we're on a paginated view.
- * @param bool   $allow_html Whether to allow HTML in the text. If true, uses wp_kses_post(), otherwise uses esc_html(). Default false.
  *
- * @return string The breadcrumb HTML.
+ * @return array The breadcrumb item data.
  */
-function block_core_breadcrumbs_create_item( $text, $is_paged = false, $allow_html = false ) {
+function block_core_breadcrumbs_create_item( $text, $is_paged = false ) {
+	$item = array( 'label' => $text );
 	if ( $is_paged ) {
-		return block_core_breadcrumbs_create_link( get_pagenum_link( 1 ), $text, $allow_html );
+		$item['url'] = get_pagenum_link( 1 );
 	}
-	return block_core_breadcrumbs_create_current_item( $text, $allow_html );
+	return $item;
 }
 
 /**
@@ -267,9 +255,9 @@ function block_core_breadcrumbs_get_post_title( $post_id_or_object ) {
  *
  * @since 7.0.0
  *
- * @param int $post_id   The post ID.
+ * @param int    $post_id   The post ID.
  *
- * @return array Array of breadcrumb HTML items.
+ * @return array Array of breadcrumb item data.
  */
 function block_core_breadcrumbs_get_hierarchical_post_type_breadcrumbs( $post_id ) {
 	$breadcrumb_items = array();
@@ -277,10 +265,10 @@ function block_core_breadcrumbs_get_hierarchical_post_type_breadcrumbs( $post_id
 	$ancestors        = array_reverse( $ancestors );
 
 	foreach ( $ancestors as $ancestor_id ) {
-		$breadcrumb_items[] = block_core_breadcrumbs_create_link(
-			get_permalink( $ancestor_id ),
-			block_core_breadcrumbs_get_post_title( $ancestor_id ),
-			true
+		$breadcrumb_items[] = array(
+			'label'      => block_core_breadcrumbs_get_post_title( $ancestor_id ),
+			'url'        => get_permalink( $ancestor_id ),
+			'allow_html' => true,
 		);
 	}
 	return $breadcrumb_items;
@@ -296,7 +284,7 @@ function block_core_breadcrumbs_get_hierarchical_post_type_breadcrumbs( $post_id
  * @param int    $term_id  The term ID.
  * @param string $taxonomy The taxonomy name.
  *
- * @return array Array of breadcrumb HTML items for ancestors.
+ * @return array Array of breadcrumb item data for ancestors.
  */
 function block_core_breadcrumbs_get_term_ancestors_items( $term_id, $taxonomy ) {
 	$breadcrumb_items = array();
@@ -308,9 +296,9 @@ function block_core_breadcrumbs_get_term_ancestors_items( $term_id, $taxonomy )
 		foreach ( $term_ancestors as $ancestor_id ) {
 			$ancestor_term = get_term( $ancestor_id, $taxonomy );
 			if ( $ancestor_term && ! is_wp_error( $ancestor_term ) ) {
-				$breadcrumb_items[] = block_core_breadcrumbs_create_link(
-					get_term_link( $ancestor_term ),
-					$ancestor_term->name
+				$breadcrumb_items[] = array(
+					'label' => $ancestor_term->name,
+					'url'   => get_term_link( $ancestor_term ),
 				);
 			}
 		}
@@ -327,7 +315,7 @@ function block_core_breadcrumbs_get_term_ancestors_items( $term_id, $taxonomy )
  *
  * @since 7.0.0
  *
- * @return array Array of breadcrumb HTML items.
+ * @return array Array of breadcrumb item data.
  */
 function block_core_breadcrumbs_get_archive_breadcrumbs() {
 	$breadcrumb_items = array();
@@ -354,16 +342,16 @@ function block_core_breadcrumbs_get_archive_breadcrumbs() {
 		if ( $year ) {
 			if ( $month ) {
 				// Year is linked if we have month.
-				$breadcrumb_items[] = block_core_breadcrumbs_create_link(
-					get_year_link( $year ),
-					$year
+				$breadcrumb_items[] = array(
+					'label' => $year,
+					'url'   => get_year_link( $year ),
 				);
 
 				if ( $day ) {
 					// Month is linked if we have day.
-					$breadcrumb_items[] = block_core_breadcrumbs_create_link(
-						get_month_link( $year, $month ),
-						date_i18n( 'F', mktime( 0, 0, 0, $month, 1, $year ) )
+					$breadcrumb_items[] = array(
+						'label' => date_i18n( 'F', mktime( 0, 0, 0, $month, 1, $year ) ),
+						'url'   => get_month_link( $year, $month ),
 					);
 					// Add day (current if not paginated, link if paginated).
 					$breadcrumb_items[] = block_core_breadcrumbs_create_item(
@@ -429,7 +417,7 @@ function block_core_breadcrumbs_get_archive_breadcrumbs() {
 		if ( $post_type_object ) {
 			// Add post type (current if not paginated, link if paginated).
 			$breadcrumb_items[] = block_core_breadcrumbs_create_item(
-				$post_type_object->labels->name,
+				$post_type_object->labels->archives,
 				$is_paged
 			);
 		}
@@ -462,10 +450,11 @@ function block_core_breadcrumbs_get_archive_breadcrumbs() {
  * @param int    $post_id   The post ID.
  * @param string $post_type The post type name.
  *
- * @return array Array of breadcrumb HTML items.
+ * @return array Array of breadcrumb item data.
  */
 function block_core_breadcrumbs_get_terms_breadcrumbs( $post_id, $post_type ) {
 	$breadcrumb_items = array();
+
 	// Get public taxonomies for this post type.
 	$taxonomies = wp_filter_object_list(
 		get_object_taxonomies( $post_type, 'objects' ),
@@ -476,7 +465,7 @@ function block_core_breadcrumbs_get_terms_breadcrumbs( $post_id, $post_type ) {
 	);
 
 	if ( empty( $taxonomies ) ) {
-		return array();
+		return $breadcrumb_items;
 	}
 
 	/**
@@ -550,9 +539,9 @@ function block_core_breadcrumbs_get_terms_breadcrumbs( $post_id, $post_type ) {
 			$breadcrumb_items,
 			block_core_breadcrumbs_get_term_ancestors_items( $term->term_id, $taxonomy_name )
 		);
-		$breadcrumb_items[] = block_core_breadcrumbs_create_link(
-			get_term_link( $term ),
-			$term->name
+		$breadcrumb_items[] = array(
+			'label' => $term->name,
+			'url'   => get_term_link( $term ),
 		);
 	}
 	return $breadcrumb_items;

package/src/button/index.js

@@ -3,6 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { button as icon } from '@wordpress/icons';
+import { privateApis as blocksPrivateApis } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -12,6 +13,9 @@ import deprecated from './deprecated';
 import edit from './edit';
 import metadata from './block.json';
 import save from './save';
+import { unlock } from '../lock-unlock';
+
+const { fieldsKey, formKey } = unlock( blocksPrivateApis );
 
 const { name } = metadata;
 
@@ -35,26 +39,26 @@ export const settings = {
 };
 
 if ( window.__experimentalContentOnlyPatternInsertion ) {
-	settings.fields = [
+	settings[ fieldsKey ] = [
 		{
+			id: 'text',
 			label: __( 'Content' ),
-			type: 'RichText',
-			shownByDefault: true,
-			mapping: {
-				value: 'text',
-			},
+			type: 'richtext',
 		},
 		{
+			id: 'link',
 			label: __( 'Link' ),
-			type: 'Link',
-			shownByDefault: false,
+			type: 'link',
 			mapping: {
-				href: 'url',
+				url: 'url',
 				rel: 'rel',
-				target: 'linkTarget',
+				linkTarget: 'linkTarget',
 			},
 		},
 	];
+	settings[ formKey ] = {
+		fields: [ 'text' ],
+	};
 }
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/code/index.js

@@ -3,6 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { code as icon } from '@wordpress/icons';
+import { privateApis as blocksPrivateApis } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -12,6 +13,9 @@ import edit from './edit';
 import metadata from './block.json';
 import save from './save';
 import transforms from './transforms';
+import { unlock } from '../lock-unlock';
+
+const { fieldsKey, formKey } = unlock( blocksPrivateApis );
 
 const { name } = metadata;
 
@@ -40,16 +44,16 @@ export const settings = {
 };
 
 if ( window.__experimentalContentOnlyPatternInsertion ) {
-	settings.fields = [
+	settings[ fieldsKey ] = [
 		{
+			id: 'content',
 			label: __( 'Code' ),
-			type: 'RichText',
-			shownByDefault: true,
-			mapping: {
-				value: 'content',
-			},
+			type: 'richtext',
 		},
 	];
+	settings[ formKey ] = {
+		fields: [ 'content' ],
+	};
 }
 
 export const init = () => initBlock( { name, metadata, settings } );

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

@@ -11,12 +11,15 @@ import {
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
+import { MenuItem } from '@wordpress/components';
+import { link } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import { ALLOWED_MEDIA_TYPES } from '../shared';
 import { unlock } from '../../lock-unlock';
+import EmbedVideoUrlInput from './embed-video-url-input';
 
 const { cleanEmptyObject } = unlock( blockEditorPrivateApis );
 
@@ -27,6 +30,7 @@ export default function CoverBlockControls( {
 	currentSettings,
 	toggleUseFeaturedImage,
 	onClearMedia,
+	onSelectEmbedUrl,
 	blockEditingMode,
 } ) {
 	const { contentPosition, id, useFeaturedImage, minHeight, minHeightUnit } =
@@ -36,6 +40,7 @@ export default function CoverBlockControls( {
 	const [ prevMinHeightValue, setPrevMinHeightValue ] = useState( minHeight );
 	const [ prevMinHeightUnit, setPrevMinHeightUnit ] =
 		useState( minHeightUnit );
+	const [ isEmbedUrlInputOpen, setIsEmbedUrlInputOpen ] = useState( false );
 	const isMinFullHeight =
 		minHeightUnit === 'vh' &&
 		minHeight === 100 &&
@@ -102,14 +107,33 @@ export default function CoverBlockControls( {
 					mediaId={ id }
 					mediaURL={ url }
 					allowedTypes={ ALLOWED_MEDIA_TYPES }
-					accept="image/*,video/*"
 					onSelect={ onSelectMedia }
 					onToggleFeaturedImage={ toggleUseFeaturedImage }
 					useFeaturedImage={ useFeaturedImage }
 					name={ ! url ? __( 'Add media' ) : __( 'Replace' ) }
 					onReset={ onClearMedia }
-				/>
+				>
+					{ ( { onClose } ) => (
+						<MenuItem
+							icon={ link }
+							onClick={ () => {
+								setIsEmbedUrlInputOpen( true );
+								onClose();
+							} }
+						>
+							{ __( 'Embed video from URL' ) }
+						</MenuItem>
+					) }
+				</MediaReplaceFlow>
 			</BlockControls>
+			{ isEmbedUrlInputOpen && (
+				<EmbedVideoUrlInput
+					onSubmit={ ( embedUrl ) => {
+						onSelectEmbedUrl( embedUrl );
+					} }
+					onClose={ () => setIsEmbedUrlInputOpen( false ) }
+				/>
+			) }
 		</>
 	);
 }

package/src/cover/edit/cover-placeholder.js

@@ -25,7 +25,6 @@ export default function CoverPlaceholder( {
 				title: __( 'Cover' ),
 			} }
 			onSelect={ onSelectMedia }
-			accept="image/*,video/*"
 			allowedTypes={ ALLOWED_MEDIA_TYPES }
 			disableMediaButtons={ disableMediaButtons }
 			onToggleFeaturedImage={ toggleUseFeaturedImage }

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

@@ -0,0 +1,74 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import {
+	__experimentalConfirmDialog as ConfirmDialog,
+	__experimentalVStack as VStack,
+	TextControl,
+	Notice,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { isValidVideoEmbedUrl } from '../embed-video-utils';
+
+export default function EmbedVideoUrlInput( { onSubmit, onClose } ) {
+	const [ url, setUrl ] = useState( '' );
+	const [ error, setError ] = useState( '' );
+
+	const handleConfirm = () => {
+		if ( ! url ) {
+			setError( __( 'Please enter a URL.' ) );
+			return;
+		}
+
+		if ( ! isValidVideoEmbedUrl( url ) ) {
+			setError(
+				__(
+					'This URL is not supported. Please enter a valid video link from a supported provider.'
+				)
+			);
+			return;
+		}
+
+		onSubmit( url );
+		onClose();
+	};
+
+	return (
+		<ConfirmDialog
+			isOpen
+			onConfirm={ handleConfirm }
+			onCancel={ onClose }
+			confirmButtonText={ __( 'Add video' ) }
+			size="medium"
+		>
+			<VStack spacing={ 4 }>
+				{ error && (
+					<Notice status="error" isDismissible={ false }>
+						{ error }
+					</Notice>
+				) }
+				<TextControl
+					__next40pxDefaultSize
+					label={ __( 'Video URL' ) }
+					value={ url }
+					onChange={ ( value ) => {
+						setUrl( value );
+						setError( '' );
+					} }
+					placeholder={ __(
+						'Enter YouTube, Vimeo, or other video URL'
+					) }
+					__nextHasNoMarginBottom
+					help={ __(
+						'Add a background video to the cover block that will autoplay in a loop.'
+					) }
+				/>
+			</VStack>
+		</ConfirmDialog>
+	);
+}