@wordpress/block-editor 12.7.0 → 12.8.0

package/src/store/actions.js

@@ -12,6 +12,7 @@ import {
 	hasBlockSupport,
 	switchToBlockType,
 	synchronizeBlocksWithTemplate,
+	getBlockSupport,
 } from '@wordpress/blocks';
 import { speak } from '@wordpress/a11y';
 import { __, _n, sprintf } from '@wordpress/i18n';
@@ -1006,9 +1007,17 @@ export const mergeBlocks =
 
 		if ( ! blockAType ) return;
 
+		if (
+			! blockAType.merge &&
+			! getBlockSupport( blockA.name, '__experimentalOnMerge' )
+		) {
+			dispatch.selectBlock( blockA.clientId );
+			return;
+		}
+
 		const blockB = select.getBlock( clientIdB );
 
-		if ( blockAType && ! blockAType.merge ) {
+		if ( ! blockAType.merge ) {
 			// If there's no merge function defined, attempt merging inner
 			// blocks.
 			const blocksWithTheSameType = switchToBlockType(
@@ -1810,7 +1819,6 @@ export function __unstableSetTemporarilyEditingAsBlocks(
  *                                                                                                   the report url for the media item. It accepts the `InserterMediaItem` as an argument.
  * @property {boolean}                                                [isExternalResource]           If the media category is an external resource, this should be set to true.
  *                                                                                                   This is used to avoid making a request to the external resource when the user
- *
  */
 export const registerInserterMediaCategory =
 	( category ) =>
@@ -1878,3 +1886,42 @@ export const registerInserterMediaCategory =
 			},
 		} );
 	};
+
+/**
+ * @typedef {import('../components/block-editing-mode').BlockEditingMode} BlockEditingMode
+ */
+
+/**
+ * Sets the block editing mode for a given block.
+ *
+ * @see useBlockEditingMode
+ *
+ * @param {string}           clientId The block client ID, or `''` for the root container.
+ * @param {BlockEditingMode} mode     The block editing mode. One of `'disabled'`,
+ *                                    `'contentOnly'`, or `'default'`.
+ *
+ * @return {Object} Action object.
+ */
+export function setBlockEditingMode( clientId = '', mode ) {
+	return {
+		type: 'SET_BLOCK_EDITING_MODE',
+		clientId,
+		mode,
+	};
+}
+
+/**
+ * Clears the block editing mode for a given block.
+ *
+ * @see useBlockEditingMode
+ *
+ * @param {string} clientId The block client ID, or `''` for the root container.
+ *
+ * @return {Object} Action object.
+ */
+export function unsetBlockEditingMode( clientId = '' ) {
+	return {
+		type: 'UNSET_BLOCK_EDITING_MODE',
+		clientId,
+	};
+}

package/src/store/private-actions.js

@@ -73,45 +73,6 @@ export function showBlockInterface() {
 	};
 }
 
-/**
- * @typedef {import('../components/block-editing-mode').BlockEditingMode} BlockEditingMode
- */
-
-/**
- * Sets the block editing mode for a given block.
- *
- * @see useBlockEditingMode
- *
- * @param {string}           clientId The block client ID, or `''` for the root container.
- * @param {BlockEditingMode} mode     The block editing mode. One of `'disabled'`,
- *                                    `'contentOnly'`, or `'default'`.
- *
- * @return {Object} Action object.
- */
-export function setBlockEditingMode( clientId = '', mode ) {
-	return {
-		type: 'SET_BLOCK_EDITING_MODE',
-		clientId,
-		mode,
-	};
-}
-
-/**
- * Clears the block editing mode for a given block.
- *
- * @see useBlockEditingMode
- *
- * @param {string} clientId The block client ID, or `''` for the root container.
- *
- * @return {Object} Action object.
- */
-export function unsetBlockEditingMode( clientId = '' ) {
-	return {
-		type: 'UNSET_BLOCK_EDITING_MODE',
-		clientId,
-	};
-}
-
 /**
  * Yields action objects used in signalling that the blocks corresponding to
  * the set of specified client IDs are to be removed.

package/src/store/private-selectors.js

@@ -3,21 +3,13 @@
  */
 import createSelector from 'rememo';
 
