@wordpress/block-library 11.1.0 → 11.2.0

package/src/image/style.scss

@@ -118,7 +118,7 @@
 
 		// If a browser supports it, we will switch to using a circular SVG mask.
 		@supports (mask-image: none) or (-webkit-mask-image: none) {
-			mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');
+			mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='50'/%3E%3C/svg%3E");
 			mask-mode: alpha;
 			mask-repeat: no-repeat;
 			mask-size: contain;
@@ -148,7 +148,7 @@
 		cursor: zoom-in;
 	}
 
-	img:hover + button {
+	&:has(img:hover) button {
 		opacity: 1;
 	}
 
@@ -305,6 +305,9 @@
 		width: var(--wp--lightbox-container-width);
 		height: var(--wp--lightbox-container-height);
 		z-index: 2000001;
+		// Clicking the image does not close the lightbox, so it should not
+		// appear clickable.
+		cursor: default;
 	}
 
 	.wp-block-image {
@@ -331,6 +334,11 @@
 		}
 	}
 
+	.lightbox-thumbnail-container {
+		--wp--lightbox-image-width: var(--wp--lightbox-thumbnail-width);
+		--wp--lightbox-image-height: var(--wp--lightbox-thumbnail-height);
+	}
+
 	button {
 		border: none;
 		background: none;
@@ -445,9 +453,11 @@
 
 @keyframes lightbox-zoom-in {
 	0% {
+		clip-path: var(--wp--lightbox-initial-clip);
 		transform: translate(calc((-100vw + var(--wp--lightbox-scrollbar-width)) / 2 + var(--wp--lightbox-initial-left-position)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
 	}
 	100% {
+		clip-path: inset(0);
 		transform: translate(-50%, -50%) scale(1, 1);
 	}
 }
@@ -455,6 +465,7 @@
 @keyframes lightbox-zoom-out {
 	0% {
 		visibility: visible;
+		clip-path: inset(0);
 		transform: translate(-50%, -50%) scale(1, 1);
 	}
 	99% {
@@ -462,6 +473,7 @@
 	}
 	100% {
 		visibility: hidden;
+		clip-path: var(--wp--lightbox-initial-clip);
 		transform: translate(calc((-100vw + var(--wp--lightbox-scrollbar-width)) / 2 + var(--wp--lightbox-initial-left-position)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
 	}
 }

package/src/image/test/use-open-image-media-editor-modal.jsdom.test.js

@@ -318,6 +318,7 @@ describe( 'useOpenImageMediaEditorModal', () => {
 		expect( openMediaEditorModal ).toHaveBeenCalledWith( {
 			id: 1,
 			onUpdate: expect.any( Function ),
+			onUndo: expect.any( Function ),
 			onClose: undefined,
 		} );
 		expect( setAttributes ).toHaveBeenCalledWith( {
@@ -360,6 +361,7 @@ describe( 'useOpenImageMediaEditorModal', () => {
 		expect( openMediaEditorModal ).toHaveBeenCalledWith( {
 			id: 1,
 			onUpdate: expect.any( Function ),
+			onUndo: expect.any( Function ),
 			onClose: undefined,
 		} );
 		expect( setAttributes ).toHaveBeenCalledWith( {
@@ -623,66 +625,6 @@ describe( 'useOpenImageMediaEditorModal', () => {
 		} );
 	} );
 
-	it( 'restores the alt text and caption a save overwrote when undoing back to the previous attachment', async () => {
-		const originalAttachment = {
-			id: 1,
-			alt_text: 'Original alt',
-			caption: { raw: 'Original caption' },
-		};
-		const croppedAttachment = {
-			id: 2,
-			alt_text: 'Updated alt',
-			caption: { raw: 'Updated caption' },
-		};
-		const registry = createRegistry( {
-			getEditedEntityRecord: ( kind, name, attachmentId ) =>
-				attachmentId === 1 ? originalAttachment : undefined,
-			resolveGetEntityRecord: ( kind, name, attachmentId ) =>
-				attachmentId === 2 ? croppedAttachment : originalAttachment,
-		} );
-		useRegistry.mockReturnValue( registry );
-		const setAttributes = vi.fn();
-		const openMediaEditorModal = vi.fn();
-		mockMediaEditorModalSetting( openMediaEditorModal );
-		const { result } = renderHook( () =>
-			useOpenImageMediaEditorModal( {
-				attributes: {
-					id: 1,
-					url: 'original.jpg',
-					alt: 'Original alt',
-					caption: 'Original caption',
-				},
-				setAttributes,
-			} )
-		);
-
-		await act( async () => {
-			await result.current();
-		} );
-		const onUpdate = openMediaEditorModal.mock.calls[ 0 ][ 0 ].onUpdate;
-		await act( async () => {
-			await onUpdate( { id: 2, url: 'cropped.jpg' } );
-		} );
-		// The media editor's Undo only reports the previous attachment.
-		await act( async () => {
-			await onUpdate( { id: 1, url: 'original.jpg' } );
-		} );
-
-		expect( setAttributes ).toHaveBeenCalledTimes( 2 );
-		expect( setAttributes ).toHaveBeenNthCalledWith( 1, {
-			id: 2,
-			url: 'cropped.jpg',
-			alt: 'Updated alt',
-			caption: 'Updated caption',
-		} );
-		expect( setAttributes ).toHaveBeenNthCalledWith( 2, {
-			id: 1,
-			url: 'original.jpg',
-			alt: 'Original alt',
-			caption: 'Original caption',
-		} );
-	} );
-
 	it( 'does not restore overwritten metadata when a later session saves back to the previous attachment', async () => {
 		const originalAttachment = {
 			id: 1,
@@ -1005,6 +947,126 @@ describe( 'useOpenImageMediaEditorModal', () => {
 	} );
 } );
 
+describe( 'media editor Undo', () => {
+	it( 'restores the block metadata, selected image size, and link after restoring an original image', async () => {
+		const { setAttributes, openMediaEditorModal } = await runModalUpdate( {
+			attributes: {
+				id: 2,
+				url: 'crop-medium.jpg',
+				alt: 'Close-up',
+				caption: 'Cropped caption',
+				sizeSlug: 'medium',
+				linkDestination: 'media',
+				href: 'crop.jpg',
+			},
+			registryOptions: {
+				getEditedEntityRecord: () => ( {
+					id: 2,
+					alt_text: 'Close-up',
+					caption: { raw: 'Cropped caption' },
+				} ),
+				resolveGetEntityRecord: () => ( {
+					id: 1,
+					source_url: 'original.jpg',
+					alt_text: 'Full scene',
+					caption: { raw: 'Original caption' },
+					media_details: {
+						sizes: { full: { source_url: 'original.jpg' } },
+					},
+				} ),
+			},
+			updatePayload: { id: 1, url: 'original.jpg' },
+		} );
+		expect( setAttributes ).toHaveBeenLastCalledWith( {
+			id: 1,
+			url: 'original.jpg',
+			alt: 'Full scene',
+			caption: 'Original caption',
+			sizeSlug: 'full',
+			href: 'original.jpg',
+		} );
+
+		act( () => openMediaEditorModal.mock.calls[ 0 ][ 0 ].onUndo() );
+
+		expect( setAttributes ).toHaveBeenLastCalledWith( {
+			id: 2,
+			url: 'crop-medium.jpg',
+			alt: 'Close-up',
+			caption: 'Cropped caption',
+			sizeSlug: 'medium',
+			href: 'crop.jpg',
+		} );
+	} );
+
+	it( 'leaves custom metadata and unrelated block edits out of Undo', async () => {
+		const { setAttributes, openMediaEditorModal } = await runModalUpdate( {
+			attributes: {
+				id: 1,
+				url: 'original.jpg',
+				alt: 'Custom alt',
+				caption: 'Custom caption',
+				width: '300px',
+				linkDestination: 'custom',
+				href: 'https://example.com/custom',
+			},
+			registryOptions: croppedAttachmentRecords(),
+			updatePayload: CROP_UPDATE,
+		} );
+
+		act( () => openMediaEditorModal.mock.calls[ 0 ][ 0 ].onUndo() );
+
+		expect( setAttributes ).toHaveBeenLastCalledWith( {
+			id: 1,
+			url: 'original.jpg',
+		} );
+	} );
+
+	it( 'keeps the previous image when Undo runs before metadata finishes loading', async () => {
+		const pendingAttachment = createDeferred();
+		useRegistry.mockReturnValue(
+			createRegistry( {
+				getEditedEntityRecord: () => ORIGINAL_ATTACHMENT,
+				resolveGetEntityRecord: () => pendingAttachment.promise,
+			} )
+		);
+		const setAttributes = vi.fn();
+		const onUrlChange = vi.fn();
+		const openMediaEditorModal = vi.fn();
+		mockMediaEditorModalSetting( openMediaEditorModal );
+		const { result } = renderHook( () =>
+			useOpenImageMediaEditorModal( {
+				attributes: {
+					id: 1,
+					url: 'original-medium.jpg',
+					alt: '',
+					caption: '',
+				},
+				setAttributes,
+				onUrlChange,
+			} )
+		);
+		await act( () => result.current() );
+		const { onUpdate, onUndo } = openMediaEditorModal.mock.calls[ 0 ][ 0 ];
+		let updatePromise;
+		act( () => {
+			updatePromise = onUpdate( CROP_UPDATE );
+		} );
+
+		act( () => onUndo() );
+		await act( async () => {
+			pendingAttachment.resolve( CROPPED_ATTACHMENT );
+			await updatePromise;
+		} );
+
+		expect( setAttributes ).toHaveBeenCalledTimes( 1 );
+		expect( setAttributes ).toHaveBeenCalledWith( {
+			id: 1,
+			url: 'original-medium.jpg',
+		} );
+		expect( onUrlChange ).toHaveBeenLastCalledWith( 'original-medium.jpg' );
+	} );
+} );
+
 describe( 'getImageBlockMetadataFromAttachment', () => {
 	it( 'normalizes attachment metadata to image block attributes', () => {
 		expect(

package/src/image/use-open-image-media-editor-modal.js

@@ -243,7 +243,8 @@ export function useOpenImageMediaEditorModal( {
 	// the update needs to read — those synced from the attachment's metadata,
 	// and those derived from which attachment the block points at; add more
 	// here if the sync policy grows.
-	const { id, url, alt, caption, sizeSlug, linkDestination } = attributes;
+	const { id, url, alt, caption, sizeSlug, linkDestination, href } =
+		attributes;
 	const registry = useRegistry();
 	const openMediaEditorModal = useSelect(
 		( select ) =>
@@ -261,6 +262,7 @@ export function useOpenImageMediaEditorModal( {
 		caption: caption?.toString(),
 		sizeSlug,
 		linkDestination,
+		href,
 	} );
 	// Snapshot of the attachment's metadata taken just before the modal opens,
 	// used as the baseline for detecting what changed during the editing session.
@@ -268,11 +270,6 @@ export function useOpenImageMediaEditorModal( {
 	// Incremented on every handleMediaUpdate call; stale async continuations
 	// check against this to bail out if a newer update has since started.
 	const mediaEditorMetadataSyncRequestRef = useRef( 0 );
-	// The alt text and caption a save overwrote on the block, and the
-	// attachment it moved the block away from. The media editor's Undo moves
-	// the block back but reports only that attachment's id and url, so this is
-	// what lets the update restore the block's own metadata too.
-	const mediaEditorUndoMetadataRef = useRef();
 
 	useEffect( () => {
 		blockAttributesRef.current = {
@@ -282,8 +279,9 @@ export function useOpenImageMediaEditorModal( {
 			caption: caption?.toString(),
 			sizeSlug,
 			linkDestination,
+			href,
 		};
-	}, [ alt, caption, id, linkDestination, sizeSlug, url ] );
+	}, [ alt, caption, href, id, linkDestination, sizeSlug, url ] );
 
 	// Reads the cached attachment record. The `attachment` postType entity
 	// fetches with `context: 'edit'` by default, so `getEditedEntityRecord`
@@ -340,7 +338,7 @@ export function useOpenImageMediaEditorModal( {
 	);
 
 	const handleMediaUpdate = useCallback(
-		async ( { id: newId, url: newUrl } ) => {
+		async ( { id: newId, url: newUrl }, undoState ) => {
 			if ( typeof newId !== 'number' ) {
 				return;
 			}
@@ -349,10 +347,6 @@ export function useOpenImageMediaEditorModal( {
 			// reuse a stale snapshot.
 			const originalAttachment = mediaEditorMetadataBaselineRef.current;
 			mediaEditorMetadataBaselineRef.current = undefined;
-			// Likewise the metadata the last save overwrote: only the update
-			// straight after that save, its Undo, may restore it.
-			const undoMetadata = mediaEditorUndoMetadataRef.current;
-			mediaEditorUndoMetadataRef.current = undefined;
 			const syncRequest = ++mediaEditorMetadataSyncRequestRef.current;
 			const nextAttributes = {};
 
@@ -360,6 +354,10 @@ export function useOpenImageMediaEditorModal( {
 			const isNewAttachment = newId !== currentBlockAttributes.id;
 
 			if ( isNewAttachment ) {
+				// Capture the block's selected-size URL, not the attachment's
+				// full-size URL supplied by the modal's fallback Undo.
+				undoState.undoAttributes.id = currentBlockAttributes.id;
+				undoState.undoAttributes.url = currentBlockAttributes.url;
 				nextAttributes.id = newId;
 				nextAttributes.url = newUrl ?? currentBlockAttributes.url;
 				if ( nextAttributes.url !== currentBlockAttributes.url ) {
@@ -388,6 +386,7 @@ export function useOpenImageMediaEditorModal( {
 				// A newer update started while we were awaiting; discard
 				// this one.
 				if (
+					undoState.isUndone ||
 					syncRequest !== mediaEditorMetadataSyncRequestRef.current
 				) {
 					return;
@@ -422,22 +421,6 @@ export function useOpenImageMediaEditorModal( {
 							nextAttributes,
 							resolvedMetadataAttributes
 						);
-
-						// Only a save to a new attachment offers an Undo, so
-						// only then keep the values being overwritten.
-						if ( isNewAttachment ) {
-							mediaEditorUndoMetadataRef.current = {
-								id: currentBlockAttributes.id,
-								attributes: Object.fromEntries(
-									Object.keys(
-										resolvedMetadataAttributes
-									).map( ( key ) => [
-										key,
-										latestBlockAttributes[ key ],
-									] )
-								),
-							};
-						}
 					}
 				}
 
@@ -469,14 +452,15 @@ export function useOpenImageMediaEditorModal( {
 				}
 			}
 
-			// The media editor's Undo: the block is going back to the
-			// attachment the last save moved it away from, so put back the
-			// alt text and caption that save overwrote.
-			if ( undoMetadata?.id === newId ) {
-				Object.assign( nextAttributes, undoMetadata.attributes );
-			}
-
 			if ( Object.keys( nextAttributes ).length ) {
+				// Only restore values this save changed. Block-specific
+				// metadata and unrelated edits must not be overwritten.
+				for ( const key of Object.keys( nextAttributes ) ) {
+					if ( ! Object.hasOwn( undoState.undoAttributes, key ) ) {
+						undoState.undoAttributes[ key ] =
+							blockAttributesRef.current[ key ];
+					}
+				}
 				blockAttributesRef.current = {
 					...blockAttributesRef.current,
 					...nextAttributes,
@@ -497,11 +481,6 @@ export function useOpenImageMediaEditorModal( {
 			return;
 		}
 
-		// A new session starts. Drop any metadata kept for the last save's
-		// Undo, so a save in this session that returns the block to that same
-		// attachment isn't mistaken for it.
-		mediaEditorUndoMetadataRef.current = undefined;
-
 		// Snapshot the attachment's current metadata before the user makes
 		// any changes so handleMediaUpdate can compare against it later. Use
 		// the cached record when it's already present; only resolve when
@@ -525,9 +504,24 @@ export function useOpenImageMediaEditorModal( {
 				: fallbackAttachmentRecord ) ||
 			cachedAttachmentRecord;
 
+		// Each opening owns its Undo snapshot, so a later opening cannot
+		// replace the values captured by an earlier snackbar.
+		const undoState = { undoAttributes: {}, isUndone: false };
 		openMediaEditorModal( {
 			id,
-			onUpdate: handleMediaUpdate,
+			onUpdate: ( updated ) => handleMediaUpdate( updated, undoState ),
+			onUndo: () => {
+				undoState.isUndone = true;
+				const { undoAttributes } = undoState;
+				if ( Object.hasOwn( undoAttributes, 'url' ) ) {
+					onUrlChange?.( undoAttributes.url );
+				}
+				blockAttributesRef.current = {
+					...blockAttributesRef.current,
+					...undoAttributes,
+				};
+				setAttributes( undoAttributes );
+			},
 			onClose,
 		} );
 	}, [
@@ -535,8 +529,10 @@ export function useOpenImageMediaEditorModal( {
 		handleMediaUpdate,
 		id,
 		onClose,
+		onUrlChange,
 		openMediaEditorModal,
 		resolveAttachmentRecord,
+		setAttributes,
 	] );
 
 	return id && openMediaEditorModal ? openImageMediaEditorModal : undefined;

package/src/image/view.js

@@ -30,6 +30,14 @@ const touchStartEvent = {
 	startTime: 0,
 };
 
+/**
+ * Elements made inert while the lightbox is open, so only those are restored
+ * when it closes.
+ *
+ * @type {Element[]}
+ */
+let inertElements = [];
+
 const focusableSelectors = [
 	'.wp-lightbox-close-button',
 	'.wp-lightbox-navigation-button',
@@ -430,7 +438,7 @@ const { state, actions, callbacks } = store(
 				// Natural ratio of the image clicked to open the lightbox.
 				const naturalRatio = naturalWidth / naturalHeight;
 				// Original ratio of the image clicked to open the lightbox.
-				let originalRatio = originalWidth / originalHeight;
+				const originalRatio = originalWidth / originalHeight;
 
 				// If it has object-fit: contain, recalculates the original sizes
 				// and the screen position without the blank spaces.
@@ -448,19 +456,18 @@ const { state, actions, callbacks } = store(
 						originalWidth = widthWithoutSpace;
 					}
 				}
-				originalRatio = originalWidth / originalHeight;
 
 				// Typically, it uses the image's full-sized dimensions. If those
 				// dimensions have not been set (i.e. an external image with only one
 				// size), the image's dimensions in the lightbox are the same
 				// as those of the image in the content.
-				let imgMaxWidth = parseFloat(
+				const imgMaxWidth = parseFloat(
 					state.selectedImage.targetWidth &&
 						state.selectedImage.targetWidth !== 'none'
 						? state.selectedImage.targetWidth
 						: naturalWidth
 				);
-				let imgMaxHeight = parseFloat(
+				const imgMaxHeight = parseFloat(
 					state.selectedImage.targetHeight &&
 						state.selectedImage.targetHeight !== 'none'
 						? state.selectedImage.targetHeight
@@ -468,54 +475,10 @@ const { state, actions, callbacks } = store(
 				);
 
 				// Ratio of the biggest image stored in the database.
-				let imgRatio = imgMaxWidth / imgMaxHeight;
-				let containerMaxWidth = imgMaxWidth;
-				let containerMaxHeight = imgMaxHeight;
+				const fullSizeRatio = imgMaxWidth / imgMaxHeight;
 				let containerWidth = imgMaxWidth;
 				let containerHeight = imgMaxHeight;
 
-				// Checks if the target image has a different ratio than the original
-				// one (thumbnail). Recalculates the width and height.
-				if ( naturalRatio.toFixed( 2 ) !== imgRatio.toFixed( 2 ) ) {
-					if ( naturalRatio > imgRatio ) {
-						// If the width is reached before the height, it keeps the maxWidth
-						// and recalculates the height unless the difference between the
-						// maxHeight and the reducedHeight is higher than the maxWidth,
-						// where it keeps the reducedHeight and recalculate the width.
-						const reducedHeight = imgMaxWidth / naturalRatio;
-						if ( imgMaxHeight - reducedHeight > imgMaxWidth ) {
-							imgMaxHeight = reducedHeight;
-							imgMaxWidth = reducedHeight * naturalRatio;
-						} else {
-							imgMaxHeight = imgMaxWidth / naturalRatio;
-						}
-					} else {
-						// If the height is reached before the width, it keeps the maxHeight
-						// and recalculate the width unlesss the difference between the
-						// maxWidth and the reducedWidth is higher than the maxHeight, where
-						// it keeps the reducedWidth and recalculate the height.
-						const reducedWidth = imgMaxHeight * naturalRatio;
-						if ( imgMaxWidth - reducedWidth > imgMaxHeight ) {
-							imgMaxWidth = reducedWidth;
-							imgMaxHeight = reducedWidth / naturalRatio;
-						} else {
-							imgMaxWidth = imgMaxHeight * naturalRatio;
-						}
-					}
-					containerWidth = imgMaxWidth;
-					containerHeight = imgMaxHeight;
-					imgRatio = imgMaxWidth / imgMaxHeight;
-
-					// Calculates the max size of the container.
-					if ( originalRatio > imgRatio ) {
-						containerMaxWidth = imgMaxWidth;
-						containerMaxHeight = containerMaxWidth / originalRatio;
-					} else {
-						containerMaxHeight = imgMaxHeight;
-						containerMaxWidth = containerMaxHeight * originalRatio;
-					}
-				}
-
 				// If the image has been pixelated on purpose, it keeps that size.
 				if (
 					originalWidth > containerWidth ||
@@ -553,21 +516,35 @@ const { state, actions, callbacks } = store(
 				);
 				const targetContainerRatio = targetMaxWidth / targetMaxHeight;
 
-				if ( originalRatio > targetContainerRatio ) {
+				if ( fullSizeRatio > targetContainerRatio ) {
 					// If targetMaxWidth is reached before targetMaxHeight.
 					containerWidth = targetMaxWidth;
-					containerHeight = containerWidth / originalRatio;
+					containerHeight = containerWidth / fullSizeRatio;
 				} else {
 					// If targetMaxHeight is reached before targetMaxWidth.
 					containerHeight = targetMaxHeight;
-					containerWidth = containerHeight * originalRatio;
+					containerWidth = containerHeight * fullSizeRatio;
 				}
 
-				const containerScale = originalWidth / containerWidth;
-				const lightboxImgWidth =
-					imgMaxWidth * ( containerWidth / containerMaxWidth );
-				const lightboxImgHeight =
-					imgMaxHeight * ( containerHeight / containerMaxHeight );
+				const hasCroppedSource =
+					naturalRatio.toFixed( 2 ) !== fullSizeRatio.toFixed( 2 );
+				const sourceRatio = hasCroppedSource
+					? naturalRatio
+					: fullSizeRatio;
+
+				// Include any crop already applied to the thumbnail file.
+				const containerScale = Math.max(
+					originalWidth / containerWidth,
+					originalHeight / containerHeight,
+					originalWidth / ( containerHeight * sourceRatio ),
+					( originalHeight * sourceRatio ) / containerWidth
+				);
+				const thumbnailWidth = originalWidth / containerScale;
+				const thumbnailHeight = originalHeight / containerScale;
+				const cropX = ( containerWidth - thumbnailWidth ) / 2;
+				const cropY = ( containerHeight - thumbnailHeight ) / 2;
+				screenPosX -= cropX * containerScale;
+				screenPosY -= cropY * containerScale;
 
 				// As of this writing, using the calculations above will render the
 				// lightbox with a small, erroneous whitespace on the left side of the
@@ -580,8 +557,15 @@ const { state, actions, callbacks } = store(
 					--wp--lightbox-initial-left-position: ${ screenPosX }px;
 					--wp--lightbox-container-width: ${ containerWidth + 1 }px;
 					--wp--lightbox-container-height: ${ containerHeight + 1 }px;
-					--wp--lightbox-image-width: ${ lightboxImgWidth }px;
-					--wp--lightbox-image-height: ${ lightboxImgHeight }px;
+					--wp--lightbox-image-width: ${ containerWidth }px;
+					--wp--lightbox-image-height: ${ containerHeight }px;
+					--wp--lightbox-initial-clip: inset(${ cropY }px ${ cropX }px);
+					--wp--lightbox-thumbnail-width: ${
+						hasCroppedSource ? thumbnailWidth : containerWidth
+					}px;
+					--wp--lightbox-thumbnail-height: ${
+						hasCroppedSource ? thumbnailHeight : containerHeight
+					}px;
 					--wp--lightbox-scale: ${ containerScale };
 					--wp--lightbox-scrollbar-width: ${
 						window.innerWidth - document.documentElement.clientWidth
@@ -690,16 +674,28 @@ const { state, actions, callbacks } = store(
 				}
 			},
 			setInertElements() {
-				// Makes all children of the document inert exempt .wp-lightbox-overlay.
-				document
-					.querySelectorAll( 'body > :not(.wp-lightbox-overlay)' )
-					.forEach( ( el ) => {
-						if ( state.overlayEnabled ) {
-							el.setAttribute( 'inert', '' );
-						} else {
-							el.removeAttribute( 'inert' );
+				if ( ! state.overlayEnabled ) {
+					inertElements.forEach( ( el ) =>
+						el.removeAttribute( 'inert' )
+					);
+					inertElements = [];
+					return;
+				}
+				// Inerts the overlay's siblings at each level, not its ancestors.
+				const { ref } = getElement();
+				let node = ref;
+				while ( node && node !== document.body && node.parentElement ) {
+					for ( const sibling of node.parentElement.children ) {
+						if (
+							sibling !== node &&
+							! sibling.hasAttribute( 'inert' )
+						) {
+							sibling.setAttribute( 'inert', '' );
+							inertElements.push( sibling );
 						}
-					} );
+					}
+					node = node.parentElement;
+				}
 			},
 			initTriggerButton() {
 				const { imageId } = getContext();

package/src/latest-comments/README.md

@@ -33,6 +33,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`
 - [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false`
 - [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
   - `margin`: `true`

package/src/latest-comments/block.json

@@ -49,11 +49,21 @@
 				"link": true
 			}
 		},
+		"dimensions": {
+			"minHeight": true,
+			"minWidth": true
+		},
 		"html": false,
 		"spacing": {
 			"margin": true,
 			"padding": true
 		},
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true
+		},
 		"shadow": true,
 		"typography": {
 			"fontSize": true,

package/src/latest-posts/README.md

@@ -47,6 +47,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`
 - [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
   - `margin`: `true`
   - `padding`: `true`