@wordpress/block-editor 14.4.0 → 14.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "14.4.0",
+	"version": "14.5.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -32,40 +32,40 @@
 		"{src,build,build-module}/{index.js,store/index.js,hooks/**}"
 	],
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
+		"@babel/runtime": "7.25.7",
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.9.0",
-		"@wordpress/api-fetch": "^7.9.0",
-		"@wordpress/blob": "^4.9.0",
-		"@wordpress/block-serialization-default-parser": "^5.9.0",
-		"@wordpress/blocks": "^13.9.0",
-		"@wordpress/commands": "^1.9.0",
-		"@wordpress/components": "^28.9.0",
-		"@wordpress/compose": "^7.9.0",
-		"@wordpress/data": "^10.9.0",
-		"@wordpress/date": "^5.9.0",
-		"@wordpress/deprecated": "^4.9.0",
-		"@wordpress/dom": "^4.9.0",
-		"@wordpress/element": "^6.9.0",
-		"@wordpress/escape-html": "^3.9.0",
-		"@wordpress/hooks": "^4.9.0",
-		"@wordpress/html-entities": "^4.9.0",
-		"@wordpress/i18n": "^5.9.0",
-		"@wordpress/icons": "^10.9.0",
-		"@wordpress/is-shallow-equal": "^5.9.0",
-		"@wordpress/keyboard-shortcuts": "^5.9.0",
-		"@wordpress/keycodes": "^4.9.0",
-		"@wordpress/notices": "^5.9.0",
-		"@wordpress/preferences": "^4.9.0",
-		"@wordpress/private-apis": "^1.9.0",
-		"@wordpress/rich-text": "^7.9.0",
-		"@wordpress/style-engine": "^2.9.0",
-		"@wordpress/token-list": "^3.9.0",
-		"@wordpress/url": "^4.9.0",
-		"@wordpress/warning": "^3.9.0",
-		"@wordpress/wordcount": "^4.9.0",
+		"@wordpress/a11y": "^4.10.0",
+		"@wordpress/api-fetch": "^7.10.0",
+		"@wordpress/blob": "^4.10.0",
+		"@wordpress/block-serialization-default-parser": "^5.10.0",
+		"@wordpress/blocks": "^13.10.0",
+		"@wordpress/commands": "^1.10.0",
+		"@wordpress/components": "^28.10.0",
+		"@wordpress/compose": "^7.10.0",
+		"@wordpress/data": "^10.10.0",
+		"@wordpress/date": "^5.10.0",
+		"@wordpress/deprecated": "^4.10.0",
+		"@wordpress/dom": "^4.10.0",
+		"@wordpress/element": "^6.10.0",
+		"@wordpress/escape-html": "^3.10.0",
+		"@wordpress/hooks": "^4.10.0",
+		"@wordpress/html-entities": "^4.10.0",
+		"@wordpress/i18n": "^5.10.0",
+		"@wordpress/icons": "^10.10.0",
+		"@wordpress/is-shallow-equal": "^5.10.0",
+		"@wordpress/keyboard-shortcuts": "^5.10.0",
+		"@wordpress/keycodes": "^4.10.0",
+		"@wordpress/notices": "^5.10.0",
+		"@wordpress/preferences": "^4.10.0",
+		"@wordpress/private-apis": "^1.10.0",
+		"@wordpress/rich-text": "^7.10.0",
+		"@wordpress/style-engine": "^2.10.0",
+		"@wordpress/token-list": "^3.10.0",
+		"@wordpress/url": "^4.10.0",
+		"@wordpress/warning": "^3.10.0",
+		"@wordpress/wordcount": "^4.10.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -88,5 +88,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "2e5495c635910cb34bfaca3c6258d2e989f66214"
+	"gitHead": "ab34a7ac935fd1478eac63b596242d83270897ee"
 }

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

@@ -4,5 +4,4 @@ iframe[name="editor-canvas"] {
 	height: 100%;
 	display: block;
 	background-color: transparent;
-	@include editor-canvas-resize-animation;
 }

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

