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

package/src/gallery/dynamic-gallery.js

@@ -74,14 +74,44 @@ function OrderControl( { orderby, order, onChange } ) {
 	);
 }
 
+/**
+ * Confirmation for leaving dynamic mode, shown from both the block toolbar and
+ * the Source panel so the two entry points explain the change identically.
+ *
+ * Detaching keeps the images the gallery currently shows but breaks the link to
+ * its source, so it's worth confirming — mirroring the dialog `GallerySourcePanel`
+ * shows for the opposite direction.
+ *
+ * @param {Object}   props
+ * @param {Function} props.onConfirm Called when the user confirms detaching.
+ * @param {Function} props.onCancel  Called when the user dismisses the dialog.
+ */
+function DetachGalleryDialog( { onConfirm, onCancel } ) {
+	return (
+		<ConfirmDialog
+			isOpen
+			title={ __( 'Detach Gallery' ) }
+			__experimentalHideHeader={ false }
+			confirmButtonText={ __( 'Detach' ) }
+			onConfirm={ onConfirm }
+			onCancel={ onCancel }
+			size="medium"
+		>
+			{ __(
+				'The gallery displays the images attached to the post. Detaching will enable you to add, delete, or reorder images. However, new attachments will no longer be added automatically.'
+			) }
+		</ConfirmDialog>
+	);
+}
+
 /**
  * The Gallery block's "Source" inspector panel.
  *
- * In dynamic mode it shows the resolved source, a control to convert back to
- * individual images, and the source ordering. In static mode it offers the
- * entry point into dynamic mode — and, since switching discards any hand-added
- * images, owns the confirmation dialog for that one-way change. Rendered inside
- * the block's `InspectorControls`, alongside the Settings panel.
+ * In dynamic mode it shows the resolved source, a control to detach the gallery
+ * from it, and the source ordering. In static mode it offers the entry point
+ * into dynamic mode. Either direction is a one-way change, so both are behind a
+ * confirmation dialog this panel owns. Rendered inside the block's
+ * `InspectorControls`, alongside the Settings panel.
  *
  * @param {Object}  props
  * @param {Object}  props.dynamic           The `useDynamicGallery` result.
@@ -110,6 +140,7 @@ export function GallerySourcePanel( {
 	const isDynamic = !! dynamicContent;
 
 	const [ isConfirming, setIsConfirming ] = useState( false );
+	const [ isConfirmingDetach, setIsConfirmingDetach ] = useState( false );
 
 	// Entering dynamic mode discards any hand-added images, so confirm first
 	// when there are images to lose; otherwise switch straight away.
@@ -123,63 +154,76 @@ export function GallerySourcePanel( {
 
 	if ( isDynamic ) {
 		return (
-			<ToolsPanel
-				label={ __( 'Source' ) }
-				resetAll={ resetSource }
-				dropdownMenuProps={ dropdownMenuProps }
-			>
-				<div className="wp-block-gallery__source-settings">
-					<p className="wp-block-gallery__source-description">
-						{ sourceDescriptor?.description ??
-							__( 'Dynamic images.' ) }
-					</p>
-					<Button
-						__next40pxDefaultSize
-						variant="secondary"
-						onClick={ convertToStatic }
-						// Guard the race where the media is still resolving:
-						// converting now would map over an incomplete (or empty)
-						// list and produce a gallery missing images.
-						disabled={ isResolvingDynamic }
-						accessibleWhenDisabled
-					>
-						{ __( 'Convert to individual images' ) }
-					</Button>
-				</div>
-				{ hasMoreImagesThanCap && (
-					<Notice
-						className="wp-block-gallery__source-notice"
-						status="warning"
-						isDismissible={ false }
-					>
-						{ sprintf(
-							/* translators: 1: number of images shown. 2: total number of matching images. */
-							__(
-								'Only the first %1$d of %2$d images will be displayed.'
-							),
-							MAX_IMAGES,
-							dynamicMediaTotal
-						) }
-					</Notice>
-				) }
-				<ToolsPanelItem
-					isShownByDefault
-					label={ __( 'Order by' ) }
-					hasValue={ () =>
-						sourceOrderby !== DEFAULT_ORDERBY ||
-						sourceOrder !== DEFAULT_ORDER
-					}
-					onDeselect={ () => setSourceOrder( undefined, undefined ) }
+			<>
+				<ToolsPanel
+					label={ __( 'Source' ) }
+					resetAll={ resetSource }
+					dropdownMenuProps={ dropdownMenuProps }
 				>
