@wordpress/block-editor 14.1.0 → 14.2.1-next.5368f64a9.0

package/src/private-apis.js

@@ -6,7 +6,6 @@ import { ExperimentalBlockEditorProvider } from './components/provider';
 import { lock } from './lock-unlock';
 import { getRichTextValues } from './components/rich-text/get-rich-text-values';
 import ResizableBoxPopover from './components/resizable-box-popover';
-import { ComposedPrivateInserter as PrivateInserter } from './components/inserter';
 import { default as PrivateQuickInserter } from './components/inserter/quick-inserter';
 import {
 	extractWords,
@@ -38,6 +37,7 @@ import {
 	reusableBlocksSelectKey,
 	globalStylesDataKey,
 	globalStylesLinksDataKey,
+	sectionRootClientIdKey,
 } from './store/private-keys';
 import { requiresWrapperOnCopy } from './components/writing-flow/utils';
 import { PrivateRichText } from './components/rich-text/';
@@ -59,7 +59,6 @@ lock( privateApis, {
 	ExperimentalBlockEditorProvider,
 	getDuotoneFilter,
 	getRichTextValues,
-	PrivateInserter,
 	PrivateQuickInserter,
 	extractWords,
 	getNormalizedSearchTerms,
@@ -94,4 +93,5 @@ lock( privateApis, {
 	__unstableBlockStyleVariationOverridesWithConfig,
 	setBackgroundStyleDefaults,
 	useBlockBindingsUtils,
+	sectionRootClientIdKey,
 } );

package/src/store/actions.js

@@ -34,8 +34,6 @@ import {
 	__experimentalUpdateSettings,
 	privateRemoveBlocks,
 } from './private-actions';
-import { STORE_NAME } from './constants';
-import { unlock } from '../lock-unlock';
 
 /** @typedef {import('../components/use-on-block-drop/types').WPDropOperation} WPDropOperation */
 
@@ -1670,13 +1668,13 @@ export const setNavigationMode =
  */
 export const __unstableSetEditorMode =
 	( mode ) =>
-	( { dispatch, select, registry } ) => {
+	( { dispatch, select } ) => {
 		// When switching to zoom-out mode, we need to select the parent section
 		if ( mode === 'zoom-out' ) {
 			const firstSelectedClientId = select.getBlockSelectionStart();
-			const { sectionRootClientId } = unlock(
-				registry.select( STORE_NAME ).getSettings()
-			);
+
+			const sectionRootClientId = select.getSectionRootClientId();
+
 			if ( firstSelectedClientId ) {
 				let sectionClientId;
 

package/src/store/private-actions.js

@@ -367,6 +367,7 @@ export function expandBlock( clientId ) {
 export const modifyContentLockBlock =
 	( clientId ) =>
 	( { select, dispatch } ) => {
+		dispatch.selectBlock( clientId );
 		dispatch.__unstableMarkNextChangeAsNotPersistent();
 		dispatch.updateBlockAttributes( clientId, {
 			templateLock: undefined,

package/src/store/private-keys.js

@@ -2,3 +2,4 @@ export const globalStylesDataKey = Symbol( 'globalStylesDataKey' );
 export const globalStylesLinksDataKey = Symbol( 'globalStylesLinks' );
 export const selectBlockPatternsKey = Symbol( 'selectBlockPatternsKey' );
 export const reusableBlocksSelectKey = Symbol( 'reusableBlocksSelect' );
+export const sectionRootClientIdKey = Symbol( 'sectionRootClientIdKey' );

package/src/store/private-selectors.js

@@ -20,6 +20,7 @@ import {
 	checkAllowListRecursive,
 	getAllPatternsDependants,
 	getInsertBlockTypeDependants,
+	getGrammar,
 } from './utils';
 import { INSERTER_PATTERN_TYPES } from '../components/inserter/block-patterns-tab/utils';
 import { STORE_NAME } from './constants';
@@ -27,6 +28,7 @@ import { unlock } from '../lock-unlock';
 import {
 	selectBlockPatternsKey,
 	reusableBlocksSelectKey,
+	sectionRootClientIdKey,
 } from './private-keys';
 
 export { getBlockSettings } from './get-block-settings';
@@ -112,6 +114,7 @@ export const getEnabledClientIdsTree = createSelector(
 		state.blockEditingModes,
 		state.settings.templateLock,
 		state.blockListSettings,
+		state.editorMode,
 	]
 );
 
@@ -291,19 +294,18 @@ export const getInserterMediaCategories = createSelector(
 export const hasAllowedPatterns = createRegistrySelector( ( select ) =>
 	createSelector(
 		( state, rootClientId = null ) => {
-			const { getAllPatterns, __experimentalGetParsedPattern } = unlock(
-				select( STORE_NAME )
-			);
+			const { getAllPatterns } = unlock( select( STORE_NAME ) );
 			const patterns = getAllPatterns();
 			const { allowedBlockTypes } = getSettings( state );
-			return patterns.some( ( { name, inserter = true } ) => {
+			return patterns.some( ( pattern ) => {
+				const { inserter = true } = pattern;
 				if ( ! inserter ) {
 					return false;
 				}
-				const { blocks } = __experimentalGetParsedPattern( name );
+				const grammar = getGrammar( pattern );
 				return (
-					checkAllowListRecursive( blocks, allowedBlockTypes ) &&
-					blocks.every( ( { name: blockName } ) =>
+					checkAllowListRecursive( grammar, allowedBlockTypes ) &&
+					grammar.every( ( { name: blockName } ) =>
 						canInsertBlockType( state, blockName, rootClientId )
 					)
 				);
@@ -421,9 +423,11 @@ const EMPTY_ARRAY = [];
 export const getReusableBlocks = createRegistrySelector(
 	( select ) => ( state ) => {
 		const reusableBlocksSelect = state.settings[ reusableBlocksSelectKey ];
-		return reusableBlocksSelect
-			? reusableBlocksSelect( select )
-			: state.settings.__experimentalReusableBlocks ?? EMPTY_ARRAY;
+		return (
+			( reusableBlocksSelect
+				? reusableBlocksSelect( select )
+				: state.settings.__experimentalReusableBlocks ) ?? EMPTY_ARRAY
+		);
 	}
 );
 
@@ -512,10 +516,6 @@ export function getTemporarilyEditingFocusModeToRevert( state ) {
 	return state.temporarilyEditingFocusModeRevert;
 }
 
-export function getInserterSearchInputRef( state ) {
-	return state.inserterSearchInputRef;
-}
-
 /**
  * Returns the style attributes of multiple blocks.
  *
@@ -547,3 +547,7 @@ export const getBlockStyles = createSelector(
 export function isZoomOutMode( state ) {
 	return state.editorMode === 'zoom-out';
 }
+
+export function getSectionRootClientId( state ) {
+	return state.settings?.[ sectionRootClientIdKey ];
+}

package/src/store/reducer.js

@@ -1624,8 +1624,6 @@ export function insertionPoint( state = null, action ) {
 		}
 
 		case 'HIDE_INSERTION_POINT':
-		case 'CLEAR_SELECTED_BLOCK':
-		case 'SELECT_BLOCK':
 			return null;
 	}
 
@@ -2087,10 +2085,6 @@ export function hoveredBlockClientId( state = false, action ) {
 	return state;
 }
 
-export function inserterSearchInputRef( state = { current: null } ) {
-	return state;
-}
-
 const combinedReducers = combineReducers( {
 	blocks,
 	isDragging,
@@ -2124,7 +2118,6 @@ const combinedReducers = combineReducers( {
 	openedBlockSettingsMenu,
 	registeredInserterMediaCategories,
 	hoveredBlockClientId,
-	inserterSearchInputRef,
 } );
 
 function withAutomaticChangeReset( reducer ) {

package/src/store/selectors.js

@@ -7,7 +7,6 @@ import {
 	getBlockVariations,
 	hasBlockSupport,
 	getPossibleBlockTransformations,
-	parse,
 	switchToBlockType,
 	store as blocksStore,
 } from '@wordpress/blocks';
@@ -27,6 +26,8 @@ import {
 	checkAllowList,
 	getAllPatternsDependants,
 	getInsertBlockTypeDependants,
+	getParsedPattern,
+	getGrammar,
 } from './utils';
 import { orderBy } from '../utils/sorting';
 import { STORE_NAME } from './constants';
@@ -36,6 +37,7 @@ import {
 	getContentLockingParent,
 	getTemporarilyEditingAsBlocks,
 	getTemporarilyEditingFocusModeToRevert,
+	getSectionRootClientId,
 } from './private-selectors';
 
 /**
@@ -1752,7 +1754,7 @@ export function canRemoveBlocks( state, clientIds ) {
  * @param {Object} state    Editor state.
  * @param {string} clientId The block client Id.
  *
- * @return {boolean | undefined} Whether the given block is allowed to be moved.
+ * @return {boolean} Whether the given block is allowed to be moved.
  */
 export function canMoveBlock( state, clientId ) {
 	const attributes = getBlockAttributes( state, clientId );
@@ -2057,9 +2059,8 @@ export const getInserterItems = createRegistrySelector( ( select ) =>
 							if ( ! item.rootClientId ) {
 								let sectionRootClientId;
 								try {
-									sectionRootClientId = unlock(
-										getSettings( state )
-									).sectionRootClientId;
+									sectionRootClientId =
+										getSectionRootClientId( state );
 								} catch ( e ) {}
 								if (
 									sectionRootClientId &&
@@ -2349,40 +2350,12 @@ export function __experimentalGetDirectInsertBlock(
 }
 
 export const __experimentalGetParsedPattern = createRegistrySelector(
-	( select ) =>
-		createSelector(
-			( state, patternName ) => {
-				const pattern = unlock( select( STORE_NAME ) ).getPatternBySlug(
-					patternName
-				);
-				if ( ! pattern ) {
-					return null;
-				}
-				const blocks = parse( pattern.content, {
-					__unstableSkipMigrationLogs: true,
-				} );
-				if ( blocks.length === 1 ) {
-					blocks[ 0 ].attributes = {
-						...blocks[ 0 ].attributes,
-						metadata: {
-							...( blocks[ 0 ].attributes.metadata || {} ),
-							categories: pattern.categories,
-							patternName: pattern.name,
-							name:
-								blocks[ 0 ].attributes.metadata?.name ||
-								pattern.title,
-						},
-					};
-				}
-				return {
-					...pattern,
-					blocks,
-				};
-			},
-			( state, patternName ) => [
-				unlock( select( STORE_NAME ) ).getPatternBySlug( patternName ),
-			]
-		)
+	( select ) => ( state, patternName ) => {
+		const pattern = unlock( select( STORE_NAME ) ).getPatternBySlug(
+			patternName
+		);
+		return pattern ? getParsedPattern( pattern ) : null;
+	}
 );
 
 const getAllowedPatternsDependants = ( select ) => ( state, rootClientId ) => [
@@ -2401,23 +2374,30 @@ const getAllowedPatternsDependants = ( select ) => ( state, rootClientId ) => [
 export const __experimentalGetAllowedPatterns = createRegistrySelector(
 	( select ) => {
 		return createSelector( ( state, rootClientId = null ) => {
-			const {
-				getAllPatterns,
-				__experimentalGetParsedPattern: getParsedPattern,
-			} = unlock( select( STORE_NAME ) );
+			const { getAllPatterns } = unlock( select( STORE_NAME ) );
 			const patterns = getAllPatterns();
 			const { allowedBlockTypes } = getSettings( state );
-
 			const parsedPatterns = patterns
 				.filter( ( { inserter = true } ) => !! inserter )
-				.map( ( { name } ) => getParsedPattern( name ) );
+				.map( ( pattern ) => {
+					return {
+						...pattern,
+						get blocks() {
+							return getParsedPattern( pattern ).blocks;
+						},
+					};
+				} );
+
 			const availableParsedPatterns = parsedPatterns.filter(
-				( { blocks } ) =>
-					checkAllowListRecursive( blocks, allowedBlockTypes )
+				( pattern ) =>
+					checkAllowListRecursive(
+						getGrammar( pattern ),
+						allowedBlockTypes
+					)
 			);
 			const patternsAllowed = availableParsedPatterns.filter(
-				( { blocks } ) =>
-					blocks.every( ( { name } ) =>
+				( pattern ) =>
+					getGrammar( pattern ).every( ( { blockName: name } ) =>
 						canInsertBlockType( state, name, rootClientId )
 					)
 			);
@@ -2858,7 +2838,7 @@ export function __unstableHasActiveBlockOverlayActive( state, clientId ) {
 
 	// In zoom-out mode, the block overlay is always active for section level blocks.
 	if ( editorMode === 'zoom-out' ) {
-		const { sectionRootClientId } = unlock( getSettings( state ) );
+		const sectionRootClientId = getSectionRootClientId( state );
 		if ( sectionRootClientId ) {
 			const sectionClientIds = getBlockOrder(
 				state,
@@ -2951,7 +2931,8 @@ export const getBlockEditingMode = createRegistrySelector(
 			// sections.
 			const editorMode = __unstableGetEditorMode( state );
 			if ( editorMode === 'zoom-out' ) {
-				const { sectionRootClientId } = unlock( getSettings( state ) );
+				const sectionRootClientId = getSectionRootClientId( state );
+
 				if ( clientId === '' /* ROOT_CONTAINER_CLIENT_ID */ ) {
 					return sectionRootClientId ? 'disabled' : 'contentOnly';
 				}

package/src/store/utils.js

@@ -1,3 +1,9 @@
+/**
+ * WordPress dependencies
+ */
+import { parse } from '@wordpress/blocks';
+import { parse as grammarParse } from '@wordpress/block-serialization-default-parser';
+
 /**
  * Internal dependencies
  */
@@ -7,6 +13,50 @@ import { STORE_NAME } from './constants';
 
 export const withRootClientIdOptionKey = Symbol( 'withRootClientId' );
 
+const parsedPatternCache = new WeakMap();
+const grammarMapCache = new WeakMap();
+
+function parsePattern( pattern ) {
+	const blocks = parse( pattern.content, {
+		__unstableSkipMigrationLogs: true,
+	} );
+	if ( blocks.length === 1 ) {
+		blocks[ 0 ].attributes = {
+			...blocks[ 0 ].attributes,
+			metadata: {
+				...( blocks[ 0 ].attributes.metadata || {} ),
+				categories: pattern.categories,
+				patternName: pattern.name,
+				name: blocks[ 0 ].attributes.metadata?.name || pattern.title,
+			},
+		};
+	}
+	return {
+		...pattern,
+		blocks,
+	};
+}
+
+export function getParsedPattern( pattern ) {
+	let parsedPattern = parsedPatternCache.get( pattern );
+	if ( ! parsedPattern ) {
+		parsedPattern = parsePattern( pattern );
+		parsedPatternCache.set( pattern, parsedPattern );
+	}
+	return parsedPattern;
+}
+
+export function getGrammar( pattern ) {
+	let grammarMap = grammarMapCache.get( pattern );
+	if ( ! grammarMap ) {
+		grammarMap = grammarParse( pattern.content );
+		// Block names are null only at the top level for whitespace.
+		grammarMap = grammarMap.filter( ( block ) => block.blockName !== null );
+		grammarMapCache.set( pattern, grammarMap );
+	}
+	return grammarMap;
+}
+
 export const checkAllowList = ( list, item, defaultResult = null ) => {
 	if ( typeof list === 'boolean' ) {
 		return list;

package/src/utils/block-bindings.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch, useRegistry } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -9,10 +9,14 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { store as blockEditorStore } from '../store';
 import { useBlockEditContext } from '../components/block-edit';
 
+function isObjectEmpty( object ) {
+	return ! object || Object.keys( object ).length === 0;
+}
+
 export function useBlockBindingsUtils() {
 	const { clientId } = useBlockEditContext();
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
-	const { getBlockAttributes } = useSelect( blockEditorStore );
+	const { getBlockAttributes } = useRegistry().select( blockEditorStore );
 
 	/**
 	 * Updates the value of the bindings connected to block attributes.
@@ -44,8 +48,10 @@ export function useBlockBindingsUtils() {
 	 * ```
 	 */
 	const updateBlockBindings = ( bindings ) => {
-		const { metadata } = getBlockAttributes( clientId );
-		const newBindings = { ...metadata?.bindings };
+		const { metadata: { bindings: currentBindings, ...metadata } = {} } =
+			getBlockAttributes( clientId );
+		const newBindings = { ...currentBindings };
+
 		Object.entries( bindings ).forEach( ( [ attribute, binding ] ) => {
 			if ( ! binding && newBindings[ attribute ] ) {
 				delete newBindings[ attribute ];
@@ -59,15 +65,12 @@ export function useBlockBindingsUtils() {
 			bindings: newBindings,
 		};
 
-		if ( Object.keys( newMetadata.bindings ).length === 0 ) {
+		if ( isObjectEmpty( newMetadata.bindings ) ) {
 			delete newMetadata.bindings;
 		}
 
 		updateBlockAttributes( clientId, {
-			metadata:
-				Object.keys( newMetadata ).length === 0
-					? undefined
-					: newMetadata,
+			metadata: isObjectEmpty( newMetadata ) ? undefined : newMetadata,
 		} );
 	};
 
@@ -83,14 +86,10 @@ export function useBlockBindingsUtils() {
 	 * ```
 	 */
 	const removeAllBlockBindings = () => {
-		const { metadata } = getBlockAttributes( clientId );
-		const newMetadata = { ...metadata };
-		delete newMetadata.bindings;
+		const { metadata: { bindings, ...metadata } = {} } =
+			getBlockAttributes( clientId );
 		updateBlockAttributes( clientId, {
-			metadata:
-				Object.keys( newMetadata ).length === 0
-					? undefined
-					: newMetadata,
+			metadata: isObjectEmpty( metadata ) ? undefined : metadata,
 		} );
 	};
 

package/src/utils/dom.js

@@ -57,3 +57,120 @@ export function getBlockClientId( node ) {
 
 	return blockNode.id.slice( 'block-'.length );
 }
+
+/**
+ * Calculates the union of two rectangles.
+ *
+ * @param {DOMRect} rect1 First rectangle.
+ * @param {DOMRect} rect2 Second rectangle.
+ * @return {DOMRect} Union of the two rectangles.
+ */
+export function rectUnion( rect1, rect2 ) {
+	const left = Math.min( rect1.left, rect2.left );
+	const right = Math.max( rect1.right, rect2.right );
+	const bottom = Math.max( rect1.bottom, rect2.bottom );
+	const top = Math.min( rect1.top, rect2.top );
+
+	return new window.DOMRectReadOnly( left, top, right - left, bottom - top );
+}
+
+/**
+ * Returns whether an element is visible.
+ *
+ * @param {Element} element Element.
+ * @return {boolean} Whether the element is visible.
+ */
+function isElementVisible( element ) {
+	const viewport = element.ownerDocument.defaultView;
+	if ( ! viewport ) {
+		return false;
+	}
+
+	// Check for <VisuallyHidden> component.
+	if ( element.classList.contains( 'components-visually-hidden' ) ) {
+		return false;
+	}
+
+	const bounds = element.getBoundingClientRect();
+	if ( bounds.width === 0 || bounds.height === 0 ) {
+		return false;
+	}
+
+	// Older browsers, e.g. Safari < 17.4 may not support the `checkVisibility` method.
+	if ( element.checkVisibility ) {
+		return element.checkVisibility?.( {
+			opacityProperty: true,
+			contentVisibilityAuto: true,
+			visibilityProperty: true,
+		} );
+	}
+
+	const style = viewport.getComputedStyle( element );
+
+	if (
+		style.display === 'none' ||
+		style.visibility === 'hidden' ||
+		style.opacity === '0'
+	) {
+		return false;
+	}
+
+	return true;
+}
+
+/**
+ * Returns the rect of the element including all visible nested elements.
+ *
+ * Visible nested elements, including elements that overflow the parent, are
+ * taken into account.
+ *
+ * This function is useful for calculating the visible area of a block that
+ * contains nested elements that overflow the block, e.g. the Navigation block,
+ * which can contain overflowing Submenu blocks.
+ *
+ * The returned rect represents the full extent of the element and its visible
+ * children, which may extend beyond the viewport.
+ *
+ * @param {Element} element Element.
+ * @return {DOMRect} Bounding client rect of the element and its visible children.
+ */
+export function getVisibleElementBounds( element ) {
+	const viewport = element.ownerDocument.defaultView;
+	if ( ! viewport ) {
+		return new window.DOMRectReadOnly();
+	}
+
+	let bounds = element.getBoundingClientRect();
+
+	const stack = [ element ];
+	let currentElement;
+
+	while ( ( currentElement = stack.pop() ) ) {
+		for ( const child of currentElement.children ) {
+			if ( isElementVisible( child ) ) {
+				const childBounds = child.getBoundingClientRect();
+				bounds = rectUnion( bounds, childBounds );
+				stack.push( child );
+			}
+		}
+	}
+
+	/*
+	 * Take into account the outer horizontal limits of the container in which
+	 * an element is supposed to be "visible". For example, if an element is
+	 * positioned -10px to the left of the window x value (0), this function
+	 * discounts the negative overhang because it's not visible and therefore
+	 * not to be counted in the visibility calculations. Top and bottom values
+	 * are not accounted for to accommodate vertical scroll.
+	 */
+	const left = Math.max( bounds.left, 0 );
+	const right = Math.min( bounds.right, viewport.innerWidth );
+	bounds = new window.DOMRectReadOnly(
+		left,
+		bounds.top,
+		right - left,
+		bounds.height
+	);
+
+	return bounds;
+}

package/src/utils/get-font-styles-and-weights.js

@@ -79,7 +79,10 @@ export function getFontStylesAndWeights( fontFamilyFaces ) {
 
 	fontFamilyFaces?.forEach( ( face ) => {
 		// Check for variable font by looking for a space in the font weight value. e.g. "100 900"
-		if ( /\s/.test( face.fontWeight.trim() ) ) {
+		if (
+			'string' === typeof face.fontWeight &&
+			/\s/.test( face.fontWeight.trim() )
+		) {
 			isVariableFont = true;
 
 			// Find font weight start and end values.
@@ -105,11 +108,15 @@ export function getFontStylesAndWeights( fontFamilyFaces ) {
 		}
 
 		// Format font style and weight values.
-		const fontWeight = formatFontWeight( face.fontWeight );
+		const fontWeight = formatFontWeight(
+			'number' === typeof face.fontWeight
+				? face.fontWeight.toString()
+				: face.fontWeight
+		);
 		const fontStyle = formatFontStyle( face.fontStyle );
 
 		// Create font style and font weight lists without duplicates.
-		if ( fontStyle ) {
+		if ( fontStyle && Object.keys( fontStyle ).length ) {
 			if (
 				! fontStyles.some(
 					( style ) => style.value === fontStyle.value
@@ -118,7 +125,8 @@ export function getFontStylesAndWeights( fontFamilyFaces ) {
 				fontStyles.push( fontStyle );
 			}
 		}
-		if ( fontWeight ) {
+
+		if ( fontWeight && Object.keys( fontWeight ).length ) {
 			if (
 				! fontWeights.some(
 					( weight ) => weight.value === fontWeight.value