@wordpress/block-library 11.0.0 → 11.0.2-next.v.202609171837.0

package/src/gallery/edit.jsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import {
-	SelectControl,
+	SelectControl as WCSelectControl,
 	ToggleControl,
 	RangeControl,
 	MenuGroup,
@@ -61,7 +61,7 @@ import {
 import useImageSizes from './use-image-sizes';
 import useGetNewImages from './use-get-new-images';
 import useGetMedia from './use-get-media';
-import GalleryFlexStyles from './flex-styles';
+import GalleryStyles from './gallery-styles';
 import useDynamicGallery from './use-dynamic-gallery';
 import { GallerySourcePanel, GalleryDynamicView } from './dynamic-gallery';
 import { getDynamicSource, ATTACHED_MEDIA } from './dynamic-source';
@@ -156,7 +156,7 @@ export default function GalleryEdit( props ) {
 	const linkOptions = ! lightboxSetting?.allowEditing
 		? LINK_OPTIONS.filter(
 				( option ) => option.value !== LINK_DESTINATION_LIGHTBOX
-		  )
+			)
 		: LINK_OPTIONS;
 
 	const {
@@ -264,10 +264,14 @@ export default function GalleryEdit( props ) {
 		? getViewportGalleryStyle(
 				attributes.style,
 				selectedStyleState.viewport
-		  )
+			)
 		: {};
 	const baseColumns = isValidGalleryColumns( columns ) ? columns : undefined;
 	const baseImageCrop = typeof imageCrop === 'boolean' ? imageCrop : true;
+	// Normalized so a Gallery with no aspect ratio and one explicitly set to
+	// Original compare equal, and a viewport override matching either is
+	// dropped rather than stored.
+	const baseAspectRatio = aspectRatio || 'auto';
 	const hasViewportColumns =
 		isViewportStyleState &&
 		Object.hasOwn( viewportStyle, 'columns' ) &&
@@ -276,12 +280,20 @@ export default function GalleryEdit( props ) {
 		isViewportStyleState &&
 		Object.hasOwn( viewportStyle, 'imageCrop' ) &&
 		typeof viewportStyle.imageCrop === 'boolean';
+	const hasViewportAspectRatio =
+		isViewportStyleState &&
+		Object.hasOwn( viewportStyle, 'aspectRatio' ) &&
+		typeof viewportStyle.aspectRatio === 'string' &&
+		!! viewportStyle.aspectRatio;
 	const activeColumns = hasViewportColumns
 		? viewportStyle.columns
 		: baseColumns;
 	const activeImageCrop = hasViewportImageCrop
 		? viewportStyle.imageCrop
 		: baseImageCrop;
+	const activeAspectRatio = hasViewportAspectRatio
+		? viewportStyle.aspectRatio
+		: baseAspectRatio;
 
 	const images = useMemo(
 		() =>
@@ -429,6 +441,7 @@ export default function GalleryEdit( props ) {
 					: image.caption?.raw,
 			alt: imageAttributes.alt || image.alt_text,
 			aspectRatio: aspectRatio === 'auto' ? undefined : aspectRatio,
+			scale: aspectRatio && aspectRatio !== 'auto' ? 'cover' : undefined,
 		};
 	}
 
@@ -456,7 +469,7 @@ export default function GalleryEdit( props ) {
 					}
 
 					return file;
-			  } )
+				} )
 			: selectedImages;
 
 		if ( ! imageArray.every( isValidFileType ) ) {
@@ -485,8 +498,9 @@ export default function GalleryEdit( props ) {
 		// once the new image blocks are merged in with existing.
 		const newOrderMap = processedImages.reduce(
 			( result, image, index ) => (
-				( result[ image.id ] = index ), result
-			),
+				( result[ image.id ] = index ),
+				result
+			 ),
 			{}
 		);
 
@@ -495,7 +509,7 @@ export default function GalleryEdit( props ) {
 					processedImages.find(
 						( img ) => img.id === block.attributes.id
 					)
-			  )
+				)
 			: innerBlockImages;
 
 		const newImageList = processedImages.filter(
@@ -574,7 +588,7 @@ export default function GalleryEdit( props ) {
 		);
 	}
 
