@wordpress/block-editor 11.2.0 → 11.3.0

package/src/store/private-actions.js

@@ -0,0 +1,65 @@
+/**
+ * WordPress dependencies
+ */
+import { Platform } from '@wordpress/element';
+
+/**
+ * A list of private/experimental block editor settings that
+ * should not become a part of the WordPress public API.
+ * BlockEditorProvider will remove these settings from the
+ * settings object it receives.
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/46131
+ */
+const privateSettings = [ 'inserterMediaCategories' ];
+
+/**
+ * Action that updates the block editor settings and
+ * conditionally preserves the experimental ones.
+ *
+ * @param {Object}  settings                  Updated settings
+ * @param {boolean} stripExperimentalSettings Whether to strip experimental settings.
+ * @return {Object} Action object
+ */
+export function __experimentalUpdateSettings(
+	settings,
+	stripExperimentalSettings = false
+) {
+	let cleanSettings = settings;
+	// There are no plugins in the mobile apps, so there is no
+	// need to strip the experimental settings:
+	if ( stripExperimentalSettings && Platform.OS === 'web' ) {
+		cleanSettings = {};
+		for ( const key in settings ) {
+			if ( ! privateSettings.includes( key ) ) {
+				cleanSettings[ key ] = settings[ key ];
+			}
+		}
+	}
+	return {
+		type: 'UPDATE_SETTINGS',
+		settings: cleanSettings,
+	};
+}
+
+/**
+ * Hides the block interface (eg. toolbar, outline, etc.)
+ *
+ * @return {Object} Action object.
+ */
+export function hideBlockInterface() {
+	return {
+		type: 'HIDE_BLOCK_INTERFACE',
+	};
+}
+
+/**
+ * Shows the block interface (eg. toolbar, outline, etc.)
+ *
+ * @return {Object} Action object.
+ */
+export function showBlockInterface() {
+	return {
+		type: 'SHOW_BLOCK_INTERFACE',
+	};
+}

package/src/store/private-selectors.js

@@ -0,0 +1,10 @@
+/**
+ * Returns true if the block interface is hidden, or false otherwise.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {boolean} Whether the block toolbar is hidden.
+ */
+export function isBlockInterfaceHidden( state ) {
+	return state.isBlockInterfaceHidden;
+}

package/src/store/reducer.js

