@wordpress/block-editor 9.1.0 → 9.4.0

package/src/store/actions.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { castArray, findKey, first, isObject, last, some } from 'lodash';
+import { castArray, first, isObject, last, some } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -26,6 +26,10 @@ import deprecated from '@wordpress/deprecated';
  * Internal dependencies
  */
 import { mapRichTextSettings } from './utils';
+import {
+	retrieveSelectedAttribute,
+	START_OF_SELECTED_AREA,
+} from '../utils/selection';
 
 /**
  * Action which will insert a default block insert action if there
@@ -33,24 +37,26 @@ import { mapRichTextSettings } from './utils';
  * in actions which may result in no blocks remaining in the editor (removal,
  * replacement, etc).
  */
-const ensureDefaultBlock = () => ( { select, dispatch } ) => {
-	// To avoid a focus loss when removing the last block, assure there is
-	// always a default block if the last of the blocks have been removed.
-	const count = select.getBlockCount();
-	if ( count > 0 ) {
-		return;
-	}
+const ensureDefaultBlock =
+	() =>
+	( { select, dispatch } ) => {
+		// To avoid a focus loss when removing the last block, assure there is
+		// always a default block if the last of the blocks have been removed.
+		const count = select.getBlockCount();
+		if ( count > 0 ) {
+			return;
+		}
 
-	// If there's an custom appender, don't insert default block.
-	// We have to remember to manually move the focus elsewhere to
-	// prevent it from being lost though.
-	const { __unstableHasCustomAppender } = select.getSettings();
-	if ( __unstableHasCustomAppender ) {
-		return;
-	}
+		// If there's an custom appender, don't insert default block.
+		// We have to remember to manually move the focus elsewhere to
+		// prevent it from being lost though.
+		const { __unstableHasCustomAppender } = select.getSettings();
+		if ( __unstableHasCustomAppender ) {
+			return;
+		}
 
-	dispatch.insertDefaultBlock();
-};
+		dispatch.insertDefaultBlock();
+	};
 
 /**
  * Action that resets blocks state to the specified array of blocks, taking precedence
@@ -58,10 +64,12 @@ const ensureDefaultBlock = () => ( { select, dispatch } ) => {
  *
  * @param {Array} blocks Array of blocks.
  */
-export const resetBlocks = ( blocks ) => ( { dispatch } ) => {
-	dispatch( { type: 'RESET_BLOCKS', blocks } );
-	dispatch( validateBlocksToTemplate( blocks ) );
-};
+export const resetBlocks =
+	( blocks ) =>
+	( { dispatch } ) => {
+		dispatch( { type: 'RESET_BLOCKS', blocks } );
+		dispatch( validateBlocksToTemplate( blocks ) );
+	};
 
 /**
  * Block validity is a function of blocks state (at the point of a
@@ -71,28 +79,27 @@ export const resetBlocks = ( blocks ) => ( { dispatch } ) => {
  *
  * @param {Array} blocks Array of blocks.
  */
-export const validateBlocksToTemplate = ( blocks ) => ( {
-	select,
-	dispatch,
-} ) => {
-	const template = select.getTemplate();
-	const templateLock = select.getTemplateLock();
-
-	// Unlocked templates are considered always valid because they act
-	// as default values only.
-	const isBlocksValidToTemplate =
-		! template ||
-		templateLock !== 'all' ||
-		doBlocksMatchTemplate( blocks, template );
-
-	// Update if validity has changed.
-	const isValidTemplate = select.isValidTemplate();
-
-	if ( isBlocksValidToTemplate !== isValidTemplate ) {
-		dispatch.setTemplateValidity( isBlocksValidToTemplate );
-		return isBlocksValidToTemplate;
-	}
-};
+export const validateBlocksToTemplate =
+	( blocks ) =>
+	( { select, dispatch } ) => {
+		const template = select.getTemplate();
+		const templateLock = select.getTemplateLock();
+
+		// Unlocked templates are considered always valid because they act
+		// as default values only.
+		const isBlocksValidToTemplate =
+			! template ||
+			templateLock !== 'all' ||
+			doBlocksMatchTemplate( blocks, template );
+
+		// Update if validity has changed.
+		const isValidTemplate = select.isValidTemplate();
+
+		if ( isBlocksValidToTemplate !== isValidTemplate ) {
+			dispatch.setTemplateValidity( isBlocksValidToTemplate );
+			return isBlocksValidToTemplate;
+		}
+	};
 
 /**
  * A block selection object.
@@ -228,12 +235,15 @@ export function selectBlock( clientId, initialPosition = 0 ) {
  *
  * @param {string} clientId Block client ID.
  */
-export const selectPreviousBlock = ( clientId ) => ( { select, dispatch } ) => {
-	const previousBlockClientId = select.getPreviousBlockClientId( clientId );
-	if ( previousBlockClientId ) {
-		dispatch.selectBlock( previousBlockClientId, -1 );
-	}
-};
+export const selectPreviousBlock =
+	( clientId ) =>
+	( { select, dispatch } ) => {
+		const previousBlockClientId =
+			select.getPreviousBlockClientId( clientId );
+		if ( previousBlockClientId ) {
+			dispatch.selectBlock( previousBlockClientId, -1 );
+		}
+	};
 
 /**
  * Yields action objects used in signalling that the block following the given
@@ -241,12 +251,14 @@ export const selectPreviousBlock = ( clientId ) => ( { select, dispatch } ) => {
  *
  * @param {string} clientId Block client ID.
  */
-export const selectNextBlock = ( clientId ) => ( { select, dispatch } ) => {
-	const nextBlockClientId = select.getNextBlockClientId( clientId );
-	if ( nextBlockClientId ) {
-		dispatch.selectBlock( nextBlockClientId );
-	}
-};
+export const selectNextBlock =
+	( clientId ) =>
+	( { select, dispatch } ) => {
+		const nextBlockClientId = select.getNextBlockClientId( clientId );
+		if ( nextBlockClientId ) {
+			dispatch.selectBlock( nextBlockClientId );
+		}
+	};
 
 /**
  * Action that starts block multi-selection.
@@ -277,37 +289,35 @@ export function stopMultiSelect() {
  * @param {string}      end                           Last block of the multiselection.
  * @param {number|null} __experimentalInitialPosition Optional initial position. Pass as null to skip focus within editor canvas.
  */
-export const multiSelect = (
-	start,
-	end,
-	__experimentalInitialPosition = 0
-) => ( { select, dispatch } ) => {
-	const startBlockRootClientId = select.getBlockRootClientId( start );
-	const endBlockRootClientId = select.getBlockRootClientId( end );
-
-	// Only allow block multi-selections at the same level.
-	if ( startBlockRootClientId !== endBlockRootClientId ) {
-		return;
-	}
+export const multiSelect =
+	( start, end, __experimentalInitialPosition = 0 ) =>
+	( { select, dispatch } ) => {
+		const startBlockRootClientId = select.getBlockRootClientId( start );
+		const endBlockRootClientId = select.getBlockRootClientId( end );
+
+		// Only allow block multi-selections at the same level.
+		if ( startBlockRootClientId !== endBlockRootClientId ) {
+			return;
+		}
 
-	dispatch( {
-		type: 'MULTI_SELECT',
-		start,
-		end,
-		initialPosition: __experimentalInitialPosition,
-	} );
+		dispatch( {
+			type: 'MULTI_SELECT',
+			start,
+			end,
+			initialPosition: __experimentalInitialPosition,
+		} );
 
-	const blockCount = select.getSelectedBlockCount();
+		const blockCount = select.getSelectedBlockCount();
 
-	speak(
-		sprintf(
-			/* translators: %s: number of selected blocks */
-			_n( '%s block selected.', '%s blocks selected.', blockCount ),
-			blockCount
-		),
-		'assertive'
-	);
-};
+		speak(
+			sprintf(
+				/* translators: %s: number of selected blocks */
+				_n( '%s block selected.', '%s blocks selected.', blockCount ),
+				blockCount
+			),
+			'assertive'
+		);
+	};
 
 /**
  * Action that clears the block selection.
@@ -377,42 +387,38 @@ function getBlocksWithDefaultStylesApplied( blocks, blockEditorSettings ) {
  *
  * @return {Object} Action object.
  */
