@wordpress/block-library 11.1.0 → 11.2.0

package/src/cover/test/edit.browser.test.js

@@ -1,12 +1,44 @@
-import { beforeEach, describe, expect, test } from 'vitest';
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
 import { userEvent } from 'vitest/browser';
+import {
+	cleanup as cleanupBrowser,
+	render as renderBrowser,
+} from 'vitest-browser-react';
 import { screen, act, within, waitFor } from '@testing-library/react';
-import { createBlock } from '@wordpress/blocks';
+import {
+	createBlock,
+	getBlockTypes,
+	unregisterBlockType,
+} from '@wordpress/blocks';
+import { createElement, useState } from '@wordpress/element';
+import { dispatch, select } from '@wordpress/data';
+import {
+	store as richTextStore,
+	unregisterFormatType,
+} from '@wordpress/rich-text';
+import {
+	BlockInspector,
+	privateApis as blockEditorPrivateApis,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
 import {
 	initializeEditor,
 	selectBlock,
 } from '@wordpress/integration-tests/helpers/integration-test-editor';
 import { registerCoreBlocks } from '@wordpress/block-library';
+// Keep the matrix popover above the block toolbar, as in the editor.
+import '../../../../block-editor/src/components/block-popover/style.scss';
+import '../../../../components/src/popover/style.scss';
+import { unlock } from '../../lock-unlock';
+import { getMediaColor } from '../edit/color-utils';
+
+vi.mock( import( '../edit/color-utils' ), { spy: true } );
+
+const {
+	ExperimentalBlockCanvas: BlockCanvas,
+	ExperimentalBlockEditorProvider: BlockEditorProvider,
+	openMediaEditorModalKey,
+} = unlock( blockEditorPrivateApis );
 const defaultSettings = {
 	__experimentalFeatures: {
 		color: {
@@ -207,6 +239,154 @@ describe( 'Cover block', () => {
 		} );
 	} );
 
+	describe( 'media editor Undo', () => {
+		const originalUrl =
+			'data:image/svg+xml,' +
+			encodeURIComponent(
+				'<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><rect width="10" height="10" fill="black"/></svg>'
+			);
+		const updatedImage = { id: 11, url: `${ originalUrl }#edited` };
+
+		beforeEach( () => {
+			vi.mocked( getMediaColor ).mockResolvedValue( '#ffffff' );
+		} );
+
+		afterEach( async () => {
+			await cleanupBrowser();
+			getBlockTypes().forEach( ( { name } ) =>
+				unregisterBlockType( name )
+			);
+			select( richTextStore )
+				.getFormatTypes()
+				.forEach( ( { name } ) => unregisterFormatType( name ) );
+		} );
+
+		async function openMediaEditor( initialAttributes = {} ) {
+			const openModal = vi.fn();
+			const block = createBlock( 'core/cover', {
+				id: 10,
+				url: originalUrl,
+				backgroundType: 'image',
+				sizeSlug: 'medium',
+				overlayColor: 'black',
+				isDark: true,
+				isUserOverlayColor: false,
+				...initialAttributes,
+			} );
+			function TestEditor() {
+				const [ blocks, setBlocks ] = useState( [ block ] );
+				return createElement(
+					BlockEditorProvider,
+					{
+						value: blocks,
+						onInput: setBlocks,
+						onChange: setBlocks,
+						useSubRegistry: false,
+						settings: {
+							...defaultSettings,
+							[ openMediaEditorModalKey ]: openModal,
+						},
+					},
+					createElement( BlockInspector ),
+					createElement( BlockCanvas, {
+						height: '100%',
+						shouldIframe: false,
+					} )
+				);
+			}
+			await renderBrowser( createElement( TestEditor ) );
+			await userEvent.click( screen.getByLabelText( 'Block: Cover' ) );
+			await userEvent.click(
+				screen.getByRole( 'button', { name: 'Edit image' } )
+			);
+			const { clientId } = select( blockEditorStore ).getBlocks()[ 0 ];
+			return {
+				...openModal.mock.calls[ 0 ][ 0 ],
+				getAttributes: () =>
+					select( blockEditorStore ).getBlockAttributes( clientId ),
+				editAttributes: ( attributes ) =>
+					dispatch( blockEditorStore ).updateBlockAttributes(
+						clientId,
+						attributes
+					),
+			};
+		}
+
+		test( 'restores only the previous image without reverting Cover settings', async () => {
+			const { onUpdate, onUndo, getAttributes, editAttributes } =
+				await openMediaEditor();
+			await act( () => onUpdate( updatedImage ) );
+			expect( getAttributes() ).toMatchObject( {
+				id: 11,
+				sizeSlug: 'full',
+				overlayColor: 'white',
+				isDark: false,
+			} );
+			await act( () =>
+				editAttributes( { dimRatio: 75, sizeSlug: 'large' } )
+			);
+			const beforeUndo = getAttributes();
+
+			act( () => onUndo() );
+
+			expect( getAttributes() ).toEqual( {
+				...beforeUndo,
+				id: 10,
+				url: originalUrl,
+			} );
+		} );
+
+		test( 'preserves an overlay chosen after saving when undoing the media update', async () => {
+			const { onUpdate, onUndo, getAttributes, editAttributes } =
+				await openMediaEditor();
+			await act( () => onUpdate( updatedImage ) );
+			await act( () =>
+				editAttributes( {
+					overlayColor: undefined,
+					customOverlayColor: '#000000',
+					isUserOverlayColor: true,
+					dimRatio: 90,
+					isDark: true,
+				} )
+			);
+
+			const beforeUndo = getAttributes();
+			act( () => onUndo() );
+
+			expect( getAttributes() ).toEqual( {
+				...beforeUndo,
+				id: 10,
+				url: originalUrl,
+			} );
+		} );
+
+		test( 'does not reapply a media update when Undo runs before its color loads', async () => {
+			const { onUpdate, onUndo, getAttributes } = await openMediaEditor();
+			const previous = getAttributes();
+			let resolveColor;
+			vi.mocked( getMediaColor ).mockReturnValueOnce(
+				new Promise( ( resolve ) => {
+					resolveColor = resolve;
+				} )
+			);
+			let updatePromise;
+			act( () => {
+				updatePromise = onUpdate( updatedImage );
+			} );
+
+			act( () => onUndo() );
+			await act( async () => {
+				resolveColor( '#ffffff' );
+				await updatePromise;
+			} );
+
+			expect( getAttributes() ).toEqual( previous );
+			expect(
+				screen.getByRole( 'button', { name: 'Edit image' } )
+			).toBeEnabled();
+		} );
+	} );
+
 	describe( 'Inspector controls', () => {
 		describe( 'Media settings', () => {
 			test( 'does not display media settings panel if url is not set', async () => {

package/src/cover/test/embed-video-utils.test.js

@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest';
+import {
+	getBackgroundEmbedHtml,
+	getBackgroundVideoSrc,
+} from '../embed-video-utils';
+
+const YOUTUBE_SRC = 'https://www.youtube.com/embed/abc123?feature=oembed';
+const VIMEO_SRC = 'https://player.vimeo.com/video/123456';
+
+describe( 'getBackgroundVideoSrc', () => {
+	it( 'adds autoplay by default', () => {
+		const url = new URL( getBackgroundVideoSrc( YOUTUBE_SRC ) );
+
+		expect( url.searchParams.get( 'autoplay' ) ).toBe( '1' );
+		expect( url.searchParams.get( 'loop' ) ).toBe( '1' );
+	} );
+
+	it( 'leaves out autoplay when autoplay is disabled', () => {
+		const url = new URL(
+			getBackgroundVideoSrc( YOUTUBE_SRC, { autoplay: false } )
+		);
+
+		expect( url.searchParams.has( 'autoplay' ) ).toBe( false );
+		expect( url.searchParams.get( 'loop' ) ).toBe( '1' );
+	} );
+
+	it( 'uses Vimeo background mode only when autoplay is enabled', () => {
+		const autoplayUrl = new URL( getBackgroundVideoSrc( VIMEO_SRC ) );
+		const pausedUrl = new URL(
+			getBackgroundVideoSrc( VIMEO_SRC, { autoplay: false } )
+		);
+
+		expect( autoplayUrl.searchParams.get( 'background' ) ).toBe( '1' );
+		expect( pausedUrl.searchParams.has( 'background' ) ).toBe( false );
+		expect( pausedUrl.searchParams.has( 'autoplay' ) ).toBe( false );
+	} );
+} );
+
+describe( 'getBackgroundEmbedHtml', () => {
+	it( 'passes the autoplay option through to the iframe src', () => {
+		const html = `<iframe src="${ YOUTUBE_SRC }"></iframe>`;
+
+		expect( getBackgroundEmbedHtml( html ) ).toContain( 'autoplay=1' );
+		expect(
+			getBackgroundEmbedHtml( html, { autoplay: false } )
+		).not.toContain( 'autoplay' );
+	} );
+} );

package/src/cover/view.js

@@ -0,0 +1,22 @@
+import { getContext, store } from '@wordpress/interactivity';
+import { prefersReducedMotion } from '@wordpress/a11y';
+
+store(
+	'core/cover',
+	{
+		state: {
+			get videoSrc() {
+				const { src, reducedMotionSrc } = getContext();
+
+				// The server renders the autoplaying source, so it is only
+				// replaced for a visitor who has asked for reduced motion.
+				if ( reducedMotionSrc && prefersReducedMotion() ) {
+					return reducedMotionSrc;
+				}
+
+				return src;
+			},
+		},
+	},
+	{ lock: true }
+);

package/src/details/README.md

@@ -41,6 +41,8 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
   - `margin`: `true`
   - `padding`: `true`
   - `blockGap`: `true`
+- [`dimensions`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#dimensions):
+  - `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/details/block.json

@@ -67,6 +67,9 @@
 				"padding": false
 			}
 		},
+		"dimensions": {
+			"minWidth": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

package/src/embed/README.md

@@ -28,8 +28,12 @@ _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`
+- [`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/embed/block.json

@@ -43,8 +43,13 @@
 	"supports": {
 		"anchor": true,
 		"align": true,
+		"dimensions": {
+			"minHeight": true,
+			"minWidth": true
+		},
 		"spacing": {
-			"margin": true
+			"margin": true,
+			"padding": true
 		},
 		"interactivity": {
 			"clientNavigation": true

package/src/embed/style.scss

@@ -17,7 +17,9 @@
 }
 
 // Supply a min-width when inside a cover block, to prevent it from collapsing.
-.wp-block-cover .wp-block-embed {
+// :root :where() matches Global Styles specificity so a minimum set there can
+// win, since block library styles load first.
+:root :where(.wp-block-cover .wp-block-embed) {
 	min-width: 320px;
 	min-height: 240px;
 }
@@ -25,6 +27,10 @@
 // Allow embeds to grow and shrink inside flex group blocks (Stack/Row), preventing collapse while fitting available space.
 .wp-block-group.is-layout-flex .wp-block-embed {
 	flex: 1 1 0%;
+}
+
+// Lowered like the cover minimums above.
+:root :where(.wp-block-group.is-layout-flex .wp-block-embed) {
 	min-width: 0;
 }
 

package/src/file/README.md

@@ -40,10 +40,14 @@ _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`
 - [`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`
   - [`text`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-text): `false`
+- [`shadow`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#shadow): `true`
 - [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity): `true`
 
 ## Block Markup

package/src/file/block.json

@@ -78,6 +78,10 @@
 			"margin": true,
 			"padding": true
 		},
+		"dimensions": {
+			"minHeight": true,
+			"minWidth": true
+		},
 		"color": {
 			"gradients": true,
 			"link": true,
@@ -99,6 +103,7 @@
 				"style": true
 			}
 		},
+		"shadow": true,
 		"interactivity": true
 	},
 	"editorStyle": "wp-block-file-editor",

package/src/footnotes/README.md

@@ -36,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

@@ -53,6 +53,10 @@
 				"padding": false
 			}
 		},
+		"dimensions": {
+			"minHeight": true,
+			"minWidth": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

package/src/gallery/README.md

@@ -56,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`
@@ -66,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`
@@ -87,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

@@ -166,6 +166,11 @@
 			"background": true,
 			"gradients": true
 		},
+		"shadow": true,
+		"dimensions": {
+			"minHeight": true,
+			"minWidth": true
+		},
 		"layout": {
 			"allowSwitching": false,
 			"allowInheriting": false,
@@ -179,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={ () => {