@wordpress/block-editor 14.3.3 → 14.4.0

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

@@ -47,26 +47,17 @@ const pendingBlockVisibilityUpdatesPerRegistry = new WeakMap();
 
 function Root( { className, ...settings } ) {
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const {
-		isOutlineMode,
-		isFocusMode,
-		editorMode,
-		temporarilyEditingAsBlocks,
-	} = useSelect( ( select ) => {
-		const {
-			getSettings,
-			__unstableGetEditorMode,
-			getTemporarilyEditingAsBlocks,
-			isTyping,
-		} = unlock( select( blockEditorStore ) );
-		const { outlineMode, focusMode } = getSettings();
-		return {
-			isOutlineMode: outlineMode && ! isTyping(),
-			isFocusMode: focusMode,
-			editorMode: __unstableGetEditorMode(),
-			temporarilyEditingAsBlocks: getTemporarilyEditingAsBlocks(),
-		};
-	}, [] );
+	const { isOutlineMode, isFocusMode, temporarilyEditingAsBlocks } =
+		useSelect( ( select ) => {
+			const { getSettings, getTemporarilyEditingAsBlocks, isTyping } =
+				unlock( select( blockEditorStore ) );
+			const { outlineMode, focusMode } = getSettings();
+			return {
+				isOutlineMode: outlineMode && ! isTyping(),
+				isFocusMode: focusMode,
+				temporarilyEditingAsBlocks: getTemporarilyEditingAsBlocks(),
+			};
+		}, [] );
 	const registry = useRegistry();
 	const { setBlockVisibility } = useDispatch( blockEditorStore );
 
@@ -115,7 +106,6 @@ function Root( { className, ...settings } ) {
 			className: clsx( 'is-root-container', className, {
 				'is-outline-mode': isOutlineMode,
 				'is-focus-mode': isFocusMode && isLargeViewport,
-				'is-navigate-mode': editorMode === 'navigation',
 			} ),
 		},
 		settings
@@ -192,7 +182,8 @@ function Items( {
 				getTemplateLock,
 				getBlockEditingMode,
 				__unstableGetEditorMode,
-			} = select( blockEditorStore );
+				isSectionBlock,
+			} = unlock( select( blockEditorStore ) );
 
 			const _order = getBlockOrder( rootClientId );
 
@@ -211,15 +202,16 @@ function Items( {
 				visibleBlocks: __unstableGetVisibleBlocks(),
 				isZoomOut: __unstableGetEditorMode() === 'zoom-out',
 				shouldRenderAppender:
+					! isSectionBlock( rootClientId ) &&
+					getBlockEditingMode( rootClientId ) !== 'disabled' &&
+					! getTemplateLock( rootClientId ) &&
 					hasAppender &&
 					__unstableGetEditorMode() !== 'zoom-out' &&
-					( hasCustomAppender
-						? ! getTemplateLock( rootClientId ) &&
-						  getBlockEditingMode( rootClientId ) !== 'disabled'
-						: rootClientId === selectedBlockClientId ||
-						  ( ! rootClientId &&
-								! selectedBlockClientId &&
-								! _order.length ) ),
+					( hasCustomAppender ||
+						rootClientId === selectedBlockClientId ||
+						( ! rootClientId &&
+							! selectedBlockClientId &&
+							! _order.length ) ),
 			};
 		},
 		[ rootClientId, hasAppender, hasCustomAppender ]

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 { useNavModeExit } from './use-nav-mode-exit';
 import { useZoomOutModeExit } from './use-zoom-out-mode-exit';
 import { useBlockRefProvider } from './use-block-refs';
 import { useIntersectionObserver } from './use-intersection-observer';
@@ -86,7 +85,6 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		name,
 		blockApiVersion,
 		blockTitle,
-		editorMode,
 		isSelected,
 		isSubtreeDisabled,
 		hasOverlay,
@@ -98,13 +96,11 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		isReusable,
 		isDragging,
 		hasChildSelected,
-		isBlockMovingMode,
-		canInsertMovingBlock,
 		isEditingDisabled,
 		hasEditableOutline,
 		isTemporarilyEditingAsBlocks,
 		defaultClassName,
-		templateLock,
+		isSectionBlock,
 	} = useContext( PrivateBlockContext );
 
 	// translators: %s: Type of block (i.e. Text, Image etc)
