@wordpress/block-library 10.2.0 → 10.4.0

package/src/gallery/dynamic-gallery.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { __, sprintf } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import {
@@ -21,10 +18,6 @@ import {
 	useBlockEditingMode,
 	__experimentalUseBlockPreview as useBlockPreview,
 } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
 import { sharedIcon } from './shared-icon';
 import { Caption } from '../utils/caption';
 import { DEFAULT_ORDERBY, DEFAULT_ORDER, MAX_IMAGES } from './dynamic-source';
@@ -74,14 +67,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 +133,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 +147,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 +303,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 +344,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 +366,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/dynamic-source.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
 
 /**

package/src/gallery/edit.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import {
 	SelectControl,
 	ToggleControl,
@@ -43,10 +36,6 @@ import {
 	linkOff,
 	fullscreen,
 } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
 import { sharedIcon } from './shared-icon';
 import { defaultColumnsNumber, pickRelevantMediaFiles } from './shared';
 import { getHrefAndDestination } from './utils';

package/src/gallery/gallery.js

@@ -1,16 +1,5 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import { Caption } from '../utils/caption';
 
 export default function Gallery( props ) {

package/src/gallery/gap-styles.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import {
 	__experimentalGetGapCSSValue as getGapCSSValue,
 	privateApis as blockEditorPrivateApis,
@@ -10,10 +7,6 @@ import {
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { privateApis as globalStylesEnginePrivateApis } from '@wordpress/global-styles-engine';
-
-/**
- * Internal dependencies
- */
 import { unlock } from '../lock-unlock';
 
 const { getResponsiveMediaQueries } = unlock( globalStylesEnginePrivateApis );

package/src/gallery/index.js

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { gallery as icon } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
 import initBlock from '../utils/init-block';
 import deprecated from './deprecated';
 import edit from './edit';

package/src/gallery/init.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { init } from './';
 
 export default init();

package/src/gallery/save.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import {
 	RichText,
 	useBlockProps,

package/src/gallery/shared-icon.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { BlockIcon } from '@wordpress/block-editor';
 import { gallery as icon } from '@wordpress/icons';
 

package/src/gallery/test/dynamic-source.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { getSourceQuery } from '../dynamic-source';
 
 describe( 'getSourceQuery', () => {

package/src/gallery/test/transforms.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import {
 	createBlock,
 	getBlockTypes,
@@ -8,10 +5,6 @@ import {
 	switchToBlockType,
 	unregisterBlockType,
 } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
 import {
 	metadata as galleryMetadata,
 	settings as gallerySettings,

package/src/gallery/test/use-get-new-images.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import { render, screen } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
 import useGetNewImages from '../use-get-new-images';
 
 const TestComponent = ( { images, imageData } ) => {

package/src/gallery/transforms.js

@@ -1,13 +1,6 @@
-/**
- * WordPress dependencies
- */
 import { createBlock } from '@wordpress/blocks';
 import { createBlobURL } from '@wordpress/blob';
 import { addFilter } from '@wordpress/hooks';
-
-/**
- * Internal dependencies
- */
 import {
 	LINK_DESTINATION_ATTACHMENT,
 	LINK_DESTINATION_NONE,

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

@@ -1,15 +1,8 @@
-/**
- * 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';
-
-/**
- * Internal dependencies
- */
 import { pickRelevantMediaFiles } from './shared';
 import { getHrefAndDestination } from './utils';
 import { getUpdatedLinkTargetSettings } from '../image/utils';
@@ -122,7 +115,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 +203,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/gallery/use-get-media.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 

package/src/gallery/use-get-new-images.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { useMemo, useState } from '@wordpress/element';
 
 /**

package/src/gallery/use-image-sizes.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { useMemo } from '@wordpress/element';
 
 /**

package/src/gallery/utils.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import {
 	LINK_DESTINATION_ATTACHMENT,
 	LINK_DESTINATION_MEDIA,

package/src/gallery/variations.js

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import { ATTACHED_MEDIA } from './dynamic-source';
 
 const variations = [

package/src/group/block.json

@@ -19,7 +19,6 @@
 	},
 	"supports": {
 		"__experimentalOnEnter": true,
-		"__experimentalOnMerge": true,
 		"__experimentalSettings": true,
 		"align": [ "wide", "full" ],
 		"anchor": true,

package/src/group/deprecated.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import {
 	InnerBlocks,
 	getColorClassName,

package/src/group/edit.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	InnerBlocks,
@@ -12,10 +9,6 @@ import {
 } from '@wordpress/block-editor';
 import { useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import GroupPlaceHolder, { useShouldShowPlaceHolder } from './placeholder';
 import { unlock } from '../lock-unlock';
 

package/src/group/index.js

@@ -1,12 +1,5 @@
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
 import { group as icon } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
 import initBlock from '../utils/init-block';
 import deprecated from './deprecated';
 import edit from './edit';

package/src/group/init.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { init } from './';
 
 export default init();

package/src/group/placeholder.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { useSelect } from '@wordpress/data';
 import { useBlockProps } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';

package/src/group/save.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
 
 export default function save( { attributes: { tagName: Tag } } ) {

package/src/group/test/placeholder.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import { render } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
 import { useShouldShowPlaceHolder } from '../placeholder';
 
 describe( 'useShouldShowPlaceHolder', () => {

package/src/group/transforms.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { createBlock, cloneSanitizedBlock } from '@wordpress/blocks';
 
 const transforms = {

package/src/group/variations.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { __, _x } from '@wordpress/i18n';
 import { group, row, stack, grid } from '@wordpress/icons';