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

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/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/details/transforms.js

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

package/src/embed/embed-placeholder.js

@@ -31,7 +31,6 @@ export default function EmbedPlaceholder( {
 		>
 			<form onSubmit={ onSubmit }>
 				<InputControl
-					__next40pxDefaultSize
 					type="url"
 					value={ value || '' }
 					className="wp-block-embed__placeholder-input"

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/transforms.js

@@ -11,6 +11,31 @@ import { getFilename } from '@wordpress/url';
 // Transforms bypass the default variation, so set the localized default here.
 const downloadButtonText = _x( 'Download', 'button label' );
 
+// The File → audio/video/image transforms are identical apart from the target
+// block, its media MIME type, and the src attribute name (image uses `url`).
+const toMediaTransform = ( blockName, mediaType, srcAttribute ) => ( {
+	type: 'block',
+	blocks: [ blockName ],
+	isMatch: ( { id } ) => {
+		if ( ! id ) {
+			return false;
+		}
+		const { getEntityRecord } = select( coreStore );
+		const media = getEntityRecord( 'postType', 'attachment', id, {
+			context: 'view',
+		} );
+		return !! media && media.mime_type.includes( mediaType );
+	},
+	transform: ( attributes ) => {
+		return createBlock( blockName, {
+			[ srcAttribute ]: attributes.href,
+			caption: attributes.fileName,
+			id: attributes.id,
+			anchor: attributes.anchor,
+		} );
+	},
+} );
+
 const transforms = {
 	from: [
 		{
@@ -78,66 +103,9 @@ const transforms = {
 		},
 	],
 	to: [
-		{
-			type: 'block',
-			blocks: [ 'core/audio' ],
-			isMatch: ( { id } ) => {
-				if ( ! id ) {
-					return false;
-				}
-				const { getEntityRecord } = select( coreStore );
-				const media = getEntityRecord( 'postType', 'attachment', id );
-				return !! media && media.mime_type.includes( 'audio' );
-			},
-			transform: ( attributes ) => {
-				return createBlock( 'core/audio', {
-					src: attributes.href,
-					caption: attributes.fileName,
-					id: attributes.id,
-					anchor: attributes.anchor,
-				} );
-			},
-		},
-		{
-			type: 'block',
-			blocks: [ 'core/video' ],
-			isMatch: ( { id } ) => {
-				if ( ! id ) {
-					return false;
-				}
-				const { getEntityRecord } = select( coreStore );
-				const media = getEntityRecord( 'postType', 'attachment', id );
-				return !! media && media.mime_type.includes( 'video' );
-			},
-			transform: ( attributes ) => {
-				return createBlock( 'core/video', {
-					src: attributes.href,
-					caption: attributes.fileName,
-					id: attributes.id,
-					anchor: attributes.anchor,
-				} );
-			},
-		},
-		{
-			type: 'block',
-			blocks: [ 'core/image' ],
-			isMatch: ( { id } ) => {
-				if ( ! id ) {
-					return false;
-				}
-				const { getEntityRecord } = select( coreStore );
-				const media = getEntityRecord( 'postType', 'attachment', id );
-				return !! media && media.mime_type.includes( 'image' );
-			},
-			transform: ( attributes ) => {
-				return createBlock( 'core/image', {
-					url: attributes.href,
-					caption: attributes.fileName,
-					id: attributes.id,
-					anchor: attributes.anchor,
-				} );
-			},
-		},
+		toMediaTransform( 'core/audio', 'audio', 'src' ),
+		toMediaTransform( 'core/video', 'video', 'src' ),
+		toMediaTransform( 'core/image', 'image', 'url' ),
 	],
 };
 

package/src/gallery/README.md

@@ -47,7 +47,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
   - `margin`: `true`
   - `padding`: `true`
-  - `blockGap`: `["horizontal","vertical"]`
+  - `blockGap`: `{"sides":["horizontal","vertical"],"__experimentalDefault":"var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) )"}`
 - [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
   - [`text`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-text): `false`
   - [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-background): `true`

package/src/gallery/block.json

@@ -142,8 +142,10 @@
 		"spacing": {
 			"margin": true,
 			"padding": true,
-			"blockGap": [ "horizontal", "vertical" ],
-			"__experimentalSkipSerialization": [ "blockGap" ],
+			"blockGap": {
+				"sides": [ "horizontal", "vertical" ],
+				"__experimentalDefault": "var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) )"
+			},
 			"__experimentalDefaultControls": {
 				"blockGap": true,
 				"margin": false,

package/src/gallery/edit.js

@@ -66,7 +66,7 @@ import {
 import useImageSizes from './use-image-sizes';
 import useGetNewImages from './use-get-new-images';
 import useGetMedia from './use-get-media';
-import GapStyles from './gap-styles';
+import GalleryGapCustomProperties from './gap-styles';
 import useDynamicGallery from './use-dynamic-gallery';
 import { GallerySourcePanel, GalleryDynamicView } from './dynamic-gallery';
 import { getDynamicSource, ATTACHED_MEDIA } from './dynamic-source';
@@ -941,8 +941,8 @@ export default function GalleryEdit( props ) {
 						/>
 					</BlockControls>
 				) }
-				<GapStyles
-					blockGap={ attributes.style?.spacing?.blockGap }
+				<GalleryGapCustomProperties
+					style={ attributes.style }
 					clientId={ clientId }
 				/>
 			</>

package/src/gallery/gap-styles.js

@@ -3,35 +3,94 @@
  */
 import {
 	__experimentalGetGapCSSValue as getGapCSSValue,
+	privateApis as blockEditorPrivateApis,
+	store as blockEditorStore,
 	useStyleOverride,
+	useSettings,
 } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { privateApis as globalStylesEnginePrivateApis } from '@wordpress/global-styles-engine';
 
-export default function GapStyles( { blockGap, clientId } ) {
-	// --gallery-block--gutter-size is deprecated. --wp--style--gallery-gap-default should be used by themes that want to set a default
-	// gap on the gallery.
-	const fallbackValue = `var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) )`;
-	let gapValue = fallbackValue;
-	let column = fallbackValue;
-	let row;
-
-	// Check for the possibility of split block gap values. See: https://github.com/WordPress/gutenberg/pull/37736
-	if ( !! blockGap ) {
-		row =
-			typeof blockGap === 'string'
-				? getGapCSSValue( blockGap )
-				: getGapCSSValue( blockGap?.top ) || fallbackValue;
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../lock-unlock';
+
+const { getResponsiveMediaQueries } = unlock( globalStylesEnginePrivateApis );
+const { globalStylesDataKey } = unlock( blockEditorPrivateApis );
+const GALLERY_BLOCK_NAME = 'core/gallery';
+
+// --gallery-block--gutter-size is deprecated. --wp--style--gallery-gap-default should be used by themes that want to set a default
+// gap on the gallery.
+const FALLBACK_VALUE = `var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) )`;
+
+function getGalleryGapCustomPropertyStyle( selector, blockGap ) {
+	let column = FALLBACK_VALUE;
+	if ( blockGap ) {
 		column =
 			typeof blockGap === 'string'
-				? getGapCSSValue( blockGap )
-				: getGapCSSValue( blockGap?.left ) || fallbackValue;
-		gapValue = row === column ? row : `${ row } ${ column }`;
+				? getGapCSSValue( blockGap ) || FALLBACK_VALUE
+				: getGapCSSValue( blockGap?.left ) || FALLBACK_VALUE;
 	}
 
 	// The unstable gallery gap calculation requires a real value (such as `0px`) and not `0`.
-	const gap = `#block-${ clientId } {
-		--wp--style--unstable-gallery-gap: ${ column === '0' ? '0px' : column };
-		gap: ${ gapValue }
+	return `${ selector } {
+		--wp--style--unstable-gallery-gap: ${ column === '0' ? '0px' : column }
 	}`;
+}
+
+function getBlockGapValue( style ) {
+	if ( ! Object.hasOwn( style?.spacing || {}, 'blockGap' ) ) {
+		return undefined;
+	}
+
+	return style.spacing.blockGap;
+}
+
+export default function GalleryGapCustomProperties( { style, clientId } ) {
+	const selector = `#block-${ clientId }`;
+	const [ viewportSettings ] = useSettings( 'viewport' );
+	const globalStyles = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getSettings()?.[ globalStylesDataKey ],
+		[]
+	);
+	const globalGalleryStyles =
+		globalStyles?.blocks?.[ GALLERY_BLOCK_NAME ] || {};
+	const styleBlockGap = getBlockGapValue( style );
+	const globalGalleryBlockGap =
+		globalGalleryStyles?.spacing?.blockGap ?? FALLBACK_VALUE;
+	// Prefer the block's own gap value, then Gallery global styles. Missing
+	// values fall back to the Gallery blockGap default.
+	const blockGap =
+		styleBlockGap === undefined ? globalGalleryBlockGap : styleBlockGap;
+	let gap = getGalleryGapCustomPropertyStyle( selector, blockGap );
+
+	Object.entries( getResponsiveMediaQueries( viewportSettings ) ).forEach(
+		( [ viewport, mediaQuery ] ) => {
+			const styleViewportBlockGap = getBlockGapValue(
+				style?.[ viewport ]
+			);
+			// Viewport-specific block values win. Gallery global viewport values
+			// only apply when the block has no base gap, so they do not override an instance value.
+			const globalViewportBlockGap =
+				styleBlockGap === undefined
+					? globalGalleryStyles?.[ viewport ]?.spacing?.blockGap
+					: undefined;
+			const viewportBlockGap =
+				styleViewportBlockGap === undefined
+					? globalViewportBlockGap
+					: styleViewportBlockGap;
+			if ( viewportBlockGap === undefined || viewportBlockGap === null ) {
+				return;
+			}
+
+			gap += `${ mediaQuery }{${ getGalleryGapCustomPropertyStyle(
+				selector,
+				viewportBlockGap
+			) }}`;
+		}
+	);
 
 	useStyleOverride( { css: gap } );