@wordpress/block-library 10.1.0 → 10.2.0

package/src/gallery/dynamic-source.js

@@ -0,0 +1,117 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Source discriminator for "images attached to the post" — the only dynamic
+ * source implemented so far. Kept as a named constant since it's referenced from
+ * several call sites (the query builder, the descriptor, and the entry points
+ * that switch a gallery into dynamic mode).
+ */
+export const ATTACHED_MEDIA = 'core/attached-media';
+
+/**
+ * Default ordering for a dynamic source. `menu_order` (the manual media-library
+ * order) is intentionally not used: it isn't a valid `orderby` value on the
+ * media REST endpoint, so the editor preview couldn't reproduce it. Both the
+ * editor query and the server resolver default to the same REST-supported order
+ * so the preview matches the frontend.
+ */
+export const DEFAULT_ORDERBY = 'date';
+export const DEFAULT_ORDER = 'desc';
+
+/**
+ * Per-source copy, keyed by the `source` discriminator in a gallery's
+ * `dynamicContent`. Adding a dynamic source means adding an entry here; the
+ * editor components read these strings instead of hardcoding source-specific
+ * wording. The fields also map onto a future "Choose source" control: `title`
+ * becomes an option label, `description` its help text, and `emptyMessage` the
+ * canvas preview when the source resolves to nothing.
+ */
+const DYNAMIC_SOURCES = {
+	[ ATTACHED_MEDIA ]: {
+		// Short label for the entry affordance / future source chooser. Mirrors
+		// the "Attached images" media inserter category name.
+		title: __( 'Use attached images' ),
+		// Help text shown beneath the Source controls.
+		description: __( 'Images attached to the post.' ),
+		// Empty-state copy for the canvas preview.
+		emptyMessage: __( 'Images attached to the post will appear here.' ),
+	},
+};
+
+/**
+ * Returns the descriptor for a dynamic source, or `undefined` for an unknown or
+ * not-yet-implemented source.
+ *
+ * @param {?string} source The `dynamicContent.source` discriminator.
+ * @return {?Object} The source descriptor (`title`, `description`, `emptyMessage`).
+ */
+export function getDynamicSource( source ) {
+	return DYNAMIC_SOURCES[ source ];
+}
+
+/**
+ * Upper bound on the number of images a dynamic source resolves, until the
+ * gallery supports pagination. Kept in sync with the `posts_per_page` cap in
+ * `block_core_gallery_resolve_dynamic_source()`.
+ */
+export const MAX_IMAGES = 100;
+
+/**
+ * Maps a gallery's `dynamicContent` attribute to a query for the `attachment`
+ * entity (i.e. `/wp/v2/media` collection params), used to resolve the source to
+ * a list of media in the editor.
+ *
+ * The `source` key is the dispatch discriminator and `args` holds the
+ * source's parameters. This `{ source, args }` shape mirrors the Block
+ * Bindings metadata shape (`metadata.bindings.<key> = { source, args }`) so
+ * dynamic mode can migrate to an `innerBlocks` binding with minimal change.
+ * `args` keys are camelCase (the block-attribute convention, as used by the
+ * Query block's `query` attribute); each source's resolver maps them to the
+ * REST/transport names it needs. `core/attached-media` is a context-relative anchor
+ * resolved here to the REST `parent` param. The server-side counterpart is
+ * `block_core_gallery_resolve_dynamic_source()` in `index.php`.
+ *
+ * @param {Object} dynamicContent The gallery's `dynamicContent` attribute.
+ * @param {Object} context        Resolution context.
+ * @param {number} context.postId The current post ID.
+ * @return {Object|null} A `getEntityRecords` query, or `null` when the source
+ *                       cannot be resolved (unknown source or missing context).
+ */
+export function getSourceQuery( dynamicContent, { postId } ) {
+	const { source, args = {} } = dynamicContent ?? {};
+
+	switch ( source ) {
+		case ATTACHED_MEDIA:
+			if ( ! postId ) {
+				return null;
+			}
+			return {
+				parent: postId,
+				per_page: MAX_IMAGES,
+				// The gallery only accepts images, so constrain the source to
+				// image media (matching the server resolver). This keeps the
+				// editor preview in step with the rendered output for posts
+				// that also have non-image attachments.
+				media_type: 'image',
+				// Map the camelCase `args` to the REST-named media collection
+				// params. Unexpected values (only reachable via hand-edited
+				// markup) are coerced back to the defaults — mirroring the server
+				// resolver's allow list — so the editor preview stays in step with
+				// the frontend instead of issuing an invalid REST query.
+				orderby:
+					args.orderBy === 'date' || args.orderBy === 'title'
+						? args.orderBy
+						: DEFAULT_ORDERBY,
+				order:
+					args.order === 'asc' || args.order === 'desc'
+						? args.order
+						: DEFAULT_ORDER,
+			};
+	}
+
+	// Unknown or not-yet-implemented source.
+	return null;
+}

