@wordpress/block-editor 11.0.0 → 11.2.0

package/src/components/image-size-control/test/index.js

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
@@ -11,8 +12,6 @@ import ImageSizeControl from '../index';
 describe( 'ImageSizeControl', () => {
 	const mockOnChange = jest.fn();
 	const mockOnChangeImage = jest.fn();
-	const getHeightInput = () => screen.getByLabelText( 'Height' );
-	const getWidthInput = () => screen.getByLabelText( 'Width' );
 
 	afterEach( () => {
 		// Cleanup on exiting.
@@ -31,8 +30,12 @@ describe( 'ImageSizeControl', () => {
 			/>
 		);
 
-		expect( getHeightInput().value ).toBe( '300' );
-		expect( getWidthInput().value ).toBe( '400' );
+		expect(
+			screen.getByRole( 'spinbutton', { name: 'Height' } )
+		).toHaveValue( 300 );
+		expect(
+			screen.getByRole( 'spinbutton', { name: 'Width' } )
+		).toHaveValue( 400 );
 	} );
 
 	it( 'returns default dimensions when custom dimensions are undefined', () => {
@@ -44,15 +47,23 @@ describe( 'ImageSizeControl', () => {
 			/>
 		);
 
-		expect( getHeightInput().value ).toBe( '100' );
-		expect( getWidthInput().value ).toBe( '200' );
+		expect(
+			screen.getByRole( 'spinbutton', { name: 'Height' } )
+		).toHaveValue( 100 );
+		expect(
+			screen.getByRole( 'spinbutton', { name: 'Width' } )
+		).toHaveValue( 200 );
 	} );
 
-	it( 'returns empty string when custom and default dimensions are undefined', () => {
+	it( 'returns no value when custom and default dimensions are undefined', () => {
 		render( <ImageSizeControl onChange={ mockOnChange } /> );
 
-		expect( getHeightInput().value ).toBe( '' );
-		expect( getWidthInput().value ).toBe( '' );
+		expect(
+			screen.getByRole( 'spinbutton', { name: 'Height' } )
+		).toHaveValue( null );
+		expect(
+			screen.getByRole( 'spinbutton', { name: 'Width' } )
+		).toHaveValue( null );
 	} );
 
 	it( 'returns default dimensions when initially undefined defaults are defined on rerender', () => {
@@ -62,12 +73,14 @@ describe( 'ImageSizeControl', () => {
 			<ImageSizeControl onChange={ mockOnChange } />
 		);
 
-		const heightInput = getHeightInput();
-		const widthInput = getWidthInput();
+		const heightInput = screen.getByRole( 'spinbutton', {
+			name: 'Height',
+		} );
+		const widthInput = screen.getByRole( 'spinbutton', { name: 'Width' } );
 
 		// The dimensions are initially set to an empty string.
-		expect( heightInput.value ).toBe( '' );
-		expect( widthInput.value ).toBe( '' );
+		expect( heightInput ).toHaveValue( null );
+		expect( widthInput ).toHaveValue( null );
 
 		// When new default dimensions are passed on a rerender (for example after they
 		// are calculated following an image upload), update values to the new defaults.
@@ -80,48 +93,66 @@ describe( 'ImageSizeControl', () => {
 		);
 
 		// The dimensions should update to the defaults.
-		expect( heightInput.value ).toBe( '300' );
-		expect( widthInput.value ).toBe( '400' );
+		expect( heightInput ).toHaveValue( 300 );
+		expect( widthInput ).toHaveValue( 400 );
 	} );
 
 	describe( 'updating dimension inputs', () => {
-		it( 'updates height and calls onChange', () => {
+		it( 'updates height and calls onChange', async () => {
+			const user = userEvent.setup();
 			render( <ImageSizeControl onChange={ mockOnChange } /> );
 
-			const heightInput = getHeightInput();
-			const widthInput = getWidthInput();
+			const heightInput = screen.getByRole( 'spinbutton', {
+				name: 'Height',
+			} );
+			const widthInput = screen.getByRole( 'spinbutton', {
+				name: 'Width',
+			} );
 
-			expect( heightInput.value ).toBe( '' );
-			expect( widthInput.value ).toBe( '' );
+			expect( heightInput ).toHaveValue( null );
+			expect( widthInput ).toHaveValue( null );
 
-			fireEvent.change( heightInput, { target: { value: '500' } } );
+			const newHeight = '500';
 
-			expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
-			expect( mockOnChange ).toHaveBeenCalledWith( { height: 500 } );
+			await user.clear( heightInput );
+			await user.type( heightInput, newHeight );
 
-			expect( heightInput.value ).toBe( '500' );
-			expect( widthInput.value ).toBe( '' );
+			expect( mockOnChange ).toHaveBeenCalledTimes( newHeight.length );
+			expect( mockOnChange ).toHaveBeenLastCalledWith( { height: 500 } );
+
+			expect( heightInput ).toHaveValue( 500 );
+			expect( widthInput ).toHaveValue( null );
 		} );
 
-		it( 'updates width and calls onChange', () => {
+		it( 'updates width and calls onChange', async () => {
+			const user = userEvent.setup();
+
 			render( <ImageSizeControl onChange={ mockOnChange } /> );
 
-			const heightInput = getHeightInput();
-			const widthInput = getWidthInput();
+			const heightInput = screen.getByRole( 'spinbutton', {
+				name: 'Height',
+			} );
+			const widthInput = screen.getByRole( 'spinbutton', {
+				name: 'Width',
+			} );
 
-			expect( heightInput.value ).toBe( '' );
-			expect( widthInput.value ).toBe( '' );
+			expect( heightInput ).toHaveValue( null );
+			expect( widthInput ).toHaveValue( null );
 
-			fireEvent.change( widthInput, { target: { value: '500' } } );
+			const newWidth = '500';
+			await user.clear( widthInput );
+			await user.type( widthInput, newWidth );
 
-			expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
-			expect( mockOnChange ).toHaveBeenCalledWith( { width: 500 } );
+			expect( mockOnChange ).toHaveBeenCalledTimes( newWidth.length );
+			expect( mockOnChange ).toHaveBeenLastCalledWith( { width: 500 } );
 
-			expect( heightInput.value ).toBe( '' );
-			expect( widthInput.value ).toBe( '500' );
+			expect( heightInput ).toHaveValue( null );
+			expect( widthInput ).toHaveValue( 500 );
 		} );
 
-		it( 'updates height and calls onChange for empty value', () => {
+		it( 'updates height and calls onChange for empty value', async () => {
+			const user = userEvent.setup();
+
 			render(
 				<ImageSizeControl
 					imageHeight="100"
@@ -130,27 +161,33 @@ describe( 'ImageSizeControl', () => {
 				/>
 			);
 
-			const heightInput = getHeightInput();
-			const widthInput = getWidthInput();
+			const heightInput = screen.getByRole( 'spinbutton', {
+				name: 'Height',
+			} );
+			const widthInput = screen.getByRole( 'spinbutton', {
+				name: 'Width',
+			} );
 
-			expect( heightInput.value ).toBe( '100' );
-			expect( widthInput.value ).toBe( '100' );
+			expect( heightInput ).toHaveValue( 100 );
+			expect( widthInput ).toHaveValue( 100 );
 
-			fireEvent.change( heightInput, { target: { value: '' } } );
+			await user.clear( heightInput );
 
 			// onChange is called and sets the dimension to undefined rather than
 			// the empty string.
 			expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
-			expect( mockOnChange ).toHaveBeenCalledWith( {
+			expect( mockOnChange ).toHaveBeenLastCalledWith( {
 				height: undefined,
 			} );
 
 			// Height is updated to empty value and does not reset to default.
-			expect( heightInput.value ).toBe( '' );
-			expect( widthInput.value ).toBe( '100' );
+			expect( heightInput ).toHaveValue( null );
+			expect( widthInput ).toHaveValue( 100 );
 		} );
 
-		it( 'updates width and calls onChange for empty value', () => {
+		it( 'updates width and calls onChange for empty value', async () => {
+			const user = userEvent.setup();
+
 			render(
 				<ImageSizeControl
 					imageHeight="100"
@@ -159,29 +196,35 @@ describe( 'ImageSizeControl', () => {
 				/>
 			);
 
-			const heightInput = getHeightInput();
-			const widthInput = getWidthInput();
+			const heightInput = screen.getByRole( 'spinbutton', {
+				name: 'Height',
+			} );
+			const widthInput = screen.getByRole( 'spinbutton', {
+				name: 'Width',
+			} );
 
-			expect( heightInput.value ).toBe( '100' );
-			expect( widthInput.value ).toBe( '100' );
+			expect( heightInput ).toHaveValue( 100 );
+			expect( widthInput ).toHaveValue( 100 );
 
-			fireEvent.change( widthInput, { target: { value: '' } } );
+			await user.clear( widthInput );
 
 			// onChange is called and sets the dimension to undefined rather than
 			// the empty string.
 			expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
-			expect( mockOnChange ).toHaveBeenCalledWith( {
+			expect( mockOnChange ).toHaveBeenLastCalledWith( {
 				width: undefined,
 			} );
 
 			// Width is updated to empty value and does not reset to default.
-			expect( heightInput.value ).toBe( '100' );
-			expect( widthInput.value ).toBe( '' );
+			expect( heightInput ).toHaveValue( 100 );
+			expect( widthInput ).toHaveValue( null );
 		} );
 	} );
 
 	describe( 'reset button', () => {
-		it( 'resets both height and width to default values', () => {
+		it( 'resets both height and width to default values', async () => {
+			const user = userEvent.setup();
+
 			render(
 				<ImageSizeControl
 					imageHeight="100"
@@ -192,29 +235,35 @@ describe( 'ImageSizeControl', () => {
 				/>
 			);
 
-			const heightInput = getHeightInput();
-			const widthInput = getWidthInput();
+			const heightInput = screen.getByRole( 'spinbutton', {
+				name: 'Height',
+			} );
+			const widthInput = screen.getByRole( 'spinbutton', {
+				name: 'Width',
+			} );
 
 			// The initial dimension values display first.
-			expect( heightInput.value ).toBe( '300' );
-			expect( widthInput.value ).toBe( '400' );
+			expect( heightInput ).toHaveValue( 300 );
+			expect( widthInput ).toHaveValue( 400 );
 
-			fireEvent.click( screen.getByText( 'Reset' ) );
+			await user.click( screen.getByRole( 'button', { name: 'Reset' } ) );
 
 			// Both attributes are set to undefined to clear custom values.
-			expect( mockOnChange ).toHaveBeenCalledWith( {
+			expect( mockOnChange ).toHaveBeenLastCalledWith( {
 				height: undefined,
 				width: undefined,
 			} );
 
 			// The inputs display the default values once more.
-			expect( heightInput.value ).toBe( '100' );
-			expect( widthInput.value ).toBe( '200' );
+			expect( heightInput ).toHaveValue( 100 );
+			expect( widthInput ).toHaveValue( 200 );
 		} );
 	} );
 
 	describe( 'image size percentage presets', () => {
-		it( 'updates height and width attributes on selection', () => {
+		it( 'updates height and width attributes on selection', async () => {
+			const user = userEvent.setup();
+
 			render(
 				<ImageSizeControl
 					imageHeight="100"
@@ -223,18 +272,25 @@ describe( 'ImageSizeControl', () => {
 				/>
 			);
 
-			fireEvent.click( screen.getByText( '50%' ) );
+			const button = screen.getByRole( 'button', {
+				name: '50%',
+				pressed: false,
+			} );
+
+			await user.click( button );
 
-			expect( screen.getByText( '50%' ) ).toHaveClass( 'is-pressed' );
+			expect( button ).toHaveClass( 'is-pressed' );
 
 			// Both attributes are set to the rounded scaled value.
-			expect( mockOnChange ).toHaveBeenCalledWith( {
+			expect( mockOnChange ).toHaveBeenLastCalledWith( {
 				height: 50,
 				width: 101,
 			} );
 		} );
 
-		it( 'updates height and width inputs on selection', () => {
+		it( 'updates height and width inputs on selection', async () => {
+			const user = userEvent.setup();
+
 			render(
 				<ImageSizeControl
 					imageHeight="100"
@@ -243,11 +299,20 @@ describe( 'ImageSizeControl', () => {
 				/>
 			);
 
-			fireEvent.click( screen.getByText( '50%' ) );
+			const button = screen.getByRole( 'button', {
+				name: '50%',
+				pressed: false,
+			} );
+
+			await user.click( button );
 
 			// Both attributes are set to the rounded scaled value.
-			expect( getHeightInput().value ).toBe( '50' );
-			expect( getWidthInput().value ).toBe( '101' );
+			expect(
+				screen.getByRole( 'spinbutton', { name: 'Height' } )
+			).toHaveValue( 50 );
+			expect(
+				screen.getByRole( 'spinbutton', { name: 'Width' } )
+			).toHaveValue( 101 );
 		} );
 	} );
 
@@ -268,12 +333,14 @@ describe( 'ImageSizeControl', () => {
 				/>
 			);
 
-			expect( screen.getByLabelText( 'Image size' ).value ).toBe(
-				'medium'
-			);
+			expect(
+				screen.getByRole( 'combobox', { name: 'Image size' } )
+			).toHaveValue( 'medium' );
 		} );
 
-		it( 'calls onChangeImage with selected slug on selection', () => {
+		it( 'calls onChangeImage with selected slug on selection', async () => {
+			const user = userEvent.setup();
+
 			render(
 				<ImageSizeControl
 					imageSizeOptions={ IMAGE_SIZE_OPTIONS }
@@ -283,12 +350,13 @@ describe( 'ImageSizeControl', () => {
 				/>
 			);
 
-			fireEvent.change( screen.getByLabelText( 'Image size' ), {
-				target: { value: 'thumbnail' },
-			} );
+			await user.selectOptions(
+				screen.getByRole( 'combobox', { name: 'Image size' } ),
+				'thumbnail'
+			);
 
 			// onChangeImage is called with the slug and the event.
-			expect( mockOnChangeImage ).toHaveBeenCalledWith(
+			expect( mockOnChangeImage ).toHaveBeenLastCalledWith(
 				'thumbnail',
 				expect.any( Object )
 			);

package/src/components/inner-blocks/index.js

@@ -87,8 +87,10 @@ function UncontrolledInnerBlocks( props ) {
 
 			const blockType = getBlockType( block.name );
 
-			if ( ! blockType || ! blockType.providesContext ) {
-				return {};
+			if (
+				Object.keys( blockType?.providesContext ?? {} ).length === 0
+			) {
+				return { name: block.name };
 			}
 
 			return {

package/src/components/inserter/block-patterns-tab.js

@@ -28,8 +28,11 @@ import BlockPatternList from '../block-patterns-list';
 import PatternsExplorerModal from './block-patterns-explorer/explorer';
 import MobileTabNavigation from './mobile-tab-navigation';
 
-function usePatternsCategories() {
-	const [ allPatterns, allCategories ] = usePatternsState();
+function usePatternsCategories( rootClientId ) {
+	const [ allPatterns, allCategories ] = usePatternsState(
+		undefined,
+		rootClientId
+	);
 
 	const hasRegisteredCategory = useCallback(
 		( pattern ) => {
@@ -128,7 +131,7 @@ export function BlockPatternsCategoryPanel( {
 		rootClientId
 	);
 
-	const availableCategories = usePatternsCategories();
+	const availableCategories = usePatternsCategories( rootClientId );
 	const currentCategoryPatterns = useMemo(
 		() =>
 			allPatterns.filter( ( pattern ) => {
@@ -184,7 +187,7 @@ function BlockPatternsTabs( {
 	rootClientId,
 } ) {
 	const [ showPatternsExplorer, setShowPatternsExplorer ] = useState( false );
-	const categories = usePatternsCategories();
+	const categories = usePatternsCategories( rootClientId );
 	const isMobile = useViewportMatch( 'medium', '<' );
 	return (
 		<>

package/src/components/inserter/hooks/use-insertion-point.js

@@ -39,6 +39,7 @@ function useInsertionPoint( {
 	isAppender,
 	onSelect,
 	shouldFocusBlock = true,
+	selectBlockOnInsert = true,
 } ) {
 	const { getSelectedBlock } = useSelect( blockEditorStore );
 	const { destinationRootClientId, destinationIndex } = useSelect(
@@ -108,7 +109,7 @@ function useInsertionPoint( {
 					blocks,
 					destinationIndex,
 					destinationRootClientId,
-					true,
+					selectBlockOnInsert,
 					shouldFocusBlock || shouldForceFocusBlock ? 0 : null,
 					meta
 				);
@@ -122,7 +123,7 @@ function useInsertionPoint( {
 			speak( message );
 
 			if ( onSelect ) {
-				onSelect();
+				onSelect( blocks );
 			}
 		},
 		[

package/src/components/inserter/index.js

@@ -143,18 +143,31 @@ class Inserter extends Component {
 			// Feel free to make them stable after a few releases.
 			__experimentalIsQuick: isQuick,
 			prioritizePatterns,
+			onSelectOrClose,
+			selectBlockOnInsert,
 		} = this.props;
 
 		if ( isQuick ) {
 			return (
 				<QuickInserter
-					onSelect={ () => {
+					onSelect={ ( blocks ) => {
+						const firstBlock =
+							Array.isArray( blocks ) && blocks?.length
+								? blocks[ 0 ]
+								: blocks;
+						if (
+							onSelectOrClose &&
+							typeof onSelectOrClose === 'function'
+						) {
+							onSelectOrClose( firstBlock );
+						}
 						onClose();
 					} }
 					rootClientId={ rootClientId }
 					clientId={ clientId }
 					isAppender={ isAppender }
 					prioritizePatterns={ prioritizePatterns }
+					selectBlockOnInsert={ selectBlockOnInsert }
 				/>
 			);
 		}
@@ -207,48 +220,53 @@ class Inserter extends Component {
 }
 
 export default compose( [
-	withSelect( ( select, { clientId, rootClientId } ) => {
-		const {
-			getBlockRootClientId,
-			hasInserterItems,
-			__experimentalGetAllowedBlocks,
-			__experimentalGetDirectInsertBlock,
-			getSettings,
-		} = select( blockEditorStore );
-
-		const { getBlockVariations } = select( blocksStore );
-
-		rootClientId =
-			rootClientId || getBlockRootClientId( clientId ) || undefined;
-
-		const allowedBlocks = __experimentalGetAllowedBlocks( rootClientId );
-
-		const directInsertBlock =
-			__experimentalGetDirectInsertBlock( rootClientId );
-
-		const settings = getSettings();
-
-		const hasSingleBlockType =
-			allowedBlocks?.length === 1 &&
-			getBlockVariations( allowedBlocks[ 0 ].name, 'inserter' )
-				?.length === 0;
-
-		let allowedBlockType = false;
-		if ( hasSingleBlockType ) {
-			allowedBlockType = allowedBlocks[ 0 ];
+	withSelect(
+		( select, { clientId, rootClientId, shouldDirectInsert = true } ) => {
+			const {
+				getBlockRootClientId,
+				hasInserterItems,
+				__experimentalGetAllowedBlocks,
+				__experimentalGetDirectInsertBlock,
+				getSettings,
+			} = select( blockEditorStore );
+
+			const { getBlockVariations } = select( blocksStore );
+
+			rootClientId =
+				rootClientId || getBlockRootClientId( clientId ) || undefined;
+
+			const allowedBlocks =
+				__experimentalGetAllowedBlocks( rootClientId );
+
+			const directInsertBlock =
+				shouldDirectInsert &&
+				__experimentalGetDirectInsertBlock( rootClientId );
+
+			const settings = getSettings();
+
+			const hasSingleBlockType =
+				allowedBlocks?.length === 1 &&
+				getBlockVariations( allowedBlocks[ 0 ].name, 'inserter' )
+					?.length === 0;
+
+			let allowedBlockType = false;
+			if ( hasSingleBlockType ) {
+				allowedBlockType = allowedBlocks[ 0 ];
+			}
+
+			return {
+				hasItems: hasInserterItems( rootClientId ),
+				hasSingleBlockType,
+				blockTitle: allowedBlockType ? allowedBlockType.title : '',
+				allowedBlockType,
+				directInsertBlock,
+				rootClientId,
+				prioritizePatterns:
+					settings.__experimentalPreferPatternsOnRoot &&
+					! rootClientId,
+			};
 		}
-
-		return {
-			hasItems: hasInserterItems( rootClientId ),
-			hasSingleBlockType,
-			blockTitle: allowedBlockType ? allowedBlockType.title : '',
-			allowedBlockType,
-			directInsertBlock,
-			rootClientId,
-			prioritizePatterns:
-				settings.__experimentalPreferPatternsOnRoot && ! rootClientId,
-		};
-	} ),
+	),
 	withDispatch( ( dispatch, ownProps, { select } ) => {
 		return {
 			insertOnlyAllowedBlock() {
@@ -380,7 +398,7 @@ export default compose( [
 
 				if ( onSelectOrClose ) {
 					onSelectOrClose( {
-						insertedBlockId: blockToInsert?.clientId,
+						clientId: blockToInsert?.clientId,
 					} );
 				}
 

package/src/components/inserter/media-tab/hooks.js

@@ -66,14 +66,15 @@ export function useMediaCategories( rootClientId ) {
 				per_page: 1,
 				_fields: [ 'id' ],
 			};
-			const [ image, video, audio ] = await Promise.all( [
+			const [ image, video, audio ] = await Promise.allSettled( [
 				fetchMedia( { ...query, media_type: 'image' } ),
 				fetchMedia( { ...query, media_type: 'video' } ),
 				fetchMedia( { ...query, media_type: 'audio' } ),
 			] );
-			const showImage = canInsertImage && !! image.length;
-			const showVideo = canInsertVideo && !! video.length;
-			const showAudio = canInsertAudio && !! audio.length;
+			// The `value` property is only present if the promise's status is "fulfilled".
+			const showImage = canInsertImage && !! image.value?.length;
+			const showVideo = canInsertVideo && !! video.value?.length;
+			const showAudio = canInsertAudio && !! audio.value?.length;
 			setCategories(
 				MEDIA_CATEGORIES.filter(
 					( { mediaType } ) =>

package/src/components/inserter/menu.js

@@ -67,20 +67,24 @@ function InserterMenu(
 			insertionIndex: __experimentalInsertionIndex,
 			shouldFocusBlock,
 		} );
-	const { showPatterns, hasReusableBlocks } = useSelect(
+	const { showPatterns, inserterItems } = useSelect(
 		( select ) => {
-			const { __experimentalGetAllowedPatterns, getSettings } =
+			const { __experimentalGetAllowedPatterns, getInserterItems } =
 				select( blockEditorStore );
 			return {
 				showPatterns: !! __experimentalGetAllowedPatterns(
 					destinationRootClientId
 				).length,
-				hasReusableBlocks:
-					!! getSettings().__experimentalReusableBlocks?.length,
+				inserterItems: getInserterItems( destinationRootClientId ),
 			};
 		},
 		[ destinationRootClientId ]
 	);
+	const hasReusableBlocks = useMemo( () => {
+		return inserterItems.some(
+			( { category } ) => category === 'reusable'
+		);
+	}, [ inserterItems ] );
 
 	const mediaCategories = useMediaCategories( destinationRootClientId );
 	const showMedia = !! mediaCategories.length;

package/src/components/inserter/quick-inserter.js

@@ -31,6 +31,7 @@ export default function QuickInserter( {
 	clientId,
 	isAppender,
 	prioritizePatterns,
+	selectBlockOnInsert,
 } ) {
 	const [ filterValue, setFilterValue ] = useState( '' );
 	const [ destinationRootClientId, onInsertBlocks ] = useInsertionPoint( {
@@ -38,6 +39,7 @@ export default function QuickInserter( {
 		rootClientId,
 		clientId,
 		isAppender,
+		selectBlockOnInsert,
 	} );
 	const [ blockTypes ] = useBlockTypesState(
 		destinationRootClientId,
@@ -121,6 +123,7 @@ export default function QuickInserter( {
 					maxBlockTypes={ SHOWN_BLOCK_TYPES }
 					isDraggable={ false }
 					prioritizePatterns={ prioritizePatterns }
+					selectBlockOnInsert={ selectBlockOnInsert }
 				/>
 			</div>