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

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';
@@ -66,6 +67,9 @@ 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 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 }
@@ -849,15 +946,24 @@ export default function GalleryEdit( props ) {
 					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/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,