package/src/gallery/edit.js

@@ -17,6 +17,7 @@ import {
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	ToolbarDropdownMenu,
+	Button,
 } from '@wordpress/components';
 import {
 	store as blockEditorStore,
@@ -24,6 +25,7 @@ import {
 	InspectorControls,
 	useBlockProps,
 	useInnerBlocksProps,
+	useBlockEditingMode,
 	BlockControls,
 	MediaReplaceFlow,
 	useSettings,
@@ -31,7 +33,6 @@ import {
 import { useEffect, useMemo } from '@wordpress/element';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { View } from '@wordpress/primitives';
 import { createBlock } from '@wordpress/blocks';
 import { createBlobURL } from '@wordpress/blob';
 import { store as noticesStore } from '@wordpress/notices';
@@ -65,7 +66,10 @@ 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';
 
 const MAX_COLUMNS = 8;
 const LINK_OPTIONS = [
@@ -127,8 +131,20 @@ export default function GalleryEdit( props ) {
 		isSelected,
 		insertBlocksAfter,
 		isContentLocked,
+		context,
+		__unstableLayoutClassNames: layoutClassNames,
 	} = props;
 
+	const postId = context?.postId;
+	const postType = context?.postType;
+
+	// Entering dynamic mode is a structural change (it discards inner blocks and
+	// switches the block's mode), so the entry point is only offered when the
+	// block is fully editable — mirroring the dynamic view's "Edit images"
+	// toolbar control. Under a content lock the mode is `'contentOnly'`/
+	// `'disabled'`, where structural affordances are hidden.
+	const blockEditingMode = useBlockEditingMode();
+
 	const [ lightboxSetting, defaultRatios, themeRatios, showDefaultRatios ] =
 		useSettings(
 			'blocks.core/image.lightbox',
@@ -144,6 +160,7 @@ export default function GalleryEdit( props ) {
 		: LINK_OPTIONS;
 
 	const {
+		align,
 		navigationButtonType,
 		columns,
 		imageCrop,
@@ -206,15 +223,44 @@ export default function GalleryEdit( props ) {
 
 	const newImages = useGetNewImages( images, imageData );
 
-	// Check if there is at least one image with lightbox enabled
-	const hasLightboxImages = lightboxSetting?.enabled
-		? images.filter(
+	const hasImages = !! images.length;
+	const isDynamic = !! attributes.dynamicContent;
+
+	// Dynamic mode (resolving images from a source instead of inner blocks):
+	// source resolution, the editor-preview blocks, and the mode/ordering
+	// actions.
+	const dynamic = useDynamicGallery( {
+		attributes,
+		setAttributes,
+		clientId,
+		postId,
+		postType,
+	} );
+
+	// State that drives counts/size options should reflect the dynamic media
+	// when the gallery is in dynamic mode.
+	const displayedImageCount = isDynamic
+		? dynamic.dynamicMedia.length
+		: images.length;
+
+	// Check if there is at least one image with lightbox enabled. In dynamic
+	// mode the images inherit the gallery's link setting, so the lightbox is on
+	// when the gallery links images to the lightbox.
+	let hasLightboxImages;
+	if ( isDynamic ) {
+		hasLightboxImages = linkTo === LINK_DESTINATION_LIGHTBOX;
+	} else if ( lightboxSetting?.enabled ) {
+		hasLightboxImages =
+			images.filter(
 				( image ) =>
 					image.attributes?.lightbox?.enabled === undefined ||
 					image.attributes?.lightbox?.enabled === true
-		  ).length > 0
-		: images.filter( ( image ) => image.attributes.lightbox?.enabled )
+			).length > 0;
+	} else {
+		hasLightboxImages =
+			images.filter( ( image ) => image.attributes.lightbox?.enabled )
 				.length > 0;
+	}
 
 	const themeOptions = themeRatios?.map( ( { name, ratio } ) => ( {
 		label: name,
@@ -249,7 +295,7 @@ export default function GalleryEdit( props ) {
 	}, [ newImages ] );
 
 	const imageSizeOptions = useImageSizes(
-		imageData,
+		isDynamic ? dynamic.dynamicMedia : imageData,
 		isSelected,
 		getSettings
 	);
@@ -567,7 +613,6 @@ export default function GalleryEdit( props ) {
 		}
 	}, [ linkTo ] );
 
-	const hasImages = !! images.length;
 	const hasImageIds = hasImages && images.some( ( image ) => !! image.id );
 	const imagesUploading = images.some(
 		( img ) => ! img.id && img.url?.indexOf( 'blob:' ) === 0
@@ -578,24 +623,27 @@ export default function GalleryEdit( props ) {
 		disableMediaButtons: imagesUploading,
 		value: {},
 	};
-	const mediaPlaceholder = (
-		<MediaPlaceholder
-			handleUpload={ false }
-			icon={ sharedIcon }
-			labels={ {
-				title: __( 'Gallery' ),
-				instructions: PLACEHOLDER_TEXT,
-			} }
-			onSelect={ updateImages }
-			allowedTypes={ ALLOWED_MEDIA_TYPES }
-			multiple
-			onError={ onUploadError }
-			{ ...mediaPlaceholderProps }
-		/>
-	);
 
 	const blockProps = useBlockProps( {
-		className: clsx( className, 'has-nested-images' ),
+		className: clsx(
+			className,
+			'has-nested-images',
+			// In dynamic mode there are no inner blocks and the gallery isn't
+			// rendered through the `Gallery` component, so the classes that
+			// component normally composes onto the `<figure>` (see `gallery.js`)
+			// must be added here to keep the preview's flex/crop layout matching
+			// the static gallery and the frontend.
+			isDynamic && [
+				layoutClassNames,
+				'blocks-gallery-grid',
+				{
+					[ `align${ align }` ]: align,
+					[ `columns-${ columns }` ]: columns !== undefined,
+					'columns-default': columns === undefined,
+					'is-cropped': imageCrop,
+				},
+			]
+		),
 	} );
 
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
@@ -603,16 +651,59 @@ export default function GalleryEdit( props ) {
 		directInsert: true,
 		orientation: 'horizontal',
 		renderAppender: false,
+		// In dynamic mode nothing may be inserted: the images are resolved from
+		// the source, not authored as inner blocks. `allowedBlocks: []` enforces
+		// this in every context — unlike `templateLock: 'all'`, it isn't relaxed
+		// to `contentOnly` by a content-locked ancestor — so it blocks insertion
+		// and drag-and-drop (via `canInsertBlockType`). It's also what opts the
+		// gallery out of the List View: a block that can't be inserted into and
+		// has no inner blocks has nothing to navigate or add (see
+		// `shouldRenderBlockListView`). This reaches the block's list settings
+		// only while the inner blocks are mounted, which is why the dynamic view
+		// still renders the (empty) inner blocks.
+		allowedBlocks: isDynamic ? EMPTY_ARRAY : undefined,
 	} );
 
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
-	if ( ! hasImages ) {
+	if ( ! hasImages && ! isDynamic ) {
 		return (
-			<View { ...innerBlocksProps }>
+			<div { ...innerBlocksProps }>
 				{ innerBlocksProps.children }
-				{ mediaPlaceholder }
-			</View>
+				<MediaPlaceholder
+					handleUpload={ false }
+					icon={ sharedIcon }
+					labels={ {
+						title: __( 'Gallery' ),
+						instructions: PLACEHOLDER_TEXT,
+					} }
+					onSelect={ updateImages }
+					allowedTypes={ ALLOWED_MEDIA_TYPES }
+					multiple
+					onError={ onUploadError }
+					{ ...mediaPlaceholderProps }
+				>
+					{ /*
+					 * Entry into dynamic mode. Gated on the editing mode so it's
+					 * hidden in content-only editing (where this structural change
+					 * isn't allowed), but intentionally not hidden by
+					 * `canUseDynamicSource` the way the inspector is (see
+					 * `dynamic-gallery.js`): even with no
+					 * post type to preview against, the source still resolves at
+					 * render time via `get_the_ID()` (see `index.php`) — e.g. in a
+					 * template part or pattern shown on a singular page.
+					 */ }
+					{ blockEditingMode === 'default' && (
+						<Button
+							__next40pxDefaultSize
+							variant="secondary"
+							onClick={ dynamic.enableDynamicMode }
+						>
+							{ getDynamicSource( ATTACHED_MEDIA ).title }
+						</Button>
+					) }
+				</MediaPlaceholder>
+			</div>
 		);
 	}
 
@@ -621,6 +712,11 @@ export default function GalleryEdit( props ) {
 	return (
 		<>
 			<InspectorControls>
+				<GallerySourcePanel
+					dynamic={ dynamic }
+					dropdownMenuProps={ dropdownMenuProps }
+					hasImages={ hasImages }
+				/>
 				<ToolsPanel
 					label={ __( 'Settings' ) }
 					resetAll={ () => {
@@ -643,12 +739,12 @@ export default function GalleryEdit( props ) {
 					} }
 					dropdownMenuProps={ dropdownMenuProps }
 				>
-					{ images.length > 1 && (
+					{ displayedImageCount > 1 && (
 						<ToolsPanelItem
 							isShownByDefault
 							label={ __( 'Columns' ) }
 							hasValue={ () =>
-								!! columns && columns !== images.length
+								!! columns && columns !== displayedImageCount
 							}
 							onDeselect={ () => setColumnsNumber( undefined ) }
 						>
@@ -657,13 +753,17 @@ export default function GalleryEdit( props ) {
 								value={
 									columns
 										? columns
-										: defaultColumnsNumber( images.length )
+										: defaultColumnsNumber(
+												displayedImageCount
+										  )
 								}
 								onChange={ setColumnsNumber }
 								min={ 1 }
-								max={ Math.min( MAX_COLUMNS, images.length ) }
+								max={ Math.min(
+									MAX_COLUMNS,
+									displayedImageCount
+								) }
 								required
-								__next40pxDefaultSize
 							/>
 						</ToolsPanelItem>
 					) }
@@ -687,7 +787,6 @@ export default function GalleryEdit( props ) {
 								options={ imageSizeOptions }
 								onChange={ updateImagesSize }
 								hideCancelButton
-								size="__unstable-large"
 							/>
 						</ToolsPanelItem>
 					) }
@@ -743,7 +842,6 @@ export default function GalleryEdit( props ) {
 							isShownByDefault
 						>
 							<SelectControl
-								__next40pxDefaultSize
 								label={ __( 'Aspect ratio' ) }
 								help={ __(
 									'Set a consistent aspect ratio for all images in the gallery.'
@@ -774,7 +872,6 @@ export default function GalleryEdit( props ) {
 									} )
 								}
 								isBlock
-								__next40pxDefaultSize
 								help={ __(
 									'Adjust the appearance of buttons in the lightbox.'
 								) }
@@ -828,7 +925,7 @@ export default function GalleryEdit( props ) {
 				</ToolbarDropdownMenu>
 			</BlockControls>
 			<>
-				{ ! multiGallerySelection && (
+				{ ! multiGallerySelection && ! isDynamic && (
 					<BlockControls group="other">
 						<MediaReplaceFlow
 							allowedTypes={ ALLOWED_MEDIA_TYPES }
@@ -844,20 +941,29 @@ export default function GalleryEdit( props ) {
 						/>
 					</BlockControls>
 				) }
-				<GapStyles
-					blockGap={ attributes.style?.spacing?.blockGap }
+				<GalleryGapCustomProperties
+					style={ attributes.style }
 					clientId={ clientId }
 				/>
 			</>
-			<Gallery
-				{ ...props }
-				isContentLocked={ isContentLocked }
-				images={ images }
-				mediaPlaceholder={ ! hasImages ? mediaPlaceholder : undefined }
-				blockProps={ innerBlocksProps }
-				insertBlocksAfter={ insertBlocksAfter }
-				multiGallerySelection={ multiGallerySelection }
-			/>
+			{ isDynamic ? (
+				<GalleryDynamicView
+					{ ...props }
+					dynamic={ dynamic }
+					blockProps={ blockProps }
+					innerBlocksProps={ innerBlocksProps }
+					multiGallerySelection={ multiGallerySelection }
+				/>
+			) : (
+				<Gallery
+					{ ...props }
+					isContentLocked={ isContentLocked }
+					images={ images }
+					blockProps={ innerBlocksProps }
+					insertBlocksAfter={ insertBlocksAfter }
+					multiGallerySelection={ multiGallerySelection }
+				/>
+			) }
 		</>
 	);
 }

package/src/gallery/editor.scss

@@ -17,10 +17,6 @@
 		flex: 0 0 100%;
 	}
 
-	> .blocks-gallery-media-placeholder-wrapper {
-		flex-basis: 100%;
-	}
-
 	// @todo this deserves a refactor, by being moved to the toolbar.
 	.block-editor-media-placeholder.is-appender {
 		.components-placeholder__label {
@@ -118,3 +114,35 @@
 	justify-content: flex-end;
 	gap: $grid-unit-15;
 }
+
+// The Source controls are a plain (non-ToolsPanelItem) child of the Source
+// ToolsPanel, so they span both grid columns. The description sits above the
+// button so the button is the last element, keeping the same vertical rhythm to
+// the next control (control -> grid row-gap -> next label) as the other rows.
+.wp-block-gallery__source-settings {
+	grid-column: 1 / -1;
+	display: flex;
+	flex-direction: column;
+	gap: $grid-unit-10;
+
+	// Muted help-text styling for the source description.
+	.wp-block-gallery__source-description {
+		margin: 0;
+		color: $gray-700;
+		font-size: $helptext-font-size;
+	}
+
+	// Full-width action button, matching other inspector buttons (e.g. the
+	// "Apply globally" control).
+	.components-button {
+		justify-content: center;
+		width: 100%;
+	}
+}
+
+// The "showing the first N" notice is a plain (non-ToolsPanelItem) child of the
+// Source ToolsPanel, so span both grid columns rather than defaulting to one.
+.wp-block-gallery__source-notice {
+	grid-column: 1 / -1;
+	margin: 0;
+}

package/src/gallery/gallery.js

@@ -7,7 +7,6 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { View } from '@wordpress/primitives';
 
 /**
  * Internal dependencies
@@ -19,7 +18,6 @@ export default function Gallery( props ) {
 		attributes,
 		isSelected,
 		setAttributes,
-		mediaPlaceholder,
 		insertBlocksAfter,
 		blockProps,
 		__unstableLayoutClassNames: layoutClassNames,
@@ -45,11 +43,6 @@ export default function Gallery( props ) {
 			) }
 		>
 			{ blockProps.children }
-			{ isSelected && ! blockProps.children && (
-				<View className="blocks-gallery-media-placeholder-wrapper">
-					{ mediaPlaceholder }
-				</View>
-			) }
 			<Caption
 				attributes={ attributes }
 				setAttributes={ setAttributes }

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 } );
 

package/src/gallery/index.js

@@ -12,6 +12,7 @@ import edit from './edit';
 import metadata from './block.json';
 import save from './save';
 import transforms from './transforms';
+import variations from './variations';
 
 const { name } = metadata;
 
@@ -39,6 +40,7 @@ export const settings = {
 		],
 	},
 	transforms,
+	variations,
 	edit,
 	save,
 	deprecated,