-					<OrderControl
-						orderby={ sourceOrderby }
-						order={ sourceOrder }
-						onChange={ ( { orderby, order } ) =>
-							setSourceOrder( orderby, order )
+					<div className="wp-block-gallery__source-settings">
+						<p className="wp-block-gallery__source-description">
+							{ sourceDescriptor?.description ??
+								__( 'Dynamic images.' ) }
+						</p>
+						<Button
+							__next40pxDefaultSize
+							variant="secondary"
+							onClick={ () => setIsConfirmingDetach( true ) }
+							// Guard the race where the media is still resolving:
+							// detaching now would map over an incomplete (or
+							// empty) list and produce a gallery missing images.
+							disabled={ isResolvingDynamic }
+							accessibleWhenDisabled
+						>
+							{ __( 'Detach Gallery' ) }
+						</Button>
+					</div>
+					{ hasMoreImagesThanCap && (
+						<Notice
+							className="wp-block-gallery__source-notice"
+							status="warning"
+							isDismissible={ false }
+						>
+							{ sprintf(
+								/* translators: 1: number of images shown. 2: total number of matching images. */
+								__(
+									'Only the first %1$d of %2$d images will be displayed.'
+								),
+								MAX_IMAGES,
+								dynamicMediaTotal
+							) }
+						</Notice>
+					) }
+					<ToolsPanelItem
+						isShownByDefault
+						label={ __( 'Order by' ) }
+						hasValue={ () =>
+							sourceOrderby !== DEFAULT_ORDERBY ||
+							sourceOrder !== DEFAULT_ORDER
+						}
+						onDeselect={ () =>
+							setSourceOrder( undefined, undefined )
 						}
+					>
+						<OrderControl
+							orderby={ sourceOrderby }
+							order={ sourceOrder }
+							onChange={ ( { orderby, order } ) =>
+								setSourceOrder( orderby, order )
+							}
+						/>
+					</ToolsPanelItem>
+				</ToolsPanel>
+				{ isConfirmingDetach && (
+					<DetachGalleryDialog
+						onConfirm={ () => {
+							convertToStatic();
+							setIsConfirmingDetach( false );
+						} }
+						onCancel={ () => setIsConfirmingDetach( false ) }
 					/>
-				</ToolsPanelItem>
-			</ToolsPanel>
+				) }
+			</>
 		);
 	}
 