-	function setGalleryFlexSettings( settings ) {
+	function setGallerySettings( settings ) {
 		if ( ! isViewportStyleState ) {
 			setAttributes( settings );
 			return;
@@ -587,6 +601,7 @@ export default function GalleryEdit( props ) {
 				baseSettings: {
 					columns: baseColumns,
 					imageCrop: baseImageCrop,
+					aspectRatio: baseAspectRatio,
 				},
 				settings,
 			} ),
@@ -594,11 +609,11 @@ export default function GalleryEdit( props ) {
 	}
 
 	function setColumnsNumber( value ) {
-		setGalleryFlexSettings( { columns: value } );
+		setGallerySettings( { columns: value } );
 	}
 
 	function toggleImageCrop() {
-		setGalleryFlexSettings( { imageCrop: ! activeImageCrop } );
+		setGallerySettings( { imageCrop: ! activeImageCrop } );
 	}
 
 	function toggleRandomOrder() {
@@ -663,37 +678,63 @@ export default function GalleryEdit( props ) {
 		);
 	}
 
+	/**
+	 * Sets the Gallery's aspect ratio.
+	 *
+	 * The base value is added to the img element as an inline
+	 * style. A viewport value is instead rendered
+	 * from the Gallery's responsive CSS, which overrides that inline style.
+	 *
+	 * @param {string|undefined} value Aspect ratio to set. In a viewport state
+	 *                                 `'auto'` is an override that cancels the
+	 *                                 base ratio, while `undefined` removes the
+	 *                                 override so the base value applies again.
+	 */
 	function setAspectRatio( value ) {
-		setAttributes( { aspectRatio: value } );
-
-		// Update all inner image blocks with the new aspect ratio
-		const changedAttributes = {};
-		const blocks = [];
-
-		getBlock( clientId ).innerBlocks.forEach( ( block ) => {
-			blocks.push( block.clientId );
-			changedAttributes[ block.clientId ] = {
-				aspectRatio: value === 'auto' ? undefined : value,
-			};
-		} );
+		if ( isViewportStyleState ) {
+			setGallerySettings( { aspectRatio: value } );
+		} else {
+			const cleanValue = ! value || value === 'auto' ? undefined : value;
+			setAttributes( { aspectRatio: value ?? 'auto' } );
+
+			// Update all inner image blocks with the new aspect ratio
+			const changedAttributes = {};
+			const blocks = [];
+
+			getBlock( clientId ).innerBlocks.forEach( ( block ) => {
+				blocks.push( block.clientId );
+				changedAttributes[ block.clientId ] = {
+					aspectRatio: cleanValue,
+					scale: cleanValue ? 'cover' : undefined,
+				};
+			} );
 
-		updateBlockAttributes( blocks, changedAttributes, true );
+			updateBlockAttributes( blocks, changedAttributes, true );
+		}
 
+		const noticeValue = value ?? baseAspectRatio;
 		const aspectRatioText = aspectRatioOptions.find(
-			( option ) => option.value === value
+			( option ) => option.value === noticeValue
 		);
+		const noticeText = isViewportStyleState
+			? sprintf(
+					/* translators: 1: viewport name, 2: aspect ratio setting */
+					__(
+						'Gallery images in the %1$s viewport updated to aspect ratio: %2$s'
+					),
+					selectedStyleState.viewport.replace( '@', '' ),
+					aspectRatioText?.label || noticeValue
+				)
+			: sprintf(
+					/* translators: %s: aspect ratio setting */
+					__( 'All gallery images updated to aspect ratio: %s' ),
+					aspectRatioText?.label || noticeValue
+				);
 
-		createSuccessNotice(
-			sprintf(
-				/* translators: %s: aspect ratio setting */
-				__( 'All gallery images updated to aspect ratio: %s' ),
-				aspectRatioText?.label || value
-			),
-			{
-				id: 'gallery-attributes-aspectRatio',
-				type: 'snackbar',
-			}
-		);
+		createSuccessNotice( noticeText, {
+			id: 'gallery-attributes-aspectRatio',
+			type: 'snackbar',
+		} );
 	}
 
 	useEffect( () => {
@@ -805,12 +846,16 @@ export default function GalleryEdit( props ) {
 	}
 
 	const hasLinkTo = linkTo && linkTo !== 'none';
+	// Columns and crop to fit are Flex-only, so a Gallery in another layout has
+	// viewport settings to show only when aspect ratios are available. Without
+	// this the viewport Settings panel would render empty.
+	const hasViewportSettings = isFlexLayout || aspectRatioOptions.length > 1;
 
 	return (
 		<>
 			<InspectorControls
 				group={
-					isViewportStyleState && isFlexLayout
+					isViewportStyleState && hasViewportSettings
 						? 'viewport'
 						: 'default'
 				}
@@ -826,9 +871,10 @@ export default function GalleryEdit( props ) {
 					label={ __( 'Settings' ) }
 					resetAll={ () => {
 						if ( isViewportStyleState ) {
-							setGalleryFlexSettings( {
+							setGallerySettings( {
 								columns: undefined,
 								imageCrop: undefined,
+								aspectRatio: undefined,
 							} );
 							return;
 						}
@@ -862,7 +908,7 @@ export default function GalleryEdit( props ) {
 								isViewportStyleState
 									? hasViewportColumns
 									: !! activeColumns &&
-									  activeColumns !== displayedImageCount
+										activeColumns !== displayedImageCount
 							}
 							onDeselect={ () => setColumnsNumber( undefined ) }
 						>
@@ -873,7 +919,7 @@ export default function GalleryEdit( props ) {
 										? activeColumns
 										: defaultColumnsNumber(
 												displayedImageCount
-										  )
+											)
 								}
 								onChange={ setColumnsNumber }
 								min={ 1 }
@@ -897,7 +943,7 @@ export default function GalleryEdit( props ) {
 									updateImagesSize( DEFAULT_MEDIA_SIZE_SLUG )
 								}
 							>
-								<SelectControl
+								<WCSelectControl
 									label={ __( 'Resolution' ) }
 									help={ __(
 										'Select the size of the source images.'
@@ -919,7 +965,7 @@ export default function GalleryEdit( props ) {
 									: ! activeImageCrop
 							}
 							onDeselect={ () =>
-								setGalleryFlexSettings( {
+								setGallerySettings( {
 									imageCrop: isViewportStyleState
 										? undefined
 										: true,
@@ -963,27 +1009,35 @@ export default function GalleryEdit( props ) {
 							/>
 						</ToolsPanelItem>
 					) }
-					{ ! isViewportStyleState &&
-						aspectRatioOptions.length > 1 && (
-							<ToolsPanelItem
-								hasValue={ () =>
-									!! aspectRatio && aspectRatio !== 'auto'
-								}
+					{ aspectRatioOptions.length > 1 && (
+						<ToolsPanelItem
+							hasValue={ () =>
+								isViewportStyleState
+									? hasViewportAspectRatio
+									: activeAspectRatio !== 'auto'
+							}
+							label={ __( 'Aspect ratio' ) }
+							onDeselect={ () =>
+								// In a viewport state this clears the override
+								// so the base ratio applies again, rather than
+								// overriding it with Original.
+								setAspectRatio(
+									isViewportStyleState ? undefined : 'auto'
+								)
+							}
+							isShownByDefault
+						>
+							<WCSelectControl
 								label={ __( 'Aspect ratio' ) }
-								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>
-						) }
+								help={ __(
+									'Set a consistent aspect ratio for all images in the gallery.'
+								) }
+								value={ activeAspectRatio }
+								options={ aspectRatioOptions }
+								onChange={ setAspectRatio }
+							/>
+						</ToolsPanelItem>
+					) }
 					{ ! isViewportStyleState &&
 						lightboxSetting?.allowEditing &&
 						hasLightboxImages && (
@@ -1077,12 +1131,11 @@ export default function GalleryEdit( props ) {
 						/>
 					</BlockControls>
 				) }
-				{ isFlexLayout && (
-					<GalleryFlexStyles
-						style={ attributes.style }
-						clientId={ clientId }
-					/>
-				) }
+				<GalleryStyles
+					style={ attributes.style }
+					clientId={ clientId }
+					isFlexLayout={ isFlexLayout }
+				/>
 			</>
 			{ isDynamic ? (
 				<GalleryDynamicView

package/src/gallery/gallery-styles.js

@@ -0,0 +1,117 @@
+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';
+import { unlock } from '../lock-unlock';
+import { getGalleryResponsiveCSS } from './responsive-styles';
+
+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 ) || FALLBACK_VALUE
+				: getGapCSSValue( blockGap?.left ) || FALLBACK_VALUE;
+	}
+
+	// The unstable gallery gap calculation requires a real value (such as `0px`) and not `0`.
+	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;
+}
+
+/**
+ * Renders the Gallery's instance styles: the gap custom property the Flex
+ * layout's column widths are calculated from, and the Gallery's responsive
+ * viewport CSS.
+ *
+ * @param {Object}  props
+ * @param {Object}  props.style        Gallery block style attribute.
+ * @param {string}  props.clientId     Gallery block client ID.
+ * @param {boolean} props.isFlexLayout Whether the Gallery uses the Flex layout.
+ */
+export default function GalleryStyles( { style, clientId, isFlexLayout } ) {
+	const selector = `.wp-block-gallery-${ clientId }`;
+	const [ viewportSettings ] = useSettings( 'viewport' );
+	const globalStyles = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getSettings()?.[ globalStylesDataKey ],
+		[]
+	);
+	const responsiveMediaQueries =
+		getResponsiveMediaQueries( viewportSettings );
+	let css = '';
+
+	// The gap custom property only drives the Flex layout's column width
+	// calculations, so it is not emitted for the other Gallery layouts.
+	if ( isFlexLayout ) {
+		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;
+		css += getGalleryGapCustomPropertyStyle( selector, blockGap );
+
+		Object.entries( responsiveMediaQueries ).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;
+				}
+
+				css += `${ mediaQuery }{${ getGalleryGapCustomPropertyStyle(
+					selector,
+					viewportBlockGap
+				) }}`;
+			}
+		);
+	}
+
+	// The column and crop rules are scoped to the Flex layout, so they are
+	// inert in the other layouts and this can run for every Gallery.
+	css += getGalleryResponsiveCSS( selector, style, responsiveMediaQueries );
+
+	useStyleOverride( { css } );
+
+	return null;
+}