@wordpress/block-editor 11.0.0 → 11.2.0

package/src/hooks/supports.js

@@ -0,0 +1,302 @@
+/**
+ * WordPress dependencies
+ */
+import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
+import { Platform } from '@wordpress/element';
+
+const ALIGN_SUPPORT_KEY = 'align';
+const ALIGN_WIDE_SUPPORT_KEY = 'alignWide';
+const BORDER_SUPPORT_KEY = '__experimentalBorder';
+const COLOR_SUPPORT_KEY = 'color';
+const CUSTOM_CLASS_NAME_SUPPORT_KEY = 'customClassName';
+const FONT_FAMILY_SUPPORT_KEY = 'typography.__experimentalFontFamily';
+const FONT_SIZE_SUPPORT_KEY = 'typography.fontSize';
+const LINE_HEIGHT_SUPPORT_KEY = 'typography.lineHeight';
+/**
+ * Key within block settings' support array indicating support for font style.
+ */
+const FONT_STYLE_SUPPORT_KEY = 'typography.__experimentalFontStyle';
+/**
+ * Key within block settings' support array indicating support for font weight.
+ */
+const FONT_WEIGHT_SUPPORT_KEY = 'typography.__experimentalFontWeight';
+/**
+ * Key within block settings' supports array indicating support for text
+ * decorations e.g. settings found in `block.json`.
+ */
+const TEXT_DECORATION_SUPPORT_KEY = 'typography.__experimentalTextDecoration';
+/**
+ * Key within block settings' supports array indicating support for text
+ * transforms e.g. settings found in `block.json`.
+ */
+const TEXT_TRANSFORM_SUPPORT_KEY = 'typography.__experimentalTextTransform';
+/**
+ * Key within block settings' supports array indicating support for letter-spacing
+ * e.g. settings found in `block.json`.
+ */
+const LETTER_SPACING_SUPPORT_KEY = 'typography.__experimentalLetterSpacing';
+const LAYOUT_SUPPORT_KEY = '__experimentalLayout';
+const TYPOGRAPHY_SUPPORT_KEYS = [
+	LINE_HEIGHT_SUPPORT_KEY,
+	FONT_SIZE_SUPPORT_KEY,
+	FONT_STYLE_SUPPORT_KEY,
+	FONT_WEIGHT_SUPPORT_KEY,
+	FONT_FAMILY_SUPPORT_KEY,
+	TEXT_DECORATION_SUPPORT_KEY,
+	TEXT_TRANSFORM_SUPPORT_KEY,
+	LETTER_SPACING_SUPPORT_KEY,
+];
+const SPACING_SUPPORT_KEY = 'spacing';
+const styleSupportKeys = [
+	...TYPOGRAPHY_SUPPORT_KEYS,
+	BORDER_SUPPORT_KEY,
+	COLOR_SUPPORT_KEY,
+	SPACING_SUPPORT_KEY,
+];
+
+/**
+ * Returns true if the block defines support for align.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasAlignSupport = ( nameOrType ) =>
+	hasBlockSupport( nameOrType, ALIGN_SUPPORT_KEY );
+
+/**
+ * Returns the block support value for align, if defined.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {unknown} The block support value.
+ */
+export const getAlignSupport = ( nameOrType ) =>
+	getBlockSupport( nameOrType, ALIGN_SUPPORT_KEY );
+
+/**
+ * Returns true if the block defines support for align wide.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasAlignWideSupport = ( nameOrType ) =>
+	hasBlockSupport( nameOrType, ALIGN_WIDE_SUPPORT_KEY );
+
+/**
+ * Returns the block support value for align wide, if defined.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {unknown} The block support value.
+ */
+export const getAlignWideSupport = ( nameOrType ) =>
+	getBlockSupport( nameOrType, ALIGN_WIDE_SUPPORT_KEY );
+
+/**
+ * Determine whether there is block support for border properties.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @param {string}        feature    Border feature to check support for.
+ *
+ * @return {boolean} Whether there is support.
+ */
+export function hasBorderSupport( nameOrType, feature = 'any' ) {
+	if ( Platform.OS !== 'web' ) {
+		return false;
+	}
+
+	const support = getBlockSupport( nameOrType, BORDER_SUPPORT_KEY );
+
+	if ( support === true ) {
+		return true;
+	}
+
+	if ( feature === 'any' ) {
+		return !! (
+			support?.color ||
+			support?.radius ||
+			support?.width ||
+			support?.style
+		);
+	}
+
+	return !! support?.[ feature ];
+}
+
+/**
+ * Get block support for border properties.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @param {string}        feature    Border feature to get.
+ *
+ * @return {unknown} The block support.
+ */
+export const getBorderSupport = ( nameOrType, feature ) =>
+	getBlockSupport( nameOrType, [ BORDER_SUPPORT_KEY, feature ] );
+
+/**
+ * Returns true if the block defines support for color.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasColorSupport = ( nameOrType ) => {
+	const colorSupport = getBlockSupport( nameOrType, COLOR_SUPPORT_KEY );
+	return (
+		colorSupport &&
+		( colorSupport.link === true ||
+			colorSupport.gradient === true ||
+			colorSupport.background !== false ||
+			colorSupport.text !== false )
+	);
+};
+
+/**
+ * Returns true if the block defines support for link color.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasLinkColorSupport = ( nameOrType ) => {
+	if ( Platform.OS !== 'web' ) {
+		return false;
+	}
+
+	const colorSupport = getBlockSupport( nameOrType, COLOR_SUPPORT_KEY );
+
+	return (
+		colorSupport !== null &&
+		typeof colorSupport === 'object' &&
+		!! colorSupport.link
+	);
+};
+
+/**
+ * Returns true if the block defines support for gradient color.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasGradientSupport = ( nameOrType ) => {
+	const colorSupport = getBlockSupport( nameOrType, COLOR_SUPPORT_KEY );
+
+	return (
+		colorSupport !== null &&
+		typeof colorSupport === 'object' &&
+		!! colorSupport.gradients
+	);
+};
+
+/**
+ * Returns true if the block defines support for background color.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasBackgroundColorSupport = ( nameOrType ) => {
+	const colorSupport = getBlockSupport( nameOrType, COLOR_SUPPORT_KEY );
+
+	return colorSupport && colorSupport.background !== false;
+};
+
+/**
+ * Returns true if the block defines support for background color.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasTextColorSupport = ( nameOrType ) => {
+	const colorSupport = getBlockSupport( nameOrType, COLOR_SUPPORT_KEY );
+
+	return colorSupport && colorSupport.text !== false;
+};
+
+/**
+ * Get block support for color properties.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @param {string}        feature    Color feature to get.
+ *
+ * @return {unknown} The block support.
+ */
+export const getColorSupport = ( nameOrType, feature ) =>
+	getBlockSupport( nameOrType, [ COLOR_SUPPORT_KEY, feature ] );
+
+/**
+ * Returns true if the block defines support for custom class name.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasCustomClassNameSupport = ( nameOrType ) =>
+	hasBlockSupport( nameOrType, CUSTOM_CLASS_NAME_SUPPORT_KEY, true );
+
+/**
+ * Returns the block support value for custom class name, if defined.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {unknown} The block support value.
+ */
+export const getCustomClassNameSupport = ( nameOrType ) =>
+	getBlockSupport( nameOrType, CUSTOM_CLASS_NAME_SUPPORT_KEY, true );
+
+/**
+ * Returns true if the block defines support for font family.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasFontFamilySupport = ( nameOrType ) =>
+	hasBlockSupport( nameOrType, FONT_FAMILY_SUPPORT_KEY );
+
+/**
+ * Returns the block support value for font family, if defined.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {unknown} The block support value.
+ */
+export const getFontFamilySupport = ( nameOrType ) =>
+	getBlockSupport( nameOrType, FONT_FAMILY_SUPPORT_KEY );
+
+/**
+ * Returns true if the block defines support for font size.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasFontSizeSupport = ( nameOrType ) =>
+	hasBlockSupport( nameOrType, FONT_SIZE_SUPPORT_KEY );
+
+/**
+ * Returns the block support value for font size, if defined.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {unknown} The block support value.
+ */
+export const getFontSizeSupport = ( nameOrType ) =>
+	getBlockSupport( nameOrType, FONT_SIZE_SUPPORT_KEY );
+
+/**
+ * Returns true if the block defines support for layout.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasLayoutSupport = ( nameOrType ) =>
+	hasBlockSupport( nameOrType, LAYOUT_SUPPORT_KEY );
+
+/**
+ * Returns the block support value for layout, if defined.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {unknown} The block support value.
+ */
+export const getLayoutSupport = ( nameOrType ) =>
+	getBlockSupport( nameOrType, LAYOUT_SUPPORT_KEY );
+
+/**
+ * Returns true if the block defines support for style.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasStyleSupport = ( nameOrType ) =>
+	styleSupportKeys.some( ( key ) => hasBlockSupport( nameOrType, key ) );

package/src/hooks/test/__snapshots__/align.native.js.snap

@@ -0,0 +1,73 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Align options for group block sets Full width option 1`] = `
+"<!-- wp:group {\\"align\\":\\"full\\",\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
+<div class=\\"wp-block-group alignfull\\"></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Align options for group block sets None option 1`] = `
+"<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
+<div class=\\"wp-block-group\\"></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Align options for group block sets Wide width option 1`] = `
+"<!-- wp:group {\\"align\\":\\"wide\\",\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
+<div class=\\"wp-block-group alignwide\\"></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Align options for media block sets Align center option 1`] = `
+"<!-- wp:image {\\"align\\":\\"center\\",\\"id\\":1,\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
+<figure class=\\"wp-block-image aligncenter size-large\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-1\\"/></figure>
+<!-- /wp:image -->"
+`;
+
+exports[`Align options for media block sets Align left option 1`] = `
+"<!-- wp:image {\\"align\\":\\"left\\",\\"id\\":1,\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
+<figure class=\\"wp-block-image alignleft size-large\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-1\\"/></figure>
+<!-- /wp:image -->"
+`;
+
+exports[`Align options for media block sets Align right option 1`] = `
+"<!-- wp:image {\\"align\\":\\"right\\",\\"id\\":1,\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
+<figure class=\\"wp-block-image alignright size-large\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-1\\"/></figure>
+<!-- /wp:image -->"
+`;
+
+exports[`Align options for media block sets Full width option 1`] = `
+"<!-- wp:image {\\"align\\":\\"full\\",\\"id\\":1,\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
+<figure class=\\"wp-block-image alignfull size-large\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-1\\"/></figure>
+<!-- /wp:image -->"
+`;
+
+exports[`Align options for media block sets None option 1`] = `
+"<!-- wp:image {\\"id\\":1,\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
+<figure class=\\"wp-block-image size-large\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-1\\"/></figure>
+<!-- /wp:image -->"
+`;
+
+exports[`Align options for media block sets Wide width option 1`] = `
+"<!-- wp:image {\\"align\\":\\"wide\\",\\"id\\":1,\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
+<figure class=\\"wp-block-image alignwide size-large\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-1\\"/></figure>
+<!-- /wp:image -->"
+`;
+
+exports[`Align options for text block sets Align text center option 1`] = `
+"<!-- wp:paragraph {\\"align\\":\\"center\\"} -->
+<p class=\\"has-text-align-center\\"></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Align options for text block sets Align text left option 1`] = `
+"<!-- wp:paragraph {\\"align\\":\\"left\\"} -->
+<p class=\\"has-text-align-left\\"></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Align options for text block sets Align text right option 1`] = `
+"<!-- wp:paragraph {\\"align\\":\\"right\\"} -->
+<p class=\\"has-text-align-right\\"></p>
+<!-- /wp:paragraph -->"
+`;

package/src/hooks/test/align.native.js

@@ -0,0 +1,133 @@
+/**
+ * External dependencies
+ */
+import {
+	addBlock,
+	getEditorHtml,
+	initializeEditor,
+	getBlock,
+	fireEvent,
+	within,
+} from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
+
+const imageHTML = `<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
+<!-- /wp:image -->`;
+
+beforeAll( () => {
+	// Register all core blocks
+	registerCoreBlocks();
+} );
+
+afterAll( () => {
+	// Clean up registered blocks
+	getBlockTypes().forEach( ( block ) => {
+		unregisterBlockType( block.name );
+	} );
+} );
+
+describe( 'Align options', () => {
+	describe( 'for media block', () => {
+		[
+			'None',
+			'Align left',
+			'Align center',
+			'Align right',
+			'Wide width',
+			'Full width',
+		].forEach( ( alignmentOption ) =>
+			it( `sets ${ alignmentOption } option`, async () => {
+				const screen = await initializeEditor( {
+					initialHtml: imageHTML,
+				} );
+				const { getByLabelText } = screen;
+
+				// Get Image block
+				const imageBlock = await getBlock( screen, 'Image' );
+				expect( imageBlock ).toBeVisible();
+				fireEvent.press( imageBlock );
+
+				// Open alignments menu
+				const alignmentButtons = getByLabelText( 'Align' );
+				fireEvent.press( alignmentButtons );
+
+				// Select alignment option.
+				fireEvent.press( await getByLabelText( alignmentOption ) );
+
+				expect( getEditorHtml() ).toMatchSnapshot();
+			} )
+		);
+	} );
+
+	describe( 'for text block', () => {
+		[ 'Align text left', 'Align text center', 'Align text right' ].forEach(
+			( alignmentOption ) =>
+				it( `sets ${ alignmentOption } option`, async () => {
+					const screen = await initializeEditor();
+					const { getByLabelText } = screen;
+
+					// Add Paragraph block
+					await addBlock( screen, 'Paragraph' );
+
+					// Get Paragraph block
+					const paragraphBlock = await getBlock(
+						screen,
+						'Paragraph'
+					);
+					expect( paragraphBlock ).toBeVisible();
+
+					// Open alignments menu
+					const alignmentButtons = getByLabelText( 'Align' );
+					fireEvent.press( alignmentButtons );
+
+					// Select alignment option.
+					fireEvent.press( await getByLabelText( alignmentOption ) );
+
+					expect( getEditorHtml() ).toMatchSnapshot();
+				} )
+		);
+	} );
+
+	describe( 'for group block', () => {
+		[ 'None', 'Wide width', 'Full width' ].forEach( ( alignmentOption ) =>
+			it( `sets ${ alignmentOption } option`, async () => {
+				const screen = await initializeEditor();
+				const { getByLabelText } = screen;
+
+				// Add Group block
+				await addBlock( screen, 'Group' );
+
+				// Get Paragraph block
+				const groupBlock = await getBlock( screen, 'Group' );
+				expect( groupBlock ).toBeVisible();
+
+				// Trigger inner blocks layout
+				const innerBlockListWrapper = await within(
+					groupBlock
+				).findByTestId( 'block-list-wrapper' );
+				fireEvent( innerBlockListWrapper, 'layout', {
+					nativeEvent: {
+						layout: {
+							width: 300,
+						},
+					},
+				} );
+
+				// Open alignments menu
+				const alignmentButtons = getByLabelText( 'Align' );
+				fireEvent.press( alignmentButtons );
+
+				// Select alignment option.
+				fireEvent.press( await getByLabelText( alignmentOption ) );
+
+				expect( getEditorHtml() ).toMatchSnapshot();
+			} )
+		);
+	} );
+} );

