@wordpress/block-library 10.5.0 → 10.5.2-next.v.202608281122.0

package/src/gallery/{edit.js → edit.jsx}

@@ -23,7 +23,7 @@ import {
 	MediaReplaceFlow,
 	useSettings,
 } from '@wordpress/block-editor';
-import { useEffect, useMemo } from '@wordpress/element';
+import { useEffect, useMemo, useRef } from '@wordpress/element';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { createBlock } from '@wordpress/blocks';
@@ -37,7 +37,12 @@ import {
 	fullscreen,
 } from '@wordpress/icons';
 import { sharedIcon } from './shared-icon';
-import { defaultColumnsNumber, pickRelevantMediaFiles } from './shared';
+import {
+	defaultColumnsNumber,
+	isGalleryFlexLayout,
+	isObject,
+	pickRelevantMediaFiles,
+} from './shared';
 import { getHrefAndDestination } from './utils';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 import {
@@ -51,16 +56,22 @@ import {
 	LINK_DESTINATION_NONE,
 	LINK_DESTINATION_LIGHTBOX,
 	DEFAULT_MEDIA_SIZE_SLUG,
+	MAX_COLUMNS,
 } from './constants';
 import useImageSizes from './use-image-sizes';
 import useGetNewImages from './use-get-new-images';
 import useGetMedia from './use-get-media';
-import GalleryGapCustomProperties from './gap-styles';
+import GalleryFlexStyles from './flex-styles';
 import useDynamicGallery from './use-dynamic-gallery';
 import { GallerySourcePanel, GalleryDynamicView } from './dynamic-gallery';
 import { getDynamicSource, ATTACHED_MEDIA } from './dynamic-source';
+import { unlock } from '../lock-unlock';
+import {
+	getViewportGalleryStyle,
+	getUpdatedGalleryStyle,
+	isValidGalleryColumns,
+} from './responsive-styles';
 
-const MAX_COLUMNS = 8;
 const LINK_OPTIONS = [
 	{
 		icon: customLink,
@@ -158,7 +169,10 @@ export default function GalleryEdit( props ) {
 		linkTo,
 		sizeSlug,
 		aspectRatio,
+		layout,
 	} = attributes;
+	const isFlexLayout = isGalleryFlexLayout( layout );
+	const previousLayoutRef = useRef( layout );
 
 	const {
 		__unstableMarkNextChangeAsNotPersistent,
@@ -169,32 +183,105 @@ export default function GalleryEdit( props ) {
 	const { createSuccessNotice, createErrorNotice } =
 		useDispatch( noticesStore );
 
-	const { getBlock, getSettings, innerBlockImages, multiGallerySelection } =
-		useSelect(
-			( select ) => {
-				const {
-					getBlockName,
-					getMultiSelectedBlockClientIds,
-					getSettings: _getSettings,
-					getBlock: _getBlock,
-				} = select( blockEditorStore );
-				const multiSelectedClientIds = getMultiSelectedBlockClientIds();
-
-				return {
-					getBlock: _getBlock,
-					getSettings: _getSettings,
-					innerBlockImages:
-						_getBlock( clientId )?.innerBlocks ?? EMPTY_ARRAY,
-					multiGallerySelection:
-						multiSelectedClientIds.length &&
-						multiSelectedClientIds.every(
-							( _clientId ) =>
-								getBlockName( _clientId ) === 'core/gallery'
-						),
-				};
-			},
-			[ clientId ]
-		);
+	useEffect( () => {
+		// Variations replace the whole layout object. Carry Grid-only settings
+		// across a layout type change so switching back restores them.
+		const previousLayout = previousLayoutRef.current;
+		previousLayoutRef.current = layout;
+
+		if (
+			! isObject( previousLayout ) ||
+			! isObject( layout ) ||
+			previousLayout.type === layout.type
+		) {
+			return;
+		}
+
+		const nextLayout = { ...layout };
+		let hasPreservedGridSetting = false;
+
+		if (
+			! Object.hasOwn( layout, 'columnCount' ) &&
+			Number.isInteger( previousLayout.columnCount ) &&
+			previousLayout.columnCount > 0
+		) {
+			nextLayout.columnCount = previousLayout.columnCount;
+			hasPreservedGridSetting = true;
+		}
+
+		if (
+			! Object.hasOwn( layout, 'minimumColumnWidth' ) &&
+			typeof previousLayout.minimumColumnWidth === 'string'
+		) {
+			nextLayout.minimumColumnWidth = previousLayout.minimumColumnWidth;
+			hasPreservedGridSetting = true;
+		}
+
+		if ( hasPreservedGridSetting ) {
+			previousLayoutRef.current = nextLayout;
+			__unstableMarkNextChangeAsNotPersistent();
+			setAttributes( { layout: nextLayout } );
+		}
+	}, [ layout, setAttributes, __unstableMarkNextChangeAsNotPersistent ] );
+
+	const {
+		getBlock,
+		getSettings,
+		innerBlockImages,
+		multiGallerySelection,
+		selectedStyleState,
+	} = useSelect(
+		( select ) => {
+			const {
+				getBlockName,
+				getMultiSelectedBlockClientIds,
+				getSettings: _getSettings,
+				getBlock: _getBlock,
+				getSelectedBlockStyleState,
+			} = unlock( select( blockEditorStore ) );
+			const multiSelectedClientIds = getMultiSelectedBlockClientIds();
+
+			return {
+				getBlock: _getBlock,
+				getSettings: _getSettings,
+				innerBlockImages:
+					_getBlock( clientId )?.innerBlocks ?? EMPTY_ARRAY,
+				multiGallerySelection:
+					multiSelectedClientIds.length &&
+					multiSelectedClientIds.every(
+						( _clientId ) =>
+							getBlockName( _clientId ) === 'core/gallery'
+					),
+				selectedStyleState: getSelectedBlockStyleState( clientId ),
+			};
+		},
+		[ clientId ]
+	);
+	const isViewportStyleState =
+		selectedStyleState?.viewport &&
+		selectedStyleState.viewport !== 'default';
+	const viewportStyle = isViewportStyleState
+		? getViewportGalleryStyle(
+				attributes.style,
+				selectedStyleState.viewport
+		  )
+		: {};
+	const baseColumns = isValidGalleryColumns( columns ) ? columns : undefined;
+	const baseImageCrop = typeof imageCrop === 'boolean' ? imageCrop : true;
+	const hasViewportColumns =
+		isViewportStyleState &&
+		Object.hasOwn( viewportStyle, 'columns' ) &&
+		isValidGalleryColumns( viewportStyle.columns );
+	const hasViewportImageCrop =
+		isViewportStyleState &&
+		Object.hasOwn( viewportStyle, 'imageCrop' ) &&
+		typeof viewportStyle.imageCrop === 'boolean';
+	const activeColumns = hasViewportColumns
+		? viewportStyle.columns
+		: baseColumns;
+	const activeImageCrop = hasViewportImageCrop
+		? viewportStyle.imageCrop
+		: baseImageCrop;
 
 	const images = useMemo(
 		() =>
@@ -487,12 +574,31 @@ export default function GalleryEdit( props ) {
 		);
 	}
 
+	function setGalleryFlexSettings( settings ) {
+		if ( ! isViewportStyleState ) {
+			setAttributes( settings );
+			return;
+		}
+
+		setAttributes( {
+			style: getUpdatedGalleryStyle( {
+				style: attributes.style,
+				viewport: selectedStyleState.viewport,
+				baseSettings: {
+					columns: baseColumns,
+					imageCrop: baseImageCrop,
+				},
+				settings,
+			} ),
+		} );
+	}
+
 	function setColumnsNumber( value ) {
-		setAttributes( { columns: value } );
+		setGalleryFlexSettings( { columns: value } );
 	}
 
 	function toggleImageCrop() {
-		setAttributes( { imageCrop: ! imageCrop } );
+		setGalleryFlexSettings( { imageCrop: ! activeImageCrop } );
 	}
 
 	function toggleRandomOrder() {
@@ -617,9 +723,10 @@ export default function GalleryEdit( props ) {
 		className: clsx(
 			className,
 			'has-nested-images',
+			`wp-block-gallery-${ clientId }`,
 			// 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`)
+			// component normally composes onto the `<figure>` (see `gallery.jsx`)
 			// must be added here to keep the preview's flex/crop layout matching
 			// the static gallery and the frontend.
 			isDynamic && [
@@ -627,9 +734,10 @@ export default function GalleryEdit( props ) {
 				'blocks-gallery-grid',
 				{
 					[ `align${ align }` ]: align,
-					[ `columns-${ columns }` ]: columns !== undefined,
-					'columns-default': columns === undefined,
-					'is-cropped': imageCrop,
+					[ `columns-${ columns }` ]:
+						isFlexLayout && columns !== undefined,
+					'columns-default': isFlexLayout && columns === undefined,
+					'is-cropped': isFlexLayout && imageCrop,
 				},
 			]
 		),
@@ -677,7 +785,7 @@ export default function GalleryEdit( props ) {
 					 * 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
+					 * `dynamic-gallery.jsx`): 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.
@@ -700,20 +808,38 @@ export default function GalleryEdit( props ) {
 
 	return (
 		<>
-			<InspectorControls>
-				<GallerySourcePanel
-					dynamic={ dynamic }
-					dropdownMenuProps={ dropdownMenuProps }
-					hasImages={ hasImages }
-				/>
+			<InspectorControls
+				group={
+					isViewportStyleState && isFlexLayout
+						? 'viewport'
+						: 'default'
+				}
+			>
+				{ ! isViewportStyleState && (
+					<GallerySourcePanel
+						dynamic={ dynamic }
+						dropdownMenuProps={ dropdownMenuProps }
+						hasImages={ hasImages }
+					/>
+				) }
 				<ToolsPanel
 					label={ __( 'Settings' ) }
 					resetAll={ () => {
+						if ( isViewportStyleState ) {
+							setGalleryFlexSettings( {
+								columns: undefined,
+								imageCrop: undefined,
+							} );
+							return;
+						}
+
 						setAttributes( {
 							navigationButtonType: 'icon',
-							columns: undefined,
-							imageCrop: true,
 							randomOrder: false,
+							...( isFlexLayout && {
+								columns: undefined,
+								imageCrop: true,
+							} ),
 						} );
 
 						setAspectRatio( 'auto' );
@@ -728,20 +854,23 @@ export default function GalleryEdit( props ) {
 					} }
 					dropdownMenuProps={ dropdownMenuProps }
 				>
-					{ displayedImageCount > 1 && (
+					{ isFlexLayout && displayedImageCount > 1 && (
 						<ToolsPanelItem
 							isShownByDefault
 							label={ __( 'Columns' ) }
 							hasValue={ () =>
-								!! columns && columns !== displayedImageCount
+								isViewportStyleState
+									? hasViewportColumns
+									: !! activeColumns &&
+									  activeColumns !== displayedImageCount
 							}
 							onDeselect={ () => setColumnsNumber( undefined ) }
 						>
 							<RangeControl
 								label={ __( 'Columns' ) }
 								value={
-									columns
-										? columns
+									activeColumns
+										? activeColumns
 										: defaultColumnsNumber(
 												displayedImageCount
 										  )
@@ -756,58 +885,71 @@ export default function GalleryEdit( props ) {
 							/>
 						</ToolsPanelItem>
 					) }
-					{ imageSizeOptions?.length > 0 && (
+					{ ! isViewportStyleState &&
+						imageSizeOptions?.length > 0 && (
+							<ToolsPanelItem
+								isShownByDefault
+								label={ __( 'Resolution' ) }
+								hasValue={ () =>
+									sizeSlug !== DEFAULT_MEDIA_SIZE_SLUG
+								}
+								onDeselect={ () =>
+									updateImagesSize( DEFAULT_MEDIA_SIZE_SLUG )
+								}
+							>
+								<SelectControl
+									label={ __( 'Resolution' ) }
+									help={ __(
+										'Select the size of the source images.'
+									) }
+									value={ sizeSlug }
+									options={ imageSizeOptions }
+									onChange={ updateImagesSize }
+									hideCancelButton
+								/>
+							</ToolsPanelItem>
+						) }
+					{ isFlexLayout && (
 						<ToolsPanelItem
 							isShownByDefault
-							label={ __( 'Resolution' ) }
+							label={ __( 'Crop images to fit' ) }
 							hasValue={ () =>
-								sizeSlug !== DEFAULT_MEDIA_SIZE_SLUG
+								isViewportStyleState
+									? hasViewportImageCrop
+									: ! activeImageCrop
 							}
 							onDeselect={ () =>
-								updateImagesSize( DEFAULT_MEDIA_SIZE_SLUG )
+								setGalleryFlexSettings( {
+									imageCrop: isViewportStyleState
+										? undefined
+										: true,
+								} )
 							}
 						>
-							<SelectControl
-								label={ __( 'Resolution' ) }
-								help={ __(
-									'Select the size of the source images.'
-								) }
-								value={ sizeSlug }
-								options={ imageSizeOptions }
-								onChange={ updateImagesSize }
-								hideCancelButton
+							<ToggleControl
+								label={ __( 'Crop images to fit' ) }
+								checked={ activeImageCrop }
+								onChange={ toggleImageCrop }
 							/>
 						</ToolsPanelItem>
 					) }
-					<ToolsPanelItem
-						isShownByDefault
-						label={ __( 'Crop images to fit' ) }
-						hasValue={ () => ! imageCrop }
-						onDeselect={ () =>
-							setAttributes( { imageCrop: true } )
-						}
-					>
-						<ToggleControl
-							label={ __( 'Crop images to fit' ) }
-							checked={ !! imageCrop }
-							onChange={ toggleImageCrop }
-						/>
-					</ToolsPanelItem>
-					<ToolsPanelItem
-						isShownByDefault
-						label={ __( 'Randomize order' ) }
-						hasValue={ () => !! randomOrder }
-						onDeselect={ () =>
-							setAttributes( { randomOrder: false } )
-						}
-					>
-						<ToggleControl
+					{ ! isViewportStyleState && (
+						<ToolsPanelItem
+							isShownByDefault
 							label={ __( 'Randomize order' ) }
-							checked={ !! randomOrder }
-							onChange={ toggleRandomOrder }
-						/>
-					</ToolsPanelItem>
-					{ hasLinkTo && (
+							hasValue={ () => !! randomOrder }
+							onDeselect={ () =>
+								setAttributes( { randomOrder: false } )
+							}
+						>
+							<ToggleControl
+								label={ __( 'Randomize order' ) }
+								checked={ !! randomOrder }
+								onChange={ toggleRandomOrder }
+							/>
+						</ToolsPanelItem>
+					) }
+					{ ! isViewportStyleState && hasLinkTo && (
 						<ToolsPanelItem
 							isShownByDefault
 							label={ __( 'Open images in new tab' ) }
@@ -821,62 +963,67 @@ export default function GalleryEdit( props ) {
 							/>
 						</ToolsPanelItem>
 					) }
-					{ aspectRatioOptions.length > 1 && (
-						<ToolsPanelItem
-							hasValue={ () =>
-								!! aspectRatio && aspectRatio !== 'auto'
-							}
-							label={ __( 'Aspect ratio' ) }
-							onDeselect={ () => setAspectRatio( 'auto' ) }
-							isShownByDefault
-						>
-							<SelectControl
+					{ ! isViewportStyleState &&
+						aspectRatioOptions.length > 1 && (
+							<ToolsPanelItem
+								hasValue={ () =>
+									!! aspectRatio && aspectRatio !== 'auto'
+								}
 								label={ __( 'Aspect ratio' ) }
-								help={ __(
-									'Set a consistent aspect ratio for all images in the gallery.'
-								) }
-								value={ aspectRatio }
-								options={ aspectRatioOptions }
-								onChange={ setAspectRatio }
-							/>
-						</ToolsPanelItem>
-					) }
-					{ lightboxSetting?.allowEditing && hasLightboxImages && (
-						<ToolsPanelItem
-							label={ __( 'Navigation button type' ) }
-							isShownByDefault
-							hasValue={ () => navigationButtonType !== 'icon' }
-							onDeselect={ () =>
-								setAttributes( {
-									navigationButtonType: 'icon',
-								} )
-							}
-						>
-							<ToggleGroupControl
+								onDeselect={ () => setAspectRatio( 'auto' ) }
+								isShownByDefault
+							>
+								<SelectControl
+									label={ __( 'Aspect ratio' ) }
+									help={ __(
+										'Set a consistent aspect ratio for all images in the gallery.'
+									) }
+									value={ aspectRatio }
+									options={ aspectRatioOptions }
+									onChange={ setAspectRatio }
+								/>
+							</ToolsPanelItem>
+						) }
+					{ ! isViewportStyleState &&
+						lightboxSetting?.allowEditing &&
+						hasLightboxImages && (
+							<ToolsPanelItem
 								label={ __( 'Navigation button type' ) }
-								value={ navigationButtonType }
-								onChange={ ( value ) =>
+								isShownByDefault
+								hasValue={ () =>
+									navigationButtonType !== 'icon'
+								}
+								onDeselect={ () =>
 									setAttributes( {
-										navigationButtonType: value,
+										navigationButtonType: 'icon',
 									} )
 								}
-								isBlock
-								help={ __(
-									'Adjust the appearance of buttons in the lightbox.'
-								) }
 							>
-								{ NAVIGATION_BUTTON_TYPE_OPTIONS.map(
-									( option ) => (
-										<ToggleGroupControlOption
-											key={ option.value }
-											value={ option.value }
-											label={ option.label }
-										/>
-									)
-								) }
-							</ToggleGroupControl>
-						</ToolsPanelItem>
-					) }
+								<ToggleGroupControl
+									label={ __( 'Navigation button type' ) }
+									value={ navigationButtonType }
+									onChange={ ( value ) =>
+										setAttributes( {
+											navigationButtonType: value,
+										} )
+									}
+									isBlock
+									help={ __(
+										'Adjust the appearance of buttons in the lightbox.'
+									) }
+								>
+									{ NAVIGATION_BUTTON_TYPE_OPTIONS.map(
+										( option ) => (
+											<ToggleGroupControlOption
+												key={ option.value }
+												value={ option.value }
+												label={ option.label }
+											/>
+										)
+									) }
+								</ToggleGroupControl>
+							</ToolsPanelItem>
+						) }
 				</ToolsPanel>
 			</InspectorControls>
 			<BlockControls group="block">
@@ -930,10 +1077,12 @@ export default function GalleryEdit( props ) {
 						/>
 					</BlockControls>
 				) }
-				<GalleryGapCustomProperties
-					style={ attributes.style }
-					clientId={ clientId }
-				/>
+				{ isFlexLayout && (
+					<GalleryFlexStyles
+						style={ attributes.style }
+						clientId={ clientId }
+					/>
+				) }
 			</>
 			{ isDynamic ? (
 				<GalleryDynamicView

package/src/gallery/editor.scss

@@ -6,7 +6,7 @@
 // Adding `figure` to the selector increases the specificity above the global
 // styles specificity, which is levelled at 0-1-0. We should figure out why
 // `figure` is needed.
-:root :where(figure.wp-block-gallery) {
+:root :where(figure.wp-block-gallery.is-layout-flex) {
 	// Override the default list style type _only in the editor_
 	// to avoid :not() selector specificity issues.
 	// See https://github.com/WordPress/gutenberg/pull/10358
@@ -16,7 +16,17 @@
 	> .blocks-gallery-caption {
 		flex: 0 0 100%;
 	}
+}
+
+:root :where(.wp-block-gallery.is-layout-grid) {
+	> .blocks-gallery-caption,
+	> .components-placeholder,
+	> .block-editor-media-placeholder {
+		grid-column: 1 / -1;
+	}
+}
 
+:root :where(figure.wp-block-gallery) {
 	// @todo this deserves a refactor, by being moved to the toolbar.
 	.block-editor-media-placeholder.is-appender {
 		.components-placeholder__label {

package/src/gallery/{gap-styles.js → flex-styles.js}

@@ -8,6 +8,7 @@ import {
 import { useSelect } from '@wordpress/data';
 import { privateApis as globalStylesEnginePrivateApis } from '@wordpress/global-styles-engine';
 import { unlock } from '../lock-unlock';
+import { getGalleryResponsiveFlexCSS } from './responsive-styles';
 
 const { getResponsiveMediaQueries } = unlock( globalStylesEnginePrivateApis );
 const { globalStylesDataKey } = unlock( blockEditorPrivateApis );
@@ -40,8 +41,8 @@ function getBlockGapValue( style ) {
 	return style.spacing.blockGap;
 }
 
-export default function GalleryGapCustomProperties( { style, clientId } ) {
-	const selector = `#block-${ clientId }`;
+export default function GalleryFlexStyles( { style, clientId } ) {
+	const selector = `.wp-block-gallery-${ clientId }`;
 	const [ viewportSettings ] = useSettings( 'viewport' );
 	const globalStyles = useSelect(
 		( select ) =>
@@ -57,9 +58,11 @@ export default function GalleryGapCustomProperties( { style, clientId } ) {
 	// values fall back to the Gallery blockGap default.
 	const blockGap =
 		styleBlockGap === undefined ? globalGalleryBlockGap : styleBlockGap;
-	let gap = getGalleryGapCustomPropertyStyle( selector, blockGap );
+	let css = getGalleryGapCustomPropertyStyle( selector, blockGap );
+	const responsiveMediaQueries =
+		getResponsiveMediaQueries( viewportSettings );
 
-	Object.entries( getResponsiveMediaQueries( viewportSettings ) ).forEach(
+	Object.entries( responsiveMediaQueries ).forEach(
 		( [ viewport, mediaQuery ] ) => {
 			const styleViewportBlockGap = getBlockGapValue(
 				style?.[ viewport ]
@@ -78,14 +81,19 @@ export default function GalleryGapCustomProperties( { style, clientId } ) {
 				return;
 			}
 
-			gap += `${ mediaQuery }{${ getGalleryGapCustomPropertyStyle(
+			css += `${ mediaQuery }{${ getGalleryGapCustomPropertyStyle(
 				selector,
 				viewportBlockGap
 			) }}`;
 		}
 	);
+	css += getGalleryResponsiveFlexCSS(
+		selector,
+		style,
+		responsiveMediaQueries
+	);
 
-	useStyleOverride( { css: gap } );
+	useStyleOverride( { css } );
 
 	return null;
 }

package/src/gallery/{gallery.js → gallery.jsx}

@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import { __ } from '@wordpress/i18n';
 import { Caption } from '../utils/caption';
+import { isGalleryFlexLayout } from './shared';
 
 export default function Gallery( props ) {
 	const {
@@ -14,7 +15,8 @@ export default function Gallery( props ) {
 		multiGallerySelection,
 	} = props;
 
-	const { align, columns, imageCrop } = attributes;
+	const { align, columns, imageCrop, layout } = attributes;
+	const isFlexLayout = isGalleryFlexLayout( layout );
 
 	return (
 		<figure
@@ -25,9 +27,11 @@ export default function Gallery( props ) {
 				'blocks-gallery-grid',
 				{
 					[ `align${ align }` ]: align,
-					[ `columns-${ columns }` ]: columns !== undefined,
-					[ `columns-default` ]: columns === undefined,
-					'is-cropped': imageCrop,
+					[ `columns-${ columns }` ]:
+						isFlexLayout && columns !== undefined,
+					[ `columns-default` ]:
+						isFlexLayout && columns === undefined,
+					'is-cropped': isFlexLayout && imageCrop,
 				}
 			) }
 		>