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

package/src/cover/test/{edit.jsdom.test.js → edit.browser.test.js}

@@ -1,16 +1,12 @@
-/* eslint-disable jest-dom/prefer-to-have-style -- This suite moves to Browser Mode in the next stacked PR. */
-import { describe, expect, test } from 'vitest';
-import { screen, fireEvent, act, within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { beforeEach, describe, expect, test } from 'vitest';
+import { userEvent } from 'vitest/browser';
+import { screen, act, within, waitFor } from '@testing-library/react';
+import { createBlock } from '@wordpress/blocks';
 import {
 	initializeEditor,
 	selectBlock,
 } from '@wordpress/integration-tests/helpers/integration-test-editor';
-globalThis.wpVitest.mockMatchMedia();
-globalThis.wpVitest.mockCSSSupports();
-globalThis.wpVitest.mockResizeObserver();
-globalThis.wpVitest.mockVisibleElements();
-
+import { registerCoreBlocks } from '@wordpress/block-library';
 const defaultSettings = {
 	__experimentalFeatures: {
 		color: {
@@ -38,63 +34,26 @@ const disabledColorSettings = {
 	disableCustomGradients: true,
 };
 
-/**
- * Runs `callback` with `requestAnimationFrame` callbacks flushed on a microtask
- * ahead of any pending `setTimeout( 0 )` timers, then restores the original.
- *
- * In a browser, Ariakit normalizes the matrix's roving tabindex in a
- * `requestAnimationFrame` before `useFocusOnMount`'s `setTimeout( 0 )` focuses
- * the active (center) cell, so opening the dropdown leaves the content position
- * untouched. JSDOM implements `requestAnimationFrame` as a ~16ms timer, which
- * inverts the ordering and would otherwise focus and select the first DOM cell.
- *
- * @param {() => ( Promise< unknown > | unknown )} callback
- * @return {Promise< unknown >} Resolves with the callback's return value.
- */
-async function withAnimationFramesBeforeTimers( callback ) {
-	const originalRequestAnimationFrame = global.requestAnimationFrame;
-
-	let flushing = false;
-	global.requestAnimationFrame = ( frameCallback ) => {
-		// Frames scheduled while flushing fall back to the real implementation
-		// so self-rescheduling loops (e.g. Popover's Floating UI `autoUpdate`)
-		// don't spin forever on the microtask queue.
-		if ( flushing ) {
-			return originalRequestAnimationFrame( frameCallback );
-		}
-
-		queueMicrotask( () => {
-			flushing = true;
-			try {
-				frameCallback( performance.now() );
-			} finally {
-				flushing = false;
-			}
-		} );
-
-		return 0;
-	};
-
-	try {
-		return await callback();
-	} finally {
-		global.requestAnimationFrame = originalRequestAnimationFrame;
-	}
+async function setup( attributes, customSettings, innerBlocks = [] ) {
+	const testBlock = { name: 'core/cover', attributes, innerBlocks };
+	const settings = customSettings || defaultSettings;
+	return initializeEditor( testBlock, false, settings );
 }
 
-async function setup( attributes, useCoreBlocks, customSettings ) {
-	const testBlock = { name: 'core/cover', attributes };
-	const settings = customSettings || defaultSettings;
-	return initializeEditor( testBlock, useCoreBlocks, settings );
+async function activateWithKeyboard( element ) {
+	act( () => element.focus() );
+	expect( element ).toHaveFocus();
+	await userEvent.keyboard( '{Enter}' );
 }
 
 async function createAndSelectBlock() {
-	await userEvent.click(
-		screen.getByRole( 'button', {
-			name: 'Black',
-		} )
-	);
-	await selectBlock( 'Block: Cover' );
+	const view = await setup( { overlayColor: 'black' }, undefined, [
+		createBlock( 'core/paragraph' ),
+	] );
+	const cover = screen.getByLabelText( 'Block: Cover' );
+	await act( async () => cover.focus() );
+	await waitFor( () => expect( cover ).toHaveClass( 'is-selected' ) );
+	return view;
 }
 
 async function openStylesTabIfAvailable() {
@@ -108,6 +67,8 @@ async function openStylesTabIfAvailable() {
 }
 
 describe( 'Cover block', () => {
+	beforeEach( () => registerCoreBlocks() );
+
 	describe( 'Editor canvas', () => {
 		test( 'shows placeholder if background image and color not set', async () => {
 			await setup();
@@ -120,38 +81,46 @@ describe( 'Cover block', () => {
 		} );
 
 		test( 'can set overlay color using color picker on block placeholder', async () => {
-			const { container } = await setup();
+			await setup();
 			const colorPicker = screen.getByRole( 'button', {
 				name: 'Black',
 			} );
-			await userEvent.click( colorPicker );
+			await activateWithKeyboard( colorPicker );
 			const color = colorPicker.style.backgroundColor;
-			expect(
-				screen.queryByRole( 'group', {
-					name: 'To edit this block, you need permission to upload media.',
-				} )
-			).not.toBeInTheDocument();
+			await waitFor( () =>
+				expect(
+					screen.getByLabelText( 'Block: Cover' )
+				).not.toHaveClass( 'is-placeholder' )
+			);
 
+			const coverBlock = screen.getByLabelText( 'Block: Cover' );
 			// eslint-disable-next-line testing-library/no-node-access
-			const overlay = container.getElementsByClassName(
-				'wp-block-cover__background'
+			const overlay = coverBlock.querySelector(
+				'.wp-block-cover__background'
+			);
+			await waitFor( () =>
+				expect(
+					window.getComputedStyle( overlay ).backgroundColor
+				).toBe( color )
 			);
-			expect( overlay[ 0 ].style.backgroundColor ).toBe( color );
 		} );
 
 		test( 'can have the title edited', async () => {
 			await setup();
 
-			await userEvent.click(
-				screen.getByRole( 'button', {
-					name: 'Black',
-				} )
+			const colorButton = screen.getByRole( 'button', { name: 'Black' } );
+			await activateWithKeyboard( colorButton );
+			await waitFor( () =>
+				expect(
+					screen.getByLabelText( 'Block: Cover' )
+				).not.toHaveClass( 'is-placeholder' )
 			);
 
 			const title = screen.getByLabelText( 'Empty block;', {
 				exact: false,
 			} );
-			await userEvent.click( title );
+			act( () => title.focus() );
+			expect( title ).toHaveFocus();
 			await userEvent.keyboard( 'abc' );
 			expect( title ).toHaveTextContent( 'abc' );
 		} );
@@ -159,48 +128,46 @@ describe( 'Cover block', () => {
 
 	describe( 'Block toolbar', () => {
 		test( 'full height toggle sets minHeight style attribute to 100vh when clicked', async () => {
-			await setup();
 			await createAndSelectBlock();
 
 			const cover = screen.getByLabelText( 'Block: Cover' );
-			expect( cover.style.minHeight ).not.toBe( '100vh' );
+			expect( window.getComputedStyle( cover ).minHeight ).not.toBe(
+				`${ window.innerHeight }px`
+			);
 
 			await userEvent.click( screen.getByLabelText( 'Full height' ) );
 
-			expect( cover.style.minHeight ).toBe( '100vh' );
+			await waitFor( () =>
+				expect(
+					window.getComputedStyle(
+						screen.getByLabelText( 'Block: Cover' )
+					).minHeight
+				).toBe( `${ window.innerHeight }px` )
+			);
 		} );
 
 		test( 'content position button sets content position', async () => {
-			await setup();
 			await createAndSelectBlock();
+			const cover = screen.getByLabelText( 'Block: Cover' );
 
-			// Open the matrix dropdown with browser-like frame ordering so
-			// focus-on-mount lands on the active cell instead of dirtying the
-			// content position.
-			await withAnimationFramesBeforeTimers( () =>
-				userEvent.click(
-					screen.getByLabelText( 'Change content position' )
-				)
-			);
+			expect( cover ).not.toHaveClass( 'has-custom-content-position' );
 
-			expect( screen.getByLabelText( 'Block: Cover' ) ).not.toHaveClass(
-				'has-custom-content-position'
+			await userEvent.click(
+				screen.getByLabelText( 'Change content position' )
 			);
+			expect( cover ).not.toHaveClass( 'has-custom-content-position' );
 
-			await act( async () =>
-				within( screen.getByRole( 'grid' ) )
-					.getByRole( 'gridcell', {
-						name: 'top left',
-					} )
-					.focus()
+			await userEvent.click(
+				within( screen.getByRole( 'grid' ) ).getByRole( 'gridcell', {
+					name: 'top left',
+				} )
 			);
 
-			expect( screen.getByLabelText( 'Block: Cover' ) ).toHaveClass(
-				'has-custom-content-position'
-			);
-			expect( screen.getByLabelText( 'Block: Cover' ) ).toHaveClass(
-				'is-position-top-left'
+			await waitFor( () =>
+				expect( cover ).toHaveClass( 'has-custom-content-position' )
 			);
+
+			expect( cover ).toHaveClass( 'is-position-top-left' );
 		} );
 
 		test( 'clears media when clear media button clicked', async () => {
@@ -218,10 +185,8 @@ describe( 'Cover block', () => {
 			await userEvent.click(
 				screen.getByRole( 'button', { name: 'Replace' } )
 			);
-			await userEvent.click(
-				screen.getByRole( 'menuitem', {
-					name: 'Reset',
-				} )
+			await activateWithKeyboard(
+				screen.getByRole( 'menuitem', { name: 'Reset' } )
 			);
 
 			expect(
@@ -243,7 +208,6 @@ describe( 'Cover block', () => {
 				).not.toBeInTheDocument();
 			} );
 			test( 'does not display settings tab when media settings are empty', async () => {
-				await setup();
 				await createAndSelectBlock();
 
 				expect(
@@ -313,7 +277,9 @@ describe( 'Cover block', () => {
 			const image = within(
 				screen.getByLabelText( 'Block: Cover' )
 			).getByRole( 'presentation' );
-			expect( image.style.objectPosition ).toBe( '100% 50%' );
+			expect( window.getComputedStyle( image ).objectPosition ).toBe(
+				'100% 50%'
+			);
 		} );
 
 		test( 'sets alt attribute if text entered in alt text box', async () => {
@@ -331,9 +297,7 @@ describe( 'Cover block', () => {
 
 		describe( 'Color panel', () => {
 			test( 'applies selected opacity to block when number control value changed', async () => {
-				const { container } = await setup();
-
-				await createAndSelectBlock();
+				const { container } = await createAndSelectBlock();
 
 				// eslint-disable-next-line testing-library/no-node-access
 				const overlay = container.getElementsByClassName(
@@ -343,26 +307,18 @@ describe( 'Cover block', () => {
 				expect( overlay[ 0 ] ).toHaveClass( 'has-background-dim-100' );
 
 				await openStylesTabIfAvailable();
-				// Need act here as the isDark method is async.
-				// eslint-disable-next-line testing-library/no-unnecessary-act
-				await act( async () => {
-					fireEvent.change(
-						screen.getByRole( 'spinbutton', {
-							name: 'Overlay opacity',
-						} ),
-						{
-							target: { value: '40' },
-						}
-					);
-				} );
+				await userEvent.fill(
+					screen.getByRole( 'spinbutton', {
+						name: 'Overlay opacity',
+					} ),
+					'40'
+				);
 
 				expect( overlay[ 0 ] ).toHaveClass( 'has-background-dim-40' );
 			} );
 
 			test( 'applies selected opacity to block when slider moved', async () => {
-				const { container } = await setup();
-
-				await createAndSelectBlock();
+				const { container } = await createAndSelectBlock();
 
 				// eslint-disable-next-line testing-library/no-node-access
 				const overlay = container.getElementsByClassName(
@@ -373,23 +329,19 @@ describe( 'Cover block', () => {
 
 				await openStylesTabIfAvailable();
 
-				// Need act here as the isDark method is async.
-				// eslint-disable-next-line testing-library/no-unnecessary-act
-				await act( async () => {
-					fireEvent.change(
-						screen.getByRole( 'slider', {
-							name: 'Overlay opacity',
-						} ),
-						{ target: { value: 30 } }
-					);
-				} );
+				await userEvent.fill(
+					screen.getByRole( 'slider', {
+						name: 'Overlay opacity',
+					} ),
+					'30'
+				);
 
 				expect( overlay[ 0 ] ).toHaveClass( 'has-background-dim-30' );
 			} );
 
 			describe( 'when colors are disabled', () => {
 				test( 'does not render overlay control', async () => {
-					await setup( undefined, true, disabledColorSettings );
+					await setup( undefined, disabledColorSettings );
 					await selectBlock( 'Block: Cover' );
 					await openStylesTabIfAvailable();
 
@@ -400,7 +352,7 @@ describe( 'Cover block', () => {
 					expect( overlayControl ).not.toBeInTheDocument();
 				} );
 				test( 'does not render opacity control', async () => {
-					await setup( undefined, true, disabledColorSettings );
+					await setup( undefined, disabledColorSettings );
 					await selectBlock( 'Block: Cover' );
 					await openStylesTabIfAvailable();
 
@@ -415,7 +367,6 @@ describe( 'Cover block', () => {
 
 		describe( 'Dimensions panel', () => {
 			test( 'sets minHeight attribute when number control value changed', async () => {
-				await setup();
 				await createAndSelectBlock();
 				await openStylesTabIfAvailable();
 				await userEvent.clear(
@@ -427,7 +378,9 @@ describe( 'Cover block', () => {
 				);
 
 				expect(
-					screen.getByLabelText( 'Block: Cover' ).style.minHeight
+					window.getComputedStyle(
+						screen.getByLabelText( 'Block: Cover' )
+					).minHeight
 				).toBe( '300px' );
 			} );
 		} );
@@ -439,12 +392,15 @@ describe( 'Cover block', () => {
 			const colorPicker = screen.getByRole( 'button', {
 				name: 'White',
 			} );
-			await userEvent.click( colorPicker );
+			await activateWithKeyboard( colorPicker );
 
+			await waitFor( () =>
+				expect( screen.getByLabelText( 'Block: Cover' ) ).toHaveClass(
+					'is-light'
+				)
+			);
 			const coverBlock = screen.getByLabelText( 'Block: Cover' );
 
-			expect( coverBlock ).toHaveClass( 'is-light' );
-
 			await selectBlock( 'Block: Cover' );
 			await openStylesTabIfAvailable();
 			await userEvent.click( screen.getByText( 'Overlay' ) );
@@ -459,9 +415,13 @@ describe( 'Cover block', () => {
 			const colorPicker = screen.getByRole( 'button', {
 				name: 'White',
 			} );
-			await userEvent.click( colorPicker );
+			await activateWithKeyboard( colorPicker );
+			await waitFor( () =>
+				expect( screen.getByLabelText( 'Block: Cover' ) ).toHaveClass(
+					'is-light'
+				)
+			);
 			const coverBlock = screen.getByLabelText( 'Block: Cover' );
-			expect( coverBlock ).toHaveClass( 'is-light' );
 			await selectBlock( 'Block: Cover' );
 			await openStylesTabIfAvailable();
 			await userEvent.click( screen.getByText( 'Overlay' ) );
@@ -475,4 +435,3 @@ describe( 'Cover block', () => {
 		} );
 	} );
 } );
-/* eslint-enable jest-dom/prefer-to-have-style */

package/src/cover/transforms.js

@@ -119,7 +119,7 @@ const transforms = {
 									...style?.color,
 									background: undefined,
 									gradient: undefined,
-							  }
+								}
 							: undefined,
 					} ),
 				};
@@ -234,7 +234,7 @@ const transforms = {
 											attributes?.customOverlayColor,
 										gradient: attributes?.customGradient,
 										...attributes?.style?.color,
-								  }
+									}
 								: undefined,
 					} ),
 				};
@@ -280,7 +280,7 @@ const transforms = {
 													?.style?.color,
 												...groupAttributes?.style
 													?.color,
-										  }
+											}
 										: undefined,
 							} ),
 						},

package/src/details/README.md

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

package/src/details/block.json

@@ -46,6 +46,7 @@
 			"style": true
 		},
 		"html": false,
+		"shadow": true,
 		"spacing": {
 			"margin": true,
 			"padding": true,

package/src/details/index.js

@@ -60,7 +60,7 @@ export const settings = {
 						/* translators: %s: accessibility text; summary title. */
 						__( 'Details. %s' ),
 						summary
-				  );
+					);
 		}
 	},
 	save,

package/src/embed/editor.scss

@@ -20,8 +20,8 @@
 
 	// Stops long URLs from breaking out of the no preview available screen
 	.components-placeholder__error {
-		// stylelint-disable-next-line declaration-property-value-keyword-no-deprecated -- Pending review of overflow-wrap alternative.
-		word-break: break-word;
+		word-break: normal;
+		overflow-wrap: break-word;
 	}
 }
 

package/src/embed/embed-controls.jsx

@@ -14,10 +14,10 @@ function getResponsiveHelp( checked ) {
 	return checked
 		? __(
 				'This embed will preserve its aspect ratio when the browser is resized.'
-		  )
+			)
 		: __(
 				'This embed may not preserve its aspect ratio when the browser is resized.'
-		  );
+			);
 }
 
 const EmbedControls = ( {

package/src/file/deprecated.jsx

@@ -78,7 +78,7 @@ const v3 = {
 					/* translators: %s: filename. */
 					__( 'Embed of %s.' ),
 					fileName
-			  );
+				);
 
 		const hasFilename = ! RichText.isEmpty( fileName );
 
@@ -209,7 +209,7 @@ const v2 = {
 					/* translators: %s: filename. */
 					__( 'Embed of %s.' ),
 					fileName
-			  );
+				);
 
 		const hasFilename = ! RichText.isEmpty( fileName );
 
@@ -329,7 +329,7 @@ const v1 = {
 					/* translators: %s: filename. */
 					__( 'Embed of %s.' ),
 					fileName
-			  );
+				);
 
 		return (
 			href && (

package/src/file/edit.jsx

@@ -72,7 +72,7 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 						'attachment',
 						id,
 						{ context: 'view' }
-				  )
+					)
 				: undefined,
 		} ),
 		[ id ]
@@ -114,9 +114,11 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 			getFilename( newMedia.url ).toLowerCase().endsWith( '.pdf' );
 		const pdfAttributes = {
 			displayPreview: isPdf
-				? attributes.displayPreview ?? true
+				? ( attributes.displayPreview ?? true )
+				: undefined,
+			previewHeight: isPdf
+				? ( attributes.previewHeight ?? 600 )
 				: undefined,
-			previewHeight: isPdf ? attributes.previewHeight ?? 600 : undefined,
 		};
 
 		setAttributes( {

package/src/file/inspector.jsx

@@ -1,7 +1,7 @@
 import { __ } from '@wordpress/i18n';
 import {
 	RangeControl,
-	SelectControl,
+	SelectControl as WCSelectControl,
 	ToggleControl,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
@@ -57,7 +57,7 @@ export default function FileBlockInspector( {
 									displayPreview
 										? __(
 												"Note: Most phone and tablet browsers won't display embedded PDFs."
-										  )
+											)
 										: null
 								}
 								checked={ !! displayPreview }
@@ -101,7 +101,7 @@ export default function FileBlockInspector( {
 						hasValue={ () => textLinkHref !== href }
 						onDeselect={ () => changeLinkDestinationOption( href ) }
 					>
-						<SelectControl
+						<WCSelectControl
 							label={ __( 'Link to' ) }
 							value={ textLinkHref }
 							options={ linkDestinationOptions }

package/src/file/save.jsx

@@ -21,8 +21,8 @@ export default function save( { attributes } ) {
 	const pdfEmbedLabel = RichText.isEmpty( fileName )
 		? 'PDF embed'
 		: // To do: use toPlainText, but we need ensure it's RichTextData. See
-		  // https://github.com/WordPress/gutenberg/pull/56710.
-		  fileName.toString();
+			// https://github.com/WordPress/gutenberg/pull/56710.
+			fileName.toString();
 
 	const hasFilename = ! RichText.isEmpty( fileName );
 

package/src/footnotes/README.md

@@ -28,6 +28,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`multiple`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#multiple): `false`
 - [`reusable`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#reusable): `false`
 - [`inserter`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#inserter): `false`
+- [`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`
   - `padding`: `true`

package/src/footnotes/block.json

@@ -35,6 +35,7 @@
 		"multiple": false,
 		"reusable": false,
 		"inserter": false,
+		"shadow": true,
 		"spacing": {
 			"margin": true,
 			"padding": true,

package/src/footnotes/edit.jsx

@@ -90,7 +90,7 @@ export default function FootnotesEdit( { context: { postType, postId } } ) {
 											? {
 													content: nextFootnote,
 													id,
-											  }
+												}
 											: footnote;
 									} )
 								),

package/src/gallery/dynamic-gallery.jsx

@@ -5,7 +5,7 @@ import {
 	Notice,
 	PanelBody,
 	Placeholder,
-	SelectControl,
+	SelectControl as WCSelectControl,
 	Spinner,
 	ToolbarButton,
 	__experimentalToolsPanel as ToolsPanel,
@@ -56,7 +56,7 @@ const ORDER_OPTIONS = [
  */
 function OrderControl( { orderby, order, onChange } ) {
 	return (
-		<SelectControl
+		<WCSelectControl
 			label={ __( 'Order by' ) }
 			value={ `${ orderby }/${ order }` }
 			options={ ORDER_OPTIONS }
@@ -386,8 +386,8 @@ export function GalleryDynamicView( {
 	// source wording comes from the source descriptor.
 	const emptyInstructions = isResolvingDynamic
 		? __( 'Loading images…' )
-		: sourceDescriptor?.emptyMessage ??
-		  __( 'Dynamic images will appear here.' );
+		: ( sourceDescriptor?.emptyMessage ??
+			__( 'Dynamic images will appear here.' ) );
 
 	return (
 		<>