-/**
- * WordPress dependencies
- */
-import { select } from '@wordpress/data';
-import { store as blocksStore } from '@wordpress/blocks';
-
 /**
  * Internal dependencies
  */
 import {
-	getBlockRootClientId,
-	getTemplateLock,
-	getBlockName,
 	getBlockOrder,
 	getBlockParents,
+	getBlockEditingMode,
 } from './selectors';
 
 /**
@@ -41,64 +33,6 @@ export function getLastInsertedBlocksClientIds( state ) {
 	return state?.lastBlockInserted?.clientIds;
 }
 
-/**
- * @typedef {import('../components/block-editing-mode').BlockEditingMode} BlockEditingMode
- */
-
-/**
- * Returns the block editing mode for a given block.
- *
- * The mode can be one of three options:
- *
- * - `'disabled'`: Prevents editing the block entirely, i.e. it cannot be
- *   selected.
- * - `'contentOnly'`: Hides all non-content UI, e.g. auxiliary controls in the
- *   toolbar, the block movers, block settings.
- * - `'default'`: Allows editing the block as normal.
- *
- * Blocks can set a mode using the `useBlockEditingMode` hook.
- *
- * The mode is inherited by all of the block's inner blocks, unless they have
- * their own mode.
- *
- * A template lock can also set a mode. If the template lock is `'contentOnly'`,
- * the block's mode is overridden to `'contentOnly'` if the block has a content
- * role attribute, or `'disabled'` otherwise.
- *
- * @see useBlockEditingMode
- *
- * @param {Object} state    Global application state.
- * @param {string} clientId The block client ID, or `''` for the root container.
- *
- * @return {BlockEditingMode} The block editing mode. One of `'disabled'`,
- *                            `'contentOnly'`, or `'default'`.
- */
-export function getBlockEditingMode( state, clientId = '' ) {
-	if ( state.blockEditingModes.has( clientId ) ) {
-		return state.blockEditingModes.get( clientId );
-	}
-	if ( ! clientId ) {
-		return 'default';
-	}
-	const rootClientId = getBlockRootClientId( state, clientId );
-	const templateLock = getTemplateLock( state, rootClientId );
-	if ( templateLock === 'contentOnly' ) {
-		const name = getBlockName( state, clientId );
-		// TODO: Terrible hack! We're calling the global select() function
-		// here instead of using createRegistrySelector(). The problem with
-		// using createRegistrySelector() is that then the public
-		// block-editor selectors (e.g. canInsertBlockTypeUnmemoized) can't
-		// call this private block-editor selector due to a bug in
-		// @wordpress/data. See
-		// https://github.com/WordPress/gutenberg/pull/50985.
-		const isContent =
-			select( blocksStore ).__experimentalHasContentRoleAttribute( name );
-		return isContent ? 'contentOnly' : 'disabled';
-	}
-	const parentMode = getBlockEditingMode( state, rootClientId );
-	return parentMode === 'contentOnly' ? 'default' : parentMode;
-}
-
 /**
  * Returns true if the block with the given client ID and all of its descendants
  * have an editing mode of 'disabled', or false otherwise.

package/src/store/selectors.js

@@ -14,19 +14,20 @@ import {
 	getPossibleBlockTransformations,
 	parse,
 	switchToBlockType,
+	store as blocksStore,
 } from '@wordpress/blocks';
 import { Platform } from '@wordpress/element';
 import { applyFilters } from '@wordpress/hooks';
 import { symbol } from '@wordpress/icons';
 import { create, remove, toHTMLString } from '@wordpress/rich-text';
 import deprecated from '@wordpress/deprecated';
+import { createRegistrySelector } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { mapRichTextSettings } from './utils';
 import { orderBy } from '../utils/sorting';
-import { getBlockEditingMode } from './private-selectors';
 
 /**
  * A block selection object.
@@ -1963,7 +1964,12 @@ const buildBlockTypeItem =
 export const getInserterItems = createSelector(
 	( state, rootClientId = null ) => {
 		const buildReusableBlockInserterItem = ( reusableBlock ) => {
-			const icon = symbol;
+			const icon = ! reusableBlock.wp_pattern_sync_status
+				? {
+						src: symbol,
+						foreground: 'var(--wp-block-synced-color)',
+				  }
+				: symbol;
 			const id = `core/block/${ reusableBlock.id }`;
 			const { time, count = 0 } = getInsertUsage( state, id ) || {};
 			const frecency = calculateFrecency( time, count );
@@ -2879,3 +2885,59 @@ export function __unstableIsWithinBlockOverlay( state, clientId ) {
 	}
 	return false;
 }
+
+/**
+ * @typedef {import('../components/block-editing-mode').BlockEditingMode} BlockEditingMode
+ */
+
+/**
+ * Returns the block editing mode for a given block.
+ *
+ * The mode can be one of three options:
+ *
+ * - `'disabled'`: Prevents editing the block entirely, i.e. it cannot be
+ *   selected.
+ * - `'contentOnly'`: Hides all non-content UI, e.g. auxiliary controls in the
+ *   toolbar, the block movers, block settings.
+ * - `'default'`: Allows editing the block as normal.
+ *
+ * Blocks can set a mode using the `useBlockEditingMode` hook.
+ *
+ * The mode is inherited by all of the block's inner blocks, unless they have
+ * their own mode.
+ *
+ * A template lock can also set a mode. If the template lock is `'contentOnly'`,
+ * the block's mode is overridden to `'contentOnly'` if the block has a content
+ * role attribute, or `'disabled'` otherwise.
+ *
+ * @see useBlockEditingMode
+ *
+ * @param {Object} state    Global application state.
+ * @param {string} clientId The block client ID, or `''` for the root container.
+ *
+ * @return {BlockEditingMode} The block editing mode. One of `'disabled'`,
+ *                            `'contentOnly'`, or `'default'`.
+ */
+export const getBlockEditingMode = createRegistrySelector(
+	( select ) =>
+		( state, clientId = '' ) => {
+			if ( state.blockEditingModes.has( clientId ) ) {
+				return state.blockEditingModes.get( clientId );
+			}
+			if ( ! clientId ) {
+				return 'default';
+			}
+			const rootClientId = getBlockRootClientId( state, clientId );
+			const templateLock = getTemplateLock( state, rootClientId );
+			if ( templateLock === 'contentOnly' ) {
+				const name = getBlockName( state, clientId );
+				const isContent =
+					select( blocksStore ).__experimentalHasContentRoleAttribute(
+						name
+					);
+				return isContent ? 'contentOnly' : 'disabled';
+			}
+			const parentMode = getBlockEditingMode( state, rootClientId );
+			return parentMode === 'contentOnly' ? 'default' : parentMode;
+		}
+);

