@wordpress/block-editor 14.5.0 → 14.7.0

package/src/components/block-list/block.js

@@ -24,8 +24,8 @@ import {
 	isReusableBlock,
 	getBlockDefaultClassName,
 	hasBlockSupport,
+	createBlock,
 	store as blocksStore,
-	privateApis as blocksPrivateApis,
 } from '@wordpress/blocks';
 import { withFilters } from '@wordpress/components';
 import { withDispatch, useDispatch, useSelect } from '@wordpress/data';
@@ -47,8 +47,6 @@ import { PrivateBlockContext } from './private-block-context';
 
 import { unlock } from '../../lock-unlock';
 
-const { isUnmodifiedBlockContent } = unlock( blocksPrivateApis );
-
 /**
  * Merges wrapper props with special handling for classNames and styles.
  *
@@ -313,6 +311,7 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 			function switchToDefaultOrRemove() {
 				const block = getBlock( clientId );
 				const defaultBlockName = getDefaultBlockName();
+				const defaultBlockType = getBlockType( defaultBlockName );
 				if ( getBlockName( clientId ) !== defaultBlockName ) {
 					const replacement = switchToBlockType(
 						block,
@@ -329,6 +328,15 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 							selectBlock( nextBlockClientId );
 						} );
 					}
+				} else if ( defaultBlockType.merge ) {
+					const attributes = defaultBlockType.merge(
+						{},
+						block.attributes
+					);
+					replaceBlocks(
+						[ clientId ],
+						[ createBlock( defaultBlockName, attributes ) ]
+					);
 				}
 			}
 
@@ -342,6 +350,9 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 			 *                                  to the moved block.
 			 */
 			function moveFirstItemUp( _clientId, changeSelection = true ) {
+				const wrapperBlockName = getBlockName( _clientId );
+				const wrapperBlockType = getBlockType( wrapperBlockName );
+				const isTextualWrapper = wrapperBlockType.category === 'text';
 				const targetRootClientId = getBlockRootClientId( _clientId );
 				const blockOrder = getBlockOrder( _clientId );
 				const [ firstClientId ] = blockOrder;
@@ -351,50 +362,14 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 					isUnmodifiedBlock( getBlock( firstClientId ) )
 				) {
 					removeBlock( _clientId );
-				} else {
+				} else if ( isTextualWrapper ) {
 					registry.batch( () => {
-						const firstBlock = getBlock( firstClientId );
-						const isFirstBlockContentUnmodified =
-							isUnmodifiedBlockContent( firstBlock );
-						const defaultBlockName = getDefaultBlockName();
-						const replacement = switchToBlockType(
-							firstBlock,
-							defaultBlockName
-						);
-						const canTransformToDefaultBlock =
-							!! replacement?.length &&
-							replacement.every( ( block ) =>
-								canInsertBlockType( block.name, _clientId )
-							);
-
 						if (
-							isFirstBlockContentUnmodified &&
-							canTransformToDefaultBlock
-						) {
-							// Step 1: If the block is empty and can be transformed to the default block type.
-							replaceBlocks(
-								firstClientId,
-								replacement,
-								changeSelection
-							);
-						} else if (
-							isFirstBlockContentUnmodified &&
-							firstBlock.name === defaultBlockName
-						) {
-							// Step 2: If the block is empty and is already the default block type.
-							removeBlock( firstClientId );
-							const nextBlockClientId =
-								getNextBlockClientId( clientId );
-							if ( nextBlockClientId ) {
-								selectBlock( nextBlockClientId );
-							}
-						} else if (
 							canInsertBlockType(
-								firstBlock.name,
+								getBlockName( firstClientId ),
 								targetRootClientId
 							)
 						) {
-							// Step 3: If the block can be moved up.
 							moveBlocksToPosition(
 								[ firstClientId ],
 								_clientId,
@@ -402,17 +377,21 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 								getBlockIndex( _clientId )
 							);
 						} else {
-							const canLiftAndTransformToDefaultBlock =
-								!! replacement?.length &&
+							const replacement = switchToBlockType(
+								getBlock( firstClientId ),
+								getDefaultBlockName()
+							);
+
+							if (
+								replacement &&
+								replacement.length &&
 								replacement.every( ( block ) =>
 									canInsertBlockType(
 										block.name,
 										targetRootClientId
 									)
-								);
-
-							if ( canLiftAndTransformToDefaultBlock ) {
-								// Step 4: If the block can be transformed to the default block type and moved up.
+								)
+							) {
 								insertBlocks(
 									replacement,
 									getBlockIndex( _clientId ),
@@ -421,7 +400,6 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 								);
 								removeBlock( firstClientId, false );
 							} else {
-								// Step 5: Continue the default behavior.
 								switchToDefaultOrRemove();
 							}
 						}
@@ -433,6 +411,8 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 							removeBlock( _clientId, false );
 						}
 					} );
