@wordpress/block-editor 14.6.0 → 14.7.1-next.082ed6819.0

package/src/hooks/typography.js

@@ -27,12 +27,12 @@ function omit( object, keys ) {
 	);
 }
 
-const LETTER_SPACING_SUPPORT_KEY = 'typography.__experimentalLetterSpacing';
-const TEXT_TRANSFORM_SUPPORT_KEY = 'typography.__experimentalTextTransform';
-const TEXT_DECORATION_SUPPORT_KEY = 'typography.__experimentalTextDecoration';
+const LETTER_SPACING_SUPPORT_KEY = 'typography.letterSpacing';
+const TEXT_TRANSFORM_SUPPORT_KEY = 'typography.textTransform';
+const TEXT_DECORATION_SUPPORT_KEY = 'typography.textDecoration';
 const TEXT_COLUMNS_SUPPORT_KEY = 'typography.textColumns';
-const FONT_STYLE_SUPPORT_KEY = 'typography.__experimentalFontStyle';
-const FONT_WEIGHT_SUPPORT_KEY = 'typography.__experimentalFontWeight';
+const FONT_STYLE_SUPPORT_KEY = 'typography.fontStyle';
+const FONT_WEIGHT_SUPPORT_KEY = 'typography.fontWeight';
 const WRITING_MODE_SUPPORT_KEY = 'typography.__experimentalWritingMode';
 export const TYPOGRAPHY_SUPPORT_KEY = 'typography';
 export const TYPOGRAPHY_SUPPORT_KEYS = [
@@ -133,7 +133,7 @@ export function TypographyPanel( { clientId, name, setAttributes, settings } ) {
 
 	const defaultControls = getBlockSupport( name, [
 		TYPOGRAPHY_SUPPORT_KEY,
-		'__experimentalDefaultControls',
+		'defaultControls',
 	] );
 
 	return (

package/src/hooks/utils.js

@@ -124,7 +124,7 @@ export function shouldSkipSerialization(
 	feature
 ) {
 	const support = getBlockSupport( blockNameOrType, featureSet );
-	const skipSerialization = support?.__experimentalSkipSerialization;
+	const skipSerialization = support?.skipSerialization;
 
 	if ( Array.isArray( skipSerialization ) ) {
 		return skipSerialization.includes( feature );
@@ -562,8 +562,13 @@ export function createBlockEditFilter( features ) {
 	addFilter( 'editor.BlockEdit', 'core/editor/hooks', withBlockEditHooks );
 }
 
-function BlockProps( { index, useBlockProps, setAllWrapperProps, ...props } ) {
-	const wrapperProps = useBlockProps( props );
+function BlockProps( {
+	index,
+	useBlockProps: hook,
+	setAllWrapperProps,
+	...props
+} ) {
+	const wrapperProps = hook( props );
 	const setWrapperProps = ( next ) =>
 		setAllWrapperProps( ( prev ) => {
 			const nextAll = [ ...prev ];

package/src/layouts/flex.js

@@ -66,24 +66,27 @@ export default {
 		onChange,
 		layoutBlockSupport = {},
 	} ) {
-		const { allowOrientation = true } = layoutBlockSupport;
+		const { allowOrientation = true, allowJustification = true } =
+			layoutBlockSupport;
 		return (
 			<>
 				<Flex>
-					<FlexItem>
-						<FlexLayoutJustifyContentControl
-							layout={ layout }
-							onChange={ onChange }
-						/>
-					</FlexItem>
-					<FlexItem>
-						{ allowOrientation && (
+					{ allowJustification && (
+						<FlexItem>
+							<FlexLayoutJustifyContentControl
+								layout={ layout }
+								onChange={ onChange }
+							/>
+						</FlexItem>
+					) }
+					{ allowOrientation && (
+						<FlexItem>
 							<OrientationControl
 								layout={ layout }
 								onChange={ onChange }
 							/>
-						) }
-					</FlexItem>
+						</FlexItem>
+					) }
 				</Flex>
 				<FlexWrapControl layout={ layout } onChange={ onChange } />
 			</>
@@ -94,17 +97,22 @@ export default {
 		onChange,
 		layoutBlockSupport,
 	} ) {
-		if ( layoutBlockSupport?.allowSwitching ) {
+		const { allowVerticalAlignment = true, allowJustification = true } =
+			layoutBlockSupport;
+
+		if ( ! allowJustification && ! allowVerticalAlignment ) {
 			return null;
 		}
-		const { allowVerticalAlignment = true } = layoutBlockSupport;
+
 		return (
 			<BlockControls group="block" __experimentalShareWithChildBlocks>
-				<FlexLayoutJustifyContentControl
-					layout={ layout }
-					onChange={ onChange }
-					isToolbar
-				/>
+				{ allowJustification && (
+					<FlexLayoutJustifyContentControl
+						layout={ layout }
+						onChange={ onChange }
+						isToolbar
+					/>
+				) }
 				{ allowVerticalAlignment && (
 					<FlexLayoutVerticalAlignmentControl
 						layout={ layout }

package/src/private-apis.js

@@ -13,11 +13,11 @@ import {
 	normalizeString,
 } from './components/inserter/search-items';
 import { PrivateListView } from './components/list-view';
-import BlockInfo from './components/block-info-slot-fill';
 import { useHasBlockToolbar } from './components/block-toolbar/use-has-block-toolbar';
 import { cleanEmptyObject } from './hooks/utils';
 import BlockQuickNavigation from './components/block-quick-navigation';
 import { LayoutStyle } from './components/block-list/layout';
+import BlockManager from './components/block-manager';
 import { BlockRemovalWarningModal } from './components/block-removal-warning-modal';
 import {
 	setBackgroundStyleDefaults,
@@ -48,8 +48,8 @@ import { PrivatePublishDateTimePicker } from './components/publish-date-time-pic
 import useSpacingSizes from './components/spacing-sizes-control/hooks/use-spacing-sizes';
 import useBlockDisplayTitle from './components/block-title/use-block-display-title';
 import TabbedSidebar from './components/tabbed-sidebar';
-import __unstableCommentIconFill from './components/collab/block-comment-icon-slot';
-import __unstableCommentIconToolbarFill from './components/collab/block-comment-icon-toolbar-slot';
+import CommentIconSlotFill from './components/collab/block-comment-icon-slot';
+import CommentIconToolbarSlotFill from './components/collab/block-comment-icon-toolbar-slot';
 /**
  * Private @wordpress/block-editor APIs.
  */
@@ -66,11 +66,11 @@ lock( privateApis, {
 	normalizeString,
 	PrivateListView,
 	ResizableBoxPopover,
-	BlockInfo,
 	useHasBlockToolbar,
 	cleanEmptyObject,
 	BlockQuickNavigation,
 	LayoutStyle,
+	BlockManager,
 	BlockRemovalWarningModal,
 	useLayoutClasses,
 	useLayoutStyles,
@@ -95,6 +95,6 @@ lock( privateApis, {
 	__unstableBlockStyleVariationOverridesWithConfig,
 	setBackgroundStyleDefaults,
 	sectionRootClientIdKey,
-	__unstableCommentIconFill,
-	__unstableCommentIconToolbarFill,
+	CommentIconSlotFill,
+	CommentIconToolbarSlotFill,
 } );

package/src/store/private-selectors.js

@@ -109,17 +109,16 @@ function getEnabledClientIdsTreeUnmemoized( state, rootClientId ) {
  *
  * @return {Object[]} Tree of block objects with only clientID and innerBlocks set.
  */
-export const getEnabledClientIdsTree = createSelector(
-	getEnabledClientIdsTreeUnmemoized,
-	( state ) => [
+export const getEnabledClientIdsTree = createRegistrySelector( ( select ) =>
+	createSelector( getEnabledClientIdsTreeUnmemoized, ( state ) => [
 		state.blocks.order,
 		state.blockEditingModes,
 		state.settings.templateLock,
 		state.blockListSettings,
-		state.editorMode,
+		select( STORE_NAME ).__unstableGetEditorMode( state ),
 		state.zoomLevel,
 		getSectionRootClientId( state ),
-	]
+	] )
 );
 
 /**
@@ -317,7 +316,7 @@ export const hasAllowedPatterns = createRegistrySelector( ( select ) =>
 		},
 		( state, rootClientId ) => [
 			...getAllPatternsDependants( select )( state ),
-			...getInsertBlockTypeDependants( state, rootClientId ),
+			...getInsertBlockTypeDependants( select )( state, rootClientId ),
 		]
 	)
 );
@@ -331,7 +330,7 @@ function mapUserPattern(
 		id: userPattern.id,
 		type: INSERTER_PATTERN_TYPES.user,
 		title: userPattern.title.raw,
-		categories: userPattern.wp_pattern_category.map( ( catId ) => {
+		categories: userPattern.wp_pattern_category?.map( ( catId ) => {
 			const category = __experimentalUserPatternCategories.find(
 				( { id } ) => id === catId
 			);

package/src/store/selectors.js

@@ -1794,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 )
+	)
 );
 
 /**
@@ -2224,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 ),
 		]
 	)
 );
@@ -2255,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 ),
+		]
+	)
 );
 
 /**
@@ -2360,7 +2369,7 @@ export const getAllowedBlocks = createRegistrySelector( ( select ) =>
 		( state, rootClientId ) => [
 			getBlockTypes(),
 			unlock( select( STORE_NAME ) ).getReusableBlocks(),
-			...getInsertBlockTypeDependants( state, rootClientId ),
+			...getInsertBlockTypeDependants( select )( state, rootClientId ),
 		]
 	)
 );
@@ -2435,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();
@@ -2764,8 +2773,14 @@ export function isNavigationMode( state ) {
  * @return {string} the editor mode.
  */
 export const __unstableGetEditorMode = createRegistrySelector(
-	( select ) => () => {
-		return select( preferencesStore ).get( 'core', 'editorTool' );
+	( select ) => ( state ) => {
+		if ( ! window?.__experimentalEditorWriteMode ) {
+			return 'edit';
+		}
+		return (
+			state.settings.editorTool ??
+			select( preferencesStore ).get( 'core', 'editorTool' )
+		);
 	}
 );
 

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/selectors.js

@@ -4615,68 +4615,97 @@ describe( 'getBlockEditingMode', () => {
 		).toBe( 'contentOnly' );
 	} );
 
-	it( 'in navigation mode, the root section container is default', () => {
-		dispatch( preferencesStore ).set( 'core', 'editorTool', 'navigation' );
-		expect(
-			getBlockEditingMode(
-				navigationModeStateWithRootSection,
-				'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337'
-			)
-		).toBe( 'default' );
-	} );
+	describe( 'navigation mode', () => {
+		const writeModeExperiment = window.__experimentalEditorWriteMode;
+		beforeAll( () => {
+			window.__experimentalEditorWriteMode = true;
+		} );
+		afterAll( () => {
+			window.__experimentalEditorWriteMode = writeModeExperiment;
+		} );
+		it( 'in navigation mode, the root section container is default', () => {
+			dispatch( preferencesStore ).set(
+				'core',
+				'editorTool',
+				'navigation'
+			);
+			expect(
+				getBlockEditingMode(
+					navigationModeStateWithRootSection,
+					'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337'
+				)
+			).toBe( 'default' );
+		} );
 
-	it( 'in navigation mode, anything outside the section container is disabled', () => {
-		dispatch( preferencesStore ).set( 'core', 'editorTool', 'navigation' );
-		expect(
-			getBlockEditingMode(
-				navigationModeStateWithRootSection,
-				'6cf70164-9097-4460-bcbf-200560546988'
-			)
-		).toBe( 'disabled' );
-	} );
+		it( 'in navigation mode, anything outside the section container is disabled', () => {
+			dispatch( preferencesStore ).set(
+				'core',
+				'editorTool',
+				'navigation'
+			);
+			expect(
+				getBlockEditingMode(
+					navigationModeStateWithRootSection,
+					'6cf70164-9097-4460-bcbf-200560546988'
+				)
+			).toBe( 'disabled' );
+		} );
 
-	it( 'in navigation mode, sections are contentOnly', () => {
-		dispatch( preferencesStore ).set( 'core', 'editorTool', 'navigation' );
-		expect(
-			getBlockEditingMode(
-				navigationModeStateWithRootSection,
-				'b26fc763-417d-4f01-b81c-2ec61e14a972'
-			)
-		).toBe( 'contentOnly' );
-		expect(
-			getBlockEditingMode(
-				navigationModeStateWithRootSection,
-				'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f'
-			)
-		).toBe( 'contentOnly' );
-	} );
+		it( 'in navigation mode, sections are contentOnly', () => {
+			dispatch( preferencesStore ).set(
+				'core',
+				'editorTool',
+				'navigation'
+			);
+			expect(
+				getBlockEditingMode(
+					navigationModeStateWithRootSection,
+					'b26fc763-417d-4f01-b81c-2ec61e14a972'
+				)
+			).toBe( 'contentOnly' );
+			expect(
+				getBlockEditingMode(
+					navigationModeStateWithRootSection,
+					'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f'
+				)
+			).toBe( 'contentOnly' );
+		} );
 
-	it( 'in navigation mode, blocks with content attributes within sections are contentOnly', () => {
-		dispatch( preferencesStore ).set( 'core', 'editorTool', 'navigation' );
-		hasContentRoleAttribute.mockReturnValueOnce( true );
-		expect(
-			getBlockEditingMode(
-				navigationModeStateWithRootSection,
-				'b3247f75-fd94-4fef-97f9-5bfd162cc416'
-			)
-		).toBe( 'contentOnly' );
+		it( 'in navigation mode, blocks with content attributes within sections are contentOnly', () => {
+			dispatch( preferencesStore ).set(
+				'core',
+				'editorTool',
+				'navigation'
+			);
+			hasContentRoleAttribute.mockReturnValueOnce( true );
+			expect(
+				getBlockEditingMode(
+					navigationModeStateWithRootSection,
+					'b3247f75-fd94-4fef-97f9-5bfd162cc416'
+				)
+			).toBe( 'contentOnly' );
 
-		hasContentRoleAttribute.mockReturnValueOnce( true );
-		expect(
-			getBlockEditingMode(
-				navigationModeStateWithRootSection,
-				'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c'
-			)
-		).toBe( 'contentOnly' );
-	} );
+			hasContentRoleAttribute.mockReturnValueOnce( true );
+			expect(
+				getBlockEditingMode(
+					navigationModeStateWithRootSection,
+					'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c'
+				)
+			).toBe( 'contentOnly' );
+		} );
 
-	it( 'in navigation mode, blocks without content attributes within sections are disabled', () => {
-		dispatch( preferencesStore ).set( 'core', 'editorTool', 'navigation' );
-		expect(
-			getBlockEditingMode(
-				navigationModeStateWithRootSection,
-				'9b9c5c3f-2e46-4f02-9e14-9fed515b958s'
-			)
-		).toBe( 'disabled' );
+		it( 'in navigation mode, blocks without content attributes within sections are disabled', () => {
+			dispatch( preferencesStore ).set(
+				'core',
+				'editorTool',
+				'navigation'
+			);
+			expect(
+				getBlockEditingMode(
+					navigationModeStateWithRootSection,
+					'9b9c5c3f-2e46-4f02-9e14-9fed515b958s'
+				)
+			).toBe( 'disabled' );
+		} );
 	} );
 } );

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/style.scss

@@ -10,6 +10,7 @@
 @import "./components/block-card/style.scss";
 @import "./components/block-compare/style.scss";
 @import "./components/block-draggable/style.scss";
+@import "./components/block-manager/style.scss";
 @import "./components/block-mover/style.scss";
 @import "./components/block-navigation/style.scss";
 @import "./components/block-patterns-list/style.scss";

package/src/utils/dom.js

@@ -134,23 +134,21 @@ function isScrollable( element ) {
 	);
 }
 
+export const WITH_OVERFLOW_ELEMENT_BLOCKS = [ 'core/navigation' ];
 /**
- * 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.
+ * 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 ) {
@@ -158,19 +156,26 @@ export function getVisibleElementBounds( element ) {
 	}
 
 	let bounds = element.getBoundingClientRect();
-	const stack = [ element ];
-	let currentElement;
-
-	while ( ( currentElement = stack.pop() ) ) {
-		for ( const child of currentElement.children ) {
-			if ( isElementVisible( child ) ) {
-				let childBounds = child.getBoundingClientRect();
-				// If the parent is scrollable, use parent's scrollable bounds.
-				if ( isScrollable( currentElement ) ) {
-					childBounds = currentElement.getBoundingClientRect();
+	const dataType = element.getAttribute( 'data-type' );
+
+	/*
+	 * 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 );
+					}
 				}
-				bounds = rectUnion( bounds, childBounds );
-				stack.push( child );
 			}
 		}
 	}