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

package/src/gallery/order-controls.tsx

@@ -0,0 +1,143 @@
+import { __ } from '@wordpress/i18n';
+import { SelectControl as WCSelectControl } from '@wordpress/components';
+import {
+	ORDER_OPTIONS,
+	RANDOM_OPTION,
+	RANDOM_ORDER,
+	parseOrderValue,
+	toOrderValue,
+} from './order-options';
+import type { Order } from './order-options';
+
+function getOrderHelp( isRandom: boolean ): string | undefined {
+	return isRandom
+		? __( 'Images are shown in a random order each time the page loads.' )
+		: undefined;
+}
+
+const SOURCE_ORDER_OPTIONS = [ ...ORDER_OPTIONS, RANDOM_OPTION ];
+
+type SourceOrderControlProps = {
+	/** The stored query order. */
+	order: Order;
+	/** Whether the gallery's `randomOrder` attribute is set. */
+	isRandom: boolean;
+	/**
+	 * Called with `{ orderby, order }` to update the query. Choosing an order
+	 * also turns "Random" off; the handler owns that so both writes land in one
+	 * undo level.
+	 */
+	onChange: ( order: Order ) => void;
+	/** Called when "Random" is chosen. */
+	onSelectRandom: () => void;
+};
+
+/**
+ * Ordering control for a dynamic gallery, shown in the Settings panel. The
+ * chosen order is a *setting*: it's stored in the source's query and re-applied
+ * every time the source resolves. "Random" is stored separately (the
+ * `randomOrder` attribute) and overrides the query order on the front end, so
+ * while it's set the control shows it instead of the query order.
+ */
+export function SourceOrderControl( {
+	order,
+	isRandom,
+	onChange,
+	onSelectRandom,
+}: SourceOrderControlProps ) {
+	return (
+		<WCSelectControl
+			label={ __( 'Order by' ) }
+			value={ isRandom ? RANDOM_ORDER : toOrderValue( order ) }
+			options={ SOURCE_ORDER_OPTIONS }
+			help={ getOrderHelp( isRandom ) }
+			onChange={ ( value ) => {
+				if ( value === RANDOM_ORDER ) {
+					onSelectRandom();
+					return;
+				}
+				onChange( parseOrderValue( value ) );
+			} }
+		/>
+	);
+}
+
+const CUSTOM_ORDER = 'custom';
+
+type SortImagesControlProps = {
+	/** The last sort applied, while it still holds, or `null` for a custom order. */
+	currentOrder: Order | null;
+	/** Whether the gallery's `randomOrder` attribute is set. */
+	isRandom: boolean;
+	/** Whether the sort orders can be applied (false while media resolves). */
+	canSort: boolean;
+	/**
+	 * Called with `{ orderby, order }` to sort the images. Sorting also turns
+	 * "Random" off; the handler owns that so both writes land in one undo level.
+	 */
+	onSort: ( order: Order ) => void;
+	/** Called when "Custom" is chosen, which turns "Random" off. */
+	onSelectCustom: () => void;
+	/** Called when "Random" is chosen. */
+	onSelectRandom: () => void;
+};
+
+/**
+ * Ordering control for a static gallery, shown in the Settings panel.
+ *
+ * The date and title orders are one-off *actions*: choosing one reorders the
+ * inner image blocks once, and the user can drag them into any other order
+ * afterwards. Nothing is stored for them, so the caller passes back the last
+ * sort it applied for as long as the images remain in that sequence, and
+ * `null` ("Custom") otherwise. "Custom" means the order arranged in the
+ * editor, and is choosable only while "Random" is on: picking it turns
+ * "Random" off without reordering anything.
+ *
+ * "Random" is the one stored value (the `randomOrder` attribute). It applies
+ * on the front end only, leaving the editor order as it is, and choosing any
+ * other option clears it.
+ */
+export function SortImagesControl( {
+	currentOrder,
+	isRandom,
+	canSort,
+	onSort,
+	onSelectCustom,
+	onSelectRandom,
+}: SortImagesControlProps ) {
+	const options = [
+		{ label: __( 'Custom' ), value: CUSTOM_ORDER, disabled: ! isRandom },
+		...ORDER_OPTIONS.map( ( option ) => ( {
+			...option,
+			disabled: ! canSort,
+		} ) ),
+		RANDOM_OPTION,
+	];
+
+	let value = CUSTOM_ORDER;
+	if ( isRandom ) {
+		value = RANDOM_ORDER;
+	} else if ( currentOrder ) {
+		value = toOrderValue( currentOrder );
+	}
+
+	return (
+		<WCSelectControl
+			label={ __( 'Order by' ) }
+			value={ value }
+			options={ options }
+			help={ getOrderHelp( isRandom ) }
+			onChange={ ( nextValue ) => {
+				if ( nextValue === RANDOM_ORDER ) {
+					onSelectRandom();
+					return;
+				}
+				if ( nextValue === CUSTOM_ORDER ) {
+					onSelectCustom();
+					return;
+				}
+				onSort( parseOrderValue( nextValue ) );
+			} }
+		/>
+	);
+}

