@wordpress/block-library 11.1.0 → 11.2.0

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/edit.jsx

@@ -7,7 +7,7 @@ import {
 	store as blockEditorStore,
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
-import { useRef } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import GroupPlaceHolder, { useShouldShowPlaceHolder } from './placeholder';
 import { unlock } from '../lock-unlock';
@@ -70,9 +70,9 @@ function GroupEdit( { attributes, name, setAttributes, clientId } ) {
 	const layoutSupportEnabled =
 		themeSupportsLayout || type === 'flex' || type === 'grid';
 
-	// Hooks.
-	const ref = useRef();
-	const blockProps = useBlockProps( { ref } );
+	// State, not a ref, so that the element is there on the next render.
+	const [ dropZoneElement, setDropZoneElement ] = useState( null );
+	const blockProps = useBlockProps( { ref: setDropZoneElement } );
 
 	const [ showPlaceholder, setShowPlaceholder ] = useShouldShowPlaceHolder( {
 		attributes,
@@ -99,7 +99,7 @@ function GroupEdit( { attributes, name, setAttributes, clientId } ) {
 			? blockProps
 			: { className: 'wp-block-group__inner-container' },
 		{
-			dropZoneElement: ref.current,
+			dropZoneElement,
 			templateLock,
 			allowedBlocks,
 			renderAppender,

package/src/heading/README.md

@@ -35,6 +35,9 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
   - [`gradients`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-gradients): `true`
   - [`link`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-link): `true`
+- [`dimensions`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#dimensions):
+  - `minHeight`: `true`
+  - `minWidth`: `true`
 - [`shadow`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#shadow): `true`
 - [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
   - `margin`: `true`
@@ -43,6 +46,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
   - [`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`
   - [`textAlign`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-textalign): `true`
+  - `textIndent`: `true`
   - [`textShadow`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-textshadow): `true`
   - `fitText`: `true`
 - [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity):

package/src/heading/block.json

@@ -53,6 +53,10 @@
 				"text": true
 			}
 		},
+		"dimensions": {
+			"minHeight": true,
+			"minWidth": true
+		},
 		"shadow": true,
 		"spacing": {
 			"margin": true,
@@ -66,6 +70,7 @@
 			"fontSize": true,
 			"lineHeight": true,
 			"textAlign": true,
+			"textIndent": true,
 			"__experimentalFontFamily": true,
 			"__experimentalFontStyle": true,
 			"__experimentalFontWeight": true,

package/src/home-link/README.md

@@ -38,6 +38,12 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
   - [`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`
 - [`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`
+- [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
+  - `margin`: `true`
+  - `padding`: `true`
 - [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity):
   - `clientNavigation`: `true`
 

package/src/home-link/block.json

@@ -52,6 +52,10 @@
 			}
 		},
 		"shadow": true,
+		"dimensions": {
+			"minHeight": true,
+			"minWidth": true
+		},
 		"__experimentalBorder": {
 			"color": true,
 			"radius": true,
@@ -64,6 +68,14 @@
 				"width": false
 			}
 		},
+		"spacing": {
+			"margin": true,
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
+		},
 		"interactivity": {
 			"clientNavigation": true
 		}

package/src/icon/components/custom-inserter/index.jsx

@@ -65,7 +65,11 @@ export default function CustomInserterModal( { onClose, value, onChange } ) {
 				const iconLabel = normalizeSearchInput( icon.label );
 
 				return (
-					iconName.includes( input ) || iconLabel.includes( input )
+					iconName.includes( input ) ||
+					iconLabel.includes( input ) ||
+					( icon.keywords ?? [] ).some( ( keyword ) =>
+						normalizeSearchInput( keyword ).includes( input )
+					)
 				);
 			} );
 		}

package/src/icon/edit.jsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import {
 	DropdownMenu,
 	TextControl,
@@ -22,6 +22,7 @@ import {
 	__experimentalGetSpacingClassesAndStyles as useSpacingProps,
 	getDimensionsClassesAndStyles as useDimensionsProps,
 } from '@wordpress/block-editor';
+import { getBlockBindingsSource } from '@wordpress/blocks';
 import { useState } from '@wordpress/element';
 import { SVG, Rect, Path } from '@wordpress/primitives';
 import { useSelect } from '@wordpress/data';
@@ -30,6 +31,10 @@ import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 import HtmlRenderer from '../utils/html-renderer';
 import { CustomInserterModal } from './components';
 
+// Matches the icon name pattern accepted by /wp/v2/icons/<name> REST route.
+const ICON_NAME_REGEX =
+	/^[a-z0-9](?:[a-z0-9_-]*[a-z0-9])?\/[a-z0-9](?:[a-z0-9_-]*[a-z0-9])?$/;
+
 const IconPlaceholder = ( { className, style } ) => (
 	<SVG
 		xmlns="http://www.w3.org/2000/svg"
@@ -50,13 +55,50 @@ const IconPlaceholder = ( { className, style } ) => (
 	</SVG>
 );
 
-export function Edit( { attributes, setAttributes } ) {
-	const { icon, ariaLabel, flipHorizontal, flipVertical, rotation } =
-		attributes;
+export function Edit( { attributes, setAttributes, isSelected, context } ) {
+	const {
+		icon,
+		ariaLabel,
+		flipHorizontal,
+		flipVertical,
+		rotation,
+		metadata,
+	} = attributes;
 
 	const [ isInserterOpen, setInserterOpen ] = useState( false );
 
 	const isContentOnlyMode = useBlockEditingMode() === 'contentOnly';
+	const { isIconBindingReadOnly = false, iconBindingReadOnlyMessage } =
+		useSelect(
+			( select ) => {
+				if ( ! isSelected ) {
+					return {};
+				}
+
+				const iconBinding = metadata?.bindings?.icon;
+				const blockBindingsSource = getBlockBindingsSource(
+					iconBinding?.source
+				);
+
+				return {
+					isIconBindingReadOnly:
+						!! iconBinding &&
+						! blockBindingsSource?.canUserEditValue?.( {
+							select,
+							context,
+							args: iconBinding.args,
+						} ),
+					iconBindingReadOnlyMessage: blockBindingsSource?.label
+						? sprintf(
+								/* translators: %s: Label of the bindings source. */
+								__( 'Connected to %s' ),
+								blockBindingsSource.label
+							)
+						: __( 'Connected to dynamic data' ),
+				};
+			},
+			[ context, isSelected, metadata?.bindings?.icon ]
+		);
 
 	const colorProps = useColorProps( attributes );
 	// Only padding is applied to the inner SVG element, matching the front
@@ -73,8 +115,14 @@ export function Edit( { attributes, setAttributes } ) {
 
 	const selectedIcon = useSelect(
 		( select ) => {
-			const { getEntityRecord } = select( coreDataStore );
-			return icon ? getEntityRecord( 'root', 'icon', icon ) : null;
+			if ( typeof icon !== 'string' || ! ICON_NAME_REGEX.test( icon ) ) {
+				return null;
+			}
+			return select( coreDataStore ).getEntityRecord(
+				'root',
+				'icon',
+				icon
+			);
 		},
 		[ icon ]
 	);
@@ -87,6 +135,7 @@ export function Edit( { attributes, setAttributes } ) {
 	};
 
 	const rotationStyle = rotation ? { rotate: `${ rotation }deg` } : {};
+	const iconToolbarButtonLabel = icon ? __( 'Replace' ) : __( 'Choose icon' );
 
 	const blockControls = (
 		<>
@@ -125,11 +174,23 @@ export function Edit( { attributes, setAttributes } ) {
 			) }
 			<BlockControls group="other">
 				<ToolbarButton
+					disabled={ isIconBindingReadOnly }
+					label={
+						isIconBindingReadOnly
+							? iconBindingReadOnlyMessage
+							: undefined
+					}
+					showTooltip={ isIconBindingReadOnly }
+					aria-label={
+						isIconBindingReadOnly
+							? iconToolbarButtonLabel
+							: undefined
+					}
 					onClick={ () => {
 						setInserterOpen( true );
 					} }
 				>
-					{ icon ? __( 'Replace' ) : __( 'Choose icon' ) }
+					{ iconToolbarButtonLabel }
 				</ToolbarButton>
 				{ isContentOnlyMode && icon && (
 					// Add some extra controls for content attributes when content only mode is active.

package/src/icon/index.php

@@ -15,7 +15,7 @@
  * @return string Returns the Icon.
  */
 function render_block_core_icon( $attributes ) {
-	if ( empty( $attributes['icon'] ) ) {
+	if ( empty( $attributes['icon'] ) || ! is_string( $attributes['icon'] ) ) {
 		return;
 	}
 

package/src/image/index.php

@@ -369,13 +369,12 @@ function block_core_image_print_lightbox_overlay() {
 			data-wp-on--touchstart="actions.handleTouchStart"
 			data-wp-on--touchmove="actions.handleTouchMove"
 			data-wp-on--touchend="actions.handleTouchEnd"
-			data-wp-on--click="actions.hideLightbox"
 			data-wp-on-window--resize="callbacks.setOverlayStyles"
 			data-wp-on-window--scroll="actions.handleScroll"
 			data-wp-bind--style="state.overlayStyles"
 			tabindex="-1"
 			>
-				<button type="button" style="fill:{$close_button_color}" class="wp-lightbox-close-button" data-wp-bind--aria-label="state.closeButtonAriaLabel">
+				<button type="button" style="fill:{$close_button_color}" class="wp-lightbox-close-button" data-wp-on--click="actions.hideLightbox" data-wp-bind--aria-label="state.closeButtonAriaLabel">
 					<span class="wp-lightbox-close-icon" data-wp-bind--hidden="!state.hasNavigationIcon">{$close_button_icon}</span>
 					<span class="wp-lightbox-close-text" data-wp-bind--hidden="!state.hasNavigationText">{$close_button_text}</span>
 				</button>
@@ -383,7 +382,7 @@ function block_core_image_print_lightbox_overlay() {
 					<span class="wp-lightbox-navigation-icon" data-wp-bind--hidden="!state.hasNavigationIcon">{$prev_button_icon}</span>
 					<span class="wp-lightbox-navigation-text" data-wp-bind--hidden="!state.hasNavigationText">{$prev_button_text}</span>
 				</button>
-				<div class="lightbox-image-container">
+				<div class="lightbox-image-container lightbox-thumbnail-container">
 					<figure data-wp-bind--class="state.selectedImage.figureClassNames" data-wp-bind--style="state.figureStyles">
 						<img data-wp-bind--alt="state.selectedImage.alt" data-wp-bind--class="state.selectedImage.imgClassNames" data-wp-bind--style="state.imgStyles" data-wp-bind--src="state.selectedImage.currentSrc">
 					</figure>
@@ -405,7 +404,7 @@ function block_core_image_print_lightbox_overlay() {
 					<span class="wp-lightbox-navigation-icon" data-wp-bind--hidden="!state.hasNavigationIcon">{$next_button_icon}</span>
 				</button>
 				<div data-wp-text="state.ariaLabel" aria-live="polite" aria-atomic="true" class="screen-reader-text"></div>
-				<div class="scrim" style="background-color: {$background_color}" aria-hidden="true"></div>
+				<div class="scrim" style="background-color: {$background_color}" aria-hidden="true" data-wp-on--click="actions.hideLightbox"></div>
 		</div>
 HTML;
 }