@wordpress/block-editor 12.9.1-next.5a1d1283.0 → 12.10.1

package/src/store/private-actions.js

@@ -92,7 +92,7 @@ export function showBlockInterface() {
  */
 export const privateRemoveBlocks =
 	( clientIds, selectPrevious = true, forceRemove = false ) =>
-	( { select, dispatch } ) => {
+	( { select, dispatch, registry } ) => {
 		if ( ! clientIds || ! clientIds.length ) {
 			return;
 		}
@@ -154,11 +154,14 @@ export const privateRemoveBlocks =
 			dispatch.selectPreviousBlock( clientIds[ 0 ], selectPrevious );
 		}
 
-		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() );
+		// We're batching these two actions because an extra `undo/redo` step can
+		// be created, based on whether we insert a default block or not.
+		registry.batch( () => {
+			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() );
+		} );
 	};
 
 /**
@@ -259,3 +262,31 @@ export function setBlockRemovalRules( rules = false ) {
 		rules,
 	};
 }
+
+/**
+ * Sets the client ID of the block settings menu that is currently open.
+ *
+ * @param {?string} clientId The block client ID.
+ * @return {Object} Action object.
+ */
+export function setOpenedBlockSettingsMenu( clientId ) {
+	return {
+		type: 'SET_OPENED_BLOCK_SETTINGS_MENU',
+		clientId,
+	};
+}
+
+export function setStyleOverride( id, style ) {
+	return {
+		type: 'SET_STYLE_OVERRIDE',
+		id,
+		style,
+	};
+}
+
+export function deleteStyleOverride( id ) {
+	return {
+		type: 'DELETE_STYLE_OVERRIDE',
+		id,
+	};
+}

package/src/store/private-selectors.js