package/src/gallery/order-images.js

@@ -0,0 +1,111 @@
+/**
+ * Returns the value an image block is ordered by, or `undefined` when it has no
+ * resolved attachment record to take it from.
+ *
+ * @param {Object} block   A `core/image` inner block.
+ * @param {Array}  media   Attachment records for the gallery's images.
+ * @param {string} orderby `date` or `title`.
+ * @return {?string} The sort key.
+ */
+function getSortKey( block, media, orderby ) {
+	const { id } = block.attributes;
+	if ( id === undefined ) {
+		return undefined;
+	}
+	const record = media.find( ( item ) => item.id === id );
+	if ( ! record ) {
+		return undefined;
+	}
+	if ( orderby === 'title' ) {
+		// The media is fetched in the default (view) context, so `rendered`
+		// is the usual source; `raw` is only present with the edit context.
+		return record.title?.raw ?? record.title?.rendered ?? '';
+	}
+	return record.date ?? '';
+}
+
+/**
+ * Whether there's anything to sort: at least two image blocks with a resolved
+ * attachment record. With fewer, sorting is a no-op, so the sort options are
+ * disabled.
+ *
+ * @param {Array} blocks The gallery's `core/image` inner blocks.
+ * @param {Array} media  Attachment records for the gallery's images.
+ * @return {boolean} Whether the images can be sorted.
+ */
+export function hasSortableImages( blocks, media ) {
+	// Runs on every render, so avoid scanning `media` once per block.
+	const mediaIds = new Set( media.map( ( item ) => item.id ) );
+	let sortableCount = 0;
+	for ( const block of blocks ) {
+		if ( ! mediaIds.has( block.attributes.id ) ) {
+			continue;
+		}
+		sortableCount++;
+		if ( sortableCount > 1 ) {
+			return true;
+		}
+	}
+	return false;
+}
+
+/**
+ * Compares two sort keys for the given field. Titles use a natural,
+ * case-insensitive comparison so `IMG_2` sorts before `IMG_10`; dates are ISO
+ * 8601 strings, so a plain string comparison orders them chronologically.
+ *
+ * @param {string} a       First key.
+ * @param {string} b       Second key.
+ * @param {string} orderby `date` or `title`.
+ * @return {number} Negative when `a` sorts first, positive when `b` does.
+ */
+function compareKeys( a, b, orderby ) {
+	if ( orderby === 'title' ) {
+		return a.localeCompare( b, undefined, {
+			numeric: true,
+			sensitivity: 'base',
+		} );
+	}
+	if ( a === b ) {
+		return 0;
+	}
+	return a < b ? -1 : 1;
+}
+
+/**
+ * Sorts a static gallery's image blocks by an attachment field.
+ *
+ * Blocks without an `id`, or whose attachment record isn't in `media` (still
+ * loading, or deleted from the library), can't be placed, so they keep their
+ * relative order and move to the end. Blocks with equal keys likewise keep
+ * their relative order (`Array.prototype.sort` is stable), so re-applying the
+ * current order is a no-op.
+ *
+ * @param {Array}  blocks        The gallery's `core/image` inner blocks.
+ * @param {Array}  media         Attachment records for the gallery's images.
+ * @param {Object} order         The order to apply.
+ * @param {string} order.orderby `date` or `title`.
+ * @param {string} order.order   `asc` or `desc`.
+ * @return {Array} A new array holding the same block objects, sorted.
+ */
+export function sortImageBlocks( blocks, media, { orderby, order } ) {
+	const direction = order === 'desc' ? -1 : 1;
+	const keys = new Map(
+		blocks.map( ( block ) => [
+			block,
+			getSortKey( block, media, orderby ),
+		] )
+	);
+
+	return [ ...blocks ].sort( ( a, b ) => {
+		const keyA = keys.get( a );
+		const keyB = keys.get( b );
+		if ( keyA === undefined || keyB === undefined ) {
+			if ( keyA === keyB ) {
+				return 0;
+			}
+			return keyA === undefined ? 1 : -1;
+		}
+		return compareKeys( keyA, keyB, orderby ) * direction;
+	} );
+}

