@wordpress/block-editor 14.5.0 → 14.7.0

package/src/store/reducer.js

@@ -8,6 +8,7 @@ import fastDeepEqual from 'fast-deep-equal/es6';
  */
 import { pipe } from '@wordpress/compose';
 import { combineReducers, select } from '@wordpress/data';
+import deprecated from '@wordpress/deprecated';
 import { store as blocksStore } from '@wordpress/blocks';
 /**
  * Internal dependencies
@@ -1660,17 +1661,30 @@ export function template( state = { isValid: true }, action ) {
  */
 export function settings( state = SETTINGS_DEFAULTS, action ) {
 	switch ( action.type ) {
-		case 'UPDATE_SETTINGS':
-			if ( action.reset ) {
-				return {
-					...SETTINGS_DEFAULTS,
-					...action.settings,
-				};
-			}
-			return {
-				...state,
-				...action.settings,
-			};
+		case 'UPDATE_SETTINGS': {
+			const updatedSettings = action.reset
+				? {
+						...SETTINGS_DEFAULTS,
+						...action.settings,
+				  }
+				: {
+						...state,
+						...action.settings,
+				  };
+
+			Object.defineProperty( updatedSettings, '__unstableIsPreviewMode', {
+				get() {
+					deprecated( '__unstableIsPreviewMode', {
+						since: '6.8',
+						alternative: 'isPreviewMode',
+					} );
+
+					return this.isPreviewMode;
+				},
+			} );
+
+			return updatedSettings;
+		}
 	}
 
 	return state;

package/src/store/selectors.js

@@ -41,6 +41,7 @@ import {
 	getSectionRootClientId,
 	isSectionBlock,
 	getParentSectionBlock,
+	isZoomOut,
 } from './private-selectors';
 
 /**
@@ -541,6 +542,39 @@ export function getSelectedBlockClientId( state ) {
  *
  * @param {Object} state Global application state.
  *
+ * @example
+ *
+ *```js
+ * import { select } from '@wordpress/data'
+ * import { store as blockEditorStore } from '@wordpress/block-editor'
+ *
+ * // Set initial active block client ID
+ * let activeBlockClientId = null
+ *
+ * const getActiveBlockData = () => {
+ * 	const activeBlock = select(blockEditorStore).getSelectedBlock()
+ *
+ * 	if (activeBlock && activeBlock.clientId !== activeBlockClientId) {
+ * 		activeBlockClientId = activeBlock.clientId
+ *
+ * 		// Get active block name and attributes
+ * 		const activeBlockName = activeBlock.name
+ * 		const activeBlockAttributes = activeBlock.attributes
+ *
+ * 		// Log active block name and attributes
+ * 		console.log(activeBlockName, activeBlockAttributes)
+ * 		}
+ * 	}
+ *
+ * 	// Subscribe to changes in the editor
+ * 	// wp.data.subscribe(() => {
+ * 		// getActiveBlockData()
+ * 	// })
+ *
+ * 	// Update active block data on click
+ * 	// onclick="getActiveBlockData()"
+ *```
+ *
  * @return {?Object} Selected block.
  */
 export function getSelectedBlock( state ) {
@@ -1552,12 +1586,18 @@ export function getTemplateLock( state, rootClientId ) {
  * @param {string|Object} blockNameOrType The block type object, e.g., the response
  *                                        from the block directory; or a string name of
  *                                        an installed block type, e.g.' core/paragraph'.
+ * @param {Set}           checkedBlocks   Set of block names that have already been checked.
  *
  * @return {boolean} Whether the given block type is allowed to be inserted.
  */
-const isBlockVisibleInTheInserter = ( state, blockNameOrType ) => {
+const isBlockVisibleInTheInserter = (
+	state,
+	blockNameOrType,
+	checkedBlocks = new Set()
+) => {
 	let blockType;
 	let blockName;
+
 	if ( blockNameOrType && 'object' === typeof blockNameOrType ) {
 		blockType = blockNameOrType;
 		blockName = blockNameOrType.name;
@@ -1565,6 +1605,7 @@ const isBlockVisibleInTheInserter = ( state, blockNameOrType ) => {
 		blockType = getBlockType( blockNameOrType );
 		blockName = blockNameOrType;
 	}
+
 	if ( ! blockType ) {
 		return false;
 	}
@@ -1580,17 +1621,29 @@ const isBlockVisibleInTheInserter = ( state, blockNameOrType ) => {
 		return false;
 	}
 
+	if ( checkedBlocks.has( blockName ) ) {
+		return false;
+	}
+
+	checkedBlocks.add( blockName );
+
 	// If parent blocks are not visible, child blocks should be hidden too.
-	if ( !! blockType.parent?.length ) {
+	if ( Array.isArray( blockType.parent ) ) {
 		return blockType.parent.some(
 			( name ) =>
-				isBlockVisibleInTheInserter( state, name ) ||
+				( blockName !== name &&
+					isBlockVisibleInTheInserter(
+						state,
+						name,
+						checkedBlocks
+					) ) ||
 				// Exception for blocks with post-content parent,
 				// the root level is often consider as "core/post-content".
 				// This exception should only apply to the post editor ideally though.
 				name === 'core/post-content'
 		);
 	}
+
 	return true;
 };
 
@@ -1741,10 +1794,12 @@ const canInsertBlockTypeUnmemoized = (
  *
  * @return {boolean} Whether the given block type is allowed to be inserted.
  */
-export const canInsertBlockType = createSelector(
-	canInsertBlockTypeUnmemoized,
-	( state, blockName, rootClientId ) =>
-		getInsertBlockTypeDependants( state, rootClientId )
+export const canInsertBlockType = createRegistrySelector( ( select ) =>
+	createSelector(
+		canInsertBlockTypeUnmemoized,
+		( state, blockName, rootClientId ) =>
+			getInsertBlockTypeDependants( select )( state, rootClientId )
+	)
 );
 
 /**
@@ -2171,7 +2226,7 @@ export const getInserterItems = createRegistrySelector( ( select ) =>
 			unlock( select( STORE_NAME ) ).getReusableBlocks(),
 			state.blocks.order,
 			state.preferences.insertUsage,
-			...getInsertBlockTypeDependants( state, rootClientId ),
+			...getInsertBlockTypeDependants( select )( state, rootClientId ),
 		]
 	)
 );
@@ -2202,44 +2257,51 @@ export const getInserterItems = createRegistrySelector( ( select ) =>
  *                                          this item.
  * @property {number}          frecency     Heuristic that combines frequency and recency.
  */
-export const getBlockTransformItems = createSelector(
-	( state, blocks, rootClientId = null ) => {
-		const normalizedBlocks = Array.isArray( blocks ) ? blocks : [ blocks ];
-		const buildBlockTypeTransformItem = buildBlockTypeItem( state, {
-			buildScope: 'transform',
-		} );
-		const blockTypeTransformItems = getBlockTypes()
-			.filter( ( blockType ) =>
-				canIncludeBlockTypeInInserter( state, blockType, rootClientId )
-			)
-			.map( buildBlockTypeTransformItem );
+export const getBlockTransformItems = createRegistrySelector( ( select ) =>
+	createSelector(
+		( state, blocks, rootClientId = null ) => {
+			const normalizedBlocks = Array.isArray( blocks )
+				? blocks
+				: [ blocks ];
+			const buildBlockTypeTransformItem = buildBlockTypeItem( state, {
+				buildScope: 'transform',
+			} );
+			const blockTypeTransformItems = getBlockTypes()
+				.filter( ( blockType ) =>
+					canIncludeBlockTypeInInserter(
+						state,
+						blockType,
+						rootClientId
+					)
+				)
+				.map( buildBlockTypeTransformItem );
 
-		const itemsByName = Object.fromEntries(
-			Object.entries( blockTypeTransformItems ).map( ( [ , value ] ) => [
-				value.name,
-				value,
-			] )
-		);
+			const itemsByName = Object.fromEntries(
+				Object.entries( blockTypeTransformItems ).map(
+					( [ , value ] ) => [ value.name, value ]
+				)
+			);
 
-		const possibleTransforms = getPossibleBlockTransformations(
-			normalizedBlocks
-		).reduce( ( accumulator, block ) => {
-			if ( itemsByName[ block?.name ] ) {
-				accumulator.push( itemsByName[ block.name ] );
-			}
-			return accumulator;
-		}, [] );
-		return orderBy(
-			possibleTransforms,
-			( block ) => itemsByName[ block.name ].frecency,
-			'desc'
-		);
-	},
-	( state, blocks, rootClientId ) => [
-		getBlockTypes(),
-		state.preferences.insertUsage,
-		...getInsertBlockTypeDependants( state, rootClientId ),
-	]
+			const possibleTransforms = getPossibleBlockTransformations(
+				normalizedBlocks
+			).reduce( ( accumulator, block ) => {
+				if ( itemsByName[ block?.name ] ) {
+					accumulator.push( itemsByName[ block.name ] );
+				}
+				return accumulator;
+			}, [] );
+			return orderBy(
+				possibleTransforms,
+				( block ) => itemsByName[ block.name ].frecency,
+				'desc'
+			);
+		},
+		( state, blocks, rootClientId ) => [
+			getBlockTypes(),
+			state.preferences.insertUsage,
+			...getInsertBlockTypeDependants( select )( state, rootClientId ),
+		]
+	)
 );
 
 /**
@@ -2307,7 +2369,7 @@ export const getAllowedBlocks = createRegistrySelector( ( select ) =>
 		( state, rootClientId ) => [
 			getBlockTypes(),
 			unlock( select( STORE_NAME ) ).getReusableBlocks(),
-			...getInsertBlockTypeDependants( state, rootClientId ),
+			...getInsertBlockTypeDependants( select )( state, rootClientId ),
 		]
 	)
 );
@@ -2382,7 +2444,7 @@ export const __experimentalGetParsedPattern = createRegistrySelector(
 
 const getAllowedPatternsDependants = ( select ) => ( state, rootClientId ) => [
 	...getAllPatternsDependants( select )( state ),
-	...getInsertBlockTypeDependants( state, rootClientId ),
+	...getInsertBlockTypeDependants( select )( state, rootClientId ),
 ];
 
 const patternsWithParsedBlocks = new WeakMap();
@@ -2711,8 +2773,11 @@ export function isNavigationMode( state ) {
  * @return {string} the editor mode.
  */
 export const __unstableGetEditorMode = createRegistrySelector(
-	( select ) => () => {
-		return select( preferencesStore ).get( 'core', 'editorTool' );
+	( select ) => ( state ) => {
+		return (
+			state.settings.editorTool ??
+			select( preferencesStore ).get( 'core', 'editorTool' )
+		);
 	}
 );
 
@@ -2884,10 +2949,8 @@ export function __unstableHasActiveBlockOverlayActive( state, clientId ) {
 		return true;
 	}
 
-	const editorMode = __unstableGetEditorMode( state );
-
 	// In zoom-out mode, the block overlay is always active for section level blocks.
-	if ( editorMode === 'zoom-out' ) {
+	if ( isZoomOut( state ) ) {
 		const sectionRootClientId = getSectionRootClientId( state );
 		if ( sectionRootClientId ) {
 			const sectionClientIds = getBlockOrder(
@@ -2986,8 +3049,7 @@ export const getBlockEditingMode = createRegistrySelector(
 			// In zoom-out mode, override the behavior set by
 			// __unstableSetBlockEditingMode to only allow editing the top-level
 			// sections.
-			const editorMode = __unstableGetEditorMode( state );
-			if ( editorMode === 'zoom-out' ) {
+			if ( isZoomOut( state ) ) {
 				const sectionRootClientId = getSectionRootClientId( state );
 
 				if ( clientId === '' /* ROOT_CONTAINER_CLIENT_ID */ ) {
@@ -3009,6 +3071,7 @@ export const getBlockEditingMode = createRegistrySelector(
 				return 'disabled';
 			}
 
+			const editorMode = __unstableGetEditorMode( state );
 			if ( editorMode === 'navigation' ) {
 				const sectionRootClientId = getSectionRootClientId( state );
 

package/src/store/test/actions.js

@@ -1125,6 +1125,47 @@ describe( 'actions', () => {
 		} );
 	} );
 
+	describe( 'updateSettings', () => {
+		it( 'warns when setting the deprecated __unstableIsPreviewMode property and sets the stable property instead', () => {
+			const consoleWarn = jest
+				.spyOn( global.console, 'warn' )
+				.mockImplementation();
+
+			const store = createRegistry().registerStore(
+				blockEditorStoreName,
+				{
+					actions,
+					selectors,
+					reducer,
+				}
+			);
+
+			store.dispatch(
+				updateSettings( {
+					__unstableIsPreviewMode: true,
+				} )
+			);
+
+			expect( consoleWarn ).toHaveBeenCalledWith(
+				"__unstableIsPreviewMode argument in wp.data.dispatch('core/block-editor').updateSettings is deprecated since version 6.8. Please use isPreviewMode instead."
+			);
+
+			consoleWarn.mockClear();
+
+			expect( store.getState().settings.__unstableIsPreviewMode ).toBe(
+				true
+			);
+
+			expect( store.getState().settings.isPreviewMode ).toBe( true );
+
+			expect( consoleWarn ).toHaveBeenCalledWith(
+				'__unstableIsPreviewMode is deprecated since version 6.8. Please use isPreviewMode instead.'
+			);
+
+			consoleWarn.mockRestore();
+		} );
+	} );
+
 	describe( 'registerInserterMediaCategory', () => {
 		describe( 'should log errors when invalid', () => {
 			it( 'valid object', () => {

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

@@ -292,6 +292,11 @@ describe( 'private selectors', () => {
 				'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f': {},
 			},
 		};
+		getEnabledClientIdsTree.registry = {
+			select: jest.fn( () => ( {
+				__unstableGetEditorMode: () => 'edit',
+			} ) ),
+		};
 
 		it( 'should return tree containing only clientId and innerBlocks', () => {
 			const state = {

package/src/store/test/reducer.js

@@ -32,6 +32,7 @@ import {
 	insertionPoint,
 	template,
 	blockListSettings,
+	settings,
 	lastBlockAttributesChange,
 	lastBlockInserted,
 	blockEditingModes,
@@ -3070,6 +3071,28 @@ describe( 'state', () => {
 		} );
 	} );
 
+	describe( 'settings', () => {
+		it( 'should warn about __unstableIsPreviewMode deprecation', () => {
+			const consoleWarn = jest
+				.spyOn( global.console, 'warn' )
+				.mockImplementation();
+
+			const settingsObject = settings( undefined, {
+				type: 'UPDATE_SETTINGS',
+				reset: true,
+			} );
+
+			expect( settingsObject.__unstableIsPreviewMode ).toBeDefined();
+			expect( settingsObject.isPreviewMode ).toBeDefined();
+
+			expect( consoleWarn ).toHaveBeenCalledWith(
+				'__unstableIsPreviewMode is deprecated since version 6.8. Please use isPreviewMode instead.'
+			);
+
+			consoleWarn.mockRestore();
+		} );
+	} );
+
 	describe( 'blockListSettings', () => {
 		it( 'should add new settings', () => {
 			const original = deepFreeze( {} );

package/src/store/utils.js

@@ -110,14 +110,15 @@ export const getAllPatternsDependants = ( select ) => ( state ) => {
 	];
 };
 
-export function getInsertBlockTypeDependants( state, rootClientId ) {
-	return [
-		state.blockListSettings[ rootClientId ],
-		state.blocks.byClientId.get( rootClientId ),
-		state.settings.allowedBlockTypes,
-		state.settings.templateLock,
-		state.blockEditingModes,
-		state.editorMode,
-		getSectionRootClientId( state ),
-	];
-}
+export const getInsertBlockTypeDependants =
+	( select ) => ( state, rootClientId ) => {
+		return [
+			state.blockListSettings[ rootClientId ],
+			state.blocks.byClientId.get( rootClientId ),
+			state.settings.allowedBlockTypes,
+			state.settings.templateLock,
+			state.blockEditingModes,
+			select( STORE_NAME ).__unstableGetEditorMode( state ),
+			getSectionRootClientId( state ),
+		];
+	};

package/src/utils/dom.js

@@ -119,38 +119,63 @@ function isElementVisible( element ) {
 }
 
 /**
- * Returns the rect of the element including all visible nested elements.
+ * Checks if the element is scrollable.
  *
- * 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.
+ * @param {Element} element Element.
+ * @return {boolean} True if the element is scrollable.
+ */
+function isScrollable( element ) {
+	const style = window.getComputedStyle( element );
+	return (
+		style.overflowX === 'auto' ||
+		style.overflowX === 'scroll' ||
+		style.overflowY === 'auto' ||
+		style.overflowY === 'scroll'
+	);
+}
+
+export const WITH_OVERFLOW_ELEMENT_BLOCKS = [ 'core/navigation' ];
+/**
+ * Returns the bounding rectangle of an element, with special handling for blocks
+ * that have visible overflowing children (defined in WITH_OVERFLOW_ELEMENT_BLOCKS).
  *
+ * For blocks like Navigation that can have overflowing elements (e.g. submenus),
+ * this function calculates the combined bounds of both the parent and its visible
+ * children. The returned rect may extend beyond the viewport.
  * 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 ) {
+export function getElementBounds( element ) {
 	const viewport = element.ownerDocument.defaultView;
+
 	if ( ! viewport ) {
 		return new window.DOMRectReadOnly();
 	}
 
 	let bounds = element.getBoundingClientRect();
+	const dataType = element.getAttribute( 'data-type' );
 
-	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 );
+	/*
+	 * For blocks with overflowing elements (like Navigation), include the bounds
+	 * of visible children that extend beyond the parent container.
+	 */
+	if ( dataType && WITH_OVERFLOW_ELEMENT_BLOCKS.includes( dataType ) ) {
+		const stack = [ element ];
+		let currentElement;
+
+		while ( ( currentElement = stack.pop() ) ) {
+			// Children won’t affect bounds unless the element is not scrollable.
+			if ( ! isScrollable( currentElement ) ) {
+				for ( const child of currentElement.children ) {
+					if ( isElementVisible( child ) ) {
+						const childBounds = child.getBoundingClientRect();
+						bounds = rectUnion( bounds, childBounds );
+						stack.push( child );
+					}
+				}
 			}
 		}
 	}

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { _x, __, sprintf } from '@wordpress/i18n';
+import { _x, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -173,7 +173,7 @@ export function getFontStylesAndWeights( fontFamilyFaces ) {
 					? weightName
 					: sprintf(
 							/* translators: 1: Font weight name. 2: Font style name. */
-							__( '%1$s %2$s' ),
+							_x( '%1$s %2$s', 'font' ),
 							weightName,
 							styleName
 					  );