@@ -45,9 +45,8 @@ export function getLastInsertedBlocksClientIds( state ) {
 export const isBlockSubtreeDisabled = createSelector(
 	( state, clientId ) => {
 		const isChildSubtreeDisabled = ( childClientId ) => {
-			const mode = state.blockEditingModes.get( childClientId );
 			return (
-				( mode === undefined || mode === 'disabled' ) &&
+				getBlockEditingMode( state, childClientId ) === 'disabled' &&
 				getBlockOrder( state, childClientId ).every(
 					isChildSubtreeDisabled
 				)
@@ -58,7 +57,12 @@ export const isBlockSubtreeDisabled = createSelector(
 			getBlockOrder( state, clientId ).every( isChildSubtreeDisabled )
 		);
 	},
-	( state ) => [ state.blockEditingModes, state.blocks.parents ]
+	( state ) => [
+		state.blocks.parents,
+		state.blocks.order,
+		state.blockEditingModes,
+		state.blockListSettings,
+	]
 );
 
 /**
@@ -139,3 +143,24 @@ export function getRemovalPromptData( state ) {
 export function getBlockRemovalRules( state ) {
 	return state.blockRemovalRules;
 }
+
+/**
+ * Returns the client ID of the block settings menu that is currently open.
+ *
+ * @param {Object} state Global application state.
+ * @return {string|null} The client ID of the block menu that is currently open.
+ */
+export function getOpenedBlockSettingsMenu( state ) {
+	return state.openedBlockSettingsMenu;
+}
+
+/**
+ * Returns all style overrides, intended to be merged with global editor styles.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {Map} A map of style IDs to style overrides.
+ */
+export function getStyleOverrides( state ) {
+	return state.styleOverrides;
+}

package/src/store/reducer.js

@@ -1913,6 +1913,42 @@ export function blockEditingModes( state = new Map(), action ) {
 	return state;
 }
 
+/**
+ * Reducer returning the clientId of the block settings menu that is currently open.
+ *
+ * @param {string|null} state  Current state.
+ * @param {Object}      action Dispatched action.
+ *
+ * @return {string|null} Updated state.
+ */
+export function openedBlockSettingsMenu( state = null, action ) {
+	if ( 'SET_OPENED_BLOCK_SETTINGS_MENU' === action.type ) {
+		return action?.clientId ?? null;
+	}
+	return state;
+}
+
+/**
+ * Reducer returning a map of style IDs to style overrides.
+ *
+ * @param {Map}    state  Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {Map} Updated state.
+ */
+export function styleOverrides( state = new Map(), action ) {
+	switch ( action.type ) {
+		case 'SET_STYLE_OVERRIDE':
+			return new Map( state ).set( action.id, action.style );
+		case 'DELETE_STYLE_OVERRIDE': {
+			const newState = new Map( state );
+			newState.delete( action.id );
+			return newState;
+		}
+	}
+	return state;
+}
+
 const combinedReducers = combineReducers( {
 	blocks,
 	isTyping,
@@ -1936,8 +1972,10 @@ const combinedReducers = combineReducers( {
 	temporarilyEditingAsBlocks,
 	blockVisibility,
 	blockEditingModes,
+	styleOverrides,
 	removalPromptData,
 	blockRemovalRules,
+	openedBlockSettingsMenu,
 } );
 
 function withAutomaticChangeReset( reducer ) {

package/src/store/selectors.js

@@ -245,19 +245,20 @@ export const __unstableGetClientIdsTree = createSelector(
  * given. Returned ids are ordered first by the order of the ids given, then
  * by the order that they appear in the editor.
  *
- * @param {Object} state     Global application state.
- * @param {Array}  clientIds Array of blocks to inspect.
+ * @param {Object}          state     Global application state.
+ * @param {string|string[]} clientIds Client ID(s) for which descendant blocks are to be returned.
  *
- * @return {Array} ids of descendants.
+ * @return {Array} Client IDs of descendants.
  */
 export const getClientIdsOfDescendants = createSelector(
 	( state, clientIds ) => {
+		const givenIds = Array.isArray( clientIds ) ? clientIds : [ clientIds ];
 		const collectedIds = [];
-		for ( const givenId of clientIds ) {
+		for ( const givenId of givenIds ) {
 			for ( const descendantId of getBlockOrder( state, givenId ) ) {
 				collectedIds.push(
 					descendantId,
-					...getClientIdsOfDescendants( state, [ descendantId ] )
+					...getClientIdsOfDescendants( state, descendantId )
 				);
 			}
 		}
@@ -281,7 +282,7 @@ export const getClientIdsWithDescendants = createSelector(
 		for ( const topLevelId of getBlockOrder( state ) ) {
 			collectedIds.push(
 				topLevelId,
-				...getClientIdsOfDescendants( state, [ topLevelId ] )
+				...getClientIdsOfDescendants( state, topLevelId )
 			);
 		}
 		return collectedIds;
@@ -2290,31 +2291,44 @@ const checkAllowListRecursive = ( blocks, allowedBlockTypes ) => {
 	return true;
 };
 
-function getUnsyncedPatterns( state ) {
-	const reusableBlocks =
+function getUserPatterns( state ) {
+	const userPatterns =
 		state?.settings?.__experimentalReusableBlocks ?? EMPTY_ARRAY;
-
-	return reusableBlocks
-		.filter(
-			( reusableBlock ) =>
-				reusableBlock.wp_pattern_sync_status === 'unsynced'
-		)
-		.map( ( reusableBlock ) => {
-			return {
-				name: `core/block/${ reusableBlock.id }`,
-				title: reusableBlock.title.raw,
-				categories: [ 'custom' ],
-				content: reusableBlock.content.raw,
-			};
-		} );
+	const userPatternCategories =
+		state?.settings?.__experimentalUserPatternCategories ?? [];
+	const categories = new Map();
+	userPatternCategories.forEach( ( userCategory ) =>
+		categories.set( userCategory.id, userCategory )
+	);
+	return userPatterns.map( ( userPattern ) => {
+		return {
+			name: `core/block/${ userPattern.id }`,
+			id: userPattern.id,
+			title: userPattern.title.raw,
+			categories: userPattern.wp_pattern_category.map( ( catId ) =>
+				categories && categories.get( catId )
+					? categories.get( catId ).slug
+					: catId
+			),
+			content: userPattern.content.raw,
+			syncStatus: userPattern.wp_pattern_sync_status,
+		};
+	} );
 }
 
+export const __experimentalUserPatternCategories = createSelector(
+	( state ) => {
+		return state?.settings?.__experimentalUserPatternCategories;
+	},
+	( state ) => [ state.settings.__experimentalUserPatternCategories ]
+);
+
 export const __experimentalGetParsedPattern = createSelector(
 	( state, patternName ) => {
 		const patterns = state.settings.__experimentalBlockPatterns;
-		const unsyncedPatterns = getUnsyncedPatterns( state );
+		const userPatterns = getUserPatterns( state );
 
-		const pattern = [ ...patterns, ...unsyncedPatterns ].find(
+		const pattern = [ ...patterns, ...userPatterns ].find(
 			( { name } ) => name === patternName
 		);
 		if ( ! pattern ) {
@@ -2330,17 +2344,18 @@ export const __experimentalGetParsedPattern = createSelector(
 	( state ) => [
 		state.settings.__experimentalBlockPatterns,
 		state.settings.__experimentalReusableBlocks,
+		state?.settings?.__experimentalUserPatternCategories,
 	]
 );
 
 const getAllAllowedPatterns = createSelector(
 	( state ) => {
 		const patterns = state.settings.__experimentalBlockPatterns;
-		const unsyncedPatterns = getUnsyncedPatterns( state );
+		const userPatterns = getUserPatterns( state );
 
 		const { allowedBlockTypes } = getSettings( state );
 
-		const parsedPatterns = [ ...patterns, ...unsyncedPatterns ]
+		const parsedPatterns = [ ...userPatterns, ...patterns ]
 			.filter( ( { inserter = true } ) => !! inserter )
 			.map( ( { name } ) =>
 				__experimentalGetParsedPattern( state, name )
@@ -2354,6 +2369,7 @@ const getAllAllowedPatterns = createSelector(
 		state.settings.__experimentalBlockPatterns,
 		state.settings.__experimentalReusableBlocks,
 		state.settings.allowedBlockTypes,
+		state?.settings?.__experimentalUserPatternCategories,
 	]
 );
 
@@ -2941,3 +2957,68 @@ export const getBlockEditingMode = createRegistrySelector(
 			return parentMode === 'contentOnly' ? 'default' : parentMode;
 		}
 );
+
+/**
+ * Indicates if a block is ungroupable.
+ * A block is ungroupable if it is a single grouping block with inner blocks.
+ * If a block has an `ungroup` transform, it is also ungroupable, without the
+ * requirement of being the default grouping block.
+ * Additionally a block can only be ungrouped if it has inner blocks and can
+ * be removed.
+ *
+ * @param {Object} state    Global application state.
+ * @param {string} clientId Client Id of the block. If not passed the selected block's client id will be used.
+ * @return {boolean} True if the block is ungroupable.
+ */
+export const isUngroupable = createRegistrySelector(
+	( select ) =>
+		( state, clientId = '' ) => {
+			const _clientId = clientId || getSelectedBlockClientId( state );
+			if ( ! _clientId ) {
+				return false;
+			}
+			const { getGroupingBlockName } = select( blocksStore );
+			const block = getBlock( state, _clientId );
+			const groupingBlockName = getGroupingBlockName();
+			const _isUngroupable =
+				block &&
+				( block.name === groupingBlockName ||
+					getBlockType( block.name )?.transforms?.ungroup ) &&
+				!! block.innerBlocks.length;
+
+			return _isUngroupable && canRemoveBlock( state, _clientId );
+		}
+);
+
+/**
+ * Indicates if the provided blocks(by client ids) are groupable.
+ * We need to have at least one block, have a grouping block name set and
+ * be able to remove these blocks.
+ *
+ * @param {Object}   state     Global application state.
+ * @param {string[]} clientIds Block client ids. If not passed the selected blocks client ids will be used.
+ * @return {boolean} True if the blocks are groupable.
+ */
+export const isGroupable = createRegistrySelector(
+	( select ) =>
+		( state, clientIds = EMPTY_ARRAY ) => {
+			const { getGroupingBlockName } = select( blocksStore );
+			const groupingBlockName = getGroupingBlockName();
+			const _clientIds = clientIds?.length
+				? clientIds
+				: getSelectedBlockClientIds( state );
+			const rootClientId = _clientIds?.length
+				? getBlockRootClientId( state, _clientIds[ 0 ] )
+				: undefined;
+			const groupingBlockAvailable = canInsertBlockType(
+				state,
+				groupingBlockName,
+				rootClientId
+			);
+			const _isGroupable = groupingBlockAvailable && _clientIds.length;
+			return (
+				_isGroupable &&
+				canRemoveBlocks( state, _clientIds, rootClientId )
+			);
+		}
+);

package/src/store/test/actions.js

@@ -219,8 +219,9 @@ describe( 'actions', () => {
 			};
 			const dispatch = jest.fn();
 			dispatch.ensureDefaultBlock = jest.fn();
+			const registry = createRegistry();
 
-			replaceBlock( 'chicken', block )( { select, dispatch } );
+			replaceBlock( 'chicken', block )( { select, dispatch, registry } );
 
 			expect( dispatch ).toHaveBeenCalledWith( {
 				type: 'REPLACE_BLOCKS',
@@ -285,8 +286,12 @@ describe( 'actions', () => {
 			};
 			const dispatch = jest.fn();
 			dispatch.ensureDefaultBlock = jest.fn();
+			const registry = createRegistry();
 
-			replaceBlocks( [ 'chicken' ], blocks )( { select, dispatch } );
+			replaceBlocks(
+				[ 'chicken' ],
+				blocks
+			)( { select, dispatch, registry } );
 
 			expect( dispatch ).toHaveBeenCalledWith( {
 				type: 'REPLACE_BLOCKS',
@@ -319,6 +324,7 @@ describe( 'actions', () => {
 			};
 			const dispatch = jest.fn();
 			dispatch.ensureDefaultBlock = jest.fn();
+			const registry = createRegistry();
 
 			replaceBlocks(
 				[ 'chicken' ],
@@ -326,7 +332,7 @@ describe( 'actions', () => {
 				null,
 				null,
 				meta
-			)( { select, dispatch } );
+			)( { select, dispatch, registry } );
 
 			expect( dispatch ).toHaveBeenCalledWith( {
 				type: 'REPLACE_BLOCKS',
@@ -628,8 +634,9 @@ describe( 'actions', () => {
 			const dispatch = Object.assign( jest.fn(), {
 				selectPreviousBlock: jest.fn(),
 			} );
+			const registry = createRegistry();
 
-			removeBlocks( clientIds )( { select, dispatch } );
+			removeBlocks( clientIds )( { select, dispatch, registry } );
 
 			expect( dispatch.selectPreviousBlock ).toHaveBeenCalledWith(
 				clientId,
@@ -739,8 +746,8 @@ describe( 'actions', () => {
 			const dispatch = Object.assign( jest.fn(), {
 				selectPreviousBlock: jest.fn(),
 			} );
-
-			removeBlock( clientId )( { select, dispatch } );
+			const registry = createRegistry();
+			removeBlock( clientId )( { select, dispatch, registry } );
 
 			expect( dispatch.selectPreviousBlock ).toHaveBeenCalledWith(
 				clientId,
@@ -753,7 +760,7 @@ describe( 'actions', () => {
 			} );
 		} );
 
-		it( 'should dispatch REMOVE_BLOCKS action, opting out of select previous', () => {
+		it( 'should dispatch REMOVE_BLOCKS action, opting out of select previous', async () => {
 			const clientId = 'myclientid';
 
 			const select = {
@@ -765,7 +772,11 @@ describe( 'actions', () => {
 				selectPreviousBlock: jest.fn(),
 			} );
 
-			removeBlocks( [ clientId ], false )( { select, dispatch } );
+			const registry = createRegistry();
+			removeBlocks(
+				[ clientId ],
+				false
+			)( { select, dispatch, registry } );
 
 			expect( dispatch.selectPreviousBlock ).not.toHaveBeenCalled();
 

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

@@ -5,6 +5,7 @@ import {
 	hideBlockInterface,
 	showBlockInterface,
 	__experimentalUpdateSettings,
+	setOpenedBlockSettingsMenu,
 } from '../private-actions';
 
 describe( 'private actions', () => {
@@ -78,4 +79,20 @@ describe( 'private actions', () => {
 			} );
 		} );
 	} );
+
+	describe( 'setOpenedBlockSettingsMenu', () => {
+		it( 'should return the SET_OPENED_BLOCK_SETTINGS_MENU action', () => {
+			expect( setOpenedBlockSettingsMenu() ).toEqual( {
+				clientId: undefined,
+				type: 'SET_OPENED_BLOCK_SETTINGS_MENU',
+			} );
+		} );
+
+		it( 'should return the SET_OPENED_BLOCK_SETTINGS_MENU action with client id if provided', () => {
+			expect( setOpenedBlockSettingsMenu( 'abcd' ) ).toEqual( {
+				clientId: 'abcd',
+				type: 'SET_OPENED_BLOCK_SETTINGS_MENU',
+			} );
+		} );
+	} );
 } );

package/src/store/test/reducer.js

@@ -33,6 +33,7 @@ import {
 	lastBlockAttributesChange,
 	lastBlockInserted,
 	blockEditingModes,
+	openedBlockSettingsMenu,
 } from '../reducer';
 
 const noop = () => {};
@@ -3415,4 +3416,28 @@ describe( 'state', () => {
 			);
 		} );
 	} );
+
+	describe( 'openedBlockSettingsMenu', () => {
+		it( 'should return null by default', () => {
+			expect( openedBlockSettingsMenu( undefined, {} ) ).toBe( null );
+		} );
+
+		it( 'should set client id for opened block settings menu', () => {
+			const state = openedBlockSettingsMenu( null, {
+				type: 'SET_OPENED_BLOCK_SETTINGS_MENU',
+				clientId: '14501cc2-90a6-4f52-aa36-ab6e896135d1',
+			} );
+			expect( state ).toBe( '14501cc2-90a6-4f52-aa36-ab6e896135d1' );
+		} );
+
+		it( 'should clear the state when no client id is passed', () => {
+			const state = openedBlockSettingsMenu(
+				'14501cc2-90a6-4f52-aa36-ab6e896135d1',
+				{
+					type: 'SET_OPENED_BLOCK_SETTINGS_MENU',
+				}
+			);
+			expect( state ).toBe( null );
+		} );
+	} );
 } );