package/src/gallery/order-options.ts

@@ -0,0 +1,75 @@
+import { __ } from '@wordpress/i18n';
+
+/**
+ * An ordering of gallery images: the field to order by and the direction.
+ */
+export type Order = {
+	orderby: string;
+	order: string;
+};
+
+/**
+ * The composite `"orderby/order"` select value for an order. A select needs one
+ * string per option, so this format exists only at the select boundary; the
+ * rest of the feature passes `Order` objects.
+ *
+ * @param order The order.
+ * @return The select value.
+ */
+export function toOrderValue( order: Order ): string {
+	return `${ order.orderby }/${ order.order }`;
+}
+
+/**
+ * Parses a composite `"orderby/order"` select value back into an order.
+ *
+ * @param value The select value.
+ * @return The order.
+ */
+export function parseOrderValue( value: string ): Order {
+	const [ orderby, order ] = value.split( '/' );
+	return { orderby, order };
+}
+
+/**
+ * Ordering options offered for gallery images. Each value is a composite
+ * `orderby/order` string. The two modes share values and labels but differ
+ * in their comparison logic:
+ *
+ * - A dynamic gallery passes `orderby/order` to the REST API in the editor (the
+ *   `/wp/v2/media` collection params; see `dynamic-source.js`) and to a
+ *   `WP_Query` on the front end (see `index.php`). Either way the database
+ *   orders by post date or post title.
+ * - A static gallery orders its inner image blocks client-side from the same
+ *   attachment fields (see `order-images.js`). Dates compare the same way.
+ *   Titles use a natural, case-insensitive compare, so `IMG_2` sorts before
+ *   `IMG_10` where the database would put it after. The two title orders can
+ *   therefore differ for numbered titles.
+ *
+ * `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`).
+ */
+export 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',
+	},
+];
+
+/**
+ * The "Random" order. Unlike the orders above it isn't an `orderby`: it is the
+ * gallery's `randomOrder` attribute, applied only on the front end by shuffling
+ * the rendered images (see `index.php`), so the editor keeps showing the
+ * underlying order. Offered as the last option of both modes' "Order by"
+ * control, since it overrides whatever other order is in place.
+ */
+export const RANDOM_ORDER = 'random';
+export const RANDOM_OPTION = { label: __( 'Random' ), value: RANDOM_ORDER };

package/src/gallery/test/edit.jsdom.test.js

@@ -26,6 +26,15 @@ const IMAGE_ATTRIBUTES = {
 
 const VIEWPORT_STATE_INITIALIZER = 'test/viewport-state-initializer';
 
+const createGallery = ( attributes = {} ) =>
+	createBlock( 'core/gallery', attributes, [
+		createBlock( 'core/image', IMAGE_ATTRIBUTES ),
+		createBlock( 'core/image', {
+			...IMAGE_ATTRIBUTES,
+			id: 2,
+		} ),
+	] );
+
 // The Gallery only offers its aspect ratio control when the theme or the
 // defaults provide ratios to choose from.
 const ASPECT_RATIO_SETTINGS = {
@@ -110,16 +119,84 @@ describe( 'Gallery block', () => {
 		} );
 	} );
 
