@wordpress/block-library 10.1.0 → 10.2.0

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,6 +85,17 @@
 			"source": "attribute",
 			"selector": "video",
 			"attribute": "poster"
+		},
+		"allowedVideoProviders": {
+			"type": "array",
+			"default": [
+				"youtube",
+				"vimeo",
+				"videopress",
+				"animoto",
+				"tiktok",
+				"wordpress-tv"
+			]
 		}
 	},
 	"usesContext": [ "postId", "postType" ],

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 );
 
@@ -43,9 +44,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 );
@@ -132,17 +139,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 +165,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>
 	);
 }

package/src/cover/edit/index.js

@@ -243,8 +243,7 @@ function CoverEdit( {
 		if ( ! currentAttrs.isUserOverlayColor ) {
 			newOverlayColor = averageBackgroundColor;
 			setOverlayColor( newOverlayColor );
-
-			// Make undo revert the next setAttributes and the previous setOverlayColor.
+			// Fold next attribute change into the same undo level as the setOverlayColor above.
 			__unstableMarkNextChangeAsNotPersistent();
 		}
 
@@ -302,11 +301,13 @@ function CoverEdit( {
 
 	const onClearMedia = () => {
 		let newOverlayColor = overlayColor.color;
-		if ( ! isUserOverlayColor ) {
+
+		// Skip for embeds, which never auto-assign an overlay color; otherwise
+		// the non-persistent flag lands on the media reset itself (unsaveable).
+		if ( ! isUserOverlayColor && overlayColor.color ) {
 			newOverlayColor = DEFAULT_OVERLAY_COLOR;
 			setOverlayColor( undefined );
-
-			// Make undo revert the next setAttributes and the previous setOverlayColor.
+			// Fold next attribute change into the same undo level as the setOverlayColor above.
 			__unstableMarkNextChangeAsNotPersistent();
 		}
 
@@ -341,8 +342,7 @@ function CoverEdit( {
 		);
 
 		setOverlayColor( newOverlayColor );
-
-		// Make undo revert the next setAttributes and the previous setOverlayColor.
+		// Fold next attribute change into the same undo level as the setOverlayColor above.
 		__unstableMarkNextChangeAsNotPersistent();
 
 		setAttributes( {
@@ -549,8 +549,7 @@ function CoverEdit( {
 					if ( ! currentAttrs.isUserOverlayColor ) {
 						newOverlayColor = averageBackgroundColor;
 						setOverlayColor( newOverlayColor );
-
-						// Make undo revert the next setAttributes and the previous setOverlayColor.
+						// Fold next attribute change into the same undo level as the setOverlayColor above.
 						__unstableMarkNextChangeAsNotPersistent();
 					}
 
@@ -604,8 +603,7 @@ function CoverEdit( {
 			} else {
 				setOverlayColor( undefined );
 			}
-
-			// Make undo revert the next setAttributes and the previous setOverlayColor.
+			// Fold next attribute change into the same undo level as the setOverlayColor above.
 			__unstableMarkNextChangeAsNotPersistent();
 		}
 

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

@@ -87,7 +87,6 @@ function CoverHeightInput( {
 
 	return (
 		<UnitControl
-			__next40pxDefaultSize
 			label={ __( 'Minimum height' ) }
 			id={ inputId }
 			isResetValueOnUnitChange
@@ -476,7 +475,6 @@ export default function CoverInspectorControls( {
 							max={ 100 }
 							step={ 10 }
 							required
-							__next40pxDefaultSize
 						/>
 					</ToolsPanelItem>
 				</InspectorControls>

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

@@ -11,7 +11,7 @@ import { matchesPatterns } from '../embed/util';
 const DEFAULT_EMBED_BLOCK = 'core/embed';
 
 // List of supported video providers for cover block backgrounds
-const VIDEO_PROVIDERS = [
+const DEFAULT_VIDEO_PROVIDERS = [
 	'youtube',
 	'vimeo',
 	'videopress',
@@ -21,38 +21,63 @@ const VIDEO_PROVIDERS = [
 ];
 
 /**
- * Checks if a URL is a valid video embed URL from supported providers.
+ * Resolves the list of providers that are actually allowed.
  *
- * @param {string} url The URL to validate.
- * @return {boolean} True if the URL matches a supported video provider pattern.
+ * @param {string[]} [allowedVideoProviders] The providers configured via the block attribute.
+ * @return {string[]} The supported providers that remain allowed.
  */
-export function isValidVideoEmbedUrl( url ) {
+export function getAllowedVideoProviders( allowedVideoProviders ) {
+	if ( ! Array.isArray( allowedVideoProviders ) ) {
+		return [];
+	}
+
+	return DEFAULT_VIDEO_PROVIDERS.filter( ( provider ) =>
+		allowedVideoProviders.includes( provider )
+	);
+}
+
+/**
+ * Checks if a URL is a valid video embed URL from allowed providers.
+ *
+ * @param {string}   url                The URL to validate.
+ * @param {string[]} [allowedProviders] The allowed providers, Defaults to all
+ *                                      supported providers.
+ * @return {boolean} True if the URL matches an allowed video provider pattern.
+ */
+export function isValidVideoEmbedUrl( url, allowedProviders ) {
 	if ( ! url ) {
 		return false;
 	}
 
-	const embedBlock = findVideoEmbedProvider( url );
+	const embedBlock = findVideoEmbedProvider( url, allowedProviders );
 	return embedBlock !== null;
 }
 
 /**
- * Finds the embed provider for a given URL if it's a supported video provider.
+ * Finds the embed provider for a given URL if it's an allowed video provider.
  *
- * @param {string} url The URL to check.
+ * @param {string}   url                The URL to check.
+ * @param {string[]} [allowedProviders] The allowed providers, Defaults to all
+ *                                      supported providers.
  * @return {string|null} The provider name slug (e.g., 'youtube') or null if not found.
  */
-export function getVideoEmbedProvider( url ) {
-	const embedBlock = findVideoEmbedProvider( url );
+export function getVideoEmbedProvider( url, allowedProviders ) {
+	const embedBlock = findVideoEmbedProvider( url, allowedProviders );
 	return embedBlock ? embedBlock.name : null;
 }
 
 /**
  * Finds a matching video embed block variation for the given URL.
  *
- * @param {string} url The URL to match against provider patterns.
+ * @param {string}   url                The URL to match against provider patterns.
+ * @param {string[]} [allowedProviders] The allowed providers, Defaults to all
+ *                                      supported providers.
  * @return {Object|null} The matching block variation or null if not found.
  */
-function findVideoEmbedProvider( url ) {
+function findVideoEmbedProvider(
+	url,
+	allowedProviders = DEFAULT_VIDEO_PROVIDERS
+) {
 	const embedVariations = getBlockVariations( DEFAULT_EMBED_BLOCK );
 
 	if ( ! embedVariations ) {
@@ -65,7 +90,7 @@ function findVideoEmbedProvider( url ) {
 
 	if (
 		! matchingVariation ||
-		! VIDEO_PROVIDERS.includes( matchingVariation.name )
+		! allowedProviders.includes( matchingVariation.name )
 	) {
 		return null;
 	}

package/src/cover/test/edit.js

@@ -10,7 +10,7 @@ import userEvent from '@testing-library/user-event';
 import {
 	initializeEditor,
 	selectBlock,
-} from 'test/integration/helpers/integration-test-editor';
+} from '@wordpress/integration-tests/helpers/integration-test-editor';
 
 const defaultSettings = {
 	__experimentalFeatures: {
@@ -217,7 +217,7 @@ describe( 'Cover block', () => {
 			await selectBlock( 'Block: Cover' );
 			expect(
 				within( screen.getByLabelText( 'Block: Cover' ) ).getByRole(
-					'img'
+					'presentation'
 				)
 			).toBeInTheDocument();
 
@@ -232,7 +232,7 @@ describe( 'Cover block', () => {
 
 			expect(
 				within( screen.getByLabelText( 'Block: Cover' ) ).queryByRole(
-					'img'
+					'presentation'
 				)
 			).not.toBeInTheDocument();
 		} );
@@ -318,7 +318,7 @@ describe( 'Cover block', () => {
 
 			expect(
 				within( screen.getByLabelText( 'Block: Cover' ) ).getByRole(
-					'img'
+					'presentation'
 				)
 			).toHaveStyle( 'object-position: 100% 50%;' );
 		} );

package/src/details/transforms.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { createBlock, cloneBlock } from '@wordpress/blocks';
+import { createBlock, cloneSanitizedBlock } from '@wordpress/blocks';
 
 export default {
 	from: [
@@ -18,7 +18,7 @@ export default {
 				return createBlock(
 					'core/details',
 					{},
-					blocks.map( ( block ) => cloneBlock( block ) )
+					blocks.map( ( block ) => cloneSanitizedBlock( block ) )
 				);
 			},
 		},

package/src/embed/edit.js

@@ -14,7 +14,6 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
-import { View } from '@wordpress/primitives';
 import { Caption } from '../utils/caption';
 
 /**
@@ -199,9 +198,9 @@ const EmbedEdit = ( props ) => {
 
 	if ( fetching ) {
 		return (
-			<View { ...blockProps }>
+			<div { ...blockProps }>
 				<EmbedLoading />
-			</View>
+			</div>
 		);
 	}
 
@@ -213,7 +212,7 @@ const EmbedEdit = ( props ) => {
 
 	if ( showEmbedPlaceholder ) {
 		return (
-			<View { ...blockProps }>
+			<div { ...blockProps }>
 				<EmbedPlaceholder
 					icon={ icon }
 					label={ label }
@@ -245,7 +244,7 @@ const EmbedEdit = ( props ) => {
 						invalidateResolution( 'getEmbedPreview', [ url ] );
 					} }
 				/>
-			</View>
+			</div>
 		);
 	}
 

package/src/embed/embed-placeholder.js

@@ -5,14 +5,12 @@ import { __, _x } from '@wordpress/i18n';
 import {
 	Button,
 	Placeholder,
-	ExternalLink,
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
 	__experimentalInputControl as InputControl,
 } from '@wordpress/components';
 import { BlockIcon } from '@wordpress/block-editor';
+import { Link, Stack } from '@wordpress/ui';
 
-const EmbedPlaceholder = ( {
+export default function EmbedPlaceholder( {
 	icon,
 	label,
 	value,
@@ -21,7 +19,7 @@ const EmbedPlaceholder = ( {
 	cannotEmbed,
 	fallback,
 	tryAgain,
-} ) => {
+} ) {
 	return (
 		<Placeholder
 			icon={ <BlockIcon icon={ icon } showColors /> }
@@ -33,7 +31,6 @@ const EmbedPlaceholder = ( {
 		>
 			<form onSubmit={ onSubmit }>
 				<InputControl
-					__next40pxDefaultSize
 					type="url"
 					value={ value || '' }
 					className="wp-block-embed__placeholder-input"
@@ -47,31 +44,32 @@ const EmbedPlaceholder = ( {
 				</Button>
 			</form>
 			<div className="wp-block-embed__learn-more">
-				<ExternalLink
+				<Link
+					openInNewTab
 					href={ __(
 						'https://wordpress.org/documentation/article/embeds/'
 					) }
 				>
 					{ __( 'Learn more about embeds' ) }
-				</ExternalLink>
+				</Link>
 			</div>
 			{ cannotEmbed && (
-				<VStack spacing={ 3 } className="components-placeholder__error">
+				<Stack
+					direction="column"
+					gap="md"
+					className="components-placeholder__error"
+				>
 					<div className="components-placeholder__instructions">
 						{ __( 'Sorry, this content could not be embedded.' ) }
 					</div>
-					<HStack
-						expanded={ false }
-						spacing={ 3 }
-						justify="flex-start"
-					>
+					<Stack direction="row" gap="md" justify="flex-start">
 						<Button
 							__next40pxDefaultSize
 							variant="secondary"
 							onClick={ tryAgain }
 						>
 							{ _x( 'Try again', 'button label' ) }
-						</Button>{ ' ' }
+						</Button>
 						<Button
 							__next40pxDefaultSize
 							variant="secondary"
@@ -79,11 +77,9 @@ const EmbedPlaceholder = ( {
 						>
 							{ _x( 'Convert to link', 'button label' ) }
 						</Button>
-					</HStack>
-				</VStack>
+					</Stack>
+				</Stack>
 			) }
 		</Placeholder>
 	);
-};
-
-export default EmbedPlaceholder;
+}

package/src/file/edit.js

@@ -77,14 +77,14 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 	const [ temporaryURL, setTemporaryURL ] = useState( attributes.blob );
 	const { media } = useSelect(
 		( select ) => ( {
-			media:
-				id === undefined
-					? undefined
-					: select( coreStore ).getEntityRecord(
-							'postType',
-							'attachment',
-							id
-					  ),
+			media: !! id
+				? select( coreStore ).getEntityRecord(
+						'postType',
+						'attachment',
+						id,
+						{ context: 'view' }
+				  )
+				: undefined,
 		} ),
 		[ id ]
 	);

package/src/file/inspector.js

@@ -79,7 +79,6 @@ export default function FileBlockInspector( {
 								onDeselect={ () => changePreviewHeight( 600 ) }
 							>
 								<RangeControl
-									__next40pxDefaultSize
 									label={ __( 'Height in pixels' ) }
 									min={ MIN_PREVIEW_HEIGHT }
 									max={ Math.max(
@@ -110,7 +109,6 @@ export default function FileBlockInspector( {
 						onDeselect={ () => changeLinkDestinationOption( href ) }
 					>
 						<SelectControl
-							__next40pxDefaultSize
 							label={ __( 'Link to' ) }
 							value={ textLinkHref }
 							options={ linkDestinationOptions }