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

package/src/freeform/convert-to-blocks-button.js

@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { ToolbarButton } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { rawHandler, serialize } from '@wordpress/blocks';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+const ConvertToBlocksButton = ( { clientId } ) => {
+	const { replaceBlocks } = useDispatch( blockEditorStore );
+	const block = useSelect(
+		( select ) => {
+			return select( blockEditorStore ).getBlock( clientId );
+		},
+		[ clientId ]
+	);
+
+	return (
+		<ToolbarButton
+			onClick={ () =>
+				replaceBlocks(
+					block.clientId,
+					rawHandler( { HTML: serialize( block ) } )
+				)
+			}
+		>
+			{ __( 'Convert to blocks' ) }
+		</ToolbarButton>
+	);
+};
+
+export default ConvertToBlocksButton;

package/src/freeform/edit.js

@@ -7,7 +7,7 @@ import {
 	useBlockProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import {
 	Button,
 	Placeholder,
@@ -21,14 +21,13 @@ import { classic } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import MigrationNotice from './migration-notice';
+import ConvertToBlocksButton from './convert-to-blocks-button';
 import ModalEdit from './modal';
 
 export default function FreeformEdit( {
 	attributes,
 	setAttributes,
 	clientId,
-	onReplace,
 } ) {
 	const { content } = attributes;
 	const [ isOpen, setOpen ] = useState( false );
@@ -38,10 +37,16 @@ export default function FreeformEdit( {
 		( select ) => select( blockEditorStore ).canRemoveBlock( clientId ),
 		[ clientId ]
 	);
-	const { removeBlock } = useDispatch( blockEditorStore );
 
 	return (
 		<>
+			{ canRemove && (
+				<BlockControls>
+					<ToolbarGroup>
+						<ConvertToBlocksButton clientId={ clientId } />
+					</ToolbarGroup>
+				</BlockControls>
+			) }
 			<BlockControls>
 				<ToolbarGroup>
 					<ToolbarButton
@@ -53,12 +58,6 @@ export default function FreeformEdit( {
 				</ToolbarGroup>
 			</BlockControls>
 			<div { ...useBlockProps() }>
-				{ canRemove && content && (
-					<MigrationNotice
-						content={ content }
-						onReplace={ onReplace }
-					/>
-				) }
 				{ content ? (
 					<RawHTML>{ content }</RawHTML>
 				) : (
@@ -66,21 +65,12 @@ export default function FreeformEdit( {
 						icon={ <BlockIcon icon={ classic } /> }
 						label={ __( 'Classic' ) }
 						instructions={ __(
-							'The Classic block is being phased out. It’s recommended to use other blocks for the best editing experience.'
+							'Use the classic editor to add content.'
 						) }
 					>
-						{ canRemove && (
-							<Button
-								__next40pxDefaultSize
-								variant="primary"
-								onClick={ () => removeBlock( clientId ) }
-							>
-								{ __( 'Remove block' ) }
-							</Button>
-						) }
 						<Button
 							__next40pxDefaultSize
-							variant={ canRemove ? 'secondary' : 'primary' }
+							variant="primary"
 							onClick={ () => setOpen( true ) }
 						>
 							{ __( 'Edit contents' ) }

package/src/freeform/index.js

@@ -21,12 +21,4 @@ export const settings = {
 	save,
 };
 
-export const init = () => {
-	// Only expose the block in the inserter if the current post actually needs
-	// a classic block.
-	const supports = {
-		...metadata.supports,
-		inserter: !! window?.__needsClassicBlock,
-	};
-	return initBlock( { name, metadata, settings: { ...settings, supports } } );
-};
+export const init = () => initBlock( { name, metadata, settings } );

package/src/gallery/README.md

@@ -22,6 +22,7 @@ _Defined via the [`attributes`](https://developer.wordpress.org/block-editor/ref
 |-----------|------|---------|-------------|
 | `images` | `array` | `[]` | [Source](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `query`. [Selector](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `.blocks-gallery-item` |
 | `ids` | `array` | `[]` | — |
+| `dynamicContent` | `object` | — | — |
 | `navigationButtonType` | `string` | `"icon"` | [Enum](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#enum-validation): `icon`, `text`, `both` |
 | `shortCodeTransforms` | `array` | `[]` | — |
 | `columns` | `number` | — | — |
@@ -67,6 +68,8 @@ _Defined via the [`usesContext` and `providesContext`](https://developer.wordpre
 **Uses context:**
 
 - `galleryId`
+- `postId`
+- `postType`
 
 **Provides context:**
 

package/src/gallery/block.json

@@ -4,7 +4,7 @@
 	"name": "core/gallery",
 	"title": "Gallery",
 	"category": "media",
-	"usesContext": [ "galleryId" ],
+	"usesContext": [ "galleryId", "postId", "postType" ],
 	"allowedBlocks": [ "core/image" ],
 	"description": "Display multiple images in a rich gallery.",
 	"keywords": [ "images", "photos" ],
@@ -61,6 +61,9 @@
 			},
 			"default": []
 		},
+		"dynamicContent": {
+			"type": "object"
+		},
 		"navigationButtonType": {
 			"type": "string",
 			"default": "icon",

package/src/gallery/dynamic-gallery.js

@@ -0,0 +1,384 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import {
+	Button,
+	Notice,
+	PanelBody,
+	Placeholder,
+	SelectControl,
+	Spinner,
+	ToolbarButton,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalConfirmDialog as ConfirmDialog,
+} from '@wordpress/components';
+import {
+	BlockContextProvider,
+	BlockControls,
+	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';
+
+/**
+ * Ordering options for a dynamic gallery source. Each value is a composite
+ * `"orderby/order"` string mapping to the matching `/wp/v2/media` collection
+ * params. `menu_order` is deliberately omitted — it isn't a valid REST `orderby`
+ * value, so the editor preview couldn't reproduce it (see `dynamic-source.js`).
+ */
+const ORDER_OPTIONS = [
+	{ label: __( 'Newest to oldest' ), value: 'date/desc' },
+	{ label: __( 'Oldest to newest' ), value: 'date/asc' },
+	{
+		/* translators: Label for ordering images by title in ascending order. */
+		label: __( 'A → Z' ),
+		value: 'title/asc',
+	},
+	{
+		/* translators: Label for ordering images by title in descending order. */
+		label: __( 'Z → A' ),
+		value: 'title/desc',
+	},
+];
+
+/**
+ * "Order by" control for a dynamic gallery, mirroring the Query Loop block's
+ * `OrderControl`: a single `SelectControl` whose value composites `orderby` and
+ * `order`, split apart again on change.
+ *
+ * @param {Object}   props
+ * @param {string}   props.orderby  Current `orderby` value.
+ * @param {string}   props.order    Current `order` value (`asc`/`desc`).
+ * @param {Function} props.onChange Called with `{ orderby, order }` on change.
+ */
+function OrderControl( { orderby, order, onChange } ) {
+	return (
+		<SelectControl
+			label={ __( 'Order by' ) }
+			value={ `${ orderby }/${ order }` }
+			options={ ORDER_OPTIONS }
+			onChange={ ( value ) => {
+				const [ newOrderby, newOrder ] = value.split( '/' );
+				onChange( { orderby: newOrderby, order: newOrder } );
+			} }
+		/>
+	);
+}
+
+/**
+ * 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.
+ *
+ * @param {Object}  props
+ * @param {Object}  props.dynamic           The `useDynamicGallery` result.
+ * @param {Object}  props.dropdownMenuProps Shared ToolsPanel dropdown menu props.
+ * @param {boolean} props.hasImages         Whether the gallery has manually-added images.
+ */
+export function GallerySourcePanel( {
+	dynamic,
+	dropdownMenuProps,
+	hasImages,
+} ) {
+	const {
+		dynamicContent,
+		canUseDynamicSource,
+		sourceDescriptor,
+		sourceOrderby,
+		sourceOrder,
+		setSourceOrder,
+		convertToStatic,
+		enableDynamicMode,
+		resetSource,
+		isResolvingDynamic,
+		hasMoreImagesThanCap,
+		dynamicMediaTotal,
+	} = dynamic;
+	const isDynamic = !! dynamicContent;
+
+	const [ isConfirming, setIsConfirming ] = useState( false );
+
+	// Entering dynamic mode discards any hand-added images, so confirm first
+	// when there are images to lose; otherwise switch straight away.
+	function requestEnableDynamicMode() {
+		if ( hasImages ) {
+			setIsConfirming( true );
+		} else {
+			enableDynamicMode();
+		}
+	}
+
+	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 ) }
+				>
+					<OrderControl
+						orderby={ sourceOrderby }
+						order={ sourceOrder }
+						onChange={ ( { orderby, order } ) =>
+							setSourceOrder( orderby, order )
+						}
+					/>
+				</ToolsPanelItem>
+			</ToolsPanel>
+		);
+	}
+
+	// In static mode this panel is just an entry into dynamic mode, so hide it
+	// when there's no post type to preview against. This is intentionally
+	// stricter than the placeholder's entry button (see `edit.js`), which stays
+	// available anywhere because the source resolves at render time.
+	if ( ! canUseDynamicSource ) {
+		return null;
+	}
+
+	return (
+		<>
+			<PanelBody title={ __( 'Source' ) }>
+				<div className="wp-block-gallery__source-settings">
+					{ /*
+					 * Hardcoded on purpose: this single-source entry button (and
+					 * its confirm dialog below) is temporary. Once more sources
+					 * exist it becomes a "Choose source" select whose options read
+					 * from each source descriptor's `title`, with help text
+					 * carrying the per-source explanation this string does today.
+					 */ }
+					<Button
+						__next40pxDefaultSize
+						variant="secondary"
+						onClick={ requestEnableDynamicMode }
+					>
+						{ __( 'Use images attached to the post' ) }
+					</Button>
+				</div>
+			</PanelBody>
+			{ isConfirming && (
+				<ConfirmDialog
+					isOpen
+					title={ __( 'Use images attached to the post?' ) }
+					__experimentalHideHeader={ false }
+					confirmButtonText={ __( 'Use attached images' ) }
+					onConfirm={ () => {
+						enableDynamicMode();
+						setIsConfirming( false );
+					} }
+					onCancel={ () => setIsConfirming( false ) }
+					size="medium"
+				>
+					{ __(
+						'The images in this gallery will be replaced, but will remain in the media library.'
+					) }
+				</ConfirmDialog>
+			) }
+		</>
+	);
+}
+
+/**
+ * Renders the resolved image blocks as a read-only preview.
+ *
+ * `useBlockPreview` returns a `useDisabled` ref that makes its subtree inert, so
+ * previewed images (including any links) aren't interactive in the editor. The
+ * ref needs a real element, yet the images must stay flex children of the gallery
+ * `<figure>` and sit beside an editable caption. `display: contents` resolves
+ * this: the wrapper carries the ref but generates no box, so the image figures
+ * remain the figure's flex items and only they are disabled — the caption sibling
+ * stays editable. This relies on the gallery's image styles using descendant
+ * (not direct-child) selectors, which the box-less wrapper leaves intact.
+ *
+ * @param {Object}   props
+ * @param {Object[]} props.imageBlocks Non-persisted `core/image` blocks to preview.
+ */
+function GalleryImagesPreview( { imageBlocks } ) {
+	const { children, ref, className } = useBlockPreview( {
+		blocks: imageBlocks,
+	} );
+	return (
+		<div
+			ref={ ref }
+			className={ className }
+			style={ { display: 'contents' } }
+		>
+			{ children }
+		</div>
+	);
+}
+
+/**
+ * Renders a dynamic-mode gallery on the canvas:
+ *
+ * - a block-toolbar control to convert back to individual images;
+ * - 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
+ *   gallery-wide settings;
+ * - an editable gallery-level caption, alongside the read-only preview;
+ * - the (empty) inner blocks kept mounted so the container's `allowedBlocks: []`
+ *   keeps syncing to block list settings (which blocks insertion and hides the
+ *   List View).
+ *
+ * @param {Object}   props
+ * @param {Object}   props.dynamic               The `useDynamicGallery` result.
+ * @param {Object}   props.blockProps            The gallery's `useBlockProps()` result.
+ * @param {Object}   props.innerBlocksProps      The gallery's `useInnerBlocksProps()` result.
+ * @param {Object}   props.attributes            The gallery block attributes.
+ * @param {Function} props.setAttributes         The block's `setAttributes`.
+ * @param {boolean}  props.isSelected            Whether the gallery block is selected.
+ * @param {Function} props.insertBlocksAfter     Inserts blocks after the gallery.
+ * @param {boolean}  props.isContentLocked       Whether the gallery is content-locked.
+ * @param {boolean}  props.multiGallerySelection Whether multiple galleries are selected.
+ */
+export function GalleryDynamicView( {
+	dynamic,
+	blockProps,
+	innerBlocksProps,
+	attributes,
+	setAttributes,
+	isSelected,
+	insertBlocksAfter,
+	isContentLocked,
+	multiGallerySelection,
+} ) {
+	const {
+		sourceDescriptor,
+		dynamicImageBlocks,
+		galleryContext,
+		isResolvingDynamic,
+		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:
+	// 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();
+
+	// 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 —
+	// in either case the source simply resolves to nothing right now. The per-
+	// source wording comes from the source descriptor.
+	const emptyInstructions = isResolvingDynamic
+		? __( 'Loading images…' )
+		: sourceDescriptor?.emptyMessage ??
+		  __( 'Dynamic images will appear here.' );
+
+	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>
+			) }
+			<figure { ...blockProps }>
+				{ dynamicImageBlocks.length ? (
+					<BlockContextProvider value={ galleryContext }>
+						<GalleryImagesPreview
+							imageBlocks={ dynamicImageBlocks }
+						/>
+					</BlockContextProvider>
+				) : (
+					<Placeholder
+						icon={ sharedIcon }
+						label={ __( 'Gallery' ) }
+						instructions={ emptyInstructions }
+					>
+						{ isResolvingDynamic && <Spinner /> }
+					</Placeholder>
+				) }
+				<Caption
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					isSelected={ isSelected }
+					insertBlocksAfter={ insertBlocksAfter }
+					showToolbarButton={
+						! multiGallerySelection && ! isContentLocked
+					}
+					className="blocks-gallery-caption"
+					label={ __( 'Gallery caption text' ) }
+					placeholder={ __( 'Add gallery caption' ) }
+				/>
+			</figure>
+			{ /*
+			 * Dynamic mode shows a preview instead of real inner blocks, but the
+			 * empty inner blocks are still rendered here for their side effect:
+			 * the `allowedBlocks: []` passed to `useInnerBlocksProps` only syncs
+			 * to block list settings while the inner blocks are mounted (via
+			 * `useNestedSettingsUpdate`). That setting is what blocks insertion
+			 * (`canInsertBlockType`) and hides the now-unusable List View
+			 * (`shouldRenderBlockListView`). With no inner blocks and no appender,
+			 * this renders no output of its own.
+			 */ }
+			{ innerBlocksProps.children }
+		</>
+	);
+}

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