-	describe( 'Layout', () => {
-		const createGallery = ( attributes = {} ) =>
-			createBlock( 'core/gallery', attributes, [
-				createBlock( 'core/image', IMAGE_ATTRIBUTES ),
-				createBlock( 'core/image', {
-					...IMAGE_ATTRIBUTES,
-					id: 2,
-				} ),
-			] );
+	describe( 'Order by', () => {
+		test( 'offers a sort control in Settings for a static gallery that reads as a custom order until the media resolves', async () => {
+			await setup( createGallery() );
+			await selectBlock( 'Block: Gallery' );
 
+			const orderBy = await screen.findByRole( 'combobox', {
+				name: 'Order by',
+			} );
+			expect( orderBy ).toHaveDisplayValue( 'Custom' );
+			// The attachment records never resolve in this environment, so
+			// there's nothing to sort by yet; Random doesn't need them. Custom
+			// is only choosable while Random is on, since that's all it does.
+			expect(
+				screen.getByRole( 'option', { name: 'Newest to oldest' } )
+			).toBeDisabled();
+			expect(
+				screen.getByRole( 'option', { name: 'Custom' } )
+			).toBeDisabled();
+			expect(
+				screen.getByRole( 'option', { name: 'Random' } )
+			).toBeEnabled();
+		} );
+
+		test( 'stores a random order for a static gallery and clears it when choosing the custom order', async () => {
+			await setup( createGallery() );
+			await selectBlock( 'Block: Gallery' );
+
+			const orderBy = await screen.findByRole( 'combobox', {
+				name: 'Order by',
+			} );
+			// The select is controlled from the `randomOrder` attribute, so
+			// its display value reflects the stored state after each change.
+			await userEvent.selectOptions( orderBy, 'random' );
+			expect( orderBy ).toHaveDisplayValue( 'Random' );
+			expect(
+				screen.getByRole( 'option', { name: 'Custom' } )
+			).toBeEnabled();
+
+			await userEvent.selectOptions( orderBy, 'custom' );
+			expect( orderBy ).toHaveDisplayValue( 'Custom' );
+			expect(
+				screen.getByRole( 'option', { name: 'Custom' } )
+			).toBeDisabled();
+		} );
+
+		test( 'offers a random order but no custom order for a dynamic gallery', async () => {
+			await setup(
+				createBlock( 'core/gallery', {
+					dynamicContent: { source: 'core/attached-media' },
+				} )
+			);
+			await selectBlock( 'Block: Dynamic Gallery' );
+
+			const orderBy = await screen.findByRole( 'combobox', {
+				name: 'Order by',
+			} );
+			expect( orderBy ).toHaveDisplayValue( 'Newest to oldest' );
+			expect(
+				screen.queryByRole( 'option', { name: 'Custom' } )
+			).not.toBeInTheDocument();
+			// The order lives in Settings; the Source panel is a plain
+			// PanelBody with no resettable items, hence no options menu.
+			expect(
+				screen.getByRole( 'button', { name: 'Settings options' } )
+			).toBeInTheDocument();
+			expect(
+				screen.queryByRole( 'button', { name: 'Source options' } )
+			).not.toBeInTheDocument();
+
+			await userEvent.selectOptions( orderBy, 'random' );
+			expect( orderBy ).toHaveDisplayValue( 'Random' );
+
+			await userEvent.selectOptions( orderBy, 'title/asc' );
+			expect( orderBy ).toHaveDisplayValue( 'A → Z' );
+		} );
+	} );
+
+	describe( 'Layout', () => {
 		test( 'keeps the custom Gallery controls for the default Flex layout', async () => {
 			await setup( createGallery() );
 			await selectBlock( 'Block: Gallery' );
@@ -149,7 +226,7 @@ describe( 'Gallery block', () => {
 				screen.getByLabelText( 'Crop images to fit' )
 			).toBeInTheDocument();
 			expect(
-				screen.queryByLabelText( 'Randomize order' )
+				screen.queryByRole( 'combobox', { name: 'Order by' } )
 			).not.toBeInTheDocument();
 		} );
 

package/src/gallery/test/order-images.js

@@ -0,0 +1,162 @@
+import { describe, expect, it } from 'vitest';
+import { hasSortableImages, sortImageBlocks } from '../order-images';
+
+const NEWEST_FIRST = { orderby: 'date', order: 'desc' };
+const OLDEST_FIRST = { orderby: 'date', order: 'asc' };
+const TITLE_A_TO_Z = { orderby: 'title', order: 'asc' };
+const TITLE_Z_TO_A = { orderby: 'title', order: 'desc' };
+
+/**
+ * Creates the minimal `core/image` block the helpers read: an attachment id
+ * and a client ID, which defaults from the id.
+ *
+ * @param {number|undefined} id       Attachment id, or `undefined` for an external image.
+ * @param {string}           clientId Block client ID.
+ */
+function createImageBlock( id, clientId = `block-${ id }` ) {
+	return { clientId, attributes: { id } };
+}
+
+/**
+ * Creates image blocks for the given attachment ids, in that order.
+ *
+ * @param {...number} ids Attachment ids.
+ */
+function createImageBlocks( ...ids ) {
+	return ids.map( ( id ) => createImageBlock( id ) );
+}
+
+/**
+ * Creates the minimal attachment record the helpers read.
+ *
+ * @param {number} id    Attachment id.
+ * @param {string} title Attachment title.
+ * @param {string} date  Upload date, ISO 8601.
+ */
+function createAttachment( id, title, date ) {
+	return { id, title: { raw: title, rendered: title }, date };
+}
+
+// Listed oldest to newest, so the date order reads top to bottom: 2, 3, 1, 4.
+// The ids deliberately don't follow the dates, so a sort keyed on the id (or
+// on the position in this list) can't pass the date tests by accident. The
+// title order is different again: apple, Beach, IMG_2, IMG_10 (2, 1, 4, 3),
+// which requires the compare to ignore case and treat numbers naturally.
+const ATTACHMENTS = [
+	createAttachment( 2, 'apple', '2024-01-15T10:00:00' ),
+	createAttachment( 3, 'IMG_10', '2024-02-01T10:00:00' ),
+	createAttachment( 1, 'Beach', '2024-03-01T10:00:00' ),
+	createAttachment( 4, 'IMG_2', '2024-04-01T10:00:00' ),
+];
+
+const getImageIds = ( blocks ) =>
+	blocks.map( ( { attributes } ) => attributes.id );
+
+describe( 'sortImageBlocks', () => {
+	it( 'sorts by date, newest first', () => {
+		const blocks = createImageBlocks( 1, 2, 3, 4 );
+		expect(
+			getImageIds( sortImageBlocks( blocks, ATTACHMENTS, NEWEST_FIRST ) )
+		).toEqual( [ 4, 1, 3, 2 ] );
+	} );
+
+	it( 'sorts by date, oldest first', () => {
+		const blocks = createImageBlocks( 1, 2, 3, 4 );
+		expect(
+			getImageIds( sortImageBlocks( blocks, ATTACHMENTS, OLDEST_FIRST ) )
+		).toEqual( [ 2, 3, 1, 4 ] );
+	} );
+
+	it( 'sorts by title ascending, ignoring case and comparing numbers naturally', () => {
+		const blocks = createImageBlocks( 1, 2, 3, 4 );
+		expect(
+			getImageIds( sortImageBlocks( blocks, ATTACHMENTS, TITLE_A_TO_Z ) )
+		).toEqual( [ 2, 1, 4, 3 ] );
+	} );
+
+	it( 'sorts by title descending', () => {
+		const blocks = createImageBlocks( 1, 2, 3, 4 );
+		expect(
+			getImageIds( sortImageBlocks( blocks, ATTACHMENTS, TITLE_Z_TO_A ) )
+		).toEqual( [ 3, 4, 1, 2 ] );
+	} );
+
+	it( 'returns a new array containing the same block objects', () => {
+		const blocks = createImageBlocks( 1, 2 );
+		const sorted = sortImageBlocks( blocks, ATTACHMENTS, OLDEST_FIRST );
+		expect( sorted ).not.toBe( blocks );
+		expect( sorted[ 0 ] ).toBe( blocks[ 1 ] );
+		expect( sorted[ 1 ] ).toBe( blocks[ 0 ] );
+	} );
+
+	it( 'moves images without an id or attachment record to the end, in their existing order', () => {
+		const blocks = [
+			createImageBlock( undefined, 'external-a' ),
+			createImageBlock( 1 ),
+			createImageBlock( 99 ),
+			createImageBlock( 2 ),
+			createImageBlock( undefined, 'external-b' ),
+		];
+		const sorted = sortImageBlocks( blocks, ATTACHMENTS, OLDEST_FIRST );
+		expect( sorted.map( ( { clientId } ) => clientId ) ).toEqual( [
+			'block-2',
+			'block-1',
+			'external-a',
+			'block-99',
+			'external-b',
+		] );
+	} );
+
+	it( 'keeps the existing order of images with equal keys', () => {
+		const media = [
+			createAttachment( 1, 'Same', '2024-01-01T00:00:00' ),
+			createAttachment( 2, 'Same', '2024-01-01T00:00:00' ),
+		];
+		const blocks = createImageBlocks( 2, 1 );
+		expect(
+			getImageIds( sortImageBlocks( blocks, media, NEWEST_FIRST ) )
+		).toEqual( [ 2, 1 ] );
+		expect(
+			getImageIds( sortImageBlocks( blocks, media, TITLE_A_TO_Z ) )
+		).toEqual( [ 2, 1 ] );
+	} );
+
+	it( 'falls back to the rendered title when there is no raw title', () => {
+		const media = [
+			{ id: 1, title: { rendered: 'b' }, date: '' },
+			{ id: 2, title: { rendered: 'a' }, date: '' },
+		];
+		expect(
+			getImageIds(
+				sortImageBlocks(
+					createImageBlocks( 1, 2 ),
+					media,
+					TITLE_A_TO_Z
+				)
+			)
+		).toEqual( [ 2, 1 ] );
+	} );
+} );
+
+describe( 'hasSortableImages', () => {
+	it( 'is true with two or more images that have an attachment record', () => {
+		expect(
+			hasSortableImages( createImageBlocks( 1, 2 ), ATTACHMENTS )
+		).toBe( true );
+	} );
+
+	it( 'is false while the attachment records have not resolved', () => {
+		expect( hasSortableImages( createImageBlocks( 1, 2 ), [] ) ).toBe(
+			false
+		);
+	} );
+
+	it( 'does not count images without an id or attachment record', () => {
+		expect(
+			hasSortableImages(
+				createImageBlocks( 1, undefined, 99 ),
+				ATTACHMENTS
+			)
+		).toBe( false );
+	} );
+} );

package/src/gallery/use-dynamic-gallery.js

@@ -235,7 +235,7 @@ export default function useDynamicGallery( {
 
 	// Updates the source ordering within `dynamicContent.args`. Passing
 	// `undefined` (or the default order) strips the keys so they aren't
-	// persisted redundantly and the ToolsPanel item reads as unset.
+	// persisted redundantly and the Settings "Order by" item reads as unset.
 	function setSourceOrder( nextOrderby, nextOrder ) {
 		const nextArgs = { ...dynamicContent?.args };
 		delete nextArgs.orderBy;
@@ -256,13 +256,6 @@ export default function useDynamicGallery( {
 		setAttributes( { dynamicContent: nextSource } );
 	}
 
-	// Resets the source to its bare form: keeps the source kind, drops its args.
-	function resetSource() {
-		setAttributes( {
-			dynamicContent: { source: dynamicContent.source },
-		} );
-	}
-
 	return {
 		dynamicContent,
 		canUseDynamicSource,
@@ -278,6 +271,5 @@ export default function useDynamicGallery( {
 		enableDynamicMode,
 		convertToStatic,
 		setSourceOrder,
-		resetSource,
 	};
 }

package/src/gallery/use-get-media.js

@@ -14,9 +14,15 @@ const EMPTY_IMAGE_MEDIA = [];
 export default function useGetMedia( innerBlockImages ) {
 	return useSelect(
 		( select ) => {
+			// Sorted so the query only changes when the set of images changes,
+			// not when they're reordered: a reorder would otherwise be a new
+			// query, and the records would read as empty until it resolved.
+			// Consumers look records up by id, so the returned order doesn't
+			// matter.
 			const imageIds = innerBlockImages
 				.map( ( imageBlock ) => imageBlock.attributes.id )
-				.filter( ( id ) => id !== undefined );
+				.filter( ( id ) => id !== undefined )
+				.sort( ( a, b ) => a - b );
 
 			if ( imageIds.length === 0 ) {
 				return EMPTY_IMAGE_MEDIA;
@@ -29,7 +35,6 @@ export default function useGetMedia( innerBlockImages ) {
 					{
 						include: imageIds.join( ',' ),
 						per_page: -1,
-						orderby: 'include',
 					}
 				) ?? EMPTY_IMAGE_MEDIA
 			);

package/src/group/README.md

@@ -48,6 +48,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`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`
+  - `textColumns`: `true`
 - [`layout`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout):
   - [`allowSizingOnChildren`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowsizingonchildren): `true`
 - [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity):

package/src/group/block.json

@@ -75,6 +75,7 @@
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
+			"textColumns": true,
 			"__experimentalFontFamily": true,
 			"__experimentalFontWeight": true,
 			"__experimentalFontStyle": true,