@wordpress/block-editor 14.2.0 → 14.2.1-next.1f6eadc42.0

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

@@ -39,6 +39,7 @@ import {
 	DEFAULT_BLOCK_EDIT_CONTEXT,
 } from '../block-edit/context';
 import { useTypingObserver } from '../observe-typing';
+import { ZoomOutSeparator } from './zoom-out-separator';
 import { unlock } from '../../lock-unlock';
 
 export const IntersectionObserver = createContext();
@@ -174,49 +175,55 @@ function Items( {
 	// function on every render.
 	const hasAppender = CustomAppender !== false;
 	const hasCustomAppender = !! CustomAppender;
-	const { order, selectedBlocks, visibleBlocks, shouldRenderAppender } =
-		useSelect(
-			( select ) => {
-				const {
-					getSettings,
-					getBlockOrder,
-					getSelectedBlockClientId,
-					getSelectedBlockClientIds,
-					__unstableGetVisibleBlocks,
-					getTemplateLock,
-					getBlockEditingMode,
-					__unstableGetEditorMode,
-				} = select( blockEditorStore );
-
-				const _order = getBlockOrder( rootClientId );
+	const {
+		order,
+		isZoomOut,
+		selectedBlocks,
+		visibleBlocks,
+		shouldRenderAppender,
+	} = useSelect(
+		( select ) => {
+			const {
+				getSettings,
+				getBlockOrder,
+				getSelectedBlockClientId,
+				getSelectedBlockClientIds,
+				__unstableGetVisibleBlocks,
+				getTemplateLock,
+				getBlockEditingMode,
+				__unstableGetEditorMode,
+			} = select( blockEditorStore );
 
-				if ( getSettings().__unstableIsPreviewMode ) {
-					return {
-						order: _order,
-						selectedBlocks: EMPTY_ARRAY,
-						visibleBlocks: EMPTY_SET,
-					};
-				}
+			const _order = getBlockOrder( rootClientId );
 
-				const selectedBlockClientId = getSelectedBlockClientId();
+			if ( getSettings().__unstableIsPreviewMode ) {
 				return {
 					order: _order,
-					selectedBlocks: getSelectedBlockClientIds(),
-					visibleBlocks: __unstableGetVisibleBlocks(),
-					shouldRenderAppender:
-						hasAppender &&
-						__unstableGetEditorMode() !== 'zoom-out' &&
-						( hasCustomAppender
-							? ! getTemplateLock( rootClientId ) &&
-							  getBlockEditingMode( rootClientId ) !== 'disabled'
-							: rootClientId === selectedBlockClientId ||
-							  ( ! rootClientId &&
-									! selectedBlockClientId &&
-									! _order.length ) ),
+					selectedBlocks: EMPTY_ARRAY,
+					visibleBlocks: EMPTY_SET,
 				};
-			},
-			[ rootClientId, hasAppender, hasCustomAppender ]
-		);
+			}
+
+			const selectedBlockClientId = getSelectedBlockClientId();
+			return {
+				order: _order,
+				selectedBlocks: getSelectedBlockClientIds(),
+				visibleBlocks: __unstableGetVisibleBlocks(),
+				isZoomOut: __unstableGetEditorMode() === 'zoom-out',
+				shouldRenderAppender:
+					hasAppender &&
+					__unstableGetEditorMode() !== 'zoom-out' &&
+					( hasCustomAppender
+						? ! getTemplateLock( rootClientId ) &&
+						  getBlockEditingMode( rootClientId ) !== 'disabled'
+						: rootClientId === selectedBlockClientId ||
+						  ( ! rootClientId &&
+								! selectedBlockClientId &&
+								! _order.length ) ),
+			};
+		},
+		[ rootClientId, hasAppender, hasCustomAppender ]
+	);
 
 	return (
 		<LayoutProvider value={ layout }>
@@ -230,10 +237,24 @@ function Items( {
 						! selectedBlocks.includes( clientId )
 					}
 				>
+					{ isZoomOut && (
+						<ZoomOutSeparator
+							clientId={ clientId }
+							rootClientId={ rootClientId }
+							position="top"
+						/>
+					) }
 					<BlockListBlock
 						rootClientId={ rootClientId }
 						clientId={ clientId }
 					/>
+					{ isZoomOut && (
+						<ZoomOutSeparator
+							clientId={ clientId }
+							rootClientId={ rootClientId }
+							position="bottom"
+						/>
+					) }
 				</AsyncModeProvider>
 			) ) }
 			{ order.length < 1 && placeholder }

package/src/components/block-list/use-block-props/use-zoom-out-mode-exit.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { useRefEffect } from '@wordpress/compose';
 
 /**
@@ -16,6 +16,10 @@ import { unlock } from '../../../lock-unlock';
  * @param {string} clientId Block client ID.
  */
 export function useZoomOutModeExit( { editorMode } ) {
+	const getSettings = useSelect(
+		( select ) => select( blockEditorStore ).getSettings
+	);
+
 	const { __unstableSetEditorMode } = unlock(
 		useDispatch( blockEditorStore )
 	);
@@ -29,6 +33,14 @@ export function useZoomOutModeExit( { editorMode } ) {
 			function onDoubleClick( event ) {
 				if ( ! event.defaultPrevented ) {
 					event.preventDefault();
+
+					const { __experimentalSetIsInserterOpened } = getSettings();
+
+					if (
+						typeof __experimentalSetIsInserterOpened === 'function'
+					) {
+						__experimentalSetIsInserterOpened( false );
+					}
 					__unstableSetEditorMode( 'edit' );
 				}
 			}

package/src/components/block-list/zoom-out-separator.js

@@ -0,0 +1,110 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	__unstableMotion as motion,
+	__unstableAnimatePresence as AnimatePresence,
+} from '@wordpress/components';
+import { useReducedMotion } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+export function ZoomOutSeparator( {
+	clientId,
+	rootClientId = '',
+	position = 'top',
+} ) {
+	const [ isDraggedOver, setIsDraggedOver ] = useState( false );
+	const {
+		sectionRootClientId,
+		sectionClientIds,
+		blockInsertionPoint,
+		blockInsertionPointVisible,
+	} = useSelect( ( select ) => {
+		const {
+			getBlockInsertionPoint,
+			getBlockOrder,
+			isBlockInsertionPointVisible,
+			getSectionRootClientId,
+		} = unlock( select( blockEditorStore ) );
+
+		const root = getSectionRootClientId();
+		const sectionRootClientIds = getBlockOrder( root );
+		return {
+			sectionRootClientId: root,
+			sectionClientIds: sectionRootClientIds,
+			blockOrder: getBlockOrder( root ),
+			blockInsertionPoint: getBlockInsertionPoint(),
+			blockInsertionPointVisible: isBlockInsertionPointVisible(),
+		};
+	}, [] );
+
+	const isReducedMotion = useReducedMotion();
+
+	if ( ! clientId ) {
+		return;
+	}
+
+	let isVisible = false;
+
+	const isSectionBlock =
+		rootClientId === sectionRootClientId &&
+		sectionClientIds &&
+		sectionClientIds.includes( clientId );
+
+	if ( ! isSectionBlock ) {
+		return null;
+	}
+
+	if ( position === 'top' ) {
+		isVisible =
+			blockInsertionPointVisible &&
+			blockInsertionPoint.index === 0 &&
+			clientId === sectionClientIds[ blockInsertionPoint.index ];
+	}
+
+	if ( position === 'bottom' ) {
+		isVisible =
+			blockInsertionPointVisible &&
+			clientId === sectionClientIds[ blockInsertionPoint.index - 1 ];
+	}
+
+	return (
+		<AnimatePresence>
+			{ isVisible && (
+				<motion.div
+					as="button"
+					layout={ ! isReducedMotion }
+					initial={ { height: 0 } }
+					animate={ { height: '120px' } }
+					exit={ { height: 0 } }
+					transition={ {
+						type: 'tween',
+						duration: 0.2,
+						ease: [ 0.6, 0, 0.4, 1 ],
+					} }
+					className={ clsx(
+						'block-editor-block-list__zoom-out-separator',
+						{
+							'is-dragged-over': isDraggedOver,
+						}
+					) }
+					data-is-insertion-point="true"
+					onDragOver={ () => setIsDraggedOver( true ) }
+					onDragLeave={ () => setIsDraggedOver( false ) }
+				></motion.div>
+			) }
+		</AnimatePresence>
+	);
+}

package/src/components/block-mover/button.js

@@ -129,8 +129,7 @@ const BlockMoverButton = forwardRef(
 		return (
 			<>
 				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					__next40pxDefaultSize
 					ref={ ref }
 					className={ clsx(
 						'block-editor-block-mover-button',

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

@@ -87,8 +87,7 @@ function BlockMover( {
 				<BlockDraggable clientIds={ clientIds } fadeWhenDisabled>
 					{ ( draggableProps ) => (
 						<Button
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
+							__next40pxDefaultSize
 							icon={ dragHandle }
 							className="block-editor-block-mover__drag-handle"
 							label={ __( 'Drag' ) }

package/src/components/block-pattern-setup/index.js

@@ -3,10 +3,7 @@
  */
 import { useDispatch } from '@wordpress/data';
 import { cloneBlock } from '@wordpress/blocks';
-import {
-	VisuallyHidden,
-	privateApis as componentsPrivateApis,
-} from '@wordpress/components';
+import { Composite, VisuallyHidden } from '@wordpress/components';
 
 import { useState } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
@@ -20,11 +17,6 @@ import BlockPreview from '../block-preview';
 import SetupToolbar from './setup-toolbar';
 import usePatternsSetup from './use-patterns-setup';
 import { VIEWMODES } from './constants';
-import { unlock } from '../../lock-unlock';
-
-const { CompositeV2: Composite, CompositeItemV2: CompositeItem } = unlock(
-	componentsPrivateApis
-);
 
 const SetupContent = ( {
 	viewMode,
@@ -88,7 +80,7 @@ function BlockPattern( { pattern, onSelect, showTitles } ) {
 	);
 	return (
 		<div className={ `${ baseClassName }__list-item` }>
-			<CompositeItem
+			<Composite.Item
 				render={
 					<div
 						aria-describedby={
@@ -116,7 +108,7 @@ function BlockPattern( { pattern, onSelect, showTitles } ) {
 						{ description }
 					</VisuallyHidden>
 				) }
-			</CompositeItem>
+			</Composite.Item>
 		</div>
 	);
 }

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

@@ -9,9 +9,9 @@ import clsx from 'clsx';
 import { cloneBlock } from '@wordpress/blocks';
 import { useEffect, useState, forwardRef, useMemo } from '@wordpress/element';
 import {
+	Composite,
 	VisuallyHidden,
 	Tooltip,
-	privateApis as componentsPrivateApis,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
@@ -21,16 +21,11 @@ import { Icon, symbol } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../lock-unlock';
 import BlockPreview from '../block-preview';
 import InserterDraggableBlocks from '../inserter-draggable-blocks';
 import BlockPatternsPaging from '../block-patterns-paging';
 import { INSERTER_PATTERN_TYPES } from '../inserter/block-patterns-tab/utils';
 
-const { CompositeV2: Composite, CompositeItemV2: CompositeItem } = unlock(
-	componentsPrivateApis
-);
-
 const WithToolTip = ( { showTooltip, title, children } ) => {
 	if ( showTooltip ) {
 		return <Tooltip text={ title }>{ children }</Tooltip>;
@@ -105,7 +100,7 @@ function BlockPattern( {
 						}
 						title={ pattern.title }
 					>
-						<CompositeItem
+						<Composite.Item
 							render={
 								<div
 									role="option"
@@ -174,7 +169,7 @@ function BlockPattern( {
 									{ pattern.description }
 								</VisuallyHidden>
 							) }
-						</CompositeItem>
+						</Composite.Item>
 					</WithToolTip>
 				</div>
 			) }

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

@@ -198,6 +198,7 @@ const BlockIndicator = ( { icon, showTitle, blockTitle } ) => (
 
 export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
 	const {
+		hasContentOnlyLocking,
 		canRemove,
 		hasBlockStyles,
 		icon,
@@ -206,8 +207,12 @@ export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
 		isTemplate,
 	} = useSelect(
 		( select ) => {
-			const { getBlocksByClientId, getBlockAttributes, canRemoveBlocks } =
-				select( blockEditorStore );
+			const {
+				getTemplateLock,
+				getBlocksByClientId,
+				getBlockAttributes,
+				canRemoveBlocks,
+			} = select( blockEditorStore );
 			const { getBlockStyles, getBlockType, getActiveBlockVariation } =
 				select( blocksStore );
 			const _blocks = getBlocksByClientId( clientIds );
@@ -219,6 +224,7 @@ export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
 			const blockType = getBlockType( firstBlockName );
 
 			let _icon;
+			let _hasTemplateLock;
 			if ( _isSingleBlockSelected ) {
 				const match = getActiveBlockVariation(
 					firstBlockName,
@@ -226,9 +232,14 @@ export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
 				);
 				// Take into account active block variations.
 				_icon = match?.icon || blockType.icon;
+				_hasTemplateLock =
+					getTemplateLock( clientIds[ 0 ] ) === 'contentOnly';
 			} else {
 				const isSelectionOfSameType =
 					new Set( _blocks.map( ( { name } ) => name ) ).size === 1;
+				_hasTemplateLock = clientIds.some(
+					( id ) => getTemplateLock( id ) === 'contentOnly'
+				);
 				// When selection consists of blocks of multiple types, display an
 				// appropriate icon to communicate the non-uniformity.
 				_icon = isSelectionOfSameType ? blockType.icon : copy;
@@ -244,6 +255,7 @@ export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
 					_isSingleBlockSelected && isReusableBlock( _blocks[ 0 ] ),
 				isTemplate:
 					_isSingleBlockSelected && isTemplatePart( _blocks[ 0 ] ),
+				hasContentOnlyLocking: _hasTemplateLock,
 			};
 		},
 		[ clientIds ]
@@ -252,6 +264,7 @@ export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
 		clientId: clientIds?.[ 0 ],
 		maximumLength: 35,
 	} );
+
 	if ( invalidBlocks ) {
 		return null;
 	}
@@ -261,7 +274,10 @@ export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
 		? blockTitle
 		: __( 'Multiple blocks selected' );
 
-	const hideDropdown = disabled || ( ! hasBlockStyles && ! canRemove );
+	const hideDropdown =
+		disabled ||
+		( ! hasBlockStyles && ! canRemove ) ||
+		hasContentOnlyLocking;
 
 	if ( hideDropdown ) {
 		return (

package/src/components/block-switcher/pattern-transformations-menu.js

@@ -7,11 +7,11 @@ import { useInstanceId, useViewportMatch } from '@wordpress/compose';
 import { chevronRight } from '@wordpress/icons';
 
 import {
+	Composite,
 	MenuGroup,
 	MenuItem,
 	Popover,
 	VisuallyHidden,
-	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 
 /**
@@ -19,11 +19,6 @@ import {
  */
 import BlockPreview from '../block-preview';
 import useTransformedPatterns from './use-transformed-patterns';
-import { unlock } from '../../lock-unlock';
-
-const { CompositeV2: Composite, CompositeItemV2: CompositeItem } = unlock(
-	componentsPrivateApis
-);
 
 function PatternTransformationsMenu( {
 	blocks,
@@ -107,7 +102,7 @@ function BlockPattern( { pattern, onSelect } ) {
 	);
 	return (
 		<div className={ `${ baseClassName }-list__list-item` }>
-			<CompositeItem
+			<Composite.Item
 				render={
 					<div
 						role="option"
@@ -127,7 +122,7 @@ function BlockPattern( { pattern, onSelect } ) {
 				<div className={ `${ baseClassName }-list__item-title` }>
 					{ pattern.title }
 				</div>
-			</CompositeItem>
+			</Composite.Item>
 			{ !! pattern.description && (
 				<VisuallyHidden id={ descriptionId }>
 					{ pattern.description }

package/src/components/block-switcher/style.scss

@@ -55,30 +55,6 @@
 	}
 }
 
-// Style this the same as the block buttons in the library.
-// Needs specificity to override the icon button.
-.block-editor-block-toolbar .components-toolbar-group .components-button.block-editor-block-switcher__no-switcher-icon.has-icon.has-icon,
-.block-editor-block-toolbar .components-toolbar .components-button.block-editor-block-switcher__no-switcher-icon.has-icon.has-icon,
-.block-editor-block-toolbar .components-toolbar-group .components-button.block-editor-block-switcher__toggle.has-icon.has-icon,
-.block-editor-block-toolbar .components-toolbar .components-button.block-editor-block-switcher__toggle.has-icon.has-icon {
-	.block-editor-block-icon {
-		height: 100%;
-		position: relative;
-		margin: 0 auto;
-		display: flex;
-		align-items: center;
-		min-width: 100%;
-	}
-
-	// Position the focus style correctly.
-	&::before {
-		top: $grid-unit-10;
-		right: $grid-unit-10;
-		bottom: $grid-unit-10;
-		left: $grid-unit-10;
-	}
-}
-
 .components-popover.block-editor-block-switcher__popover .components-popover__content {
 	min-width: 300px;
 }

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

@@ -66,6 +66,7 @@ export function PrivateBlockToolbar( {
 		showParentSelector,
 		isUsingBindings,
 		hasParentPattern,
+		hasContentOnlyLocking,
 	} = useSelect( ( select ) => {
 		const {
 			getBlockName,
@@ -76,6 +77,7 @@ export function PrivateBlockToolbar( {
 			getBlockEditingMode,
 			getBlockAttributes,
 			getBlockParentsByBlockName,
+			getTemplateLock,
 		} = select( blockEditorStore );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
 		const selectedBlockClientId = selectedBlockClientIds[ 0 ];
@@ -103,6 +105,10 @@ export function PrivateBlockToolbar( {
 					.length > 0
 		);
 
+		// If one or more selected blocks are locked, do not show the BlockGroupToolbar.
+		const _hasTemplateLock = selectedBlockClientIds.some(
+			( id ) => getTemplateLock( id ) === 'contentOnly'
+		);
 		return {
 			blockClientId: selectedBlockClientId,
 			blockClientIds: selectedBlockClientIds,
@@ -123,6 +129,7 @@ export function PrivateBlockToolbar( {
 				_isDefaultEditingMode,
 			isUsingBindings: _isUsingBindings,
 			hasParentPattern: _hasParentPattern,
+			hasContentOnlyLocking: _hasTemplateLock,
 		};
 	}, [] );
 
@@ -205,9 +212,9 @@ export function PrivateBlockToolbar( {
 							</ToolbarGroup>
 						</div>
 					) }
-				{ shouldShowVisualToolbar && isMultiToolbar && (
-					<BlockGroupToolbar />
-				) }
+				{ ! hasContentOnlyLocking &&
+					shouldShowVisualToolbar &&
+					isMultiToolbar && <BlockGroupToolbar /> }
 				{ shouldShowVisualToolbar && (
 					<>
 						<BlockControls.Slot

package/src/components/block-toolbar/style.scss

@@ -70,10 +70,13 @@
 	// Raise the specificity.
 	&.components-accessible-toolbar {
 		border: none;
-		border-bottom: $border-width solid $gray-200;
 		border-radius: 0;
 	}
 
+	&.is-unstyled {
+		box-shadow: 0 $border-width 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha.
+	}
+
 	.block-editor-block-toolbar {
 		overflow: auto;
 		overflow-y: hidden;

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

@@ -202,7 +202,7 @@ export default function BlockTools( {
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div { ...props } onKeyDown={ onKeyDown }>
 			<InsertionPointOpenRef.Provider value={ useRef( false ) }>
-				{ ! isTyping && (
+				{ ! isTyping && ! isZoomOutMode && (
 					<InsertionPoint
 						__unstableContentRef={ __unstableContentRef }
 					/>

package/src/components/block-tools/zoom-out-mode-inserters.js

@@ -88,18 +88,6 @@ function ZoomOutModeInserters() {
 				previousClientId={ previousClientId }
 				nextClientId={ nextClientId }
 			>
-				{ shouldRenderInsertionPoint && (
-					<div
-						style={ {
-							borderRadius: '0',
-							height: '12px',
-							opacity: 1,
-							transform: 'translateY(-50%)',
-							width: '100%',
-						} }
-						className="block-editor-block-list__insertion-point-indicator"
-					/>
-				) }
 				{ ! shouldRenderInsertionPoint && (
 					<ZoomOutModeInserterButton
 						isVisible={ isSelected || isHovered }

package/src/components/block-tools/zoom-out-toolbar.js

@@ -31,7 +31,12 @@ export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) {
 				getPreviousBlockClientId,
 				canRemoveBlock,
 				canMoveBlock,
+				getSettings,
 			} = select( blockEditorStore );
+
+			const { __experimentalSetIsInserterOpened: setIsInserterOpened } =
+				getSettings();
+
 			const { getBlockType } = select( blocksStore );
 			const { name } = getBlock( clientId );
 			const blockType = getBlockType( name );
@@ -63,6 +68,7 @@ export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) {
 				isPrevBlockTemplatePart,
 				canRemove: canRemoveBlock( clientId ),
 				canMove: canMoveBlock( clientId ),
+				setIsInserterOpened,
 			};
 		},
 		[ clientId ]
@@ -75,6 +81,7 @@ export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) {
 		isPrevBlockTemplatePart,
 		canRemove,
 		canMove,
+		setIsInserterOpened,
 	} = selected;
 
 	const { removeBlock, __unstableSetEditorMode } =
@@ -132,6 +139,10 @@ export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) {
 					icon={ edit }
 					label={ __( 'Edit' ) }
 					onClick={ () => {
+						// Setting may be undefined.
+						if ( typeof setIsInserterOpened === 'function' ) {
+							setIsInserterOpened( false );
+						}
 						__unstableSetEditorMode( 'edit' );
 						__unstableContentRef.current?.focus();
 					} }