@@ -116,15 +112,14 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		useBlockRefProvider( clientId ),
 		useFocusHandler( clientId ),
 		useEventHandlers( { clientId, isSelected } ),
-		useNavModeExit( clientId ),
-		useZoomOutModeExit( { editorMode } ),
+		useZoomOutModeExit(),
 		useIsHovered( { clientId } ),
 		useIntersectionObserver(),
 		useMovingAnimation( { triggerAnimationOnChange: index, clientId } ),
 		useDisabled( { isDisabled: ! hasOverlay } ),
 		useFlashEditableBlocks( {
 			clientId,
-			isEnabled: name === 'core/block' || templateLock === 'contentOnly',
+			isEnabled: isSectionBlock,
 		} ),
 		useScrollIntoView( { isSelected } ),
 	] );
@@ -182,8 +177,6 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 				'is-reusable': isReusable,
 				'is-dragging': isDragging,
 				'has-child-selected': hasChildSelected,
-				'is-block-moving-mode': isBlockMovingMode,
-				'can-insert-moving-block': canInsertMovingBlock,
 				'is-editing-disabled': isEditingDisabled,
 				'has-editable-outline': hasEditableOutline,
 				'has-negative-margin': hasNegativeMargin,

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

@@ -12,25 +12,27 @@ import { unlock } from '../../../lock-unlock';
 
 /**
  * Allows Zoom Out mode to be exited by double clicking in the selected block.
- *
- * @param {string} clientId Block client ID.
  */
