@wordpress/block-editor 12.5.0 → 12.7.0

package/src/components/use-setting/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -18,6 +13,7 @@ import { applyFilters } from '@wordpress/hooks';
  */
 import { useBlockEditContext } from '../block-edit';
 import { store as blockEditorStore } from '../../store';
+import { getValueFromObjectPath } from '../../utils/object';
 
 const blockedPaths = [
 	'color',
@@ -165,11 +161,14 @@ export default function useSetting( path ) {
 							candidateClientId
 						);
 					result =
-						get(
+						getValueFromObjectPath(
 							candidateAtts,
 							`settings.blocks.${ blockName }.${ normalizedPath }`
 						) ??
-						get( candidateAtts, `settings.${ normalizedPath }` );
+						getValueFromObjectPath(
+							candidateAtts,
+							`settings.${ normalizedPath }`
+						);
 					if ( result !== undefined ) {
 						// Stop the search for more distant ancestors and move on.
 						break;
@@ -183,7 +182,8 @@ export default function useSetting( path ) {
 				const defaultsPath = `__experimentalFeatures.${ normalizedPath }`;
 				const blockPath = `__experimentalFeatures.blocks.${ blockName }.${ normalizedPath }`;
 				result =
-					get( settings, blockPath ) ?? get( settings, defaultsPath );
+					getValueFromObjectPath( settings, blockPath ) ??
+					getValueFromObjectPath( settings, defaultsPath );
 			}
 
 			// Return if the setting was found in either the block instance or the store.

package/src/hooks/behaviors.js

@@ -22,15 +22,13 @@ function BehaviorsControl( {
 	onChangeAnimation,
 	disabled = false,
 } ) {
-	const { settings, themeBehaviors } = useSelect(
+	const { settings } = useSelect(
 		( select ) => {
-			const { getBehaviors, getSettings } = select( blockEditorStore );
-
+			const { getSettings } = select( blockEditorStore );
 			return {
 				settings:
 					getSettings()?.__experimentalFeatures?.blocks?.[ blockName ]
-						?.behaviors,
-				themeBehaviors: getBehaviors()?.blocks?.[ blockName ],
+						?.behaviors || {},
 			};
 		},
 		[ blockName ]
@@ -46,7 +44,6 @@ function BehaviorsControl( {
 			label: __( 'No behaviors' ),
 		},
 	};
-
 	const behaviorsOptions = Object.entries( settings )
 		.filter(
 			( [ behaviorName, behaviorValue ] ) =>
@@ -60,7 +57,6 @@ function BehaviorsControl( {
 				.slice( 1 )
 				.toLowerCase() }`,
 		} ) );
-
 	const options = [
 		...Object.values( defaultBehaviors ),
 		...behaviorsOptions,
@@ -68,7 +64,6 @@ function BehaviorsControl( {
 
 	const { behaviors, behaviorsValue } = useMemo( () => {
 		const mergedBehaviors = {
-			...themeBehaviors,
 			...( blockBehaviors || {} ),
 		};
 
@@ -83,7 +78,8 @@ function BehaviorsControl( {
 			behaviors: mergedBehaviors,
 			behaviorsValue: value,
 		};
-	}, [ blockBehaviors, themeBehaviors ] );
+	}, [ blockBehaviors ] );
+
 	// If every behavior is disabled, do not show the behaviors inspector control.
 	if ( behaviorsOptions.length === 0 ) {
 		return null;
@@ -203,10 +199,8 @@ export const withBehaviors = createHigherOrderComponent( ( BlockEdit ) => {
 	};
 }, 'withBehaviors' );
 
-if ( window?.__experimentalInteractivityAPI ) {
-	addFilter(
-		'editor.BlockEdit',
-		'core/behaviors/with-inspector-control',
-		withBehaviors
-	);
-}
+addFilter(
+	'editor.BlockEdit',
+	'core/behaviors/with-inspector-control',
+	withBehaviors
+);

package/src/hooks/border.js

@@ -377,13 +377,14 @@ export const withBorderColorPaletteStyles = createHigherOrderComponent(
 			borderBottomColor: borderBottomColor || borderColorValue,
 			borderLeftColor: borderLeftColor || borderColorValue,
 		};
+		const cleanedExtraStyles = cleanEmptyObject( extraStyles ) || {};
 
 		let wrapperProps = props.wrapperProps;
 		wrapperProps = {
 			...props.wrapperProps,
 			style: {
 				...props.wrapperProps?.style,
-				...extraStyles,
+				...cleanedExtraStyles,
 			},
 		};
 

package/src/hooks/margin.js

@@ -23,7 +23,10 @@ export function MarginVisualizer( { clientId, attributes, forceShow } ) {
 	const margin = attributes?.style?.spacing?.margin;
 
 	useEffect( () => {
-		if ( ! blockElement ) {
+		if (
+			! blockElement ||
+			null === blockElement.ownerDocument.defaultView
+		) {
 			return;
 		}
 

package/src/hooks/padding.js

@@ -23,7 +23,10 @@ export function PaddingVisualizer( { clientId, attributes, forceShow } ) {
 	const padding = attributes?.style?.spacing?.padding;
 
 	useEffect( () => {
-		if ( ! blockElement ) {
+		if (
+			! blockElement ||
+			null === blockElement.ownerDocument.defaultView
+		) {
 			return;
 		}
 

package/src/hooks/style.js

@@ -44,8 +44,8 @@ const styleSupportKeys = [
 	SPACING_SUPPORT_KEY,
 ];
 
-const hasStyleSupport = ( blockType ) =>
-	styleSupportKeys.some( ( key ) => hasBlockSupport( blockType, key ) );
+const hasStyleSupport = ( nameOrType ) =>
+	styleSupportKeys.some( ( key ) => hasBlockSupport( nameOrType, key ) );
 
 /**
  * Returns the inline styles to add depending on the style object
@@ -347,6 +347,10 @@ export function addEditProps( settings ) {
  */
 export const withBlockControls = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
+		if ( ! hasStyleSupport( props.name ) ) {
+			return <BlockEdit key="edit" { ...props } />;
+		}
+
 		const shouldDisplayControls = useDisplayBlockControls();
 		const blockEditingMode = useBlockEditingMode();
 
@@ -360,7 +364,7 @@ export const withBlockControls = createHigherOrderComponent(
 						<DimensionsPanel { ...props } />
 					</>
 				) }
-				<BlockEdit { ...props } />
+				<BlockEdit key="edit" { ...props } />
 			</>
 		);
 	},

package/src/hooks/utils.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -14,7 +9,7 @@ import { useMemo } from '@wordpress/element';
  */
 import { useSetting } from '../components';
 import { useSettingsForBlockElement } from '../components/global-styles/hooks';
-import { setImmutably } from '../utils/object';
+import { getValueFromObjectPath, setImmutably } from '../utils/object';
 
 /**
  * Removed falsy values from nested object.
@@ -79,7 +74,10 @@ export function transformStyles(
 	Object.entries( activeSupports ).forEach( ( [ support, isActive ] ) => {
 		if ( isActive ) {
 			migrationPaths[ support ].forEach( ( path ) => {
-				const styleValue = get( referenceBlockAttributes, path );
+				const styleValue = getValueFromObjectPath(
+					referenceBlockAttributes,
+					path
+				);
 				if ( styleValue ) {
 					returnBlock = {
 						...returnBlock,

package/src/private-apis.js

@@ -4,7 +4,7 @@
 import * as globalStyles from './components/global-styles';
 import { ExperimentalBlockEditorProvider } from './components/provider';
 import { lock } from './lock-unlock';
-import { getRichTextValues } from './components/rich-text/content';
+import { getRichTextValues } from './components/rich-text/get-rich-text-values';
 import { kebabCase } from './utils/object';
 import ResizableBoxPopover from './components/resizable-box-popover';
 import { ComposedPrivateInserter as PrivateInserter } from './components/inserter';
@@ -19,6 +19,11 @@ import { BlockRemovalWarningModal } from './components/block-removal-warning-mod
 import { useLayoutClasses, useLayoutStyles } from './hooks';
 import DimensionsTool from './components/dimensions-tool';
 import ResolutionTool from './components/resolution-tool';
+import {
+	default as ReusableBlocksRenameHint,
+	useReusableBlocksRenameHint,
+} from './components/inserter/reusable-block-rename-hint';
+import { usesContextKey } from './components/rich-text/format-edit';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -43,4 +48,7 @@ lock( privateApis, {
 	useLayoutStyles,
 	DimensionsTool,
 	ResolutionTool,
+	ReusableBlocksRenameHint,
+	useReusableBlocksRenameHint,
+	usesContextKey,
 } );

package/src/store/actions.js

@@ -28,7 +28,6 @@ import {
 } from '../utils/selection';
 import {
 	__experimentalUpdateSettings,
-	ensureDefaultBlock,
 	privateRemoveBlocks,
 } from './private-actions';
 
@@ -403,7 +402,7 @@ export const replaceBlocks =
 			initialPosition,
 			meta,
 		} );
-		dispatch( ensureDefaultBlock() );
+		dispatch.ensureDefaultBlock();
 	};
 
 /**
@@ -949,36 +948,30 @@ export const __unstableSplitSelection =
 		valueA = remove( valueA, selectionA.offset, valueA.text.length );
 		valueB = remove( valueB, 0, selectionB.offset );
 
-		dispatch.replaceBlocks(
-			select.getSelectedBlockClientIds(),
-			[
-				{
-					// Preserve the original client ID.
-					...blockA,
-					attributes: {
-						...blockA.attributes,
-						[ selectionA.attributeKey ]: toHTMLString( {
-							value: valueA,
-							...mapRichTextSettings( attributeDefinitionA ),
-						} ),
-					},
+		dispatch.replaceBlocks( select.getSelectedBlockClientIds(), [
+			{
+				// Preserve the original client ID.
+				...blockA,
+				attributes: {
+					...blockA.attributes,
+					[ selectionA.attributeKey ]: toHTMLString( {
+						value: valueA,
+						...mapRichTextSettings( attributeDefinitionA ),
+					} ),
 				},
-				createBlock( getDefaultBlockName() ),
-				{
-					// Preserve the original client ID.
-					...blockB,
-					attributes: {
-						...blockB.attributes,
-						[ selectionB.attributeKey ]: toHTMLString( {
-							value: valueB,
-							...mapRichTextSettings( attributeDefinitionB ),
-						} ),
-					},
+			},
+			{
+				// Preserve the original client ID.
+				...blockB,
+				attributes: {
+					...blockB.attributes,
+					[ selectionB.attributeKey ]: toHTMLString( {
+						value: valueB,
+						...mapRichTextSettings( attributeDefinitionB ),
+					} ),
 				},
-			],
-			1, // If we don't pass the `indexToSelect` it will default to the last block.
-			select.getSelectedBlocksInitialCaretPosition()
-		);
+			},
+		] );
 	};
 
 /**

package/src/store/private-selectors.js

@@ -136,21 +136,18 @@ export const isBlockSubtreeDisabled = createSelector(
  *
  * @return {Object[]} Tree of block objects with only clientID and innerBlocks set.
  */
-export const getListViewClientIdsTree = createSelector(
+export const getEnabledClientIdsTree = createSelector(
 	( state, rootClientId = '' ) => {
 		return getBlockOrder( state, rootClientId ).flatMap( ( clientId ) => {
 			if ( getBlockEditingMode( state, clientId ) !== 'disabled' ) {
 				return [
 					{
 						clientId,
-						innerBlocks: getListViewClientIdsTree(
-							state,
-							clientId
-						),
+						innerBlocks: getEnabledClientIdsTree( state, clientId ),
 					},
 				];
 			}
-			return getListViewClientIdsTree( state, clientId );
+			return getEnabledClientIdsTree( state, clientId );
 		} );
 	},
 	( state ) => [

package/src/store/reducer.js

@@ -1855,7 +1855,6 @@ export function lastBlockInserted( state = {}, action ) {
 	switch ( action.type ) {
 		case 'INSERT_BLOCKS':
 		case 'REPLACE_BLOCKS':
-		case 'REPLACE_INNER_BLOCKS':
 			if ( ! action.blocks.length ) {
 				return state;
 			}

package/src/store/selectors.js

@@ -1962,51 +1962,8 @@ const buildBlockTypeItem =
  */
 export const getInserterItems = createSelector(
 	( state, rootClientId = null ) => {
-		/*
-		 * Matches block comment delimiters amid serialized content.
-		 *
-		 * @see `tokenizer` in `@wordpress/block-serialization-default-parser`
-		 * package
-		 *
-		 * blockParserTokenizer differs from the original tokenizer in the
-		 * following ways:
-		 *
-		 * - removed global flag (/g)
-		 * - prepended ^\s*
-		 *
-		 */
-		const blockParserTokenizer =
-			/^\s*<!--\s+(\/)?wp:([a-z][a-z0-9_-]*\/)?([a-z][a-z0-9_-]*)\s+({(?:(?=([^}]+|}+(?=})|(?!}\s+\/?-->)[^])*)\5|[^]*?)}\s+)?(\/)?-->/;
-
 		const buildReusableBlockInserterItem = ( reusableBlock ) => {
-			let icon = symbol;
-
-			/*
-			 * Instead of always displaying a generic "symbol" icon for every
-			 * reusable block, try to use an icon that represents the first
-			 * outermost block contained in the reusable block. This requires
-			 * scanning the serialized form of the reusable block to find its
-			 * first block delimiter, then looking up the corresponding block
-			 * type, if available.
-			 */
-			if ( Platform.OS === 'web' ) {
-				const content =
-					typeof reusableBlock.content.raw === 'string'
-						? reusableBlock.content.raw
-						: reusableBlock.content;
-				const rawBlockMatch = content.match( blockParserTokenizer );
-				if ( rawBlockMatch ) {
-					const [ , , namespace = 'core/', blockName ] =
-						rawBlockMatch;
-					const referencedBlockType = getBlockType(
-						namespace + blockName
-					);
-					if ( referencedBlockType ) {
-						icon = referencedBlockType.icon;
-					}
-				}
-			}
-
+			const icon = symbol;
 			const id = `core/block/${ reusableBlock.id }`;
 			const { time, count = 0 } = getInsertUsage( state, id ) || {};
 			const frecency = calculateFrecency( time, count );
@@ -2018,11 +1975,12 @@ export const getInserterItems = createSelector(
 				title: reusableBlock.title.raw,
 				icon,
 				category: 'reusable',
-				keywords: [],
+				keywords: [ 'reusable' ],
 				isDisabled: false,
 				utility: 1, // Deprecated.
 				frecency,
 				content: reusableBlock.content.raw,
+				syncStatus: reusableBlock.wp_pattern_sync_status,
 			};
 		};
 
@@ -2031,18 +1989,7 @@ export const getInserterItems = createSelector(
 			'core/block',
 			rootClientId
 		)
-			? getReusableBlocks( state )
-					.filter(
-						( reusableBlock ) =>
-							// Reusable blocks that are fully synced should have no sync status set
-							// for backwards compat between patterns and old reusable blocks, but
-							// some in release 16.1 may have had sync status inadvertantly set to
-							// 'fully' if created in the site editor.
-							reusableBlock.wp_pattern_sync_status === 'fully' ||
-							reusableBlock.wp_pattern_sync_status === '' ||
-							! reusableBlock.wp_pattern_sync_status
-					)
-					.map( buildReusableBlockInserterItem )
+			? getReusableBlocks( state ).map( buildReusableBlockInserterItem )
 			: [];
 
 		const buildBlockTypeInserterItem = buildBlockTypeItem( state, {
@@ -2214,15 +2161,24 @@ export const getAllowedBlocks = createSelector(
 			return;
 		}
 
-		return getBlockTypes().filter( ( blockType ) =>
+		const blockTypes = getBlockTypes().filter( ( blockType ) =>
 			canIncludeBlockTypeInInserter( state, blockType, rootClientId )
 		);
+		const hasReusableBlock =
+			canInsertBlockTypeUnmemoized( state, 'core/block', rootClientId ) &&
+			getReusableBlocks( state ).length > 0;
+
+		return [
+			...blockTypes,
+			...( hasReusableBlock ? [ 'core/block' ] : [] ),
+		];
 	},
 	( state, rootClientId ) => [
 		state.blockListSettings[ rootClientId ],
 		state.blocks.byClientId,
 		state.settings.allowedBlockTypes,
 		state.settings.templateLock,
+		getReusableBlocks( state ),
 		getBlockTypes(),
 	]
 );
@@ -2258,15 +2214,15 @@ export const __experimentalGetAllowedBlocks = createSelector(
  * @property {?Object}        attributes       Attributes to pass to the newly created block.
  * @property {?Array<string>} attributesToCopy Attributes to be copied from adjecent blocks when inserted.
  */
-export const __experimentalGetDirectInsertBlock = createSelector(
+export const getDirectInsertBlock = createSelector(
 	( state, rootClientId = null ) => {
 		if ( ! rootClientId ) {
 			return;
 		}
 		const defaultBlock =
-			state.blockListSettings[ rootClientId ]?.__experimentalDefaultBlock;
+			state.blockListSettings[ rootClientId ]?.defaultBlock;
 		const directInsert =
-			state.blockListSettings[ rootClientId ]?.__experimentalDirectInsert;
+			state.blockListSettings[ rootClientId ]?.directInsert;
 		if ( ! defaultBlock || ! directInsert ) {
 			return;
 		}
@@ -2283,6 +2239,25 @@ export const __experimentalGetDirectInsertBlock = createSelector(
 	]
 );
 
+export const __experimentalGetDirectInsertBlock = createSelector(
+	( state, rootClientId = null ) => {
+		deprecated(
+			'wp.data.select( "core/block-editor" ).__experimentalGetDirectInsertBlock',
+			{
+				alternative:
+					'wp.data.select( "core/block-editor" ).getDirectInsertBlock',
+				since: '6.3',
+				version: '6.4',
+			}
+		);
+		return getDirectInsertBlock( state, rootClientId );
+	},
+	( state, rootClientId ) => [
+		state.blockListSettings[ rootClientId ],
+		state.blocks.tree.get( rootClientId ),
+	]
+);
+
 const checkAllowListRecursive = ( blocks, allowedBlockTypes ) => {
 	if ( typeof allowedBlockTypes === 'boolean' ) {
 		return allowedBlockTypes;
@@ -2549,30 +2524,6 @@ export function getSettings( state ) {
 	return state.settings;
 }
 
-/**
- * Returns the behaviors registered with the editor.
- *
- * Behaviors are named, reusable pieces of functionality that can be
- * attached to blocks. They are registered with the editor using the
- * `theme.json` file.
- *
- * @example
- *
- * ```js
- * const behaviors = select( blockEditorStore ).getBehaviors();
- * if ( behaviors?.lightbox ) {
- * 	 // Do something with the lightbox.
- * }
- *```
- *
- * @param {Object} state Editor state.
- *
- * @return {Object} The editor behaviors object.
- */
-export function getBehaviors( state ) {
-	return state.settings.behaviors;
-}
-
 /**
  * Returns true if the most recent block change is be considered persistent, or
  * false otherwise. A persistent change is one committed by BlockEditorProvider

package/src/store/test/actions.js

@@ -216,6 +216,7 @@ describe( 'actions', () => {
 				getBlockCount: () => 1,
 			};
 			const dispatch = jest.fn();
+			dispatch.ensureDefaultBlock = jest.fn();
 
 			replaceBlock( 'chicken', block )( { select, dispatch } );
 
@@ -281,6 +282,7 @@ describe( 'actions', () => {
 				getBlockCount: () => 1,
 			};
 			const dispatch = jest.fn();
+			dispatch.ensureDefaultBlock = jest.fn();
 
 			replaceBlocks( [ 'chicken' ], blocks )( { select, dispatch } );
 
@@ -314,6 +316,7 @@ describe( 'actions', () => {
 				getBlockCount: () => 1,
 			};
 			const dispatch = jest.fn();
+			dispatch.ensureDefaultBlock = jest.fn();
 
 			replaceBlocks(
 				[ 'chicken' ],

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

@@ -11,7 +11,7 @@ import {
 	getLastInsertedBlocksClientIds,
 	getBlockEditingMode,
 	isBlockSubtreeDisabled,
-	getListViewClientIdsTree,
+	getEnabledClientIdsTree,
 	getEnabledBlockParents,
 } from '../private-selectors';
 
@@ -391,7 +391,7 @@ describe( 'private selectors', () => {
 		} );
 	} );
 
-	describe( 'getListViewClientIdsTree', () => {
+	describe( 'getEnabledClientIdsTree', () => {
 		const baseState = {
 			settings: {},
 			blocks: {
@@ -462,7 +462,7 @@ describe( 'private selectors', () => {
 				...baseState,
 				blockEditingModes: new Map( [] ),
 			};
-			expect( getListViewClientIdsTree( state ) ).toEqual( [
+			expect( getEnabledClientIdsTree( state ) ).toEqual( [
 				{
 					clientId: '6cf70164-9097-4460-bcbf-200560546988',
 					innerBlocks: [],
@@ -500,7 +500,7 @@ describe( 'private selectors', () => {
 				blockEditingModes: new Map( [] ),
 			};
 			expect(
-				getListViewClientIdsTree(
+				getEnabledClientIdsTree(
 					state,
 					'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337'
 				)
@@ -534,7 +534,7 @@ describe( 'private selectors', () => {
 					[ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', 'contentOnly' ],
 				] ),
 			};
-			expect( getListViewClientIdsTree( state ) ).toEqual( [
+			expect( getEnabledClientIdsTree( state ) ).toEqual( [
 				{
 					clientId: 'b26fc763-417d-4f01-b81c-2ec61e14a972',
 					innerBlocks: [],

package/src/store/test/reducer.js

@@ -3328,25 +3328,32 @@ describe( 'state', () => {
 			expect( state.clientIds ).toEqual( [ clientIdOne, clientIdTwo ] );
 		} );
 
-		it( 'should return client ids of all blocks when inner blocks are replaced with REPLACE_INNER_BLOCKS', () => {
-			const clientIdOne = '62bfef6e-d5e9-43ba-b7f9-c77cf354141f';
-			const clientIdTwo = '9db792c6-a25a-495d-adbd-97d56a4c4189';
+		it( 'should return client ids of the original blocks when inner blocks are replaced with REPLACE_INNER_BLOCKS', () => {
+			const initialBlocks = deepFreeze( [
+				'62bfef6e-d5e9-43ba-b7f9-c77cf354141f',
+				'9db792c6-a25a-495d-adbd-97d56a4c4189',
+			] );
 
 			const action = {
 				blocks: [
 					{
-						clientId: clientIdOne,
+						clientId: 'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1',
 					},
 					{
-						clientId: clientIdTwo,
+						clientId: '14501cc2-90a6-4f52-aa36-ab6e896135d1',
 					},
 				],
 				type: 'REPLACE_INNER_BLOCKS',
 			};
 
-			const state = lastBlockInserted( {}, action );
+			const state = lastBlockInserted(
+				{
+					clientIds: initialBlocks,
+				},
+				action
+			);
 
-			expect( state.clientIds ).toEqual( [ clientIdOne, clientIdTwo ] );
+			expect( state.clientIds ).toEqual( initialBlocks );
 		} );
 
 		it( 'should return empty state if last block inserted is called with action RESET_BLOCKS', () => {