@@ -404,14 +404,15 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	overflow: hidden;
 	font-size: $default-font-size;
 	font-family: $default-font;
 	color: $black;
 	font-weight: normal;
 
 	.is-zoomed-out & {
-		// Scale the font size based on the zoom level.
-		font-size: calc(#{$default-font-size} * ( 2 - var(--wp-block-editor-iframe-zoom-out-scale)  ));
+		// Maintains an absolute font-size by counter-scaling based on the zoom level.
+		font-size: calc(#{$default-font-size} / var(--wp-block-editor-iframe-zoom-out-scale));
 	}
 
 	&.is-dragged-over {

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

@@ -10,6 +10,7 @@ import { useRefEffect } from '@wordpress/compose';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
 
 /**
  * Adds block behaviour:
@@ -20,9 +21,18 @@ import { store as blockEditorStore } from '../../../store';
  * @param {string} clientId Block client ID.
  */
 export function useEventHandlers( { clientId, isSelected } ) {
-	const { getBlockRootClientId, getBlockIndex } =
-		useSelect( blockEditorStore );
-	const { insertAfterBlock, removeBlock } = useDispatch( blockEditorStore );
+	const {
+		getBlockRootClientId,
+		getBlockIndex,
+		isZoomOut,
+		__unstableGetEditorMode,
+	} = unlock( useSelect( blockEditorStore ) );
+	const {
+		insertAfterBlock,
+		removeBlock,
+		__unstableSetEditorMode,
+		resetZoomLevel,
+	} = unlock( useDispatch( blockEditorStore ) );
 
 	return useRefEffect(
 		( node ) => {
@@ -56,7 +66,14 @@ export function useEventHandlers( { clientId, isSelected } ) {
 
 				event.preventDefault();
 
-				if ( keyCode === ENTER ) {
+				if (
+					keyCode === ENTER &&
+					__unstableGetEditorMode() === 'zoom-out' &&
+					isZoomOut()
+				) {
+					__unstableSetEditorMode( 'edit' );
+					resetZoomLevel();
+				} else if ( keyCode === ENTER ) {
 					insertAfterBlock( clientId );
 				} else {
 					removeBlock( clientId );
@@ -88,6 +105,10 @@ export function useEventHandlers( { clientId, isSelected } ) {
 			getBlockIndex,
 			insertAfterBlock,
 			removeBlock,
+			__unstableGetEditorMode,
+			__unstableSetEditorMode,
+			isZoomOut,
+			resetZoomLevel,
 		]
 	);
 }

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

@@ -101,14 +101,15 @@ export function ZoomOutSeparator( {
 		<AnimatePresence>
 			{ isVisible && (
 				<motion.div
-					as="button"
-					layout={ ! isReducedMotion }
 					initial={ { height: 0 } }
-					animate={ { height: '120px' } }
+					animate={ {
+						// Use a height equal to that of the zoom out frame size.
+						height: 'calc(1 * var(--wp-block-editor-iframe-zoom-out-frame-size) / var(--wp-block-editor-iframe-zoom-out-scale)',
+					} }
 					exit={ { height: 0 } }
 					transition={ {
 						type: 'tween',
-						duration: 0.2,
+						duration: isReducedMotion ? 0 : 0.2,
 						ease: [ 0.6, 0, 0.4, 1 ],
 					} }
 					className={ clsx(
@@ -124,10 +125,11 @@ export function ZoomOutSeparator( {
 					<motion.div
 						initial={ { opacity: 0 } }
 						animate={ { opacity: 1 } }
-						exit={ { opacity: 0 } }
+						exit={ { opacity: 0, transition: { delay: -0.125 } } }
 						transition={ {
-							type: 'tween',
+							ease: 'linear',
 							duration: 0.1,
+							delay: 0.125,
 						} }
 					>
 						{ __( 'Drop pattern.' ) }

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

@@ -8,6 +8,7 @@ import clsx from 'clsx';
  */
 import { useMergeRefs } from '@wordpress/compose';
 import { Popover } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
 import {
 	forwardRef,
 	useMemo,
@@ -21,6 +22,8 @@ import {
 import { useBlockElement } from '../block-list/use-block-props/use-block-refs';
 import usePopoverScroll from './use-popover-scroll';
 import { rectUnion, getVisibleElementBounds } from '../../utils/dom';
+import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 const MAX_POPOVER_RECOMPUTE_COUNTER = Number.MAX_SAFE_INTEGER;
 
@@ -74,12 +77,38 @@ function BlockPopover(
 		};
 	}, [ selectedElement ] );
 
+	const { isZoomOut, parentSectionBlock, isSectionSelected } = useSelect(
+		( select ) => {
+			const {
+				isZoomOut: isZoomOutSelector,
+				getSectionRootClientId,
+				getParentSectionBlock,
+				getBlockOrder,
+			} = unlock( select( blockEditorStore ) );
+
+			return {
+				isZoomOut: isZoomOutSelector(),
+				parentSectionBlock:
+					getParentSectionBlock( clientId ) ?? clientId,
+				isSectionSelected: getBlockOrder(
+					getSectionRootClientId()
+				).includes( clientId ),
+			};
+		},
+		[ clientId ]
+	);
+
+	// This element is used to position the zoom out view vertical toolbar
+	// correctly, relative to the selected section.
+	const parentSectionElement = useBlockElement( parentSectionBlock );
+
 	const popoverAnchor = useMemo( () => {
 		if (
 			// popoverDimensionsRecomputeCounter is by definition always equal or greater
 			// than 0. This check is only there to satisfy the correctness of the
 			// exhaustive-deps rule for the `useMemo` hook.
 			popoverDimensionsRecomputeCounter < 0 ||
+			( isZoomOut && ! parentSectionElement ) ||
 			! selectedElement ||
 			( bottomClientId && ! lastSelectedElement )
 		) {
@@ -88,6 +117,35 @@ function BlockPopover(
 
 		return {
 			getBoundingClientRect() {
+				// The zoom out view has a vertical block toolbar that should always
+				// be on the edge of the canvas, aligned to the top of the currently
+				// selected section. This condition changes the anchor of the toolbar
+				// to the section instead of the block to handle blocks that are
+				// not full width and nested blocks to keep section height.
+				if ( isZoomOut && isSectionSelected ) {
+					// Compute the height based on the parent section of the
+					// selected block, because the selected block may be
+					// shorter than the section.
+					const canvasElementRect = getVisibleElementBounds(
+						__unstableContentRef.current
+					);
+					const parentSectionElementRect =
+						getVisibleElementBounds( parentSectionElement );
+					const anchorHeight =
+						parentSectionElementRect.bottom -
+						parentSectionElementRect.top;
+
+					// Always use the width of the section root element to make sure
+					// the toolbar is always on the edge of the canvas.
+					const anchorWidth = canvasElementRect.width;
+					return new window.DOMRectReadOnly(
+						canvasElementRect.left,
+						parentSectionElementRect.top,
+						anchorWidth,
+						anchorHeight
+					);
+				}
+
 				return lastSelectedElement
 					? rectUnion(
 							getVisibleElementBounds( selectedElement ),
@@ -98,10 +156,14 @@ function BlockPopover(
 			contextElement: selectedElement,
 		};
 	}, [
+		popoverDimensionsRecomputeCounter,
+		isZoomOut,
+		parentSectionElement,
+		selectedElement,
 		bottomClientId,
 		lastSelectedElement,
-		selectedElement,
-		popoverDimensionsRecomputeCounter,
+		isSectionSelected,
+		__unstableContentRef,
 	] );
 
 	if ( ! selectedElement || ( bottomClientId && ! lastSelectedElement ) ) {

package/src/components/block-preview/auto.js

@@ -15,7 +15,7 @@ import EditorStyles from '../editor-styles';
 import { store } from '../../store';
 
 // This is used to avoid rendering the block list if the sizes change.
-let MemoizedBlockList;
+const MemoizedBlockList = memo( BlockList );
 
 const MAX_HEIGHT = 2000;
 const EMPTY_ADDITIONAL_STYLES = [];
@@ -55,9 +55,6 @@ function ScaledBlockPreview( {
 		return styles;
 	}, [ styles, additionalStyles ] );
 
-	// Initialize on render instead of module top level, to avoid circular dependency issues.
-	MemoizedBlockList = MemoizedBlockList || memo( BlockList );
-
 	const scale = containerWidth / viewportWidth;
 	const aspectRatio = contentHeight
 		? containerWidth / ( contentHeight * scale )

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

@@ -25,7 +25,6 @@ import usePopoverScroll from '../block-popover/use-popover-scroll';
 import ZoomOutModeInserters from './zoom-out-mode-inserters';
 import { useShowBlockTools } from './use-show-block-tools';
 import { unlock } from '../../lock-unlock';
-import getEditorRegion from '../../utils/get-editor-region';
 
 function selector( select ) {
 	const {
@@ -83,7 +82,6 @@ export default function BlockTools( {
 	} = useShowBlockTools();
 
 	const {
-		clearSelectedBlock,
 		duplicateBlocks,
 		removeBlocks,
 		replaceBlocks,
@@ -95,8 +93,6 @@ export default function BlockTools( {
 		expandBlock,
 	} = unlock( useDispatch( blockEditorStore ) );
 
-	const blockSelectionButtonRef = useRef();
-
 	function onKeyDown( event ) {
 		if ( event.defaultPrevented ) {
 			return;
@@ -157,13 +153,6 @@ export default function BlockTools( {
 				// block so that focus is directed back to the beginning of the selection.
 				// In effect, to the user this feels like deselecting the multi-selection.
 				selectBlock( clientIds[ 0 ] );
-			} else if (
-				clientIds.length === 1 &&
-				event.target === blockSelectionButtonRef?.current
-			) {
-				event.preventDefault();
-				clearSelectedBlock();
-				getEditorRegion( __unstableContentRef.current )?.focus();
 			}
 		} else if ( isMatch( 'core/block-editor/collapse-list-view', event ) ) {
 			// If focus is currently within a text field, such as a rich text block or other editable field,

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

@@ -203,7 +203,7 @@
 	}
 
 	// Make the spacing consistent between controls.
-	.components-button {
+	.zoom-out-toolbar-button {
 		height: $button-size-next-default-40px;
 	}
 }

package/src/components/block-tools/use-show-block-tools.js

@@ -8,6 +8,7 @@ import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 /**
  * Source of truth for which block tools are showing in the block editor.
@@ -24,7 +25,9 @@ export function useShowBlockTools() {
 			getSettings,
 			__unstableGetEditorMode,
 			isTyping,
-		} = select( blockEditorStore );
+			getBlockOrder,
+			getSectionRootClientId,
+		} = unlock( select( blockEditorStore ) );
 
 		const clientId =
 			getSelectedBlockClientId() || getFirstMultiSelectedBlockClientId();
@@ -42,10 +45,14 @@ export function useShowBlockTools() {
 			editorMode === 'edit' &&
 			isEmptyDefaultBlock;
 		const isZoomOut = editorMode === 'zoom-out';
+		const isSectionSelected = getBlockOrder(
+			getSectionRootClientId()
+		).includes( clientId );
 		const _showZoomOutToolbar =
+			clientId &&
 			isZoomOut &&
-			block?.attributes?.align === 'full' &&
-			! _showEmptyBlockSideInserter;
+			! _showEmptyBlockSideInserter &&
+			isSectionSelected;
 		const _showBlockToolbarPopover =
 			! _showZoomOutToolbar &&
 			! getSettings().hasFixedToolbar &&

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

@@ -5,7 +5,7 @@ import clsx from 'clsx';
 /**
  * Internal dependencies
  */
-import BlockPopover from '../block-popover';
+import { PrivateBlockPopover as BlockPopover } from '../block-popover';
 import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
 import useSelectedBlockToolProps from './use-selected-block-tool-props';
 import ZoomOutToolbar from './zoom-out-toolbar';
@@ -29,6 +29,7 @@ export default function ZoomOutPopover( { clientId, __unstableContentRef } ) {
 
 	return (
 		<BlockPopover
+			__unstableContentRef={ __unstableContentRef }
 			clientId={ capturingClientId || clientId }
 			bottomClientId={ lastClientId }
 			className={ clsx( 'zoom-out-toolbar-popover', {

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { dragHandle, trash, edit } from '@wordpress/icons';
+import { dragHandle, trash } from '@wordpress/icons';
 import { Button, ToolbarButton } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as blocksStore } from '@wordpress/blocks';
@@ -15,7 +15,6 @@ import BlockDraggable from '../block-draggable';
 import BlockMover from '../block-mover';
 import Shuffle from '../block-toolbar/shuffle';
 import NavigableToolbar from '../navigable-toolbar';
-import { unlock } from '../../lock-unlock';
 
 export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) {
 	const selected = useSelect(
@@ -74,12 +73,9 @@ export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) {
 		isPrevBlockTemplatePart,
 		canRemove,
 		canMove,
-		setIsInserterOpened,
 	} = selected;
 
-	const { removeBlock, __unstableSetEditorMode, resetZoomLevel } = unlock(
-		useDispatch( blockEditorStore )
-	);
+	const { removeBlock } = useDispatch( blockEditorStore );
 
 	const showBlockDraggable = canMove && ! isBlockTemplatePart;
 
@@ -123,23 +119,6 @@ export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) {
 				<Shuffle clientId={ clientId } as={ ToolbarButton } />
 			) }
 
-			{ ! isBlockTemplatePart && (
-				<ToolbarButton
-					className="zoom-out-toolbar-button"
-					icon={ edit }
-					label={ __( 'Edit' ) }
-					onClick={ () => {
-						// Setting may be undefined.
-						if ( typeof setIsInserterOpened === 'function' ) {
-							setIsInserterOpened( false );
-						}
-						__unstableSetEditorMode( 'edit' );
-						resetZoomLevel();
-						__unstableContentRef.current?.focus();
-					} }
-				/>
-			) }
-
 			{ canRemove && ! isBlockTemplatePart && (
 				<ToolbarButton
 					className="zoom-out-toolbar-button"

package/src/components/iframe/content.scss

@@ -1,30 +1,25 @@
 .block-editor-iframe__body {
 	position: relative;
-}
-
-.block-editor-iframe__container {
-	width: 100%;
-	height: 100%;
-	overflow-x: hidden;
-}
-
-.block-editor-iframe__scale-container {
-	width: 100%;
-	height: 100%;
-	display: flex;
-}
-
-.block-editor-iframe__scale-container.is-zoomed-out {
-	$container-width: var(--wp-block-editor-iframe-zoom-out-container-width, 100vw);
-	$prev-container-width: var(--wp-block-editor-iframe-zoom-out-prev-container-width, 100vw);
-	width: $prev-container-width;
-	margin-left: calc(-1 * (#{$prev-container-width} - #{$container-width}) / 2);
+	border: 0.01px solid transparent;
 }
 
 .block-editor-iframe__html {
-	border: 0 solid $gray-300;
 	transform-origin: top center;
-	@include editor-canvas-resize-animation;
+	// 400ms should match the animation speed used in iframe/index.js
+	$zoomOutAnimation: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96);
+
+	// We don't want to animate the transform of the translateX because it is used
+	// to "center" the canvas. Leaving it on causes the canvas to slide around in
+	// odd ways.
+	transition: $zoomOutAnimation, transform 0s scale 0s;
+	@include reduce-motion("transition");
+
+	&.zoom-out-animation {
+		// we only want to animate the scaling when entering zoom out. When sidebars
+		// are toggled, the resizing of the iframe handles scaling the canvas as well,
+		// and the doubled animations cause very odd animations.
+		transition: $zoomOutAnimation, transform 0s;
+	}
 }
 
 .block-editor-iframe__html.is-zoomed-out {
@@ -32,27 +27,27 @@
 	$frame-size: var(--wp-block-editor-iframe-zoom-out-frame-size);
 	$inner-height: var(--wp-block-editor-iframe-zoom-out-inner-height);
 	$content-height: var(--wp-block-editor-iframe-zoom-out-content-height);
-	$prev-container-width: var(--wp-block-editor-iframe-zoom-out-prev-container-width);
-
-	transform: scale(#{$scale});
-
+	$outer-container-width: var(--wp-block-editor-iframe-zoom-out-outer-container-width);
+	$container-width: var(--wp-block-editor-iframe-zoom-out-container-width, 100vw);
+	// Apply an X translation to center the scaled content within the available space.
+	transform: translateX(calc(( #{$outer-container-width} - #{ $container-width }) / 2 / #{$scale}));
+	scale: #{$scale};
 	background-color: $gray-300;
 
-	// Firefox and Safari don't render margin-bottom here and margin-bottom is needed for Chrome
-	// layout, so we use border matching the background instead of margins.
-	border: calc(#{$frame-size} / #{$scale}) solid $gray-300;
-
 	// Chrome seems to respect that transform scale shouldn't affect the layout size of the element,
 	// so we need to adjust the height of the content to match the scale by using negative margins.
 	$extra-content-height: calc(#{$content-height} * (1 - #{$scale}));
-	$total-frame-height: calc(2 * #{$frame-size});
+	$total-frame-height: calc(2 * #{$frame-size} / #{$scale});
 	$total-height: calc(#{$extra-content-height} + #{$total-frame-height} + 2px);
 	margin-bottom: calc(-1 * #{$total-height});
+	// Add the top/bottom frame size. We use scaling to account for the left/right, as
+	// the padding left/right causes the contents to reflow, which breaks the 1:1 scaling
+	// of the content.
+	padding-top: calc(#{$frame-size} / #{$scale});
+	padding-bottom: calc(#{$frame-size} / #{$scale});
 
 	body {
 		min-height: calc((#{$inner-height} - #{$total-frame-height}) / #{$scale});
-		display: flex;
-		flex-direction: column;
 
 		> .is-root-container:not(.wp-block-post-content) {
 			flex: 1;