-export function useZoomOutModeExit( { editorMode } ) {
-	const { getSettings, isZoomOut } = unlock( useSelect( blockEditorStore ) );
+export function useZoomOutModeExit() {
+	const { getSettings, isZoomOut, __unstableGetEditorMode } = unlock(
+		useSelect( blockEditorStore )
+	);
+
 	const { __unstableSetEditorMode, resetZoomLevel } = unlock(
 		useDispatch( blockEditorStore )
 	);
 
 	return useRefEffect(
 		( node ) => {
-			// In "compose" mode.
-			const composeMode = editorMode === 'zoom-out' && isZoomOut();
+			function onDoubleClick( event ) {
+				// In "compose" mode.
+				const composeMode =
+					__unstableGetEditorMode() === 'zoom-out' && isZoomOut();
 
-			if ( ! composeMode ) {
-				return;
-			}
+				if ( ! composeMode ) {
+					return;
+				}
 
-			function onDoubleClick( event ) {
 				if ( ! event.defaultPrevented ) {
 					event.preventDefault();
 
@@ -52,6 +54,12 @@ export function useZoomOutModeExit( { editorMode } ) {
 				node.removeEventListener( 'dblclick', onDoubleClick );
 			};
 		},
-		[ editorMode, getSettings, __unstableSetEditorMode ]
+		[
+			getSettings,
+			__unstableSetEditorMode,
+			__unstableGetEditorMode,
+			isZoomOut,
+			resetZoomLevel,
+		]
 	);
 }

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

@@ -11,6 +11,7 @@ import { isRTL } from '@wordpress/i18n';
  */
 import { store as blockEditorStore } from '../../store';
 import { InsertionPointOpenRef } from '../block-tools/insertion-point';
+import { unlock } from '../../lock-unlock';
 
 export function useInBetweenInserter() {
 	const openRef = useContext( InsertionPointOpenRef );
@@ -31,7 +32,8 @@ export function useInBetweenInserter() {
 		getBlockEditingMode,
 		getBlockName,
 		getBlockAttributes,
-	} = useSelect( blockEditorStore );
+		getParentSectionBlock,
+	} = unlock( useSelect( blockEditorStore ) );
 	const { showInsertionPoint, hideInsertionPoint } =
 		useDispatch( blockEditorStore );
 
@@ -133,7 +135,8 @@ export function useInBetweenInserter() {
 				const clientId = element.id.slice( 'block-'.length );
 				if (
 					! clientId ||
-					__unstableIsWithinBlockOverlay( clientId )
+					__unstableIsWithinBlockOverlay( clientId ) ||
+					!! getParentSectionBlock( clientId )
 				) {
 					return;
 				}

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

@@ -30,14 +30,16 @@ export function ZoomOutSeparator( {
 	const {
 		sectionRootClientId,
 		sectionClientIds,
-		blockInsertionPoint,
+		insertionPoint,
 		blockInsertionPointVisible,
+		blockInsertionPoint,
 	} = useSelect( ( select ) => {
 		const {
-			getBlockInsertionPoint,
+			getInsertionPoint,
 			getBlockOrder,
-			isBlockInsertionPointVisible,
 			getSectionRootClientId,
+			isBlockInsertionPointVisible,
+			getBlockInsertionPoint,
 		} = unlock( select( blockEditorStore ) );
 
 		const root = getSectionRootClientId();
@@ -46,6 +48,7 @@ export function ZoomOutSeparator( {
 			sectionRootClientId: root,
 			sectionClientIds: sectionRootClientIds,
 			blockOrder: getBlockOrder( root ),
+			insertionPoint: getInsertionPoint(),
 			blockInsertionPoint: getBlockInsertionPoint(),
 			blockInsertionPointVisible: isBlockInsertionPointVisible(),
 		};
@@ -68,17 +71,30 @@ export function ZoomOutSeparator( {
 		return null;
 	}
 
+	const hasTopInsertionPoint =
+		insertionPoint?.index === 0 &&
+		clientId === sectionClientIds[ insertionPoint.index ];
+	const hasBottomInsertionPoint =
+		insertionPoint &&
+		insertionPoint.hasOwnProperty( 'index' ) &&
+		clientId === sectionClientIds[ insertionPoint.index - 1 ];
+	// We want to show the zoom out separator in either of these conditions:
+	// 1. If the inserter has an insertion index set
+	// 2. We are dragging a pattern over an insertion point
 	if ( position === 'top' ) {
 		isVisible =
-			blockInsertionPointVisible &&
-			blockInsertionPoint.index === 0 &&
-			clientId === sectionClientIds[ blockInsertionPoint.index ];
+			hasTopInsertionPoint ||
+			( blockInsertionPointVisible &&
+				blockInsertionPoint.index === 0 &&
+				clientId === sectionClientIds[ blockInsertionPoint.index ] );
 	}
 
 	if ( position === 'bottom' ) {
 		isVisible =
-			blockInsertionPointVisible &&
-			clientId === sectionClientIds[ blockInsertionPoint.index - 1 ];
+			hasBottomInsertionPoint ||
+			( blockInsertionPointVisible &&
+				clientId ===
+					sectionClientIds[ blockInsertionPoint.index - 1 ] );
 	}
 
 	return (

package/src/components/block-navigation/dropdown.js

@@ -27,8 +27,7 @@ function BlockNavigationDropdownToggle( {
 } ) {
 	return (
 		<Button
-			// TODO: Switch to `true` (40px size) if possible
-			__next40pxDefaultSize={ false }
+			__next40pxDefaultSize
 			{ ...props }
 			ref={ innerRef }
 			icon={ listView }

package/src/components/block-parent-selector/index.js

@@ -14,6 +14,7 @@ import useBlockDisplayInformation from '../use-block-display-information';
 import BlockIcon from '../block-icon';
 import { useShowHoveredOrFocusedGestures } from '../block-toolbar/utils';
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 /**
  * Block parent selector component, displaying the hierarchy of the
@@ -23,24 +24,26 @@ import { store as blockEditorStore } from '../../store';
  */
 export default function BlockParentSelector() {
 	const { selectBlock } = useDispatch( blockEditorStore );
-	const { firstParentClientId, isVisible } = useSelect( ( select ) => {
+	const { parentClientId, isVisible } = useSelect( ( select ) => {
 		const {
 			getBlockName,
 			getBlockParents,
 			getSelectedBlockClientId,
 			getBlockEditingMode,
-		} = select( blockEditorStore );
+			getParentSectionBlock,
+		} = unlock( select( blockEditorStore ) );
 		const { hasBlockSupport } = select( blocksStore );
 		const selectedBlockClientId = getSelectedBlockClientId();
+		const parentSection = getParentSectionBlock( selectedBlockClientId );
 		const parents = getBlockParents( selectedBlockClientId );
-		const _firstParentClientId = parents[ parents.length - 1 ];
-		const parentBlockName = getBlockName( _firstParentClientId );
+		const _parentClientId = parentSection ?? parents[ parents.length - 1 ];
+		const parentBlockName = getBlockName( _parentClientId );
 		const _parentBlockType = getBlockType( parentBlockName );
 		return {
-			firstParentClientId: _firstParentClientId,
+			parentClientId: _parentClientId,
 			isVisible:
-				_firstParentClientId &&
-				getBlockEditingMode( _firstParentClientId ) === 'default' &&
+				_parentClientId &&
+				getBlockEditingMode( _parentClientId ) !== 'disabled' &&
 				hasBlockSupport(
 					_parentBlockType,
 					'__experimentalParentSelector',
@@ -48,7 +51,7 @@ export default function BlockParentSelector() {
 				),
 		};
 	}, [] );
-	const blockInformation = useBlockDisplayInformation( firstParentClientId );
+	const blockInformation = useBlockDisplayInformation( parentClientId );
 
 	// Allows highlighting the parent block outline when focusing or hovering
 	// the parent block selector within the child.
@@ -65,13 +68,13 @@ export default function BlockParentSelector() {
 	return (
 		<div
 			className="block-editor-block-parent-selector"
-			key={ firstParentClientId }
+			key={ parentClientId }
 			ref={ nodeRef }
 			{ ...showHoveredOrFocusedGestures }
 		>
 			<ToolbarButton
 				className="block-editor-block-parent-selector__button"
-				onClick={ () => selectBlock( firstParentClientId ) }
+				onClick={ () => selectBlock( parentClientId ) }
 				label={ sprintf(
 					/* translators: %s: Name of the block's parent. */
 					__( 'Select parent block: %s' ),

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

@@ -18,8 +18,7 @@ import { VIEWMODES } from './constants';
 const Actions = ( { onBlockPatternSelect } ) => (
 	<div className="block-editor-block-pattern-setup__actions">
 		<Button
-			// TODO: Switch to `true` (40px size) if possible
-			__next40pxDefaultSize={ false }
+			__next40pxDefaultSize
 			variant="primary"
 			onClick={ onBlockPatternSelect }
 		>
@@ -36,8 +35,7 @@ const CarouselNavigation = ( {
 } ) => (
 	<div className="block-editor-block-pattern-setup__navigation">
 		<Button
-			// TODO: Switch to `true` (40px size) if possible
-			__next40pxDefaultSize={ false }
+			size="compact"
 			icon={ isRTL() ? chevronRight : chevronLeft }
 			label={ __( 'Previous pattern' ) }
 			onClick={ handlePrevious }
@@ -45,8 +43,7 @@ const CarouselNavigation = ( {
 			accessibleWhenDisabled
 		/>
 		<Button
-			// TODO: Switch to `true` (40px size) if possible
-			__next40pxDefaultSize={ false }
+			size="compact"
 			icon={ isRTL() ? chevronLeft : chevronRight }
 			label={ __( 'Next pattern' ) }
 			onClick={ handleNext }
@@ -69,16 +66,14 @@ const SetupToolbar = ( {
 	const displayControls = (
 		<div className="block-editor-block-pattern-setup__display-controls">
 			<Button
-				// TODO: Switch to `true` (40px size) if possible
-				__next40pxDefaultSize={ false }
+				size="compact"
 				icon={ stretchFullWidth }
 				label={ __( 'Carousel view' ) }
 				onClick={ () => setViewMode( VIEWMODES.carousel ) }
 				isPressed={ isCarouselView }
 			/>
 			<Button
-				// TODO: Switch to `true` (40px size) if possible
-				__next40pxDefaultSize={ false }
+				size="compact"
 				icon={ grid }
 				label={ __( 'Grid view' ) }
 				onClick={ () => setViewMode( VIEWMODES.grid ) }

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

@@ -38,24 +38,24 @@ export default function Pagination( {
 						className="block-editor-patterns__grid-pagination-previous"
 					>
 						<Button
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
 							variant="tertiary"
 							onClick={ () => changePage( 1 ) }
 							disabled={ currentPage === 1 }
 							aria-label={ __( 'First page' ) }
+							size="compact"
 							accessibleWhenDisabled
+							className="block-editor-patterns__grid-pagination-button"
 						>
 							<span>«</span>
 						</Button>
 						<Button
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
 							variant="tertiary"
 							onClick={ () => changePage( currentPage - 1 ) }
 							disabled={ currentPage === 1 }
 							aria-label={ __( 'Previous page' ) }
+							size="compact"
 							accessibleWhenDisabled
+							className="block-editor-patterns__grid-pagination-button"
 						>
 							<span>‹</span>
 						</Button>
@@ -74,13 +74,13 @@ export default function Pagination( {
 						className="block-editor-patterns__grid-pagination-next"
 					>
 						<Button
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
 							variant="tertiary"
 							onClick={ () => changePage( currentPage + 1 ) }
 							disabled={ currentPage === numPages }
 							aria-label={ __( 'Next page' ) }
+							size="compact"
 							accessibleWhenDisabled
+							className="block-editor-patterns__grid-pagination-button"
 						>
 							<span>›</span>
 						</Button>
@@ -89,8 +89,9 @@ export default function Pagination( {
 							onClick={ () => changePage( numPages ) }
 							disabled={ currentPage === numPages }
 							aria-label={ __( 'Last page' ) }
-							size="default"
+							size="compact"
 							accessibleWhenDisabled
+							className="block-editor-patterns__grid-pagination-button"
 						>
 							<span>»</span>
 						</Button>

package/src/components/block-patterns-paging/style.scss

@@ -4,37 +4,20 @@
 		border-top: 1px solid $gray-800;
 		padding: $grid-unit-05;
 		justify-content: center;
-		.components-button.is-tertiary {
-			width: auto;
-			height: $button-size-compact;
-			justify-content: center;
-
-			&:disabled {
-				color: $gray-600;
-				background: none;
-			}
-
-			&:hover:not(:disabled) {
-				color: $white;
-				background-color: $gray-700;
-			}
-		}
 	}
 }
 
 .show-icon-labels {
-	.block-editor-patterns__grid-pagination {
-		.components-button {
-			width: auto;
-			// Hide the button icons when labels are set to display...
-			span {
-				display: none;
-			}
-			// ... and display labels.
-			// Uses ::before as ::after is already used for active tab styling.
-			&::before {
-				content: attr(aria-label);
-			}
+	.block-editor-patterns__grid-pagination-button {
+		width: auto;
+		// Hide the button icons when labels are set to display...
+		span {
+			display: none;
+		}
+		// ... and display labels.
+		// Uses ::before as ::after is already used for active tab styling.
+		&::before {
+			content: attr(aria-label);
 		}
 	}
 }

package/src/components/block-quick-navigation/index.js

@@ -59,8 +59,7 @@ function BlockQuickNavigationItem( { clientId, onSelect } ) {
 
 	return (
 		<Button
-			// TODO: Switch to `true` (40px size) if possible
-			__next40pxDefaultSize={ false }
+			__next40pxDefaultSize
 			isPressed={ isSelected }
 			onClick={ async () => {
 				await selectBlock( clientId );