+				} else {
+					switchToDefaultOrRemove();
 				}
 			}
 
@@ -629,8 +609,7 @@ function BlockListBlockProvider( props ) {
 			const attributes = getBlockAttributes( clientId );
 			const { name: blockName, isValid } = blockWithoutAttributes;
 			const blockType = getBlockType( blockName );
-			const { supportsLayout, __unstableIsPreviewMode: isPreviewMode } =
-				getSettings();
+			const { supportsLayout, isPreviewMode } = getSettings();
 			const hasLightBlockWrapper = blockType?.apiVersion > 1;
 			const previewContext = {
 				isPreviewMode,

package/src/components/block-list/block.native.js

@@ -320,7 +320,6 @@ function BlockListBlock( {
 			name,
 			fontSizes || EMPTY_ARRAY
 		);
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [
 		// It is crucial to keep the dependencies array minimal to prevent unnecessary calls that could negatively impact performance.
 		// JSON.stringify is used for the following purposes:
@@ -329,11 +328,8 @@ function BlockListBlock( {
 		// 2. To filter the attributes object, ensuring that only the relevant attributes (included in
 		//    GlobalStylesContext.BLOCK_STYLE_ATTRIBUTES) are considered as dependencies. This reduces the likelihood of
 		//    unnecessary useMemo calls when other, unrelated attributes change.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 		JSON.stringify( globalStyle ),
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 		JSON.stringify( wrapperProps?.style ),
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 		JSON.stringify(
 			Object.fromEntries(
 				Object.entries( attributes ?? {} ).filter( ( [ key ] ) =>

package/src/components/block-list/content.scss

@@ -24,7 +24,7 @@
 // hack a progressive enhancement.
 /* stylelint-disable -- Stylelint is disabled to allow the hack to work. */
 _::-webkit-full-page-media, _:future, :root .block-editor-block-list__layout::selection,
-_::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-block-list__layout::selection {
+_::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .block-editor-block-list__layout::selection {
 	background-color: transparent;
 }
 /* stylelint-enable */

package/src/components/block-list/index.js

@@ -181,13 +181,13 @@ function Items( {
 				__unstableGetVisibleBlocks,
 				getTemplateLock,
 				getBlockEditingMode,
-				__unstableGetEditorMode,
 				isSectionBlock,
+				isZoomOut: _isZoomOut,
 			} = unlock( select( blockEditorStore ) );
 
 			const _order = getBlockOrder( rootClientId );
 
-			if ( getSettings().__unstableIsPreviewMode ) {
+			if ( getSettings().isPreviewMode ) {
 				return {
 					order: _order,
 					selectedBlocks: EMPTY_ARRAY,
@@ -200,13 +200,13 @@ function Items( {
 				order: _order,
 				selectedBlocks: getSelectedBlockClientIds(),
 				visibleBlocks: __unstableGetVisibleBlocks(),
-				isZoomOut: __unstableGetEditorMode() === 'zoom-out',
+				isZoomOut: _isZoomOut(),
 				shouldRenderAppender:
 					! isSectionBlock( rootClientId ) &&
 					getBlockEditingMode( rootClientId ) !== 'disabled' &&
 					! getTemplateLock( rootClientId ) &&
 					hasAppender &&
-					__unstableGetEditorMode() !== 'zoom-out' &&
+					! _isZoomOut() &&
 					( hasCustomAppender ||
 						rootClientId === selectedBlockClientId ||
 						( ! rootClientId &&

package/src/components/block-list/use-block-props/index.js

@@ -25,7 +25,6 @@ import {
 } from '../../block-edit/context';
 import { useFocusHandler } from './use-focus-handler';
 import { useEventHandlers } from './use-selected-block-event-handlers';
-import { useZoomOutModeExit } from './use-zoom-out-mode-exit';
 import { useBlockRefProvider } from './use-block-refs';
 import { useIntersectionObserver } from './use-intersection-observer';
 import { useScrollIntoView } from './use-scroll-into-view';
@@ -112,7 +111,6 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		useBlockRefProvider( clientId ),
 		useFocusHandler( clientId ),
 		useEventHandlers( { clientId, isSelected } ),
-		useZoomOutModeExit(),
 		useIsHovered( { clientId } ),
 		useIntersectionObserver(),
 		useMovingAnimation( { triggerAnimationOnChange: index, clientId } ),

package/src/components/block-list/use-block-props/use-focus-first-element.js

@@ -15,6 +15,7 @@ import { useSelect } from '@wordpress/data';
  */
 import { isInsideRootBlock } from '../../../utils/dom';
 import { store as blockEditorStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
 
 /** @typedef {import('@wordpress/element').RefObject} RefObject */
 
@@ -28,15 +29,16 @@ import { store as blockEditorStore } from '../../../store';
  */
 export function useFocusFirstElement( { clientId, initialPosition } ) {
 	const ref = useRef();
-	const { isBlockSelected, isMultiSelecting, __unstableGetEditorMode } =
-		useSelect( blockEditorStore );
+	const { isBlockSelected, isMultiSelecting, isZoomOut } = unlock(
+		useSelect( blockEditorStore )
+	);
 
 	useEffect( () => {
 		// Check if the block is still selected at the time this effect runs.
 		if (
 			! isBlockSelected( clientId ) ||
 			isMultiSelecting() ||
-			__unstableGetEditorMode() === 'zoom-out'
+			isZoomOut()
 		) {
 			return;
 		}

package/src/components/block-list/use-block-props/use-selected-block-event-handlers.js

@@ -21,18 +21,12 @@ import { unlock } from '../../../lock-unlock';
  * @param {string} clientId Block client ID.
  */
 export function useEventHandlers( { clientId, isSelected } ) {
-	const {
-		getBlockRootClientId,
-		getBlockIndex,
-		isZoomOut,
-		__unstableGetEditorMode,
-	} = unlock( useSelect( blockEditorStore ) );
-	const {
-		insertAfterBlock,
-		removeBlock,
-		__unstableSetEditorMode,
-		resetZoomLevel,
-	} = unlock( useDispatch( blockEditorStore ) );
+	const { getBlockRootClientId, getBlockIndex, isZoomOut } = unlock(
+		useSelect( blockEditorStore )
+	);
+	const { insertAfterBlock, removeBlock, resetZoomLevel } = unlock(
+		useDispatch( blockEditorStore )
+	);
 
 	return useRefEffect(
 		( node ) => {
@@ -66,12 +60,7 @@ export function useEventHandlers( { clientId, isSelected } ) {
 
 				event.preventDefault();
 
-				if (
-					keyCode === ENTER &&
-					__unstableGetEditorMode() === 'zoom-out' &&
-					isZoomOut()
-				) {
-					__unstableSetEditorMode( 'edit' );
+				if ( keyCode === ENTER && isZoomOut() ) {
 					resetZoomLevel();
 				} else if ( keyCode === ENTER ) {
 					insertAfterBlock( clientId );
@@ -105,8 +94,6 @@ export function useEventHandlers( { clientId, isSelected } ) {
 			getBlockIndex,
 			insertAfterBlock,
 			removeBlock,
-			__unstableGetEditorMode,
-			__unstableSetEditorMode,
 			isZoomOut,
 			resetZoomLevel,
 		]

package/src/components/block-list/use-in-between-inserter.js

@@ -18,7 +18,7 @@ export function useInBetweenInserter() {
 	const isInBetweenInserterDisabled = useSelect(
 		( select ) =>
 			select( blockEditorStore ).getSettings().isDistractionFree ||
-			select( blockEditorStore ).__unstableGetEditorMode() === 'zoom-out',
+			unlock( select( blockEditorStore ) ).isZoomOut(),
 		[]
 	);
 	const {

package/src/components/block-patterns-list/README.md

@@ -18,7 +18,6 @@ import { BlockPatternsList } from '@wordpress/block-editor';
 const MyBlockPatternsList = () => (
 	<BlockPatternsList
 		blockPatterns={ shownBlockPatterns }
-		shownPatterns={ shownBlockPatterns }
 		onClickPattern={ onSelectBlockPattern }
 	/>
 );
@@ -33,13 +32,6 @@ An array of block patterns that can be shown in the block patterns list.
 -   Type: `Array`
 -   Required: Yes
 
-#### shownPatterns
-
-An array of shown block patterns objects.
-
--   Type: `Array`
--   Required: Yes
-
 #### onClickPattern
 
 The performed event after a click on a block pattern. In most cases, the pattern is inserted in the block editor.
@@ -69,6 +61,14 @@ The aria label for the block patterns list.
 -   Required: No
 -   Default: `Block Patterns`
 
+#### showTitlesAsTooltip
+
+Whether to render the title of each pattern as a tooltip. User-defined patterns always show their visual title regardless of this prop.
+
+-   Type: `boolean`
+-   Required: No
+-   Default: `false`
+
 ## Related components
 
 Block Editor components are components that can be used to compose the UI of your block editor. Thus, they can only be used under a [`BlockEditorProvider`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/provider/README.md) in the components tree.

package/src/components/block-patterns-list/index.js

@@ -39,14 +39,14 @@ function BlockPattern( {
 	pattern,
 	onClick,
 	onHover,
-	showTitle = true,
-	showTooltip,
+	showTitlesAsTooltip,
 	category,
 } ) {
 	const [ isDragging, setIsDragging ] = useState( false );
 	const { blocks, viewportWidth } = pattern;
 	const instanceId = useInstanceId( BlockPattern );
 	const descriptionId = `block-editor-block-patterns-list__item-description-${ instanceId }`;
+	const isUserPattern = pattern.type === INSERTER_PATTERN_TYPES.user;
 
 	// When we have a selected category and the pattern is draggable, we need to update the
 	// pattern's categories in metadata to only contain the selected category, and pass this to
@@ -94,10 +94,7 @@ function BlockPattern( {
 					} }
 				>
 					<WithToolTip
-						showTooltip={
-							showTooltip &&
-							! pattern.type !== INSERTER_PATTERN_TYPES.user
-						}
+						showTooltip={ showTitlesAsTooltip && ! isUserPattern }
 						title={ pattern.title }
 					>
 						<Composite.Item
@@ -134,33 +131,30 @@ function BlockPattern( {
 							} }
 							onMouseLeave={ () => onHover?.( null ) }
 						>
-							<BlockPreview
-								blocks={ blocks }
-								viewportWidth={ viewportWidth }
-							/>
-
-							{ showTitle && (
+							<BlockPreview.Async
+								placeholder={ <BlockPatternPlaceholder /> }
+							>
+								<BlockPreview
+									blocks={ blocks }
+									viewportWidth={ viewportWidth }
+								/>
+							</BlockPreview.Async>
+							{ ( ! showTitlesAsTooltip || isUserPattern ) && (
 								<HStack
 									className="block-editor-patterns__pattern-details"
 									spacing={ 2 }
 								>
-									{ pattern.type ===
-										INSERTER_PATTERN_TYPES.user &&
-										! pattern.syncStatus && (
-											<div className="block-editor-patterns__pattern-icon-wrapper">
-												<Icon
-													className="block-editor-patterns__pattern-icon"
-													icon={ symbol }
-												/>
-											</div>
-										) }
-									{ ( ! showTooltip ||
-										pattern.type ===
-											INSERTER_PATTERN_TYPES.user ) && (
-										<div className="block-editor-block-patterns-list__item-title">
-											{ pattern.title }
+									{ isUserPattern && ! pattern.syncStatus && (
+										<div className="block-editor-patterns__pattern-icon-wrapper">
+											<Icon
+												className="block-editor-patterns__pattern-icon"
+												icon={ symbol }
+											/>
 										</div>
 									) }
+									<div className="block-editor-block-patterns-list__item-title">
+										{ pattern.title }
+									</div>
 								</HStack>
 							) }
 
@@ -187,13 +181,11 @@ function BlockPatternsList(
 	{
 		isDraggable,
 		blockPatterns,
-		shownPatterns,
 		onHover,
 		onClickPattern,
 		orientation,
 		label = __( 'Block patterns' ),
 		category,
-		showTitle = true,
 		showTitlesAsTooltip,
 		pagingProps,
 	},
@@ -205,11 +197,9 @@ function BlockPatternsList(
 		// Reset the active composite item whenever the available patterns change,
 		// to make sure that Composite widget can receive focus correctly when its
 		// composite items change. The first composite item will receive focus.
-		const firstCompositeItemId = blockPatterns.find( ( pattern ) =>
-			shownPatterns.includes( pattern )
-		)?.name;
+		const firstCompositeItemId = blockPatterns[ 0 ]?.name;
 		setActiveCompositeId( firstCompositeItemId );
-	}, [ shownPatterns, blockPatterns ] );
+	}, [ blockPatterns ] );
 
 	return (
 		<Composite
@@ -221,24 +211,18 @@ function BlockPatternsList(
 			aria-label={ label }
 			ref={ ref }
 		>
-			{ blockPatterns.map( ( pattern ) => {
-				const isShown = shownPatterns.includes( pattern );
-				return isShown ? (
-					<BlockPattern
-						key={ pattern.name }
-						id={ pattern.name }
-						pattern={ pattern }
-						onClick={ onClickPattern }
-						onHover={ onHover }
-						isDraggable={ isDraggable }
-						showTitle={ showTitle }
-						showTooltip={ showTitlesAsTooltip }
-						category={ category }
-					/>
-				) : (
-					<BlockPatternPlaceholder key={ pattern.name } />
-				);
-			} ) }
+			{ blockPatterns.map( ( pattern ) => (
+				<BlockPattern
+					key={ pattern.name }
+					id={ pattern.name }
+					pattern={ pattern }
+					onClick={ onClickPattern }
+					onHover={ onHover }
+					isDraggable={ isDraggable }
+					showTitlesAsTooltip={ showTitlesAsTooltip }
+					category={ category }
+				/>
+			) ) }
 			{ pagingProps && <BlockPatternsPaging { ...pagingProps } /> }
 		</Composite>
 	);