@wordpress/block-editor 14.3.5 → 14.3.7

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/zoom-out-separator.js

@@ -85,14 +85,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.5 * 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(
@@ -108,10 +109,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

@@ -98,10 +98,10 @@ function BlockPopover(
 			contextElement: selectedElement,
 		};
 	}, [
+		popoverDimensionsRecomputeCounter,
+		selectedElement,
 		bottomClientId,
 		lastSelectedElement,
-		selectedElement,
-		popoverDimensionsRecomputeCounter,
 	] );
 
 	if ( ! selectedElement || ( bottomClientId && ! lastSelectedElement ) ) {

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

@@ -16,7 +16,7 @@ import {
 	isReusableBlock,
 	isTemplatePart,
 } from '@wordpress/blocks';
-import { ToolbarGroup } from '@wordpress/components';
+import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -35,6 +35,8 @@ import { store as blockEditorStore } from '../../store';
 import __unstableBlockNameContext from './block-name-context';
 import NavigableToolbar from '../navigable-toolbar';
 import { useHasBlockToolbar } from './use-has-block-toolbar';
+import Shuffle from './shuffle';
+import { unlock } from '../../lock-unlock';
 
 /**
  * Renders the block toolbar.
@@ -58,7 +60,6 @@ export function PrivateBlockToolbar( {
 	const {
 		blockClientId,
 		blockClientIds,
-		isContentOnlyEditingMode,
 		isDefaultEditingMode,
 		blockType,
 		toolbarKey,
@@ -67,6 +68,10 @@ export function PrivateBlockToolbar( {
 		isUsingBindings,
 		hasParentPattern,
 		hasContentOnlyLocking,
+		showShuffleButton,
+		showSlots,
+		showGroupButtons,
+		showLockButtons,
 	} = useSelect( ( select ) => {
 		const {
 			getBlockName,
@@ -78,7 +83,8 @@ export function PrivateBlockToolbar( {
 			getBlockAttributes,
 			getBlockParentsByBlockName,
 			getTemplateLock,
-		} = select( blockEditorStore );
+			isZoomOutMode,
+		} = unlock( select( blockEditorStore ) );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
 		const selectedBlockClientId = selectedBlockClientIds[ 0 ];
 		const parents = getBlockParents( selectedBlockClientId );
@@ -112,12 +118,12 @@ export function PrivateBlockToolbar( {
 		return {
 			blockClientId: selectedBlockClientId,
 			blockClientIds: selectedBlockClientIds,
-			isContentOnlyEditingMode: editingMode === 'contentOnly',
 			isDefaultEditingMode: _isDefaultEditingMode,
 			blockType: selectedBlockClientId && getBlockType( _blockName ),
 			shouldShowVisualToolbar: isValid && isVisual,
 			toolbarKey: `${ selectedBlockClientId }${ firstParentClientId }`,
 			showParentSelector:
+				! isZoomOutMode() &&
 				parentBlockType &&
 				getBlockEditingMode( firstParentClientId ) === 'default' &&
 				hasBlockSupport(
@@ -130,6 +136,10 @@ export function PrivateBlockToolbar( {
 			isUsingBindings: _isUsingBindings,
 			hasParentPattern: _hasParentPattern,
 			hasContentOnlyLocking: _hasTemplateLock,
+			showShuffleButton: isZoomOutMode(),
+			showSlots: ! isZoomOutMode(),
+			showGroupButtons: ! isZoomOutMode(),
+			showLockButtons: ! isZoomOutMode(),
 		};
 	}, [] );
 
@@ -179,13 +189,11 @@ export function PrivateBlockToolbar( {
 			key={ toolbarKey }
 		>
 			<div ref={ toolbarWrapperRef } className={ innerClasses }>
-				{ ! isMultiToolbar &&
-					isLargeViewport &&
-					isDefaultEditingMode && <BlockParentSelector /> }
+				{ showParentSelector && ! isMultiToolbar && isLargeViewport && (
+					<BlockParentSelector />
+				) }
 				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
-					( isDefaultEditingMode ||
-						( isContentOnlyEditingMode && ! hasParentPattern ) ||
-						isSynced ) && (
+					! hasParentPattern && (
 						<div
 							ref={ nodeRef }
 							{ ...showHoveredOrFocusedGestures }
@@ -196,26 +204,31 @@ export function PrivateBlockToolbar( {
 									disabled={ ! isDefaultEditingMode }
 									isUsingBindings={ isUsingBindings }
 								/>
-								{ isDefaultEditingMode && (
-									<>
-										{ ! isMultiToolbar && (
-											<BlockLockToolbar
-												clientId={ blockClientId }
-											/>
-										) }
-										<BlockMover
-											clientIds={ blockClientIds }
-											hideDragHandle={ hideDragHandle }
-										/>
-									</>
+								{ ! isMultiToolbar && showLockButtons && (
+									<BlockLockToolbar
+										clientId={ blockClientId }
+									/>
 								) }
+								<BlockMover
+									clientIds={ blockClientIds }
+									hideDragHandle={ hideDragHandle }
+								/>
 							</ToolbarGroup>
 						</div>
 					) }
 				{ ! hasContentOnlyLocking &&
 					shouldShowVisualToolbar &&
-					isMultiToolbar && <BlockGroupToolbar /> }
-				{ shouldShowVisualToolbar && (
+					isMultiToolbar &&
+					showGroupButtons && <BlockGroupToolbar /> }
+				{ showShuffleButton && (
+					<ToolbarGroup>
+						<Shuffle
+							clientId={ blockClientIds[ 0 ] }
+							as={ ToolbarButton }
+						/>
+					</ToolbarGroup>
+				) }
+				{ shouldShowVisualToolbar && showSlots && (
 					<>
 						<BlockControls.Slot
 							group="parent"

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

@@ -59,9 +59,18 @@
 
 	> :last-child,
 	> :last-child .components-toolbar-group,
-	> :last-child .components-toolbar {
+	> :last-child .components-toolbar,
+	// If the last toolbar group is empty,
+	// we need to remove the double border from the penultimate one.
+	&:has(> :last-child:empty) > :nth-last-child(2),
+	&:has(> :last-child:empty) > :nth-last-child(2) .components-toolbar-group,
+	&:has(> :last-child:empty) > :nth-last-child(2) .components-toolbar {
 		border-right: none;
 	}
+
+	.components-toolbar-group:empty {
+		display: none;
+	}
 }
 
 .block-editor-block-contextual-toolbar {

package/src/components/block-toolbar/use-has-block-toolbar.js

@@ -15,40 +15,31 @@ import { useHasAnyBlockControls } from '../block-controls/use-has-block-controls
  * @return {boolean} Whether the block toolbar component will be rendered.
  */
 export function useHasBlockToolbar() {
-	const { isToolbarEnabled, isDefaultEditingMode } = useSelect(
-		( select ) => {
-			const {
-				getBlockEditingMode,
-				getBlockName,
-				getBlockSelectionStart,
-			} = select( blockEditorStore );
+	const { isToolbarEnabled, isBlockDisabled } = useSelect( ( select ) => {
+		const { getBlockEditingMode, getBlockName, getBlockSelectionStart } =
+			select( blockEditorStore );
 
-			// we only care about the 1st selected block
-			// for the toolbar, so we use getBlockSelectionStart
-			// instead of getSelectedBlockClientIds
-			const selectedBlockClientId = getBlockSelectionStart();
+		// we only care about the 1st selected block
+		// for the toolbar, so we use getBlockSelectionStart
+		// instead of getSelectedBlockClientIds
+		const selectedBlockClientId = getBlockSelectionStart();
 
-			const blockType =
-				selectedBlockClientId &&
-				getBlockType( getBlockName( selectedBlockClientId ) );
+		const blockType =
+			selectedBlockClientId &&
+			getBlockType( getBlockName( selectedBlockClientId ) );
 
-			return {
-				isToolbarEnabled:
-					blockType &&
-					hasBlockSupport( blockType, '__experimentalToolbar', true ),
-				isDefaultEditingMode:
-					getBlockEditingMode( selectedBlockClientId ) === 'default',
-			};
-		},
-		[]
-	);
+		return {
+			isToolbarEnabled:
+				blockType &&
+				hasBlockSupport( blockType, '__experimentalToolbar', true ),
+			isBlockDisabled:
+				getBlockEditingMode( selectedBlockClientId ) === 'disabled',
+		};
+	}, [] );
 
 	const hasAnyBlockControls = useHasAnyBlockControls();
 
-	if (
-		! isToolbarEnabled ||
-		( ! isDefaultEditingMode && ! hasAnyBlockControls )
-	) {
+	if ( ! isToolbarEnabled || ( isBlockDisabled && ! hasAnyBlockControls ) ) {
 		return false;
 	}
 

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

@@ -20,7 +20,6 @@ import {
 } from './insertion-point';
 import BlockToolbarPopover from './block-toolbar-popover';
 import BlockToolbarBreadcrumb from './block-toolbar-breadcrumb';
-import ZoomOutPopover from './zoom-out-popover';
 import { store as blockEditorStore } from '../../store';
 import usePopoverScroll from '../block-popover/use-popover-scroll';
 import ZoomOutModeInserters from './zoom-out-mode-inserters';
@@ -80,7 +79,6 @@ export default function BlockTools( {
 		showEmptyBlockSideInserter,
 		showBreadcrumb,
 		showBlockToolbarPopover,
-		showZoomOutToolbar,
 	} = useShowBlockTools();
 
 	const {
@@ -231,13 +229,6 @@ export default function BlockTools( {
 					/>
 				) }
 
-				{ showZoomOutToolbar && (
-					<ZoomOutPopover
-						__unstableContentRef={ __unstableContentRef }
-						clientId={ clientId }
-					/>
-				) }
-
 				{ /* Used for the inline rich text toolbar. Until this toolbar is combined into BlockToolbar, someone implementing their own BlockToolbar will also need to use this to see the image caption toolbar. */ }
 				{ ! isZoomOutMode && ! hasFixedToolbar && (
 					<Popover.Slot

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

@@ -270,30 +270,6 @@
 	left: 50%;
 }
 
-.zoom-out-toolbar {
-
-	.block-editor-block-mover-button.block-editor-block-mover-button:focus-visible::before,
-	.zoom-out-toolbar-button:focus::before,
-	.block-editor-block-toolbar-shuffle:focus::before,
-	.block-selection-button_drag-handle:focus::before {
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-	}
-
-	.block-editor-block-mover {
-		background: none;
-		border: none;
-	}
-
-	// Make the spacing consistent between controls.
-	.zoom-out-toolbar-button {
-		height: $button-size-next-default-40px;
-	}
-}
-
-.block-editor-block-tools__zoom-out-mode-inserter-button {
-	visibility: hidden;
-
-	&.is-visible {
-		visibility: visible;
-	}
+.components-button.block-editor-button-pattern-inserter__button.block-editor-block-tools__zoom-out-mode-inserter-button {
+	top: -1px;
 }

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.
@@ -25,7 +26,7 @@ export function useShowBlockTools() {
 			hasMultiSelection,
 			__unstableGetEditorMode,
 			isTyping,
-		} = select( blockEditorStore );
+		} = unlock( select( blockEditorStore ) );
 
 		const clientId =
 			getSelectedBlockClientId() || getFirstMultiSelectedBlockClientId();
@@ -46,15 +47,7 @@ export function useShowBlockTools() {
 			hasSelectedBlock &&
 			! hasMultiSelection() &&
 			editorMode === 'navigation';
-
-		const isZoomOut = editorMode === 'zoom-out';
-		const _showZoomOutToolbar =
-			isZoomOut &&
-			block?.attributes?.align === 'full' &&
-			! _showEmptyBlockSideInserter &&
-			! maybeShowBreadcrumb;
 		const _showBlockToolbarPopover =
-			! _showZoomOutToolbar &&
 			! getSettings().hasFixedToolbar &&
 			! _showEmptyBlockSideInserter &&
 			hasSelectedBlock &&
@@ -66,7 +59,6 @@ export function useShowBlockTools() {
 			showBreadcrumb:
 				! _showEmptyBlockSideInserter && maybeShowBreadcrumb,
 			showBlockToolbarPopover: _showBlockToolbarPopover,
-			showZoomOutToolbar: _showZoomOutToolbar,
 		};
 	}, [] );
 }

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

@@ -16,22 +16,16 @@ function ZoomOutModeInserters() {
 	const [ isReady, setIsReady ] = useState( false );
 	const {
 		hasSelection,
-		blockInsertionPoint,
 		blockOrder,
-		blockInsertionPointVisible,
 		setInserterIsOpened,
 		sectionRootClientId,
 		selectedBlockClientId,
-		hoveredBlockClientId,
 	} = useSelect( ( select ) => {
 		const {
 			getSettings,
-			getBlockInsertionPoint,
 			getBlockOrder,
 			getSelectionStart,
 			getSelectedBlockClientId,
-			getHoveredBlockClientId,
-			isBlockInsertionPointVisible,
 			getSectionRootClientId,
 		} = unlock( select( blockEditorStore ) );
 
@@ -39,14 +33,11 @@ function ZoomOutModeInserters() {
 
 		return {
 			hasSelection: !! getSelectionStart().clientId,
-			blockInsertionPoint: getBlockInsertionPoint(),
 			blockOrder: getBlockOrder( root ),
-			blockInsertionPointVisible: isBlockInsertionPointVisible(),
 			sectionRootClientId: root,
 			setInserterIsOpened:
 				getSettings().__experimentalSetIsInserterOpened,
 			selectedBlockClientId: getSelectedBlockClientId(),
-			hoveredBlockClientId: getHoveredBlockClientId(),
 		};
 	}, [] );
 
@@ -62,51 +53,36 @@ function ZoomOutModeInserters() {
 		};
 	}, [] );
 
-	if ( ! isReady ) {
+	if ( ! isReady || ! hasSelection ) {
 		return null;
 	}
 
-	return [ undefined, ...blockOrder ].map( ( clientId, index ) => {
-		const shouldRenderInsertionPoint =
-			blockInsertionPointVisible && blockInsertionPoint.index === index;
+	const previousClientId = selectedBlockClientId;
+	const index = blockOrder.findIndex(
+		( clientId ) => selectedBlockClientId === clientId
+	);
+	const nextClientId = blockOrder[ index + 1 ];
 
-		const previousClientId = clientId;
-		const nextClientId = blockOrder[ index ];
-
-		const isSelected =
-			hasSelection &&
-			( selectedBlockClientId === previousClientId ||
-				selectedBlockClientId === nextClientId );
-
-		const isHovered =
-			hoveredBlockClientId === previousClientId ||
-			hoveredBlockClientId === nextClientId;
-
-		return (
-			<BlockPopoverInbetween
-				key={ index }
-				previousClientId={ previousClientId }
-				nextClientId={ nextClientId }
-			>
-				{ ! shouldRenderInsertionPoint && (
-					<ZoomOutModeInserterButton
-						isVisible={ isSelected || isHovered }
-						onClick={ () => {
-							setInserterIsOpened( {
-								rootClientId: sectionRootClientId,
-								insertionIndex: index,
-								tab: 'patterns',
-								category: 'all',
-							} );
-							showInsertionPoint( sectionRootClientId, index, {
-								operation: 'insert',
-							} );
-						} }
-					/>
-				) }
-			</BlockPopoverInbetween>
-		);
-	} );
+	return (
+		<BlockPopoverInbetween
+			previousClientId={ previousClientId }
+			nextClientId={ nextClientId }
+		>
+			<ZoomOutModeInserterButton
+				onClick={ () => {
+					setInserterIsOpened( {
+						rootClientId: sectionRootClientId,
+						insertionIndex: index + 1,
+						tab: 'patterns',
+						category: 'all',
+					} );
+					showInsertionPoint( sectionRootClientId, index + 1, {
+						operation: 'insert',
+					} );
+				} }
+			/>
+		</BlockPopoverInbetween>
+	);
 }
 
 export default ZoomOutModeInserters;

package/src/components/iframe/content.scss

@@ -1,30 +1,21 @@
 .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;
+	// 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.
+	@include editor-canvas-resize-animation(transform 0s, scale 0s, padding 0s);
+
+	&.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.
+		@include editor-canvas-resize-animation(transform 0s);
+	}
 }
 
 .block-editor-iframe__html.is-zoomed-out {
@@ -32,27 +23,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});
-
+	$scale-container-width: var(--wp-block-editor-iframe-zoom-out-scale-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((#{$scale-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;