package/src/hooks/test/use-typography-props.js

@@ -47,4 +47,30 @@ describe( 'getTypographyClassesAndStyles', () => {
 			},
 		} );
 	} );
+
+	it( 'should return configured fluid font size styles', () => {
+		const attributes = {
+			fontFamily: 'tofu',
+			style: {
+				typography: {
+					textDecoration: 'underline',
+					fontSize: '2rem',
+					textTransform: 'uppercase',
+				},
+			},
+		};
+		expect(
+			getTypographyClassesAndStyles( attributes, {
+				minFontSize: '1rem',
+			} )
+		).toEqual( {
+			className: 'has-tofu-font-family',
+			style: {
+				textDecoration: 'underline',
+				fontSize:
+					'clamp(1.5rem, 1.5rem + ((1vw - 0.48rem) * 0.962), 2rem)',
+				textTransform: 'uppercase',
+			},
+		} );
+	} );
 } );

package/src/hooks/use-typography-props.js

@@ -19,23 +19,31 @@ import { getComputedFluidTypographyValue } from '../components/font-sizes/fluid-
  * Provides the CSS class names and inline styles for a block's typography support
  * attributes.
  *
- * @param {Object}  attributes            Block attributes.
- * @param {boolean} isFluidFontSizeActive Whether the function should try to convert font sizes to fluid values.
+ * @param {Object}         attributes              Block attributes.
+ * @param {Object|boolean} fluidTypographySettings If boolean, whether the function should try to convert font sizes to fluid values,
+ *                                                 otherwise an object containing theme fluid typography settings.
  *
  * @return {Object} Typography block support derived CSS classes & styles.
  */
 export function getTypographyClassesAndStyles(
 	attributes,
-	isFluidFontSizeActive
+	fluidTypographySettings
 ) {
 	let typographyStyles = attributes?.style?.typography || {};
 
-	if ( isFluidFontSizeActive ) {
+	if (
+		!! fluidTypographySettings &&
+		( true === fluidTypographySettings ||
+			Object.keys( fluidTypographySettings ).length !== 0 )
+	) {
+		const newFontSize =
+			getComputedFluidTypographyValue( {
+				fontSize: attributes?.style?.typography?.fontSize,
+				minimumFontSizeLimit: fluidTypographySettings?.minFontSize,
+			} ) || attributes?.style?.typography?.fontSize;
 		typographyStyles = {
 			...typographyStyles,
-			fontSize: getComputedFluidTypographyValue( {
-				fontSize: attributes?.style?.typography?.fontSize,
-			} ),
+			fontSize: newFontSize,
 		};
 	}
 

package/src/store/reducer.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import fastDeepEqual from 'fast-deep-equal/es6';
-import { omit, isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -113,7 +112,10 @@ function getFlattenedClientIds( blocks ) {
  * @return {Array} Flattened block attributes object.
  */
 function getFlattenedBlocksWithoutAttributes( blocks ) {
-	return flattenBlocks( blocks, ( block ) => omit( block, 'attributes' ) );
+	return flattenBlocks( blocks, ( block ) => {
+		const { attributes, ...restBlock } = block;
+		return restBlock;
+	} );
 }
 
 /**
@@ -782,8 +784,8 @@ export const blocks = pipe(
 				}
 
 				// Do nothing if only attributes change.
-				const changes = omit( action.updates, 'attributes' );
-				if ( isEmpty( changes ) ) {
+				const { attributes, ...changes } = action.updates;
+				if ( Object.values( changes ).length === 0 ) {
 					return state;
 				}
 
@@ -1641,13 +1643,18 @@ export const blockListSettings = ( state = {}, action ) => {
 		// should correct the state.
 		case 'REPLACE_BLOCKS':
 		case 'REMOVE_BLOCKS': {
-			return omit( state, action.clientIds );
+			return Object.fromEntries(
+				Object.entries( state ).filter(
+					( [ id ] ) => ! action.clientIds.includes( id )
+				)
+			);
 		}
 		case 'UPDATE_BLOCK_LIST_SETTINGS': {
 			const { clientId } = action;
 			if ( ! action.settings ) {
 				if ( state.hasOwnProperty( clientId ) ) {
-					return omit( state, clientId );
+					const { [ clientId ]: removedBlock, ...restBlocks } = state;
+					return restBlocks;
 				}
 
 				return state;
@@ -1822,14 +1829,19 @@ export function highlightedBlock( state, action ) {
 export function lastBlockInserted( state = {}, action ) {
 	switch ( action.type ) {
 		case 'INSERT_BLOCKS':
+		case 'REPLACE_BLOCKS':
+		case 'REPLACE_INNER_BLOCKS':
 			if ( ! action.blocks.length ) {
 				return state;
 			}
 
-			const clientId = action.blocks[ 0 ].clientId;
+			const clientIds = action.blocks.map( ( block ) => {
+				return block.clientId;
+			} );
+
 			const source = action.meta?.source;
 
-			return { clientId, source };
+			return { clientIds, source };
 		case 'RESET_BLOCKS':
 			return {};
 	}

package/src/store/selectors.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { map, find } from 'lodash';
+import { map } from 'lodash';
 import createSelector from 'rememo';
 
 /**
@@ -2469,8 +2469,7 @@ export const __experimentalGetBlockListSettingsForBlocks = createSelector(
  */
 export const __experimentalGetReusableBlockTitle = createSelector(
 	( state, ref ) => {
-		const reusableBlock = find(
-			getReusableBlocks( state ),
+		const reusableBlock = getReusableBlocks( state ).find(
 			( block ) => block.id === ref
 		);
 		if ( ! reusableBlock ) {
@@ -2648,19 +2647,19 @@ export const __experimentalGetActiveBlockIdByBlockNames = createSelector(
 export function wasBlockJustInserted( state, clientId, source ) {
 	const { lastBlockInserted } = state;
 	return (
-		lastBlockInserted.clientId === clientId &&
+		lastBlockInserted.clientIds?.includes( clientId ) &&
 		lastBlockInserted.source === source
 	);
 }
 
 /**
- * Gets the client id of the last inserted block.
+ * Gets the client ids of the last inserted blocks.
  *
  * @param {Object} state Global application state.
- * @return {string|undefined} Client Id of the last inserted block.
+ * @return {Array|undefined} Client Ids of the last inserted block(s).
  */
-export function getLastInsertedBlockClientId( state ) {
-	return state?.lastBlockInserted?.clientId;
+export function getLastInsertedBlocksClientIds( state ) {
+	return state?.lastBlockInserted?.clientIds;
 }
 
 /**