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

package/src/cover/edit/index.js

@@ -13,6 +13,7 @@ import {
 	useLayoutEffect,
 	useMemo,
 	useRef,
+	useState,
 } from '@wordpress/element';
 import { Placeholder, SandBox, Spinner } from '@wordpress/components';
 import { compose, useResizeObserver } from '@wordpress/compose';
@@ -20,7 +21,6 @@ import {
 	withColors,
 	ColorPalette,
 	useBlockProps,
-	useSettings,
 	useInnerBlocksProps,
 	__experimentalUseGradient,
 	store as blockEditorStore,
@@ -28,7 +28,8 @@ import {
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
+import { createBlocksFromInnerBlocksTemplate } from '@wordpress/blocks';
 import { isBlobURL } from '@wordpress/blob';
 import { store as noticesStore } from '@wordpress/notices';
 
@@ -134,8 +135,9 @@ function CoverEdit( {
 		[]
 	);
 
-	const { __unstableMarkNextChangeAsNotPersistent } =
+	const { __unstableMarkNextChangeAsNotPersistent, replaceInnerBlocks } =
 		useDispatch( blockEditorStore );
+	const registry = useRegistry();
 
 	// Ref to access latest values after async operations (e.g. getMediaColor),
 	// avoiding stale values that could overwrite concurrent remote changes.
@@ -225,6 +227,35 @@ function CoverEdit( {
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const { gradientClass, gradientValue } = __experimentalUseGradient();
 
+	// Create the initial inner paragraph when the block gains a background
+	// and has no content yet.
+	const scaffoldInnerBlocks = () => {
+		const {
+			getBlocks,
+			isBlockSelected,
+			getSelectedBlocksInitialCaretPosition,
+		} = registry.select( blockEditorStore );
+		if ( getBlocks( clientId ).length > 0 ) {
+			return;
+		}
+		// Check for fontSize support before we pass a fontSize attribute to
+		// the innerBlocks.
+		const [ fontSizes ] = unlock(
+			registry.select( blockEditorStore )
+		).getBlockSettings( clientId, 'typography.fontSizes' );
+		const hasFontSizes = fontSizes?.length > 0;
+		replaceInnerBlocks(
+			clientId,
+			createBlocksFromInnerBlocksTemplate(
+				getInnerBlocksTemplate( {
+					fontSize: hasFontSizes ? 'large' : undefined,
+				} )
+			),
+			isBlockSelected( clientId ),
+			getSelectedBlocksInitialCaretPosition()
+		);
+	};
+
 	const onSelectMedia = async ( newMedia ) => {
 		const mediaAttributes = attributesFromMedia( newMedia );
 		const isImage = [ newMedia?.type, newMedia?.media_type ].includes(
@@ -243,8 +274,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();
 		}
 
@@ -290,23 +320,29 @@ function CoverEdit( {
 			}
 		}
 
-		setAttributes( {
-			...mediaAttributes,
-			focalPoint: undefined,
-			useFeaturedImage: undefined,
-			dimRatio: newDimRatio,
-			isDark: newIsDark,
-			isUserOverlayColor: currentAttrs.isUserOverlayColor || false,
+		registry.batch( () => {
+			setAttributes( {
+				...mediaAttributes,
+				focalPoint: undefined,
+				useFeaturedImage: undefined,
+				dimRatio: newDimRatio,
+				isDark: newIsDark,
+				isUserOverlayColor: currentAttrs.isUserOverlayColor || false,
+			} );
+
+			scaffoldInnerBlocks();
 		} );
 	};
 
 	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,13 +377,20 @@ 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( {
-			isUserOverlayColor: true,
-			isDark: newIsDark,
+		registry.batch( () => {
+			setAttributes( {
+				isUserOverlayColor: true,
+				isDark: newIsDark,
+			} );
+
+			// Skip when the color is cleared: that returns the block to its
+			// placeholder, which only renders while there is no content.
+			if ( newOverlayColor ) {
+				scaffoldInnerBlocks();
+			}
 		} );
 	};
 
@@ -424,6 +467,12 @@ function CoverEdit( {
 		return getBackgroundEmbedHtml( embedPreview.html );
 	}, [ embedPreview, backgroundType ] );
 
+	// Set while the media editor has pointed the cover at a freshly
+	// generated file the browser hasn't finished loading; cleared by the
+	// background <img> load/error handlers (or immediately after
+	// setAttributes for CSS backgrounds, which never fire load events).
+	const [ isSwappingMedia, setIsSwappingMedia ] = useState( false );
+
 	const isUploadingMedia = isTemporaryMedia( id, url );
 
 	const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
@@ -477,22 +526,11 @@ function CoverEdit( {
 	const ref = useRef();
 	const blockProps = useBlockProps( { ref } );
 
-	// Check for fontSize support before we pass a fontSize attribute to the innerBlocks.
-	const [ fontSizes ] = useSettings( 'typography.fontSizes' );
-	const hasFontSizes = fontSizes?.length > 0;
-	const innerBlocksTemplate = getInnerBlocksTemplate( {
-		fontSize: hasFontSizes ? 'large' : undefined,
-	} );
-
 	const innerBlocksProps = useInnerBlocksProps(
 		{
 			className: 'wp-block-cover__inner-container',
 		},
 		{
-			// Avoid template sync when the `templateLock` value is `all` or `contentOnly`.
-			// See: https://github.com/WordPress/gutenberg/pull/45632
-			template: ! hasInnerBlocks ? innerBlocksTemplate : undefined,
-			templateInsertUpdatesSelection: true,
 			allowedBlocks,
 			templateLock,
 			dropZoneElement: ref.current,
@@ -526,6 +564,10 @@ function CoverEdit( {
 					return;
 				}
 
+				if ( newId !== id && newUrl ) {
+					setIsSwappingMedia( true );
+				}
+
 				const nextAttributes = {
 					id: newId,
 					backgroundType: IMAGE_BACKGROUND_TYPE,
@@ -549,8 +591,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();
 					}
 
@@ -564,6 +605,17 @@ function CoverEdit( {
 				}
 
 				setAttributes( nextAttributes );
+
+				// A CSS background (parallax/repeated) renders as a div and
+				// never fires a load event; getMediaColor already fetched
+				// the file, so the swap is done once attributes are set.
+				const {
+					hasParallax: currentHasParallax,
+					isRepeated: currentIsRepeated,
+				} = propsRef.current.attributes;
+				if ( currentHasParallax || currentIsRepeated ) {
+					setIsSwappingMedia( false );
+				}
 			},
 		} );
 	}, [
@@ -604,8 +656,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();
 		}
 
@@ -617,15 +668,24 @@ function CoverEdit( {
 			averageBackgroundColor
 		);
 
-		setAttributes( {
-			id: undefined,
-			url: undefined,
-			useFeaturedImage: newUseFeaturedImage,
-			dimRatio: newDimRatio,
-			backgroundType: useFeaturedImage
-				? IMAGE_BACKGROUND_TYPE
-				: undefined,
-			isDark: newIsDark,
+		registry.batch( () => {
+			setAttributes( {
+				id: undefined,
+				url: undefined,
+				useFeaturedImage: newUseFeaturedImage,
+				dimRatio: newDimRatio,
+				backgroundType: useFeaturedImage
+					? IMAGE_BACKGROUND_TYPE
+					: undefined,
+				isDark: newIsDark,
+			} );
+
+			// Skip when the featured image is disabled: that can return the
+			// block to its placeholder, which only renders while there is no
+			// content.
+			if ( newUseFeaturedImage ) {
+				scaffoldInnerBlocks();
+			}
 		} );
 	};
 
@@ -642,6 +702,7 @@ function CoverEdit( {
 			onEditMedia={ openCoverMediaEditorModal }
 			editMediaButtonRef={ editMediaButtonRef }
 			showEditMediaButton={ showEditMediaButton }
+			isEditMediaDisabled={ isSwappingMedia }
 		/>
 	);
 
@@ -724,7 +785,7 @@ function CoverEdit( {
 		{
 			'is-dark-theme': isDark,
 			'is-light': ! isDark,
-			'is-transient': isUploadingMedia,
+			'is-transient': isUploadingMedia || isSwappingMedia,
 			'has-parallax': hasParallax,
 			'is-repeated': isRepeated,
 			'has-custom-content-position':
@@ -764,6 +825,8 @@ function CoverEdit( {
 							alt={ alt }
 							src={ url }
 							style={ mediaStyle }
+							onLoad={ () => setIsSwappingMedia( false ) }
+							onError={ () => setIsSwappingMedia( false ) }
 						/>
 					) : (
 						<div
@@ -831,7 +894,7 @@ function CoverEdit( {
 					/>
 				) }
 
-				{ isUploadingMedia && <Spinner /> }
+				{ ( isUploadingMedia || isSwappingMedia ) && <Spinner /> }
 
 				<CoverPlaceholder
 					disableMediaButtons

package/src/cover/editor.scss

@@ -44,6 +44,12 @@
 		.wp-block-cover__inner-container {
 			z-index: 2;
 		}
+
+		// Keep the loading spinner above the dim overlay (1) and the inner
+		// blocks (2) so it stays visible over child content while media loads.
+		.components-spinner {
+			z-index: 3;
+		}
 	}
 
 	// Shown while media is being uploaded

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/index.php

@@ -134,8 +134,15 @@ function render_block_core_cover( $attributes, $content ) {
 		return $content;
 	}
 
-	$object_position = isset( $attributes['focalPoint'] )
-		? round( $attributes['focalPoint']['x'] * 100 ) . '% ' . round( $attributes['focalPoint']['y'] * 100 ) . '%'
+	$cover_focal_point = $attributes['focalPoint'] ?? null;
+	$focal_point_x     = null;
+	$focal_point_y     = null;
+	if ( is_array( $cover_focal_point ) ) {
+		$focal_point_x = isset( $cover_focal_point['x'] ) && is_numeric( $cover_focal_point['x'] ) ? $cover_focal_point['x'] : null;
+		$focal_point_y = isset( $cover_focal_point['y'] ) && is_numeric( $cover_focal_point['y'] ) ? $cover_focal_point['y'] : null;
+	}
+	$object_position = null !== $focal_point_x && null !== $focal_point_y
+		? round( $focal_point_x * 100 ) . '% ' . round( $focal_point_y * 100 ) . '%'
 		: null;
 
 	if ( ! ( $attributes['hasParallax'] || $attributes['isRepeated'] ) ) {

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/editor.scss

@@ -48,6 +48,7 @@
 @use "./social-link/editor.scss" as *;
 @use "./social-links/editor.scss" as *;
 @use "./spacer/editor.scss" as *;
+@use "./tab-list/editor.scss" as *;
 @use "./table/editor.scss" as *;
 @use "./template-part/editor.scss" as *;
 @use "./term-template/editor.scss" as *;

package/src/embed/edit.js

@@ -239,7 +239,9 @@ const EmbedEdit = ( props ) => {
 					value={ url }
 					cannotEmbed={ cannotEmbed }
 					onChange={ ( value ) => setURL( value ) }
-					fallback={ () => fallback( url, onReplace ) }
+					fallback={
+						onReplace ? () => fallback( url, onReplace ) : undefined
+					}
 					tryAgain={ () => {
 						invalidateResolution( 'getEmbedPreview', [ url ] );
 					} }

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"
@@ -71,13 +70,15 @@ export default function EmbedPlaceholder( {
 						>
 							{ _x( 'Try again', 'button label' ) }
 						</Button>
-						<Button
-							__next40pxDefaultSize
-							variant="secondary"
-							onClick={ fallback }
-						>
-							{ _x( 'Convert to link', 'button label' ) }
-						</Button>
+						{ fallback && (
+							<Button
+								__next40pxDefaultSize
+								variant="secondary"
+								onClick={ fallback }
+							>
+								{ _x( 'Convert to link', 'button label' ) }
+							</Button>
+						) }
 					</Stack>
 				</Stack>
 			) }

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/form/index.php

@@ -20,12 +20,13 @@ function render_block_core_form( $attributes, $content ) {
 	$processed_content->next_tag( 'form' );
 
 	// Get the action for this form.
-	$action = '';
-	if ( isset( $attributes['action'] ) ) {
+	$action      = '';
+	$form_action = $attributes['action'] ?? null;
+	if ( is_string( $form_action ) ) {
 		$action = str_replace(
 			array( '{SITE_URL}', '{ADMIN_URL}' ),
 			array( site_url(), admin_url() ),
-			$attributes['action']
+			$form_action
 		);
 	}
 	$processed_content->set_attribute( 'action', esc_attr( $action ) );
@@ -55,7 +56,8 @@ function render_block_core_form( $attributes, $content ) {
  * @return string The extra fields.
  */
 function block_core_form_extra_fields_comment_form( $extra_fields, $attributes ) {
-	if ( ! empty( $attributes['action'] ) && str_ends_with( $attributes['action'], '/wp-comments-post.php' ) ) {
+	$form_action = $attributes['action'] ?? null;
+	if ( ! empty( $form_action ) && is_string( $form_action ) && str_ends_with( $form_action, '/wp-comments-post.php' ) ) {
 		$extra_fields .= '<input type="hidden" name="comment_post_ID" value="' . get_the_ID() . '" id="comment_post_ID">';
 	}
 	return $extra_fields;

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,