@@ -266,7 +310,8 @@ function GalleryImagesPreview( { imageBlocks } ) {
 /**
  * Renders a dynamic-mode gallery on the canvas:
  *
- * - a block-toolbar control to convert back to individual images;
+ * - a block-toolbar control to detach the gallery from its source, confirmed in
+ *   a dialog;
  * - the gallery `<figure>` wrapper holding a non-editable preview of the
  *   resolved media (or a placeholder while resolving / when nothing is found),
  *   with the gallery's provided context so the previewed images inherit
@@ -306,13 +351,15 @@ export function GalleryDynamicView( {
 		convertToStatic,
 	} = dynamic;
 
-	// Converting to a static gallery materializes editable inner blocks, which
-	// is a structural change. Only offer it when the block is fully editable:
+	// Detaching the gallery materializes editable inner blocks, which is a
+	// structural change. Only offer it when the block is fully editable:
 	// under a content lock (e.g. inside a `contentOnly` group) the editing mode
 	// is `'contentOnly'`/`'disabled'`, where structural toolbar controls are
 	// hidden and the conversion shouldn't be possible.
 	const blockEditingMode = useBlockEditingMode();
 
+	const [ isConfirmingDetach, setIsConfirmingDetach ] = useState( false );
+
 	// Empty-state copy for the preview. Framed as forward-looking ("… will appear
 	// here") rather than as an error, since the same empty result covers both a
 	// post with no matching images and a template with no post in context yet —
@@ -326,18 +373,30 @@ export function GalleryDynamicView( {
 	return (
 		<>
 			{ blockEditingMode === 'default' && (
-				<BlockControls group="other">
-					<ToolbarButton
-						onClick={ convertToStatic }
-						// Same guard as the inspector's "Convert to individual
-						// images": both call `convertToStatic`, which would map over
-						// a still-resolving (or empty) media list. (`ToolbarButton`
-						// stays focusable when disabled by default.)
-						disabled={ isResolvingDynamic }
-					>
-						{ __( 'Convert to images' ) }
-					</ToolbarButton>
-				</BlockControls>
+				<>
+					<BlockControls group="other">
+						<ToolbarButton
+							onClick={ () => setIsConfirmingDetach( true ) }
+							// Same guard as the inspector's "Detach Gallery": both end in
+							// `convertToStatic`, which would map over a
+							// still-resolving (or empty) media list.
+							// (`ToolbarButton` stays focusable when disabled by
+							// default.)
+							disabled={ isResolvingDynamic }
+						>
+							{ __( 'Detach' ) }
+						</ToolbarButton>
+					</BlockControls>
+					{ isConfirmingDetach && (
+						<DetachGalleryDialog
+							onConfirm={ () => {
+								convertToStatic();
+								setIsConfirmingDetach( false );
+							} }
+							onCancel={ () => setIsConfirmingDetach( false ) }
+						/>
+					) }
+				</>
 			) }
 			<figure { ...blockProps }>
 				{ dynamicImageBlocks.length ? (

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

package/src/gallery/index.php

@@ -52,6 +52,41 @@ function block_core_gallery_render_context( $context, $parsed_block ) {
 
 add_filter( 'render_block_context', 'block_core_gallery_render_context', 10, 2 );
 
+/**
+ * Returns the column gap value used for Gallery image width calculations.
+ *
+ * @since 7.1.0
+ *
+ * @param string|array|null $gap          Gallery block gap value.
+ * @param string            $fallback_gap Fallback gap value.
+ * @return string Gallery column gap value.
+ */
+function block_core_gallery_get_column_gap_value( $gap, $fallback_gap ) {
+	if ( is_array( $gap ) ) {
+		$gap = $gap['left'] ?? $fallback_gap;
+	}
+
+	// Make sure $gap is a string to avoid PHP 8.1 deprecation error in preg_match() when the value is null.
+	$gap = is_string( $gap ) ? $gap : '';
+
+	// Skip if gap value contains unsupported characters.
+	// Regex for CSS value borrowed from `safecss_filter_attr`, and used here
+	// because we only want to match against the value, not the CSS attribute.
+	$gap = $gap && preg_match( '%[\\\(&=}]|/\*%', $gap ) ? null : $gap;
+
+	// Get spacing CSS variable from preset value if provided.
+	if ( is_string( $gap ) && str_contains( $gap, 'var:preset|spacing|' ) ) {
+		$index_to_splice = strrpos( $gap, '|' ) + 1;
+		$slug            = _wp_to_kebab_case( substr( $gap, $index_to_splice ) );
+		$gap             = "var(--wp--preset--spacing--$slug)";
+	}
+
+	$gap_column = ( null !== $gap && '' !== $gap ) ? $gap : $fallback_gap;
+
+	// The unstable gallery gap calculation requires a real value (such as `0px`) and not `0`.
+	return '0' === $gap_column ? '0px' : $gap_column;
+}
+
 /**
  * Resolves a Gallery block's `dynamicContent` to an ordered list of image
  * attachment IDs.
@@ -272,6 +307,8 @@ function block_core_gallery_render_dynamic_image( $attachment_id, $attributes, $
  * @return string The content of the block being rendered.
  */
 function block_core_gallery_render( $attributes, $content, $block ) {
+	static $global_styles = null;
+
 	// In dynamic mode the gallery's images are resolved at render time instead of
 	// being authored as inner blocks, so `save.js` persists at most the
 	// gallery-level caption — a bare `<figcaption>`, or nothing when there is no
@@ -345,36 +382,15 @@ function block_core_gallery_render( $attributes, $content, $block ) {
 	// the current gap setting in order to maintain the number of flex columns
 	// so a css var is added to allow this.
 
-	$gap = $attributes['style']['spacing']['blockGap'] ?? null;
-	// Skip if gap value contains unsupported characters.
-	// Regex for CSS value borrowed from `safecss_filter_attr`, and used here
-	// because we only want to match against the value, not the CSS attribute.
-	if ( is_array( $gap ) ) {
-		foreach ( $gap as $key => $value ) {
-			// Make sure $value is a string to avoid PHP 8.1 deprecation error in preg_match() when the value is null.
-			$value = is_string( $value ) ? $value : '';
-			$value = $value && preg_match( '%[\\\(&=}]|/\*%', $value ) ? null : $value;
-
-			// Get spacing CSS variable from preset value if provided.
-			if ( is_string( $value ) && str_contains( $value, 'var:preset|spacing|' ) ) {
-				$index_to_splice = strrpos( $value, '|' ) + 1;
-				$slug            = _wp_to_kebab_case( substr( $value, $index_to_splice ) );
-				$value           = "var(--wp--preset--spacing--$slug)";
-			}
-
-			$gap[ $key ] = $value;
-		}
-	} else {
-		// Make sure $gap is a string to avoid PHP 8.1 deprecation error in preg_match() when the value is null.
-		$gap = is_string( $gap ) ? $gap : '';
-		$gap = $gap && preg_match( '%[\\\(&=}]|/\*%', $gap ) ? null : $gap;
-
-		// Get spacing CSS variable from preset value if provided.
-		if ( is_string( $gap ) && str_contains( $gap, 'var:preset|spacing|' ) ) {
-			$index_to_splice = strrpos( $gap, '|' ) + 1;
-			$slug            = _wp_to_kebab_case( substr( $gap, $index_to_splice ) );
-			$gap             = "var(--wp--preset--spacing--$slug)";
-		}
+	$style_attr = is_array( $attributes['style'] ?? null )
+		? $attributes['style']
+		: array();
+	if (
+		defined( 'IS_GUTENBERG_PLUGIN' ) &&
+		IS_GUTENBERG_PLUGIN &&
+		function_exists( 'gutenberg_resolve_style_state_aliases' )
+	) {
+		$style_attr = gutenberg_resolve_style_state_aliases( $style_attr, 'core/gallery' );
 	}
 
 	$unique_gallery_classname = wp_unique_id( 'wp-block-gallery-' );
@@ -385,31 +401,75 @@ function block_core_gallery_render( $attributes, $content, $block ) {
 	// --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.
 	$fallback_gap = 'var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) )';
-	$gap_value    = $gap ? $gap : $fallback_gap;
-	$gap_column   = $gap_value;
 
-	if ( is_array( $gap_value ) ) {
-		$gap_row    = $gap_value['top'] ?? $fallback_gap;
-		$gap_column = $gap_value['left'] ?? $fallback_gap;
-		$gap_value  = $gap_row === $gap_column ? $gap_row : $gap_row . ' ' . $gap_column;
+	if ( null === $global_styles ) {
+		$global_styles = function_exists( 'wp_get_global_styles' ) ? wp_get_global_styles() : array();
 	}
 
-	// The unstable gallery gap calculation requires a real value (such as `0px`) and not `0`.
-	if ( '0' === $gap_column ) {
-		$gap_column = '0px';
-	}
-
-	// Set the CSS variable to the column value, and the `gap` property to the combined gap value.
+	$global_gallery_styles = $global_styles['blocks']['core/gallery'] ?? array();
+	$global_gallery_gap    = $global_gallery_styles['spacing']['blockGap'] ?? $fallback_gap;
+	$has_block_gap         = is_array( $style_attr['spacing'] ?? null ) && array_key_exists( 'blockGap', $style_attr['spacing'] );
+	// Prefer the block's own gap value, then Gallery global styles. Missing
+	// values fall back to the Gallery blockGap default.
+	$block_gap  = $has_block_gap
+		? $style_attr['spacing']['blockGap']
+		: $global_gallery_gap;
+	$gap_column = block_core_gallery_get_column_gap_value( $block_gap, $fallback_gap );
+
+	// Set the CSS variable to the column value for Gallery's flex width calculations.
 	$gallery_styles = array(
 		array(
 			'selector'     => ".wp-block-gallery.{$unique_gallery_classname}",
 			'declarations' => array(
 				'--wp--style--unstable-gallery-gap' => $gap_column,
-				'gap'                               => $gap_value,
 			),
 		),
 	);
 
+	$global_settings          = wp_get_global_settings();
+	$viewport_settings        = $global_settings['viewport'] ?? null;
+	$responsive_media_queries = array();
+	foreach ( array( 'WP_Theme_JSON_Gutenberg', 'WP_Theme_JSON' ) as $theme_json_class_name ) {
+		if ( method_exists( $theme_json_class_name, 'get_viewport_media_queries' ) ) {
+			$responsive_media_queries = $theme_json_class_name::get_viewport_media_queries( $viewport_settings );
+			break;
+		}
+	}
+
+	foreach ( $responsive_media_queries as $breakpoint => $media_query ) {
+		$viewport_style                = $style_attr[ $breakpoint ] ?? null;
+		$has_viewport_block_gap        = is_array( $viewport_style ) &&
+			is_array( $viewport_style['spacing'] ?? null ) &&
+			array_key_exists( 'blockGap', $viewport_style['spacing'] );
+		$has_global_viewport_block_gap = is_array( $global_gallery_styles[ $breakpoint ]['spacing'] ?? null ) &&
+			array_key_exists( 'blockGap', $global_gallery_styles[ $breakpoint ]['spacing'] );
+
+		// 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.
+		if ( $has_viewport_block_gap ) {
+			$viewport_gap = $viewport_style['spacing']['blockGap'];
+		} elseif ( ! $has_block_gap && $has_global_viewport_block_gap ) {
+			$viewport_gap = $global_gallery_styles[ $breakpoint ]['spacing']['blockGap'];
+		} else {
+			continue;
+		}
+
+		if ( null === $viewport_gap ) {
+			continue;
+		}
+
+		$gallery_styles[] = array(
+			'selector'     => ".wp-block-gallery.{$unique_gallery_classname}",
+			'declarations' => array(
+				'--wp--style--unstable-gallery-gap' => block_core_gallery_get_column_gap_value(
+					$viewport_gap,
+					$fallback_gap
+				),
+			),
+			'rules_group'  => $media_query,
+		);
+	}
+
 	wp_style_engine_get_stylesheet_from_css_rules(
 		$gallery_styles,
 		array( 'context' => 'block-supports' )

package/src/gallery/use-dynamic-gallery.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useMemo } from '@wordpress/element';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { createBlock } from '@wordpress/blocks';
@@ -122,7 +122,9 @@ export default function useDynamicGallery( {
 	const sourceOrderby = dynamicContent?.args?.orderBy ?? DEFAULT_ORDERBY;
 	const sourceOrder = dynamicContent?.args?.order ?? DEFAULT_ORDER;
 
-	const { replaceInnerBlocks } = useDispatch( blockEditorStore );
+	const registry = useRegistry();
+	const { replaceInnerBlocks, __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
 
 	// Resolve the configured source to a media query. `null` (static mode, or an
 	// unresolvable source) short-circuits the select below so no request fires.
@@ -208,21 +210,34 @@ export default function useDynamicGallery( {
 	// for the pre-innerBlocks format (see `deprecated.js`/`transforms.js`), empty
 	// on any gallery reachable here.
 	function enableDynamicMode() {
-		setAttributes( { dynamicContent: { source: ATTACHED_MEDIA } } );
-		replaceInnerBlocks( clientId, [] );
+		// Batch the attribute change and the inner-block reset into a single
+		// undo level: they're two halves of one mode switch, so one undo should
+		// revert both. Marking the second dispatch non-persistent stops it from
+		// opening a second undo level, which would otherwise leave the gallery
+		// in a half-switched state (dynamic source set, images still present).
+		registry.batch( () => {
+			setAttributes( { dynamicContent: { source: ATTACHED_MEDIA } } );
+			__unstableMarkNextChangeAsNotPersistent();
+			replaceInnerBlocks( clientId, [] );
+		} );
 	}
 
 	// "Pins" a dynamic gallery: materializes the currently-resolved media as
 	// real, editable image blocks and leaves dynamic mode.
 	function convertToStatic() {
-		// Build fresh blocks rather than reusing the preview's `dynamicImageBlocks`
-		// so the materialized inner blocks get their own client IDs, distinct from
-		// the (disabled) preview instances.
-		replaceInnerBlocks(
-			clientId,
-			buildImageBlocks( dynamicMedia, imageAttributes )
-		);
-		setAttributes( { dynamicContent: undefined } );
+		// Batch the inner-block materialization and the attribute change into a
+		// single undo level so one undo reverts the whole conversion (see
+		// `enableDynamicMode`). Build fresh blocks rather than reusing the
+		// preview's `dynamicImageBlocks` so the materialized inner blocks get
+		// their own client IDs, distinct from the (disabled) preview instances.
+		registry.batch( () => {
+			replaceInnerBlocks(
+				clientId,
+				buildImageBlocks( dynamicMedia, imageAttributes )
+			);
+			__unstableMarkNextChangeAsNotPersistent();
+			setAttributes( { dynamicContent: undefined } );
+		} );
 	}
 
 	// Updates the source ordering within `dynamicContent.args`. Passing

package/src/group/transforms.js

@@ -1,10 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	createBlock,
-	__experimentalCloneSanitizedBlock,
-} from '@wordpress/blocks';
+import { createBlock, cloneSanitizedBlock } from '@wordpress/blocks';
 
 const transforms = {
 	from: [
@@ -33,7 +30,7 @@ const transforms = {
 				// are removed both from their original location and within the
 				// new group block.
 				const groupInnerBlocks = blocks.map( ( block ) =>
-					__experimentalCloneSanitizedBlock( block )
+					cloneSanitizedBlock( block )
 				);
 
 				return createBlock(