-export const replaceBlocks = (
-	clientIds,
-	blocks,
-	indexToSelect,
-	initialPosition = 0,
-	meta
-) => ( { select, dispatch } ) => {
-	/* eslint-enable jsdoc/valid-types */
-	clientIds = castArray( clientIds );
-	blocks = getBlocksWithDefaultStylesApplied(
-		castArray( blocks ),
-		select.getSettings()
-	);
-	const rootClientId = select.getBlockRootClientId( first( clientIds ) );
-	// Replace is valid if the new blocks can be inserted in the root block.
-	for ( let index = 0; index < blocks.length; index++ ) {
-		const block = blocks[ index ];
-		const canInsertBlock = select.canInsertBlockType(
-			block.name,
-			rootClientId
+export const replaceBlocks =
+	( clientIds, blocks, indexToSelect, initialPosition = 0, meta ) =>
+	( { select, dispatch } ) => {
+		/* eslint-enable jsdoc/valid-types */
+		clientIds = castArray( clientIds );
+		blocks = getBlocksWithDefaultStylesApplied(
+			castArray( blocks ),
+			select.getSettings()
 		);
-		if ( ! canInsertBlock ) {
-			return;
+		const rootClientId = select.getBlockRootClientId( first( clientIds ) );
+		// Replace is valid if the new blocks can be inserted in the root block.
+		for ( let index = 0; index < blocks.length; index++ ) {
+			const block = blocks[ index ];
+			const canInsertBlock = select.canInsertBlockType(
+				block.name,
+				rootClientId
+			);
+			if ( ! canInsertBlock ) {
+				return;
+			}
 		}
-	}
-	dispatch( {
-		type: 'REPLACE_BLOCKS',
-		clientIds,
-		blocks,
-		time: Date.now(),
-		indexToSelect,
-		initialPosition,
-		meta,
-	} );
-	dispatch( ensureDefaultBlock() );
-};
+		dispatch( {
+			type: 'REPLACE_BLOCKS',
+			clientIds,
+			blocks,
+			time: Date.now(),
+			indexToSelect,
+			initialPosition,
+			meta,
+		} );
+		dispatch( ensureDefaultBlock() );
+	};
 
 /**
  * Action that replaces a single block with one or more replacement blocks.
@@ -434,18 +440,18 @@ export function replaceBlock( clientId, block ) {
  *
  * @return {Function} Action creator.
  */
-const createOnMove = ( type ) => ( clientIds, rootClientId ) => ( {
-	select,
-	dispatch,
-} ) => {
-	// If one of the blocks is locked or the parent is locked, we cannot move any block.
-	const canMoveBlocks = select.canMoveBlocks( clientIds, rootClientId );
-	if ( ! canMoveBlocks ) {
-		return;
-	}
+const createOnMove =
+	( type ) =>
+	( clientIds, rootClientId ) =>
+	( { select, dispatch } ) => {
+		// If one of the blocks is locked or the parent is locked, we cannot move any block.
+		const canMoveBlocks = select.canMoveBlocks( clientIds, rootClientId );
+		if ( ! canMoveBlocks ) {
+			return;
+		}
 
-	dispatch( { type, clientIds: castArray( clientIds ), rootClientId } );
-};
+		dispatch( { type, clientIds: castArray( clientIds ), rootClientId } );
+	};
 
 export const moveBlocksDown = createOnMove( 'MOVE_BLOCKS_DOWN' );
 export const moveBlocksUp = createOnMove( 'MOVE_BLOCKS_UP' );
@@ -458,51 +464,51 @@ export const moveBlocksUp = createOnMove( 'MOVE_BLOCKS_UP' );
  * @param {?string} toRootClientId   Root client ID destination.
  * @param {number}  index            The index to move the blocks to.
  */
-export const moveBlocksToPosition = (
-	clientIds,
-	fromRootClientId = '',
-	toRootClientId = '',
-	index
-) => ( { select, dispatch } ) => {
-	const canMoveBlocks = select.canMoveBlocks( clientIds, fromRootClientId );
-
-	// If one of the blocks is locked or the parent is locked, we cannot move any block.
-	if ( ! canMoveBlocks ) {
-		return;
-	}
-
-	// If moving inside the same root block the move is always possible.
-	if ( fromRootClientId !== toRootClientId ) {
-		const canRemoveBlocks = select.canRemoveBlocks(
+export const moveBlocksToPosition =
+	( clientIds, fromRootClientId = '', toRootClientId = '', index ) =>
+	( { select, dispatch } ) => {
+		const canMoveBlocks = select.canMoveBlocks(
 			clientIds,
 			fromRootClientId
 		);
 
-		// If we're moving to another block, it means we're deleting blocks from
-		// the original block, so we need to check if removing is possible.
-		if ( ! canRemoveBlocks ) {
+		// If one of the blocks is locked or the parent is locked, we cannot move any block.
+		if ( ! canMoveBlocks ) {
 			return;
 		}
 
-		const canInsertBlocks = select.canInsertBlocks(
-			clientIds,
-			toRootClientId
-		);
+		// If moving inside the same root block the move is always possible.
+		if ( fromRootClientId !== toRootClientId ) {
+			const canRemoveBlocks = select.canRemoveBlocks(
+				clientIds,
+				fromRootClientId
+			);
 
-		// If moving to other parent block, the move is possible if we can insert a block of the same type inside the new parent block.
-		if ( ! canInsertBlocks ) {
-			return;
+			// If we're moving to another block, it means we're deleting blocks from
+			// the original block, so we need to check if removing is possible.
+			if ( ! canRemoveBlocks ) {
+				return;
+			}
+
+			const canInsertBlocks = select.canInsertBlocks(
+				clientIds,
+				toRootClientId
+			);
+
+			// If moving to other parent block, the move is possible if we can insert a block of the same type inside the new parent block.
+			if ( ! canInsertBlocks ) {
+				return;
+			}
 		}
-	}
 
-	dispatch( {
-		type: 'MOVE_BLOCKS_TO_POSITION',
-		fromRootClientId,
-		toRootClientId,
-		clientIds,
-		index,
-	} );
-};
+		dispatch( {
+			type: 'MOVE_BLOCKS_TO_POSITION',
+			fromRootClientId,
+			toRootClientId,
+			clientIds,
+			index,
+		} );
+	};
 
 /**
  * Action that moves given block to a new position.
@@ -566,48 +572,56 @@ export function insertBlock(
  * @param {?Object}   meta            Optional Meta values to be passed to the action object.
  * @return {Object} Action object.
  */
-export const insertBlocks = (
-	blocks,
-	index,
-	rootClientId,
-	updateSelection = true,
-	initialPosition = 0,
-	meta
-) => ( { select, dispatch } ) => {
-	/* eslint-enable jsdoc/valid-types */
-	if ( isObject( initialPosition ) ) {
-		meta = initialPosition;
-		initialPosition = 0;
-		deprecated( "meta argument in wp.data.dispatch('core/block-editor')", {
-			since: '5.8',
-			hint: 'The meta argument is now the 6th argument of the function',
-		} );
-	}
+export const insertBlocks =
+	(
+		blocks,
+		index,
+		rootClientId,
+		updateSelection = true,
+		initialPosition = 0,
+		meta
+	) =>
+	( { select, dispatch } ) => {
+		/* eslint-enable jsdoc/valid-types */
+		if ( isObject( initialPosition ) ) {
+			meta = initialPosition;
+			initialPosition = 0;
+			deprecated(
+				"meta argument in wp.data.dispatch('core/block-editor')",
+				{
+					since: '5.8',
+					hint: 'The meta argument is now the 6th argument of the function',
+				}
+			);
+		}
 
-	blocks = getBlocksWithDefaultStylesApplied(
-		castArray( blocks ),
-		select.getSettings()
-	);
-	const allowedBlocks = [];
-	for ( const block of blocks ) {
-		const isValid = select.canInsertBlockType( block.name, rootClientId );
-		if ( isValid ) {
-			allowedBlocks.push( block );
+		blocks = getBlocksWithDefaultStylesApplied(
+			castArray( blocks ),
+			select.getSettings()
+		);
+		const allowedBlocks = [];
+		for ( const block of blocks ) {
+			const isValid = select.canInsertBlockType(
+				block.name,
+				rootClientId
+			);
+			if ( isValid ) {
+				allowedBlocks.push( block );
+			}
 		}
-	}
-	if ( allowedBlocks.length ) {
-		dispatch( {
-			type: 'INSERT_BLOCKS',
-			blocks: allowedBlocks,
-			index,
-			rootClientId,
-			time: Date.now(),
-			updateSelection,
-			initialPosition: updateSelection ? initialPosition : null,
-			meta,
-		} );
-	}
-};
+		if ( allowedBlocks.length ) {
+			dispatch( {
+				type: 'INSERT_BLOCKS',
+				blocks: allowedBlocks,
+				index,
+				rootClientId,
+				time: Date.now(),
+				updateSelection,
+				initialPosition: updateSelection ? initialPosition : null,
+				meta,
+			} );
+		}
+	};
 
 /**
  * Action that shows the insertion point.
@@ -663,321 +677,324 @@ export function setTemplateValidity( isValid ) {
  *
  * @return {Object} Action object.
  */
-export const synchronizeTemplate = () => ( { select, dispatch } ) => {
-	dispatch( { type: 'SYNCHRONIZE_TEMPLATE' } );
-	const blocks = select.getBlocks();
-	const template = select.getTemplate();
-	const updatedBlockList = synchronizeBlocksWithTemplate( blocks, template );
+export const synchronizeTemplate =
+	() =>
+	( { select, dispatch } ) => {
+		dispatch( { type: 'SYNCHRONIZE_TEMPLATE' } );
+		const blocks = select.getBlocks();
+		const template = select.getTemplate();
+		const updatedBlockList = synchronizeBlocksWithTemplate(
+			blocks,
+			template
+		);
 
-	dispatch.resetBlocks( updatedBlockList );
-};
+		dispatch.resetBlocks( updatedBlockList );
+	};
 
 /**
  * Delete the current selection.
  *
  * @param {boolean} isForward
  */
-export const __unstableDeleteSelection = ( isForward ) => ( {
-	registry,
-	select,
-	dispatch,
-} ) => {
-	const selectionAnchor = select.getSelectionStart();
-	const selectionFocus = select.getSelectionEnd();
-
-	if ( selectionAnchor.clientId === selectionFocus.clientId ) return;
-
-	// It's not mergeable if there's no rich text selection.
-	if (
-		! selectionAnchor.attributeKey ||
-		! selectionFocus.attributeKey ||
-		typeof selectionAnchor.offset === 'undefined' ||
-		typeof selectionFocus.offset === 'undefined'
-	)
-		return false;
-
-	const anchorRootClientId = select.getBlockRootClientId(
-		selectionAnchor.clientId
-	);
-	const focusRootClientId = select.getBlockRootClientId(
-		selectionFocus.clientId
-	);
-
-	// It's not mergeable if the selection doesn't start and end in the same
-	// block list. Maybe in the future it should be allowed.
-	if ( anchorRootClientId !== focusRootClientId ) {
-		return;
-	}
-
-	const blockOrder = select.getBlockOrder( anchorRootClientId );
-	const anchorIndex = blockOrder.indexOf( selectionAnchor.clientId );
-	const focusIndex = blockOrder.indexOf( selectionFocus.clientId );
+export const __unstableDeleteSelection =
+	( isForward ) =>
+	( { registry, select, dispatch } ) => {
+		const selectionAnchor = select.getSelectionStart();
+		const selectionFocus = select.getSelectionEnd();
+
+		if ( selectionAnchor.clientId === selectionFocus.clientId ) return;
+
+		// It's not mergeable if there's no rich text selection.
+		if (
+			! selectionAnchor.attributeKey ||
+			! selectionFocus.attributeKey ||
+			typeof selectionAnchor.offset === 'undefined' ||
+			typeof selectionFocus.offset === 'undefined'
+		)
+			return false;
 
-	// Reassign selection start and end based on order.
-	let selectionStart, selectionEnd;
+		const anchorRootClientId = select.getBlockRootClientId(
+			selectionAnchor.clientId
+		);
+		const focusRootClientId = select.getBlockRootClientId(
+			selectionFocus.clientId
+		);
 
-	if ( anchorIndex > focusIndex ) {
-		selectionStart = selectionFocus;
-		selectionEnd = selectionAnchor;
-	} else {
-		selectionStart = selectionAnchor;
-		selectionEnd = selectionFocus;
-	}
+		// It's not mergeable if the selection doesn't start and end in the same
+		// block list. Maybe in the future it should be allowed.
+		if ( anchorRootClientId !== focusRootClientId ) {
+			return;
+		}
 
-	const targetSelection = isForward ? selectionEnd : selectionStart;
-	const targetBlock = select.getBlock( targetSelection.clientId );
-	const targetBlockType = getBlockType( targetBlock.name );
+		const blockOrder = select.getBlockOrder( anchorRootClientId );
+		const anchorIndex = blockOrder.indexOf( selectionAnchor.clientId );
+		const focusIndex = blockOrder.indexOf( selectionFocus.clientId );
 
-	if ( ! targetBlockType.merge ) {
-		return;
-	}
+		// Reassign selection start and end based on order.
+		let selectionStart, selectionEnd;
 
-	const selectionA = selectionStart;
-	const selectionB = selectionEnd;
+		if ( anchorIndex > focusIndex ) {
+			selectionStart = selectionFocus;
+			selectionEnd = selectionAnchor;
+		} else {
+			selectionStart = selectionAnchor;
+			selectionEnd = selectionFocus;
+		}
 
-	const blockA = select.getBlock( selectionA.clientId );
-	const blockAType = getBlockType( blockA.name );
+		const targetSelection = isForward ? selectionEnd : selectionStart;
+		const targetBlock = select.getBlock( targetSelection.clientId );
+		const targetBlockType = getBlockType( targetBlock.name );
 
-	const blockB = select.getBlock( selectionB.clientId );
-	const blockBType = getBlockType( blockB.name );
+		if ( ! targetBlockType.merge ) {
+			return;
+		}
 
-	const htmlA = blockA.attributes[ selectionA.attributeKey ];
-	const htmlB = blockB.attributes[ selectionB.attributeKey ];
+		const selectionA = selectionStart;
+		const selectionB = selectionEnd;
 
-	const attributeDefinitionA =
-		blockAType.attributes[ selectionA.attributeKey ];
-	const attributeDefinitionB =
-		blockBType.attributes[ selectionB.attributeKey ];
+		const blockA = select.getBlock( selectionA.clientId );
+		const blockAType = getBlockType( blockA.name );
 
-	let valueA = create( {
-		html: htmlA,
-		...mapRichTextSettings( attributeDefinitionA ),
-	} );
-	let valueB = create( {
-		html: htmlB,
-		...mapRichTextSettings( attributeDefinitionB ),
-	} );
+		const blockB = select.getBlock( selectionB.clientId );
+		const blockBType = getBlockType( blockB.name );
 
-	// A robust way to retain selection position through various transforms
-	// is to insert a special character at the position and then recover it.
-	const START_OF_SELECTED_AREA = '\u0086';
+		const htmlA = blockA.attributes[ selectionA.attributeKey ];
+		const htmlB = blockB.attributes[ selectionB.attributeKey ];
 
-	valueA = remove( valueA, selectionA.offset, valueA.text.length );
-	valueB = insert( valueB, START_OF_SELECTED_AREA, 0, selectionB.offset );
+		const attributeDefinitionA =
+			blockAType.attributes[ selectionA.attributeKey ];
+		const attributeDefinitionB =
+			blockBType.attributes[ selectionB.attributeKey ];
 
-	// Clone the blocks so we don't manipulate the original.
-	const cloneA = cloneBlock( blockA, {
-		[ selectionA.attributeKey ]: toHTMLString( {
-			value: valueA,
+		let valueA = create( {
+			html: htmlA,
 			...mapRichTextSettings( attributeDefinitionA ),
-		} ),
-	} );
-	const cloneB = cloneBlock( blockB, {
-		[ selectionB.attributeKey ]: toHTMLString( {
-			value: valueB,
+		} );
+		let valueB = create( {
+			html: htmlB,
 			...mapRichTextSettings( attributeDefinitionB ),
-		} ),
-	} );
+		} );
 
-	const followingBlock = isForward ? cloneA : cloneB;
+		valueA = remove( valueA, selectionA.offset, valueA.text.length );
+		valueB = insert( valueB, START_OF_SELECTED_AREA, 0, selectionB.offset );
 
-	// We can only merge blocks with similar types
-	// thus, we transform the block to merge first
-	const blocksWithTheSameType =
-		blockA.name === blockB.name
-			? [ followingBlock ]
-			: switchToBlockType( followingBlock, targetBlockType.name );
+		// Clone the blocks so we don't manipulate the original.
+		const cloneA = cloneBlock( blockA, {
+			[ selectionA.attributeKey ]: toHTMLString( {
+				value: valueA,
+				...mapRichTextSettings( attributeDefinitionA ),
+			} ),
+		} );
+		const cloneB = cloneBlock( blockB, {
+			[ selectionB.attributeKey ]: toHTMLString( {
+				value: valueB,
+				...mapRichTextSettings( attributeDefinitionB ),
+			} ),
+		} );
 
-	// If the block types can not match, do nothing
-	if ( ! blocksWithTheSameType || ! blocksWithTheSameType.length ) {
-		return;
-	}
+		const followingBlock = isForward ? cloneA : cloneB;
 
-	let updatedAttributes;
+		// We can only merge blocks with similar types
+		// thus, we transform the block to merge first
+		const blocksWithTheSameType =
+			blockA.name === blockB.name
+				? [ followingBlock ]
+				: switchToBlockType( followingBlock, targetBlockType.name );
 
-	if ( isForward ) {
-		const blockToMerge = blocksWithTheSameType.pop();
-		updatedAttributes = targetBlockType.merge(
-			blockToMerge.attributes,
-			cloneB.attributes
-		);
-	} else {
-		const blockToMerge = blocksWithTheSameType.shift();
-		updatedAttributes = targetBlockType.merge(
-			cloneA.attributes,
-			blockToMerge.attributes
-		);
-	}
+		// If the block types can not match, do nothing
+		if ( ! blocksWithTheSameType || ! blocksWithTheSameType.length ) {
+			return;
+		}
 
-	const newAttributeKey = findKey(
-		updatedAttributes,
-		( v ) =>
-			typeof v === 'string' && v.indexOf( START_OF_SELECTED_AREA ) !== -1
-	);
+		let updatedAttributes;
 
-	const convertedHtml = updatedAttributes[ newAttributeKey ];
-	const convertedValue = create( {
-		html: convertedHtml,
-		...mapRichTextSettings( targetBlockType.attributes[ newAttributeKey ] ),
-	} );
-	const newOffset = convertedValue.text.indexOf( START_OF_SELECTED_AREA );
-	const newValue = remove( convertedValue, newOffset, newOffset + 1 );
-	const newHtml = toHTMLString( {
-		value: newValue,
-		...mapRichTextSettings( targetBlockType.attributes[ newAttributeKey ] ),
-	} );
+		if ( isForward ) {
+			const blockToMerge = blocksWithTheSameType.pop();
+			updatedAttributes = targetBlockType.merge(
+				blockToMerge.attributes,
+				cloneB.attributes
+			);
+		} else {
+			const blockToMerge = blocksWithTheSameType.shift();
+			updatedAttributes = targetBlockType.merge(
+				cloneA.attributes,
+				blockToMerge.attributes
+			);
+		}
 
-	updatedAttributes[ newAttributeKey ] = newHtml;
+		const newAttributeKey = retrieveSelectedAttribute( updatedAttributes );
 
-	const selectedBlockClientIds = select.getSelectedBlockClientIds();
-	const replacement = [
-		...( isForward ? blocksWithTheSameType : [] ),
-		{
-			// Preserve the original client ID.
-			...targetBlock,
-			attributes: {
-				...targetBlock.attributes,
-				...updatedAttributes,
+		const convertedHtml = updatedAttributes[ newAttributeKey ];
+		const convertedValue = create( {
+			html: convertedHtml,
+			...mapRichTextSettings(
+				targetBlockType.attributes[ newAttributeKey ]
+			),
+		} );
+		const newOffset = convertedValue.text.indexOf( START_OF_SELECTED_AREA );
+		const newValue = remove( convertedValue, newOffset, newOffset + 1 );
+		const newHtml = toHTMLString( {
+			value: newValue,
+			...mapRichTextSettings(
+				targetBlockType.attributes[ newAttributeKey ]
+			),
+		} );
+
+		updatedAttributes[ newAttributeKey ] = newHtml;
+
+		const selectedBlockClientIds = select.getSelectedBlockClientIds();
+		const replacement = [
+			...( isForward ? blocksWithTheSameType : [] ),
+			{
+				// Preserve the original client ID.
+				...targetBlock,
+				attributes: {
+					...targetBlock.attributes,
+					...updatedAttributes,
+				},
 			},
-		},
-		...( isForward ? [] : blocksWithTheSameType ),
-	];
-
-	registry.batch( () => {
-		dispatch.selectionChange(
-			targetBlock.clientId,
-			newAttributeKey,
-			newOffset,
-			newOffset
-		);
+			...( isForward ? [] : blocksWithTheSameType ),
+		];
+
+		registry.batch( () => {
+			dispatch.selectionChange(
+				targetBlock.clientId,
+				newAttributeKey,
+				newOffset,
+				newOffset
+			);
 
-		dispatch.replaceBlocks(
-			selectedBlockClientIds,
-			replacement,
-			0, // If we don't pass the `indexToSelect` it will default to the last block.
-			select.getSelectedBlocksInitialCaretPosition()
-		);
-	} );
-};
+			dispatch.replaceBlocks(
+				selectedBlockClientIds,
+				replacement,
+				0, // If we don't pass the `indexToSelect` it will default to the last block.
+				select.getSelectedBlocksInitialCaretPosition()
+			);
+		} );
+	};
 
 /**
  * Split the current selection.
  */
-export const __unstableSplitSelection = () => ( { select, dispatch } ) => {
-	const selectionAnchor = select.getSelectionStart();
-	const selectionFocus = select.getSelectionEnd();
-
-	if ( selectionAnchor.clientId === selectionFocus.clientId ) return;
-
-	// Can't split if the selection is not set.
-	if (
-		! selectionAnchor.attributeKey ||
-		! selectionFocus.attributeKey ||
-		typeof selectionAnchor.offset === 'undefined' ||
-		typeof selectionFocus.offset === 'undefined'
-	)
-		return;
-
-	const anchorRootClientId = select.getBlockRootClientId(
-		selectionAnchor.clientId
-	);
-	const focusRootClientId = select.getBlockRootClientId(
-		selectionFocus.clientId
-	);
+export const __unstableSplitSelection =
+	() =>
+	( { select, dispatch } ) => {
+		const selectionAnchor = select.getSelectionStart();
+		const selectionFocus = select.getSelectionEnd();
+
+		if ( selectionAnchor.clientId === selectionFocus.clientId ) return;
+
+		// Can't split if the selection is not set.
+		if (
+			! selectionAnchor.attributeKey ||
+			! selectionFocus.attributeKey ||
+			typeof selectionAnchor.offset === 'undefined' ||
+			typeof selectionFocus.offset === 'undefined'
+		)
+			return;
 
-	// It's not splittable if the selection doesn't start and end in the same
-	// block list. Maybe in the future it should be allowed.
-	if ( anchorRootClientId !== focusRootClientId ) {
-		return;
-	}
+		const anchorRootClientId = select.getBlockRootClientId(
+			selectionAnchor.clientId
+		);
+		const focusRootClientId = select.getBlockRootClientId(
+			selectionFocus.clientId
+		);
 
-	const blockOrder = select.getBlockOrder( anchorRootClientId );
-	const anchorIndex = blockOrder.indexOf( selectionAnchor.clientId );
-	const focusIndex = blockOrder.indexOf( selectionFocus.clientId );
+		// It's not splittable if the selection doesn't start and end in the same
+		// block list. Maybe in the future it should be allowed.
+		if ( anchorRootClientId !== focusRootClientId ) {
+			return;
+		}
 
-	// Reassign selection start and end based on order.
-	let selectionStart, selectionEnd;
+		const blockOrder = select.getBlockOrder( anchorRootClientId );
+		const anchorIndex = blockOrder.indexOf( selectionAnchor.clientId );
+		const focusIndex = blockOrder.indexOf( selectionFocus.clientId );
 
-	if ( anchorIndex > focusIndex ) {
-		selectionStart = selectionFocus;
-		selectionEnd = selectionAnchor;
-	} else {
-		selectionStart = selectionAnchor;
-		selectionEnd = selectionFocus;
-	}
+		// Reassign selection start and end based on order.
+		let selectionStart, selectionEnd;
+
+		if ( anchorIndex > focusIndex ) {
+			selectionStart = selectionFocus;
+			selectionEnd = selectionAnchor;
+		} else {
+			selectionStart = selectionAnchor;
+			selectionEnd = selectionFocus;
+		}
 
-	const selectionA = selectionStart;
-	const selectionB = selectionEnd;
+		const selectionA = selectionStart;
+		const selectionB = selectionEnd;
 
-	const blockA = select.getBlock( selectionA.clientId );
-	const blockAType = getBlockType( blockA.name );
+		const blockA = select.getBlock( selectionA.clientId );
+		const blockAType = getBlockType( blockA.name );
 
-	const blockB = select.getBlock( selectionB.clientId );
-	const blockBType = getBlockType( blockB.name );
+		const blockB = select.getBlock( selectionB.clientId );
+		const blockBType = getBlockType( blockB.name );
 
-	const htmlA = blockA.attributes[ selectionA.attributeKey ];
-	const htmlB = blockB.attributes[ selectionB.attributeKey ];
+		const htmlA = blockA.attributes[ selectionA.attributeKey ];
+		const htmlB = blockB.attributes[ selectionB.attributeKey ];
 
-	const attributeDefinitionA =
-		blockAType.attributes[ selectionA.attributeKey ];
-	const attributeDefinitionB =
-		blockBType.attributes[ selectionB.attributeKey ];
+		const attributeDefinitionA =
+			blockAType.attributes[ selectionA.attributeKey ];
+		const attributeDefinitionB =
+			blockBType.attributes[ selectionB.attributeKey ];
 
-	let valueA = create( {
-		html: htmlA,
-		...mapRichTextSettings( attributeDefinitionA ),
-	} );
-	let valueB = create( {
-		html: htmlB,
-		...mapRichTextSettings( attributeDefinitionB ),
-	} );
+		let valueA = create( {
+			html: htmlA,
+			...mapRichTextSettings( attributeDefinitionA ),
+		} );
+		let valueB = create( {
+			html: htmlB,
+			...mapRichTextSettings( attributeDefinitionB ),
+		} );
 
-	valueA = remove( valueA, selectionA.offset, valueA.text.length );
-	valueB = remove( valueB, 0, selectionB.offset );
+		valueA = remove( valueA, selectionA.offset, valueA.text.length );
+		valueB = remove( valueB, 0, selectionB.offset );
 
-	dispatch.replaceBlocks(
-		select.getSelectedBlockClientIds(),
-		[
-			{
-				// Preserve the original client ID.
-				...blockA,
-				attributes: {
-					...blockA.attributes,
-					[ selectionA.attributeKey ]: toHTMLString( {
-						value: valueA,
-						...mapRichTextSettings( attributeDefinitionA ),
-					} ),
+		dispatch.replaceBlocks(
+			select.getSelectedBlockClientIds(),
+			[
+				{
+					// Preserve the original client ID.
+					...blockA,
+					attributes: {
+						...blockA.attributes,
+						[ selectionA.attributeKey ]: toHTMLString( {
+							value: valueA,
+							...mapRichTextSettings( attributeDefinitionA ),
+						} ),
+					},
 				},
-			},
-			createBlock( getDefaultBlockName() ),
-			{
-				// Preserve the original client ID.
-				...blockB,
-				attributes: {
-					...blockB.attributes,
-					[ selectionB.attributeKey ]: toHTMLString( {
-						value: valueB,
-						...mapRichTextSettings( attributeDefinitionB ),
-					} ),
+				createBlock( getDefaultBlockName() ),
+				{
+					// Preserve the original client ID.
+					...blockB,
+					attributes: {
+						...blockB.attributes,
+						[ selectionB.attributeKey ]: toHTMLString( {
+							value: valueB,
+							...mapRichTextSettings( attributeDefinitionB ),
+						} ),
+					},
 				},
-			},
-		],
-		1, // If we don't pass the `indexToSelect` it will default to the last block.
-		select.getSelectedBlocksInitialCaretPosition()
-	);
-};
+			],
+			1, // If we don't pass the `indexToSelect` it will default to the last block.
+			select.getSelectedBlocksInitialCaretPosition()
+		);
+	};
 
 /**
  * Expand the selection to cover the entire blocks, removing partial selection.
  */
-export const __unstableExpandSelection = () => ( { select, dispatch } ) => {
-	const selectionAnchor = select.getSelectionStart();
-	const selectionFocus = select.getSelectionEnd();
-	dispatch.selectionChange( {
-		start: { clientId: selectionAnchor.clientId },
-		end: { clientId: selectionFocus.clientId },
-	} );
-};
+export const __unstableExpandSelection =
+	() =>
+	( { select, dispatch } ) => {
+		const selectionAnchor = select.getSelectionStart();
+		const selectionFocus = select.getSelectionEnd();
+		dispatch.selectionChange( {
+			start: { clientId: selectionAnchor.clientId },
+			end: { clientId: selectionFocus.clientId },
+		} );
+	};
 
 /**
  * Action that merges two blocks.
@@ -985,139 +1002,138 @@ export const __unstableExpandSelection = () => ( { select, dispatch } ) => {
  * @param {string} firstBlockClientId  Client ID of the first block to merge.
  * @param {string} secondBlockClientId Client ID of the second block to merge.
  */
-export const mergeBlocks = ( firstBlockClientId, secondBlockClientId ) => ( {
-	select,
-	dispatch,
-} ) => {
-	const blocks = [ firstBlockClientId, secondBlockClientId ];
-	dispatch( { type: 'MERGE_BLOCKS', blocks } );
-
-	const [ clientIdA, clientIdB ] = blocks;
-	const blockA = select.getBlock( clientIdA );
-	const blockAType = getBlockType( blockA.name );
-
-	// Only focus the previous block if it's not mergeable.
-	if ( blockAType && ! blockAType.merge ) {
-		dispatch.selectBlock( blockA.clientId );
-		return;
-	}
-
-	const blockB = select.getBlock( clientIdB );
-	const blockBType = getBlockType( blockB.name );
-	const { clientId, attributeKey, offset } = select.getSelectionStart();
-	const selectedBlockType = clientId === clientIdA ? blockAType : blockBType;
-	const attributeDefinition = selectedBlockType.attributes[ attributeKey ];
-	const canRestoreTextSelection =
-		( clientId === clientIdA || clientId === clientIdB ) &&
-		attributeKey !== undefined &&
-		offset !== undefined &&
-		// We cannot restore text selection if the RichText identifier
-		// is not a defined block attribute key. This can be the case if the
-		// fallback intance ID is used to store selection (and no RichText
-		// identifier is set), or when the identifier is wrong.
-		!! attributeDefinition;
-
-	if ( ! attributeDefinition ) {
-		if ( typeof attributeKey === 'number' ) {
-			window.console.error(
-				`RichText needs an identifier prop that is the block attribute key of the attribute it controls. Its type is expected to be a string, but was ${ typeof attributeKey }`
-			);
-		} else {
-			window.console.error(
-				'The RichText identifier prop does not match any attributes defined by the block.'
-			);
+export const mergeBlocks =
+	( firstBlockClientId, secondBlockClientId ) =>
+	( { select, dispatch } ) => {
+		const blocks = [ firstBlockClientId, secondBlockClientId ];
+		dispatch( { type: 'MERGE_BLOCKS', blocks } );
+
+		const [ clientIdA, clientIdB ] = blocks;
+		const blockA = select.getBlock( clientIdA );
+		const blockAType = getBlockType( blockA.name );
+
+		// Only focus the previous block if it's not mergeable.
+		if ( blockAType && ! blockAType.merge ) {
+			dispatch.selectBlock( blockA.clientId );
+			return;
 		}
-	}
 
-	// A robust way to retain selection position through various transforms
-	// is to insert a special character at the position and then recover it.
-	const START_OF_SELECTED_AREA = '\u0086';
+		const blockB = select.getBlock( clientIdB );
+		const blockBType = getBlockType( blockB.name );
+		const { clientId, attributeKey, offset } = select.getSelectionStart();
+		const selectedBlockType =
+			clientId === clientIdA ? blockAType : blockBType;
+		const attributeDefinition =
+			selectedBlockType.attributes[ attributeKey ];
+		const canRestoreTextSelection =
+			( clientId === clientIdA || clientId === clientIdB ) &&
+			attributeKey !== undefined &&
+			offset !== undefined &&
+			// We cannot restore text selection if the RichText identifier
+			// is not a defined block attribute key. This can be the case if the
+			// fallback intance ID is used to store selection (and no RichText
+			// identifier is set), or when the identifier is wrong.
+			!! attributeDefinition;
+
+		if ( ! attributeDefinition ) {
+			if ( typeof attributeKey === 'number' ) {
+				window.console.error(
+					`RichText needs an identifier prop that is the block attribute key of the attribute it controls. Its type is expected to be a string, but was ${ typeof attributeKey }`
+				);
+			} else {
+				window.console.error(
+					'The RichText identifier prop does not match any attributes defined by the block.'
+				);
+			}
+		}
 
-	// Clone the blocks so we don't insert the character in a "live" block.
-	const cloneA = cloneBlock( blockA );
-	const cloneB = cloneBlock( blockB );
+		// Clone the blocks so we don't insert the character in a "live" block.
+		const cloneA = cloneBlock( blockA );
+		const cloneB = cloneBlock( blockB );
+
+		if ( canRestoreTextSelection ) {
+			const selectedBlock = clientId === clientIdA ? cloneA : cloneB;
+			const html = selectedBlock.attributes[ attributeKey ];
+			const value = insert(
+				create( {
+					html,
+					...mapRichTextSettings( attributeDefinition ),
+				} ),
+				START_OF_SELECTED_AREA,
+				offset,
+				offset
+			);
 
-	if ( canRestoreTextSelection ) {
-		const selectedBlock = clientId === clientIdA ? cloneA : cloneB;
-		const html = selectedBlock.attributes[ attributeKey ];
-		const value = insert(
-			create( {
-				html,
+			selectedBlock.attributes[ attributeKey ] = toHTMLString( {
+				value,
 				...mapRichTextSettings( attributeDefinition ),
-			} ),
-			START_OF_SELECTED_AREA,
-			offset,
-			offset
-		);
-
-		selectedBlock.attributes[ attributeKey ] = toHTMLString( {
-			value,
-			...mapRichTextSettings( attributeDefinition ),
-		} );
-	}
-
-	// We can only merge blocks with similar types
-	// thus, we transform the block to merge first.
-	const blocksWithTheSameType =
-		blockA.name === blockB.name
-			? [ cloneB ]
-			: switchToBlockType( cloneB, blockA.name );
+			} );
+		}
 
-	// If the block types can not match, do nothing.
-	if ( ! blocksWithTheSameType || ! blocksWithTheSameType.length ) {
-		return;
-	}
+		// We can only merge blocks with similar types
+		// thus, we transform the block to merge first.
+		const blocksWithTheSameType =
+			blockA.name === blockB.name
+				? [ cloneB ]
+				: switchToBlockType( cloneB, blockA.name );
 
-	// Calling the merge to update the attributes and remove the block to be merged.
-	const updatedAttributes = blockAType.merge(
-		cloneA.attributes,
-		blocksWithTheSameType[ 0 ].attributes
-	);
+		// If the block types can not match, do nothing.
+		if ( ! blocksWithTheSameType || ! blocksWithTheSameType.length ) {
+			return;
+		}
 
-	if ( canRestoreTextSelection ) {
-		const newAttributeKey = findKey(
-			updatedAttributes,
-			( v ) =>
-				typeof v === 'string' &&
-				v.indexOf( START_OF_SELECTED_AREA ) !== -1
+		// Calling the merge to update the attributes and remove the block to be merged.
+		const updatedAttributes = blockAType.merge(
+			cloneA.attributes,
+			blocksWithTheSameType[ 0 ].attributes
 		);
-		const convertedHtml = updatedAttributes[ newAttributeKey ];
-		const convertedValue = create( {
-			html: convertedHtml,
-			...mapRichTextSettings( blockAType.attributes[ newAttributeKey ] ),
-		} );
-		const newOffset = convertedValue.text.indexOf( START_OF_SELECTED_AREA );
-		const newValue = remove( convertedValue, newOffset, newOffset + 1 );
-		const newHtml = toHTMLString( {
-			value: newValue,
-			...mapRichTextSettings( blockAType.attributes[ newAttributeKey ] ),
-		} );
 
-		updatedAttributes[ newAttributeKey ] = newHtml;
-
-		dispatch.selectionChange(
-			blockA.clientId,
-			newAttributeKey,
-			newOffset,
-			newOffset
-		);
-	}
+		if ( canRestoreTextSelection ) {
+			const newAttributeKey =
+				retrieveSelectedAttribute( updatedAttributes );
+			const convertedHtml = updatedAttributes[ newAttributeKey ];
+			const convertedValue = create( {
+				html: convertedHtml,
+				...mapRichTextSettings(
+					blockAType.attributes[ newAttributeKey ]
+				),
+			} );
+			const newOffset = convertedValue.text.indexOf(
+				START_OF_SELECTED_AREA
+			);
+			const newValue = remove( convertedValue, newOffset, newOffset + 1 );
+			const newHtml = toHTMLString( {
+				value: newValue,
+				...mapRichTextSettings(
+					blockAType.attributes[ newAttributeKey ]
+				),
+			} );
+
+			updatedAttributes[ newAttributeKey ] = newHtml;
+
+			dispatch.selectionChange(
+				blockA.clientId,
+				newAttributeKey,
+				newOffset,
+				newOffset
+			);
+		}
 
-	dispatch.replaceBlocks(
-		[ blockA.clientId, blockB.clientId ],
-		[
-			{
-				...blockA,
-				attributes: {
-					...blockA.attributes,
-					...updatedAttributes,
+		dispatch.replaceBlocks(
+			[ blockA.clientId, blockB.clientId ],
+			[
+				{
+					...blockA,
+					attributes: {
+						...blockA.attributes,
+						...updatedAttributes,
+					},
 				},
-			},
-			...blocksWithTheSameType.slice( 1 ),
-		],
-		0 // If we don't pass the `indexToSelect` it will default to the last block.
-	);
-};
+				...blocksWithTheSameType.slice( 1 ),
+			],
+			0 // If we don't pass the `indexToSelect` it will default to the last block.
+		);
+	};
 
 /**
  * Yields action objects used in signalling that the blocks corresponding to
@@ -1127,32 +1143,34 @@ export const mergeBlocks = ( firstBlockClientId, secondBlockClientId ) => ( {
  * @param {boolean}         selectPrevious True if the previous block should be
  *                                         selected when a block is removed.
  */
-export const removeBlocks = ( clientIds, selectPrevious = true ) => ( {
-	select,
-	dispatch,
-} ) => {
-	if ( ! clientIds || ! clientIds.length ) {
-		return;
-	}
+export const removeBlocks =
+	( clientIds, selectPrevious = true ) =>
+	( { select, dispatch } ) => {
+		if ( ! clientIds || ! clientIds.length ) {
+			return;
+		}
 
-	clientIds = castArray( clientIds );
-	const rootClientId = select.getBlockRootClientId( clientIds[ 0 ] );
-	const canRemoveBlocks = select.canRemoveBlocks( clientIds, rootClientId );
+		clientIds = castArray( clientIds );
+		const rootClientId = select.getBlockRootClientId( clientIds[ 0 ] );
+		const canRemoveBlocks = select.canRemoveBlocks(
+			clientIds,
+			rootClientId
+		);
 
-	if ( ! canRemoveBlocks ) {
-		return;
-	}
+		if ( ! canRemoveBlocks ) {
+			return;
+		}
 
-	if ( selectPrevious ) {
-		dispatch.selectPreviousBlock( clientIds[ 0 ] );
-	}
+		if ( selectPrevious ) {
+			dispatch.selectPreviousBlock( clientIds[ 0 ] );
+		}
 
-	dispatch( { type: 'REMOVE_BLOCKS', clientIds } );
+		dispatch( { type: 'REMOVE_BLOCKS', clientIds } );
 
-	// To avoid a focus loss when removing the last block, assure there is
-	// always a default block if the last of the blocks have been removed.
-	dispatch( ensureDefaultBlock() );
-};
+		// To avoid a focus loss when removing the last block, assure there is
+		// always a default block if the last of the blocks have been removed.
+		dispatch( ensureDefaultBlock() );
+	};
 
 /**
  * Returns an action object used in signalling that the block with the
@@ -1329,19 +1347,19 @@ export function selectionChange(
  *                               to append.
  * @param {?number} index        Optional index where to insert the default block.
  */
-export const insertDefaultBlock = ( attributes, rootClientId, index ) => ( {
-	dispatch,
-} ) => {
-	// Abort if there is no default block type (if it has been unregistered).
-	const defaultBlockName = getDefaultBlockName();
-	if ( ! defaultBlockName ) {
-		return;
-	}
+export const insertDefaultBlock =
+	( attributes, rootClientId, index ) =>
+	( { dispatch } ) => {
+		// Abort if there is no default block type (if it has been unregistered).
+		const defaultBlockName = getDefaultBlockName();
+		if ( ! defaultBlockName ) {
+			return;
+		}
 
-	const block = createBlock( defaultBlockName, attributes );
+		const block = createBlock( defaultBlockName, attributes );
 
-	return dispatch.insertBlock( block, index, rootClientId );
-};
+		return dispatch.insertBlock( block, index, rootClientId );
+	};
 
 /**
  * Action that changes the nested settings of a given block.
@@ -1416,57 +1434,60 @@ export function __unstableMarkNextChangeAsNotPersistent() {
  * consequence of it, so it is recommended to be called at the next idle period to ensure all
  * selection changes have been recorded.
  */
-export const __unstableMarkAutomaticChange = () => ( { dispatch } ) => {
-	dispatch( { type: 'MARK_AUTOMATIC_CHANGE' } );
-	const { requestIdleCallback = ( cb ) => setTimeout( cb, 100 ) } = window;
-	requestIdleCallback( () => {
-		dispatch( { type: 'MARK_AUTOMATIC_CHANGE_FINAL' } );
-	} );
-};
+export const __unstableMarkAutomaticChange =
+	() =>
+	( { dispatch } ) => {
+		dispatch( { type: 'MARK_AUTOMATIC_CHANGE' } );
+		const { requestIdleCallback = ( cb ) => setTimeout( cb, 100 ) } =
+			window;
+		requestIdleCallback( () => {
+			dispatch( { type: 'MARK_AUTOMATIC_CHANGE_FINAL' } );
+		} );
+	};
 
 /**
  * Action that enables or disables the navigation mode.
  *
  * @param {string} isNavigationMode Enable/Disable navigation mode.
  */
-export const setNavigationMode = ( isNavigationMode = true ) => ( {
-	dispatch,
-} ) => {
-	dispatch( { type: 'SET_NAVIGATION_MODE', isNavigationMode } );
-
-	if ( isNavigationMode ) {
-		speak(
-			__(
-				'You are currently in navigation mode. Navigate blocks using the Tab key and Arrow keys. Use Left and Right Arrow keys to move between nesting levels. To exit navigation mode and edit the selected block, press Enter.'
-			)
-		);
-	} else {
-		speak(
-			__(
-				'You are currently in edit mode. To return to the navigation mode, press Escape.'
-			)
-		);
-	}
-};
+export const setNavigationMode =
+	( isNavigationMode = true ) =>
+	( { dispatch } ) => {
+		dispatch( { type: 'SET_NAVIGATION_MODE', isNavigationMode } );
+
+		if ( isNavigationMode ) {
+			speak(
+				__(
+					'You are currently in navigation mode. Navigate blocks using the Tab key and Arrow keys. Use Left and Right Arrow keys to move between nesting levels. To exit navigation mode and edit the selected block, press Enter.'
+				)
+			);
+		} else {
+			speak(
+				__(
+					'You are currently in edit mode. To return to the navigation mode, press Escape.'
+				)
+			);
+		}
+	};
 
 /**
  * Action that enables or disables the block moving mode.
  *
  * @param {string|null} hasBlockMovingClientId Enable/Disable block moving mode.
  */
-export const setBlockMovingClientId = ( hasBlockMovingClientId = null ) => ( {
-	dispatch,
-} ) => {
-	dispatch( { type: 'SET_BLOCK_MOVING_MODE', hasBlockMovingClientId } );
-
-	if ( hasBlockMovingClientId ) {
-		speak(
-			__(
-				'Use the Tab key and Arrow keys to choose new block location. Use Left and Right Arrow keys to move between nesting levels. Once location is selected press Enter or Space to move the block.'
-			)
-		);
-	}
-};
+export const setBlockMovingClientId =
+	( hasBlockMovingClientId = null ) =>
+	( { dispatch } ) => {
+		dispatch( { type: 'SET_BLOCK_MOVING_MODE', hasBlockMovingClientId } );
+
+		if ( hasBlockMovingClientId ) {
+			speak(
+				__(
+					'Use the Tab key and Arrow keys to choose new block location. Use Left and Right Arrow keys to move between nesting levels. Once location is selected press Enter or Space to move the block.'
+				)
+			);
+		}
+	};
 
 /**
  * Action that duplicates a list of blocks.
@@ -1474,93 +1495,101 @@ export const setBlockMovingClientId = ( hasBlockMovingClientId = null ) => ( {
  * @param {string[]} clientIds
  * @param {boolean}  updateSelection
  */
-export const duplicateBlocks = ( clientIds, updateSelection = true ) => ( {
-	select,
-	dispatch,
-} ) => {
-	if ( ! clientIds || ! clientIds.length ) {
-		return;
-	}
+export const duplicateBlocks =
+	( clientIds, updateSelection = true ) =>
+	( { select, dispatch } ) => {
+		if ( ! clientIds || ! clientIds.length ) {
+			return;
+		}
 
-	// Return early if blocks don't exist.
-	const blocks = select.getBlocksByClientId( clientIds );
-	if ( some( blocks, ( block ) => ! block ) ) {
-		return;
-	}
+		// Return early if blocks don't exist.
+		const blocks = select.getBlocksByClientId( clientIds );
+		if ( some( blocks, ( block ) => ! block ) ) {
+			return;
+		}
 
-	// Return early if blocks don't support multiple usage.
-	const blockNames = blocks.map( ( block ) => block.name );
-	if (
-		blockNames.some(
-			( blockName ) => ! hasBlockSupport( blockName, 'multiple', true )
-		)
-	) {
-		return;
-	}
+		// Return early if blocks don't support multiple usage.
+		const blockNames = blocks.map( ( block ) => block.name );
+		if (
+			blockNames.some(
+				( blockName ) =>
+					! hasBlockSupport( blockName, 'multiple', true )
+			)
+		) {
+			return;
+		}
 
-	const rootClientId = select.getBlockRootClientId( clientIds[ 0 ] );
-	const lastSelectedIndex = select.getBlockIndex(
-		last( castArray( clientIds ) )
-	);
-	const clonedBlocks = blocks.map( ( block ) =>
-		__experimentalCloneSanitizedBlock( block )
-	);
-	dispatch.insertBlocks(
-		clonedBlocks,
-		lastSelectedIndex + 1,
-		rootClientId,
-		updateSelection
-	);
-	if ( clonedBlocks.length > 1 && updateSelection ) {
-		dispatch.multiSelect(
-			first( clonedBlocks ).clientId,
-			last( clonedBlocks ).clientId
+		const rootClientId = select.getBlockRootClientId( clientIds[ 0 ] );
+		const lastSelectedIndex = select.getBlockIndex(
+			last( castArray( clientIds ) )
 		);
-	}
-	return clonedBlocks.map( ( block ) => block.clientId );
-};
+		const clonedBlocks = blocks.map( ( block ) =>
+			__experimentalCloneSanitizedBlock( block )
+		);
+		dispatch.insertBlocks(
+			clonedBlocks,
+			lastSelectedIndex + 1,
+			rootClientId,
+			updateSelection
+		);
+		if ( clonedBlocks.length > 1 && updateSelection ) {
+			dispatch.multiSelect(
+				first( clonedBlocks ).clientId,
+				last( clonedBlocks ).clientId
+			);
+		}
+		return clonedBlocks.map( ( block ) => block.clientId );
+	};
 
 /**
  * Action that inserts an empty block before a given block.
  *
  * @param {string} clientId
  */
-export const insertBeforeBlock = ( clientId ) => ( { select, dispatch } ) => {
-	if ( ! clientId ) {
-		return;
-	}
-	const rootClientId = select.getBlockRootClientId( clientId );
-	const isLocked = select.getTemplateLock( rootClientId );
-	if ( isLocked ) {
-		return;
-	}
+export const insertBeforeBlock =
+	( clientId ) =>
+	( { select, dispatch } ) => {
+		if ( ! clientId ) {
+			return;
+		}
+		const rootClientId = select.getBlockRootClientId( clientId );
+		const isLocked = select.getTemplateLock( rootClientId );
+		if ( isLocked ) {
+			return;
+		}
 
-	const firstSelectedIndex = select.getBlockIndex( clientId );
-	return dispatch.insertDefaultBlock( {}, rootClientId, firstSelectedIndex );
-};
+		const firstSelectedIndex = select.getBlockIndex( clientId );
+		return dispatch.insertDefaultBlock(
+			{},
+			rootClientId,
+			firstSelectedIndex
+		);
+	};
 
 /**
  * Action that inserts an empty block after a given block.
  *
  * @param {string} clientId
  */
-export const insertAfterBlock = ( clientId ) => ( { select, dispatch } ) => {
-	if ( ! clientId ) {
-		return;
-	}
-	const rootClientId = select.getBlockRootClientId( clientId );
-	const isLocked = select.getTemplateLock( rootClientId );
-	if ( isLocked ) {
-		return;
-	}
+export const insertAfterBlock =
+	( clientId ) =>
+	( { select, dispatch } ) => {
+		if ( ! clientId ) {
+			return;
+		}
+		const rootClientId = select.getBlockRootClientId( clientId );
+		const isLocked = select.getTemplateLock( rootClientId );
+		if ( isLocked ) {
+			return;
+		}
 
-	const firstSelectedIndex = select.getBlockIndex( clientId );
-	return dispatch.insertDefaultBlock(
-		{},
-		rootClientId,
-		firstSelectedIndex + 1
-	);
-};
+		const firstSelectedIndex = select.getBlockIndex( clientId );
+		return dispatch.insertDefaultBlock(
+			{},
+			rootClientId,
+			firstSelectedIndex + 1
+		);
+	};
 
 /**
  * Action that toggles the highlighted block state.
@@ -1581,11 +1610,13 @@ export function toggleBlockHighlight( clientId, isHighlighted ) {
  *
  * @param {string} clientId Target block client ID.
  */
-export const flashBlock = ( clientId ) => async ( { dispatch } ) => {
-	dispatch( toggleBlockHighlight( clientId, true ) );
-	await new Promise( ( resolve ) => setTimeout( resolve, 150 ) );
-	dispatch( toggleBlockHighlight( clientId, false ) );
-};
+export const flashBlock =
+	( clientId ) =>
+	async ( { dispatch } ) => {
+		dispatch( toggleBlockHighlight( clientId, true ) );
+		await new Promise( ( resolve ) => setTimeout( resolve, 150 ) );
+		dispatch( toggleBlockHighlight( clientId, false ) );
+	};
 
 /**
  * Action that sets whether a block has controlled inner blocks.
@@ -1603,3 +1634,15 @@ export function setHasControlledInnerBlocks(
 		clientId,
 	};
 }
+
+/**
+ * Action that sets whether given blocks are visible on the canvas.
+ *
+ * @param {Record<string,boolean>} updates For each block's clientId, its new visibility setting.
+ */
+export function setBlockVisibility( updates ) {
+	return {
+		type: 'SET_BLOCK_VISIBILITY',
+		updates,
+	};
+}