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

package/src/file/block.json

@@ -65,10 +65,23 @@
 	"supports": {
 		"anchor": true,
 		"align": true,
+		"background": {
+			"backgroundImage": true,
+			"backgroundSize": true,
+			"gradient": true,
+			"__experimentalDefaultControls": {
+				"backgroundImage": true,
+				"gradient": true
+			}
+		},
 		"spacing": {
 			"margin": true,
 			"padding": true
 		},
+		"dimensions": {
+			"minHeight": true,
+			"minWidth": true
+		},
 		"color": {
 			"gradients": true,
 			"link": true,
@@ -90,6 +103,7 @@
 				"style": true
 			}
 		},
+		"shadow": true,
 		"interactivity": true
 	},
 	"editorStyle": "wp-block-file-editor",

package/src/footnotes/README.md

@@ -20,6 +20,10 @@ _This block has no custom attributes._
 _Defined via the [`supports`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/) property in block.json._
 
 - [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `true`
+- [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#background):
+  - `backgroundImage`: `true`
+  - `backgroundSize`: `true`
+  - `gradient`: `true`
 - [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
   - [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-background): `true`
   - [`link`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-link): `true`
@@ -32,6 +36,9 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
   - `margin`: `true`
   - `padding`: `true`
+- [`dimensions`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#dimensions):
+  - `minHeight`: `true`
+  - `minWidth`: `true`
 - [`typography`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography):
   - [`fontSize`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-fontsize): `true`
   - [`lineHeight`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-lineheight): `true`

package/src/footnotes/block.json

@@ -10,6 +10,15 @@
 	"usesContext": [ "postId", "postType" ],
 	"supports": {
 		"anchor": true,
+		"background": {
+			"backgroundImage": true,
+			"backgroundSize": true,
+			"gradient": true,
+			"__experimentalDefaultControls": {
+				"backgroundImage": true,
+				"gradient": true
+			}
+		},
 		"__experimentalBorder": {
 			"radius": true,
 			"color": true,
@@ -44,6 +53,10 @@
 				"padding": false
 			}
 		},
+		"dimensions": {
+			"minHeight": true,
+			"minWidth": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

package/src/gallery/README.md

@@ -42,6 +42,10 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 
 - [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `true`
 - [`align`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#align): `true`
+- [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#background):
+  - `backgroundImage`: `true`
+  - `backgroundSize`: `true`
+  - `gradient`: `true`
 - [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false`
 - `units`: `"px"`, `"em"`, `"rem"`, `"vh"`, `"vw"`
 - [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
@@ -52,6 +56,10 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
   - [`text`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-text): `false`
   - [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-background): `true`
   - [`gradients`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-gradients): `true`
+- [`shadow`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#shadow): `true`
+- [`dimensions`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#dimensions):
+  - `minHeight`: `true`
+  - `minWidth`: `true`
 - [`layout`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout):
   - [`allowSwitching`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowswitching): `false`
   - [`allowInheriting`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowinheriting): `false`
@@ -62,6 +70,8 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
   - [`allowWrap`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowwrap): `false`
   - [`allowSizingOnChildren`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowsizingonchildren): `true`
   - [`default`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-default): `{"type":"flex"}`
+- [`filter`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#filter):
+  - [`duotone`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#filter-duotone): `true`
 - [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity):
   - `clientNavigation`: `true`
 - [`listView`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#listview): `true`
@@ -83,6 +93,13 @@ _Defined via the [`usesContext` and `providesContext`](https://developer.wordpre
 - `fixedHeight` → attribute `fixedHeight`
 - `navigationButtonType` → attribute `navigationButtonType`
 
+## CSS Selectors
+
+_Defined via the [`selectors`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-selectors/) property in block.json._
+
+- **filter**:
+  - duotone: `.wp-block-gallery :where(img)`
+
 ## Block Markup
 
 This is a [**hybrid block**](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/). It saves static markup that the server may enhance during rendering.

package/src/gallery/block.json

@@ -127,6 +127,15 @@
 	"supports": {
 		"anchor": true,
 		"align": true,
+		"background": {
+			"backgroundImage": true,
+			"backgroundSize": true,
+			"gradient": true,
+			"__experimentalDefaultControls": {
+				"backgroundImage": true,
+				"gradient": true
+			}
+		},
 		"__experimentalBorder": {
 			"radius": true,
 			"color": true,
@@ -157,6 +166,11 @@
 			"background": true,
 			"gradients": true
 		},
+		"shadow": true,
+		"dimensions": {
+			"minHeight": true,
+			"minWidth": true
+		},
 		"layout": {
 			"allowSwitching": false,
 			"allowInheriting": false,
@@ -170,11 +184,19 @@
 				"type": "flex"
 			}
 		},
+		"filter": {
+			"duotone": true
+		},
 		"interactivity": {
 			"clientNavigation": true
 		},
 		"listView": true
 	},
+	"selectors": {
+		"filter": {
+			"duotone": ".wp-block-gallery :where(img)"
+		}
+	},
 	"editorStyle": "wp-block-gallery-editor",
 	"style": "wp-block-gallery"
 }

package/src/gallery/dynamic-gallery.jsx

@@ -5,11 +5,8 @@ import {
 	Notice,
 	PanelBody,
 	Placeholder,
-	SelectControl as WCSelectControl,
 	Spinner,
 	ToolbarButton,
-	__experimentalToolsPanel as ToolsPanel,
-	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalConfirmDialog as ConfirmDialog,
 } from '@wordpress/components';
 import {
@@ -21,52 +18,7 @@ import {
 import { sharedIcon } from './shared-icon';
 import { isGalleryFlexLayout } from './shared';
 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 (
-		<WCSelectControl
-			label={ __( 'Order by' ) }
-			value={ `${ orderby }/${ order }` }
-			options={ ORDER_OPTIONS }
-			onChange={ ( value ) => {
-				const [ newOrderby, newOrder ] = value.split( '/' );
-				onChange( { orderby: newOrderby, order: newOrder } );
-			} }
-		/>
-	);
-}
+import { MAX_IMAGES } from './dynamic-source';
 
 /**
  * Confirmation for leaving dynamic mode, shown from both the block toolbar and
@@ -101,32 +53,23 @@ function DetachGalleryDialog( { onConfirm, onCancel } ) {
 /**
  * The Gallery block's "Source" inspector 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.
+ * In dynamic mode it shows the resolved source and a control to detach the
+ * gallery from it. 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, which owns the ordering for both modes.
  *
  * @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.
+ * @param {Object}  props.dynamic   The `useDynamicGallery` result.
+ * @param {boolean} props.hasImages Whether the gallery has manually-added images.
  */
-export function GallerySourcePanel( {
-	dynamic,
-	dropdownMenuProps,
-	hasImages,
-} ) {
+export function GallerySourcePanel( { dynamic, hasImages } ) {
 	const {
 		dynamicContent,
 		canUseDynamicSource,
 		sourceDescriptor,
-		sourceOrderby,
-		sourceOrder,
-		setSourceOrder,
 		convertToStatic,
 		enableDynamicMode,
-		resetSource,
 		isResolvingDynamic,
 		hasMoreImagesThanCap,
 		dynamicMediaTotal,
@@ -149,11 +92,7 @@ export function GallerySourcePanel( {
 	if ( isDynamic ) {
 		return (
 			<>
-				<ToolsPanel
-					label={ __( 'Source' ) }
-					resetAll={ resetSource }
-					dropdownMenuProps={ dropdownMenuProps }
-				>
+				<PanelBody title={ __( 'Source' ) }>
 					<div className="wp-block-gallery__source-settings">
 						<p className="wp-block-gallery__source-description">
 							{ sourceDescriptor?.description ??
@@ -188,26 +127,7 @@ export function GallerySourcePanel( {
 							) }
 						</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>
+				</PanelBody>
 				{ isConfirmingDetach && (
 					<DetachGalleryDialog
 						onConfirm={ () => {

package/src/gallery/edit.jsx

@@ -23,7 +23,7 @@ import {
 	MediaReplaceFlow,
 	useSettings,
 } from '@wordpress/block-editor';
-import { useEffect, useMemo, useRef } from '@wordpress/element';
+import { useEffect, useMemo, useRef, useState } from '@wordpress/element';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { createBlock } from '@wordpress/blocks';
@@ -64,8 +64,14 @@ import useGetMedia from './use-get-media';
 import GalleryStyles from './gallery-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 { SortImagesControl, SourceOrderControl } from './order-controls';
+import {
+	getDynamicSource,
+	ATTACHED_MEDIA,
+	DEFAULT_ORDERBY,
+	DEFAULT_ORDER,
+} from './dynamic-source';
+import { hasSortableImages, sortImageBlocks } from './order-images';
 import {
 	getViewportGalleryStyle,
 	getUpdatedGalleryStyle,
@@ -238,7 +244,7 @@ export default function GalleryEdit( props ) {
 				getSettings: _getSettings,
 				getBlock: _getBlock,
 				getSelectedBlockStyleState,
-			} = unlock( select( blockEditorStore ) );
+			} = select( blockEditorStore );
 			const multiSelectedClientIds = getMultiSelectedBlockClientIds();
 
 			return {
@@ -314,6 +320,22 @@ export default function GalleryEdit( props ) {
 	const hasImages = !! images.length;
 	const isDynamic = !! attributes.dynamicContent;
 
+	// The static "Order by" control shows the last sort applied from it, for as
+	// long as the images stay in the sequence that sort produced. Any other
+	// change to the images (a drag, an addition, a removal) drops it back to
+	// "Custom"; it never reports an order the user didn't choose. Nothing is
+	// stored, so this is local state rather than an attribute.
+	const [ appliedSort, setAppliedSort ] = useState( null );
+	const currentOrder =
+		appliedSort &&
+		appliedSort.clientIds.length === innerBlockImages.length &&
+		appliedSort.clientIds.every(
+			( id, index ) => innerBlockImages[ index ].clientId === id
+		)
+			? appliedSort.order
+			: null;
+	const canSortImages = hasSortableImages( innerBlockImages, imageData );
+
 	// Dynamic mode (resolving images from a source instead of inner blocks):
 	// source resolution, the editor-preview blocks, and the mode/ordering
 	// actions.
@@ -546,6 +568,49 @@ export default function GalleryEdit( props ) {
 		}
 	}
 
+	function selectRandomOrder() {
+		setAttributes( { randomOrder: true } );
+	}
+
+	// Choosing any other order turns "Random" off. Called straight after the
+	// edit that applies the order, and marked non-persistent so the two writes
+	// share one undo level: a single undo restores both the order and Random.
+	function clearRandomOrderAfterEdit() {
+		if ( randomOrder ) {
+			__unstableMarkNextChangeAsNotPersistent();
+			setAttributes( { randomOrder: false } );
+		}
+	}
+
+	// Reorders the inner image blocks in place. Left persistent on purpose so
+	// the sort is a single undoable step.
+	function sortImages( order ) {
+		const sortedBlocks = sortImageBlocks(
+			getBlock( clientId ).innerBlocks,
+			imageData,
+			order
+		);
+		replaceInnerBlocks( clientId, sortedBlocks );
+		clearRandomOrderAfterEdit();
+		setAppliedSort( {
+			order,
+			clientIds: sortedBlocks.map( ( block ) => block.clientId ),
+		} );
+	}
+
+	// "Custom" is the order arranged in the editor: it turns Random off and
+	// forgets any sort applied earlier, so the control reads "Custom" from
+	// here on rather than that sort.
+	function selectCustomOrder() {
+		setAttributes( { randomOrder: false } );
+		setAppliedSort( null );
+	}
+
+	function changeSourceOrder( { orderby, order } ) {
+		dynamic.setSourceOrder( orderby, order );
+		clearRandomOrderAfterEdit();
+	}
+
 	function onUploadError( message ) {
 		createErrorNotice( message, { type: 'snackbar' } );
 	}
@@ -616,10 +681,6 @@ export default function GalleryEdit( props ) {
 		setGallerySettings( { imageCrop: ! activeImageCrop } );
 	}
 
-	function toggleRandomOrder() {
-		setAttributes( { randomOrder: ! randomOrder } );
-	}
-
 	function toggleOpenInNewTab( openInNewTab ) {
 		const newLinkTarget = openInNewTab ? '_blank' : undefined;
 		setAttributes( { linkTarget: newLinkTarget } );
@@ -863,7 +924,6 @@ export default function GalleryEdit( props ) {
 				{ ! isViewportStyleState && (
 					<GallerySourcePanel
 						dynamic={ dynamic }
-						dropdownMenuProps={ dropdownMenuProps }
 						hasImages={ hasImages }
 					/>
 				) }
@@ -890,6 +950,10 @@ export default function GalleryEdit( props ) {
 
 						setAspectRatio( 'auto' );
 
+						if ( isDynamic ) {
+							dynamic.setSourceOrder( undefined, undefined );
+						}
+
 						if ( sizeSlug !== DEFAULT_MEDIA_SIZE_SLUG ) {
 							updateImagesSize( DEFAULT_MEDIA_SIZE_SLUG );
 						}
@@ -931,6 +995,56 @@ export default function GalleryEdit( props ) {
 							/>
 						</ToolsPanelItem>
 					) }
+					{ ! isViewportStyleState && (
+						// "Random" is stored in both modes. Beyond that, a
+						// dynamic gallery's order is a stored query setting,
+						// while a static gallery's orders are one-off actions.
+						<ToolsPanelItem
+							isShownByDefault
+							label={ __( 'Order by' ) }
+							hasValue={ () =>
+								!! randomOrder ||
+								( isDynamic &&
+									( dynamic.sourceOrderby !==
+										DEFAULT_ORDERBY ||
+										dynamic.sourceOrder !==
+											DEFAULT_ORDER ) )
+							}
+							onDeselect={ () => {
+								if ( isDynamic ) {
+									// Two writes, folded into one undo level.
+									dynamic.setSourceOrder(
+										undefined,
+										undefined
+									);
+									clearRandomOrderAfterEdit();
+								} else {
+									selectCustomOrder();
+								}
+							} }
+						>
+							{ isDynamic ? (
+								<SourceOrderControl
+									order={ {
+										orderby: dynamic.sourceOrderby,
+										order: dynamic.sourceOrder,
+									} }
+									isRandom={ !! randomOrder }
+									onChange={ changeSourceOrder }
+									onSelectRandom={ selectRandomOrder }
+								/>
+							) : (
+								<SortImagesControl
+									currentOrder={ currentOrder }
+									isRandom={ !! randomOrder }
+									canSort={ canSortImages }
+									onSort={ sortImages }
+									onSelectCustom={ selectCustomOrder }
+									onSelectRandom={ selectRandomOrder }
+								/>
+							) }
+						</ToolsPanelItem>
+					) }
 					{ ! isViewportStyleState &&
 						imageSizeOptions?.length > 0 && (
 							<ToolsPanelItem
@@ -955,46 +1069,6 @@ export default function GalleryEdit( props ) {
 								/>
 							</ToolsPanelItem>
 						) }
-					{ isFlexLayout && (
-						<ToolsPanelItem
-							isShownByDefault
-							label={ __( 'Crop images to fit' ) }
-							hasValue={ () =>
-								isViewportStyleState
-									? hasViewportImageCrop
-									: ! activeImageCrop
-							}
-							onDeselect={ () =>
-								setGallerySettings( {
-									imageCrop: isViewportStyleState
-										? undefined
-										: true,
-								} )
-							}
-						>
-							<ToggleControl
-								label={ __( 'Crop images to fit' ) }
-								checked={ activeImageCrop }
-								onChange={ toggleImageCrop }
-							/>
-						</ToolsPanelItem>
-					) }
-					{ ! isViewportStyleState && (
-						<ToolsPanelItem
-							isShownByDefault
-							label={ __( 'Randomize order' ) }
-							hasValue={ () => !! randomOrder }
-							onDeselect={ () =>
-								setAttributes( { randomOrder: false } )
-							}
-						>
-							<ToggleControl
-								label={ __( 'Randomize order' ) }
-								checked={ !! randomOrder }
-								onChange={ toggleRandomOrder }
-							/>
-						</ToolsPanelItem>
-					) }
 					{ ! isViewportStyleState && hasLinkTo && (
 						<ToolsPanelItem
 							isShownByDefault
@@ -1038,6 +1112,30 @@ export default function GalleryEdit( props ) {
 							/>
 						</ToolsPanelItem>
 					) }
+					{ isFlexLayout && (
+						<ToolsPanelItem
+							isShownByDefault
+							label={ __( 'Crop images to fit' ) }
+							hasValue={ () =>
+								isViewportStyleState
+									? hasViewportImageCrop
+									: ! activeImageCrop
+							}
+							onDeselect={ () =>
+								setGallerySettings( {
+									imageCrop: isViewportStyleState
+										? undefined
+										: true,
+								} )
+							}
+						>
+							<ToggleControl
+								label={ __( 'Crop images to fit' ) }
+								checked={ activeImageCrop }
+								onChange={ toggleImageCrop }
+							/>
+						</ToolsPanelItem>
+					) }
 					{ ! isViewportStyleState &&
 						lightboxSetting?.allowEditing &&
 						hasLightboxImages && (

package/src/gallery/editor.scss

@@ -125,12 +125,9 @@
 	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.
+// The Source panel's controls: a description above a full-width action button,
+// stacked inside a PanelBody.
 .wp-block-gallery__source-settings {
-	grid-column: 1 / -1;
 	display: flex;
 	flex-direction: column;
 	gap: $grid-unit-10;
@@ -150,9 +147,8 @@
 	}
 }
 
-// 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.
+// The "showing the first N" notice follows the Source controls in the same
+// PanelBody, which adds no spacing of its own between children.
 .wp-block-gallery__source-notice {
-	grid-column: 1 / -1;
-	margin: 0;
+	margin: $grid-unit-20 0 0;
 }