package/src/store/test/actions.js

@@ -54,6 +54,8 @@ const {
 	updateSettings,
 	validateBlocksToTemplate,
 	registerInserterMediaCategory,
+	setBlockEditingMode,
+	unsetBlockEditingMode,
 } = actions;
 
 describe( 'actions', () => {
@@ -1323,4 +1325,30 @@ describe( 'actions', () => {
 			} );
 		} );
 	} );
+
+	describe( 'setBlockEditingMode', () => {
+		it( 'should return the SET_BLOCK_EDITING_MODE action', () => {
+			expect(
+				setBlockEditingMode(
+					'14501cc2-90a6-4f52-aa36-ab6e896135d1',
+					'default'
+				)
+			).toEqual( {
+				type: 'SET_BLOCK_EDITING_MODE',
+				clientId: '14501cc2-90a6-4f52-aa36-ab6e896135d1',
+				mode: 'default',
+			} );
+		} );
+	} );
+
+	describe( 'unsetBlockEditingMode', () => {
+		it( 'should return the UNSET_BLOCK_EDITING_MODE action', () => {
+			expect(
+				unsetBlockEditingMode( '14501cc2-90a6-4f52-aa36-ab6e896135d1' )
+			).toEqual( {
+				type: 'UNSET_BLOCK_EDITING_MODE',
+				clientId: '14501cc2-90a6-4f52-aa36-ab6e896135d1',
+			} );
+		} );
+	} );
 } );

package/src/store/test/private-actions.js

@@ -4,8 +4,6 @@
 import {
 	hideBlockInterface,
 	showBlockInterface,
-	setBlockEditingMode,
-	unsetBlockEditingMode,
 	__experimentalUpdateSettings,
 } from '../private-actions';
 
@@ -26,32 +24,6 @@ describe( 'private actions', () => {
 		} );
 	} );
 
-	describe( 'setBlockEditingMode', () => {
-		it( 'should return the SET_BLOCK_EDITING_MODE action', () => {
-			expect(
-				setBlockEditingMode(
-					'14501cc2-90a6-4f52-aa36-ab6e896135d1',
-					'default'
-				)
-			).toEqual( {
-				type: 'SET_BLOCK_EDITING_MODE',
-				clientId: '14501cc2-90a6-4f52-aa36-ab6e896135d1',
-				mode: 'default',
-			} );
-		} );
-	} );
-
-	describe( 'unsetBlockEditingMode', () => {
-		it( 'should return the UNSET_BLOCK_EDITING_MODE action', () => {
-			expect(
-				unsetBlockEditingMode( '14501cc2-90a6-4f52-aa36-ab6e896135d1' )
-			).toEqual( {
-				type: 'UNSET_BLOCK_EDITING_MODE',
-				clientId: '14501cc2-90a6-4f52-aa36-ab6e896135d1',
-			} );
-		} );
-	} );
-
 	describe( '__experimentalUpdateSettings', () => {
 		const experimentalSettings = {
 			inserterMediaCategories: 'foo',