@wordpress/block-library 11.0.0 → 11.1.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() {
@@ -107,7 +66,19 @@ async function openStylesTabIfAvailable() {
 	}
 }
 
+async function openSettingsTabIfAvailable() {
+	const settingsTab = screen.queryByRole( 'tab', {
+		name: 'Settings',
+	} );
+
+	if ( settingsTab ) {
+		await userEvent.click( settingsTab );
+	}
+}
+
 describe( 'Cover block', () => {
+	beforeEach( () => registerCoreBlocks() );
+
 	describe( 'Editor canvas', () => {
 		test( 'shows placeholder if background image and color not set', async () => {
 			await setup();
@@ -120,38 +91,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 +138,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 +195,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(
@@ -242,12 +217,12 @@ describe( 'Cover block', () => {
 					} )
 				).not.toBeInTheDocument();
 			} );
-			test( 'does not display settings tab when media settings are empty', async () => {
-				await setup();
+			test( 'does not display settings panel in the settings tab when the block has no media', async () => {
 				await createAndSelectBlock();
 
+				await openSettingsTabIfAvailable();
 				expect(
-					screen.queryByRole( 'tab', {
+					screen.queryByRole( 'heading', {
 						name: 'Settings',
 					} )
 				).not.toBeInTheDocument();
@@ -263,6 +238,7 @@ describe( 'Cover block', () => {
 				} );
 
 				await selectBlock( 'Block: Cover' );
+				await openSettingsTabIfAvailable();
 				expect(
 					await screen.findByRole( 'heading', { name: 'Settings' } )
 				).toBeInTheDocument();
@@ -277,6 +253,7 @@ describe( 'Cover block', () => {
 				'has-parallax'
 			);
 			await selectBlock( 'Block: Cover' );
+			await openSettingsTabIfAvailable();
 			await userEvent.click(
 				await screen.findByLabelText( 'Fixed background' )
 			);
@@ -293,6 +270,7 @@ describe( 'Cover block', () => {
 				'is-repeated'
 			);
 			await selectBlock( 'Block: Cover' );
+			await openSettingsTabIfAvailable();
 			await userEvent.click(
 				await screen.findByLabelText( 'Repeated background' )
 			);
@@ -307,13 +285,16 @@ describe( 'Cover block', () => {
 			} );
 
 			await selectBlock( 'Block: Cover' );
+			await openSettingsTabIfAvailable();
 			await userEvent.clear( await screen.findByLabelText( 'Left' ) );
 			await userEvent.type( screen.getByLabelText( 'Left' ), '100' );
 
 			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 () => {
@@ -322,6 +303,7 @@ describe( 'Cover block', () => {
 			} );
 
 			await selectBlock( 'Block: Cover' );
+			await openSettingsTabIfAvailable();
 			await userEvent.type(
 				await screen.findByLabelText( 'Alternative text' ),
 				'Me'
@@ -331,9 +313,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 +323,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 +345,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 +368,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 +383,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 +394,9 @@ describe( 'Cover block', () => {
 				);
 
 				expect(
-					screen.getByLabelText( 'Block: Cover' ).style.minHeight
+					window.getComputedStyle(
+						screen.getByLabelText( 'Block: Cover' )
+					).minHeight
 				).toBe( '300px' );
 			} );
 		} );
@@ -439,12 +408,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 +431,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 +451,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

@@ -26,10 +26,17 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 
 - [`align`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#align): `"wide"`, `"full"`
 - [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `true`
+- [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#background):
+  - `backgroundImage`: `true`
+  - `backgroundSize`: `true`
+  - `gradient`: `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`
+  - [`heading`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-heading): `true`
+  - [`button`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-button): `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

@@ -32,9 +32,20 @@
 		"__experimentalOnEnter": true,
 		"align": [ "wide", "full" ],
 		"anchor": true,
+		"background": {
+			"backgroundImage": true,
+			"backgroundSize": true,
+			"gradient": true,
+			"__experimentalDefaultControls": {
+				"backgroundImage": true,
+				"gradient": true
+			}
+		},
 		"color": {
 			"gradients": true,
 			"link": true,
+			"heading": true,
+			"button": true,
 			"__experimentalDefaultControls": {
 				"background": true,
 				"text": true
@@ -46,6 +57,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/README.md

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

package/src/file/block.json

@@ -65,6 +65,15 @@
 	"supports": {
 		"anchor": true,
 		"align": true,
+		"background": {
+			"backgroundImage": true,
+			"backgroundSize": true,
+			"gradient": true,
+			"__experimentalDefaultControls": {
+				"backgroundImage": true,
+				"gradient": true
+			}
+		},
 		"spacing": {
 			"margin": true,
 			"padding": true

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( {