@@ -1756,7 +1756,7 @@ export function lastBlockAttributesChange( state = null, action ) {
  * @param {?string} state  Current state.
  * @param {Object}  action Dispatched action.
  *
- * @return {string} Updated state.
+ * @return {string | undefined} Updated state.
  */
 export function automaticChangeStatus( state, action ) {
 	switch ( action.type ) {

package/src/store/selectors.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { map } from 'lodash';
 import createSelector from 'rememo';
 
 /**
@@ -202,7 +201,7 @@ export const __unstableGetClientIdWithClientIdsTree = createSelector(
  */
 export const __unstableGetClientIdsTree = createSelector(
 	( state, rootClientId = '' ) =>
-		map( getBlockOrder( state, rootClientId ), ( clientId ) =>
+		getBlockOrder( state, rootClientId ).map( ( clientId ) =>
 			__unstableGetClientIdWithClientIdsTree( state, clientId )
 		),
 	( state ) => [ state.blocks.order ]
@@ -314,17 +313,32 @@ export const __experimentalGetGlobalBlocksByName = createSelector(
  */
 export const getBlocksByClientId = createSelector(
 	( state, clientIds ) =>
-		map(
-			Array.isArray( clientIds ) ? clientIds : [ clientIds ],
+		( Array.isArray( clientIds ) ? clientIds : [ clientIds ] ).map(
 			( clientId ) => getBlock( state, clientId )
 		),
 	( state, clientIds ) =>
-		map(
-			Array.isArray( clientIds ) ? clientIds : [ clientIds ],
+		( Array.isArray( clientIds ) ? clientIds : [ clientIds ] ).map(
 			( clientId ) => state.blocks.tree.get( clientId )
 		)
 );
 
+/**
+ * Given an array of block client IDs, returns the corresponding array of block
+ * names.
+ *
+ * @param {Object}   state     Editor state.
+ * @param {string[]} clientIds Client IDs for which block names are to be returned.
+ *
+ * @return {string[]} Block names.
+ */
+export const getBlockNamesByClientId = createSelector(
+	( state, clientIds ) =>
+		getBlocksByClientId( state, clientIds )
+			.filter( Boolean )
+			.map( ( block ) => block.name ),
+	( state, clientIds ) => getBlocksByClientId( state, clientIds )
+);
+
 /**
  * Returns the number of blocks currently present in the post.
  *
@@ -507,18 +521,18 @@ export const getBlockParents = createSelector(
 export const getBlockParentsByBlockName = createSelector(
 	( state, clientId, blockName, ascending = false ) => {
 		const parents = getBlockParents( state, clientId, ascending );
-		return map(
-			map( parents, ( id ) => ( {
+		return parents
+			.map( ( id ) => ( {
 				id,
 				name: getBlockName( state, id ),
-			} ) ).filter( ( { name } ) => {
+			} ) )
+			.filter( ( { name } ) => {
 				if ( Array.isArray( blockName ) ) {
 					return blockName.includes( name );
 				}
 				return name === blockName;
-			} ),
-			( { id } ) => id
-		);
+			} )
+			.map( ( { id } ) => id );
 	},
 	( state ) => [ state.blocks.parents ]
 );
@@ -1265,17 +1279,6 @@ export function isTyping( state ) {
 	return state.isTyping;
 }
 
-/**
- * Returns true if the the block interface should be hidden, or false otherwise.
- *
- * @param {Object} state Global application state.
- *
- * @return {boolean} Whether the block toolbar is hidden.
- */
-export function __experimentalIsBlockInterfaceHidden( state ) {
-	return state.isBlockInterfaceHidden;
-}
-
 /**
  * Returns true if the user is dragging blocks, or false otherwise.
  *
@@ -1364,28 +1367,36 @@ export function isCaretWithinFormattedText() {
  *
  * @return {Object} Insertion point object with `rootClientId`, `index`.
  */
-export function getBlockInsertionPoint( state ) {
-	let rootClientId, index;
-
-	const {
-		insertionPoint,
-		selection: { selectionEnd },
-	} = state;
-	if ( insertionPoint !== null ) {
-		return insertionPoint;
-	}
+export const getBlockInsertionPoint = createSelector(
+	( state ) => {
+		let rootClientId, index;
+
+		const {
+			insertionPoint,
+			selection: { selectionEnd },
+		} = state;
+		if ( insertionPoint !== null ) {
+			return insertionPoint;
+		}
 
-	const { clientId } = selectionEnd;
+		const { clientId } = selectionEnd;
 
-	if ( clientId ) {
-		rootClientId = getBlockRootClientId( state, clientId ) || undefined;
-		index = getBlockIndex( state, selectionEnd.clientId ) + 1;
-	} else {
-		index = getBlockOrder( state ).length;
-	}
+		if ( clientId ) {
+			rootClientId = getBlockRootClientId( state, clientId ) || undefined;
+			index = getBlockIndex( state, selectionEnd.clientId ) + 1;
+		} else {
+			index = getBlockOrder( state ).length;
+		}
 
-	return { rootClientId, index };
-}
+		return { rootClientId, index };
+	},
+	( state ) => [
+		state.insertionPoint,
+		state.selection.selectionEnd.clientId,
+		state.blocks.parents,
+		state.blocks.order,
+	]
+);
 
 /**
  * Returns true if we should show the block insertion point.
@@ -1660,7 +1671,7 @@ export function canRemoveBlocks( state, clientIds, rootClientId = null ) {
  * @param {string}  clientId     The block client Id.
  * @param {?string} rootClientId Optional root client ID of block list.
  *
- * @return {boolean} Whether the given block is allowed to be moved.
+ * @return {boolean | undefined} Whether the given block is allowed to be moved.
  */
 export function canMoveBlock( state, clientId, rootClientId = null ) {
 	const attributes = getBlockAttributes( state, clientId );
@@ -2144,14 +2155,14 @@ export const hasInserterItems = createSelector(
 );
 
 /**
- * Returns the list of allowed inserter blocks for inner blocks children
+ * Returns the list of allowed inserter blocks for inner blocks children.
  *
  * @param {Object}  state        Editor state.
  * @param {?string} rootClientId Optional root client ID of block list.
  *
  * @return {Array?} The list of allowed block types.
  */
-export const __experimentalGetAllowedBlocks = createSelector(
+export const getAllowedBlocks = createSelector(
 	( state, rootClientId = null ) => {
 		if ( ! rootClientId ) {
 			return;
@@ -2170,6 +2181,24 @@ export const __experimentalGetAllowedBlocks = createSelector(
 	]
 );
 
+export const __experimentalGetAllowedBlocks = createSelector(
+	( state, rootClientId = null ) => {
+		deprecated(
+			'wp.data.select( "core/block-editor" ).__experimentalGetAllowedBlocks',
+			{
+				alternative:
+					'wp.data.select( "core/block-editor" ).getAllowedBlocks',
+				since: '6.2',
+				version: '6.4',
+			}
+		);
+		return getAllowedBlocks( state, rootClientId );
+	},
+	( state, rootClientId ) => [
+		...getAllowedBlocks.getDependants( state, rootClientId ),
+	]
+);
+
 /**
  * Returns the block to be directly inserted by the block appender.
  *
@@ -2313,7 +2342,7 @@ export const __experimentalGetAllowedPatterns = createSelector(
  *
  * @return {Array} The list of matched block patterns based on declared `blockTypes` and block name.
  */
-export const __experimentalGetPatternsByBlockTypes = createSelector(
+export const getPatternsByBlockTypes = createSelector(
 	( state, blockNames, rootClientId = null ) => {
 		if ( ! blockNames ) return EMPTY_ARRAY;
 		const patterns = __experimentalGetAllowedPatterns(
@@ -2323,11 +2352,36 @@ export const __experimentalGetPatternsByBlockTypes = createSelector(
 		const normalizedBlockNames = Array.isArray( blockNames )
 			? blockNames
 			: [ blockNames ];
-		return patterns.filter( ( pattern ) =>
+		const filteredPatterns = patterns.filter( ( pattern ) =>
 			pattern?.blockTypes?.some?.( ( blockName ) =>
 				normalizedBlockNames.includes( blockName )
 			)
 		);
+		if ( filteredPatterns.length === 0 ) {
+			return EMPTY_ARRAY;
+		}
+		return filteredPatterns;
+	},
+	( state, blockNames, rootClientId ) => [
+		...__experimentalGetAllowedPatterns.getDependants(
+			state,
+			rootClientId
+		),
+	]
+);
+
+export const __experimentalGetPatternsByBlockTypes = createSelector(
+	( state, blockNames, rootClientId = null ) => {
+		deprecated(
+			'wp.data.select( "core/block-editor" ).__experimentalGetPatternsByBlockTypes',
+			{
+				alternative:
+					'wp.data.select( "core/block-editor" ).getPatternsByBlockTypes',
+				since: '6.2',
+				version: '6.4',
+			}
+		);
+		return getPatternsByBlockTypes( state, blockNames, rootClientId );
 	},
 	( state, blockNames, rootClientId ) => [
 		...__experimentalGetAllowedPatterns.getDependants(
@@ -2384,17 +2438,14 @@ export const __experimentalGetPatternTransformItems = createSelector(
 		 * block pattern's blocks and try to find matches from the selected blocks.
 		 * Now this happens in the consumer to avoid heavy operations in the selector.
 		 */
-		return __experimentalGetPatternsByBlockTypes(
+		return getPatternsByBlockTypes(
 			state,
 			selectedBlockNames,
 			rootClientId
 		);
 	},
 	( state, blocks, rootClientId ) => [
-		...__experimentalGetPatternsByBlockTypes.getDependants(
-			state,
-			rootClientId
-		),
+		...getPatternsByBlockTypes.getDependants( state, rootClientId ),
 	]
 );
 

package/src/store/test/actions.js

@@ -27,7 +27,6 @@ const noop = () => {};
 
 const {
 	clearSelectedBlock,
-	__experimentalHideBlockInterface: hideBlockInterface,
 	insertBlock,
 	insertBlocks,
 	mergeBlocks,
@@ -40,7 +39,6 @@ const {
 	replaceInnerBlocks,
 	resetBlocks,
 	selectBlock,
-	__experimentalShowBlockInterface: showBlockInterface,
 	showInsertionPoint,
 	startMultiSelect,
 	startTyping,
@@ -777,22 +775,6 @@ describe( 'actions', () => {
 		} );
 	} );
 
-	describe( 'hideBlockInterface', () => {
-		it( 'should return the HIDE_BLOCK_INTERFACE action', () => {
-			expect( hideBlockInterface() ).toEqual( {
-				type: 'HIDE_BLOCK_INTERFACE',
-			} );
-		} );
-	} );
-
-	describe( 'showBlockInterface', () => {
-		it( 'should return the SHOW_BLOCK_INTERFACE action', () => {
-			expect( showBlockInterface() ).toEqual( {
-				type: 'SHOW_BLOCK_INTERFACE',
-			} );
-		} );
-	} );
-
 	describe( 'startTyping', () => {
 		it( 'should return the START_TYPING action', () => {
 			expect( startTyping() ).toEqual( {

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

@@ -0,0 +1,22 @@
+/**
+ * Internal dependencies
+ */
+import { hideBlockInterface, showBlockInterface } from '../private-actions';
+
+describe( 'private actions', () => {
+	describe( 'hideBlockInterface', () => {
+		it( 'should return the HIDE_BLOCK_INTERFACE action', () => {
+			expect( hideBlockInterface() ).toEqual( {
+				type: 'HIDE_BLOCK_INTERFACE',
+			} );
+		} );
+	} );
+
+	describe( 'showBlockInterface', () => {
+		it( 'should return the SHOW_BLOCK_INTERFACE action', () => {
+			expect( showBlockInterface() ).toEqual( {
+				type: 'SHOW_BLOCK_INTERFACE',
+			} );
+		} );
+	} );
+} );

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

@@ -0,0 +1,24 @@
+/**
+ * Internal dependencies
+ */
+import { isBlockInterfaceHidden } from '../private-selectors';
+
+describe( 'private selectors', () => {
+	describe( 'isBlockInterfaceHidden', () => {
+		it( 'should return the true if toggled true in state', () => {
+			const state = {
+				isBlockInterfaceHidden: true,
+			};
+
+			expect( isBlockInterfaceHidden( state ) ).toBe( true );
+		} );
+
+		it( 'should return false if toggled false in state', () => {
+			const state = {
+				isBlockInterfaceHidden: false,
+			};
+
+			expect( isBlockInterfaceHidden( state ) ).toBe( false );
+		} );
+	} );
+} );

package/src/store/test/selectors.js

@@ -44,7 +44,6 @@ const {
 	isBlockMultiSelected,
 	isFirstMultiSelectedBlock,
 	getBlockMode,
-	__experimentalIsBlockInterfaceHidden: isBlockInterfaceHidden,
 	isTyping,
 	isDraggingBlocks,
 	getDraggedBlockClientIds,
@@ -67,7 +66,7 @@ const {
 	__experimentalGetActiveBlockIdByBlockNames: getActiveBlockIdByBlockNames,
 	__experimentalGetAllowedPatterns,
 	__experimentalGetParsedPattern,
-	__experimentalGetPatternsByBlockTypes,
+	getPatternsByBlockTypes,
 	__unstableGetClientIdWithClientIdsTree,
 	__unstableGetClientIdsTree,
 	__experimentalGetPatternTransformItems,
@@ -2259,24 +2258,6 @@ describe( 'selectors', () => {
 		} );
 	} );
 
-	describe( 'isBlockInterfaceHidden', () => {
-		it( 'should return the true if toggled true in state', () => {
-			const state = {
-				isBlockInterfaceHidden: true,
-			};
-
-			expect( isBlockInterfaceHidden( state ) ).toBe( true );
-		} );
-
-		it( 'should return false if toggled false in state', () => {
-			const state = {
-				isBlockInterfaceHidden: false,
-			};
-
-			expect( isBlockInterfaceHidden( state ) ).toBe( false );
-		} );
-	} );
-
 	describe( 'isTyping', () => {
 		it( 'should return the isTyping flag if the block is selected', () => {
 			const state = {
@@ -2493,6 +2474,44 @@ describe( 'selectors', () => {
 			} );
 		} );
 
+		it( 'should cache and return the same object if state has not changed', () => {
+			const state = {
+				selection: {
+					selectionStart: { clientId: 'clientId1' },
+					selectionEnd: { clientId: 'clientId1' },
+				},
+				blocks: {
+					byClientId: new Map(
+						Object.entries( {
+							clientId1: { clientId: 'clientId1' },
+						} )
+					),
+					attributes: new Map(
+						Object.entries( {
+							clientId1: {},
+						} )
+					),
+					order: new Map(
+						Object.entries( {
+							'': [ 'clientId1' ],
+							clientId1: [],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							clientId1: '',
+						} )
+					),
+				},
+				insertionPoint: null,
+			};
+
+			const insertionPoint1 = getBlockInsertionPoint( state );
+			const insertionPoint2 = getBlockInsertionPoint( state );
+
+			expect( insertionPoint1 ).toBe( insertionPoint2 );
+		} );
+
 		it( 'should return an object for the nested selected block', () => {
 			const state = {
 				selection: {
@@ -4223,7 +4242,7 @@ describe( 'selectors', () => {
 			);
 		} );
 	} );
-	describe( '__experimentalGetPatternsByBlockTypes', () => {
+	describe( 'getPatternsByBlockTypes', () => {
 		const state = {
 			blocks: {
 				byClientId: new Map(
@@ -4263,22 +4282,25 @@ describe( 'selectors', () => {
 			},
 		};
 		it( 'should return empty array if no block name is provided', () => {
-			expect( __experimentalGetPatternsByBlockTypes( state ) ).toEqual(
-				[]
-			);
+			expect( getPatternsByBlockTypes( state ) ).toEqual( [] );
 		} );
-		it( 'shoud return empty array if no match is found', () => {
-			const patterns = __experimentalGetPatternsByBlockTypes(
+		it( 'should return empty array if no match is found', () => {
+			const patterns = getPatternsByBlockTypes(
 				state,
 				'test/block-not-exists'
 			);
 			expect( patterns ).toEqual( [] );
 		} );
-		it( 'should return proper results when there are matched block patterns', () => {
-			const patterns = __experimentalGetPatternsByBlockTypes(
+		it( 'should return the same empty array in both empty array cases', () => {
+			const patterns1 = getPatternsByBlockTypes( state );
+			const patterns2 = getPatternsByBlockTypes(
 				state,
-				'test/block-a'
+				'test/block-not-exists'
 			);
+			expect( patterns1 ).toBe( patterns2 );
+		} );
+		it( 'should return proper results when there are matched block patterns', () => {
+			const patterns = getPatternsByBlockTypes( state, 'test/block-a' );
 			expect( patterns ).toHaveLength( 2 );
 			expect( patterns ).toEqual(
 				expect.arrayContaining( [
@@ -4288,7 +4310,7 @@ describe( 'selectors', () => {
 			);
 		} );
 		it( 'should return proper result with matched patterns and allowed blocks from rootClientId', () => {
-			const patterns = __experimentalGetPatternsByBlockTypes(
+			const patterns = getPatternsByBlockTypes(
 				state,
 				'test/block-a',
 				'block1'

package/src/style.scss

@@ -18,7 +18,6 @@
 @import "./components/block-styles/style.scss";
 @import "./components/block-switcher/style.scss";
 @import "./components/block-types-list/style.scss";
-@import "./components/block-variation-picker/style.scss";
 @import "./components/block-pattern-setup/style.scss";
 @import "./components/block-variation-transforms/style.scss";
 @import "./components/border-radius-control/style.scss";
@@ -45,15 +44,14 @@
 @import "./components/tool-selector/style.scss";
 @import "./components/url-input/style.scss";
 @import "./components/url-popover/style.scss";
-@import "./components/warning/style.scss";
 @import "./hooks/anchor.scss";
-@import "./hooks/layout.scss";
 @import "./hooks/border.scss";
+@import "./hooks/color.scss";
 @import "./hooks/dimensions.scss";
+@import "./hooks/layout.scss";
+@import "./hooks/padding.scss";
 @import "./hooks/position.scss";
 @import "./hooks/typography.scss";
-@import "./hooks/color.scss";
-@import "./hooks/padding.scss";
 
 @import "./components/block-toolbar/style.scss";
 @import "./components/inserter/style.scss";

package/src/utils/block-variation-transforms.js

@@ -22,7 +22,7 @@ function matchesAttributes( blockAttributes, variation ) {
  *
  * @param {Object}             blockAttributes - The block attributes to try to find a match.
  * @param {WPBlockVariation[]} variations      - A list of block variations to test for a match.
- * @return {?WPBlockVariation} - If a match is found returns it. If not or more than one matches are found returns `undefined`.
+ * @return {WPBlockVariation | undefined} - If a match is found returns it. If not or more than one matches are found returns `undefined`.
  */
 export const __experimentalGetMatchingVariation = (
 	blockAttributes,

package/src/utils/parse-css-unit-to-px.js

@@ -117,7 +117,9 @@ function isMathExpression( cssUnit ) {
 function evalMathExpression( cssUnit ) {
 	let errorFound = false;
 	// Convert every part of the expression to px values.
-	const cssUnitsBits = cssUnit.split( /[+-/*/]/g ).filter( Boolean );
+	const cssUnitsBits = cssUnit
+		.split( /(?!^-)[+*\/-](\s?-)?/g )
+		.filter( Boolean );
 	for ( const unit of cssUnitsBits ) {
 		// Standardize the unit to px and extract the value.
 		const parsedUnit = parseUnit( getPxFromCssUnit( unit ) );