@wordpress/block-editor 14.3.6 → 14.5.0

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

@@ -19,14 +19,12 @@ import {
 	default as InsertionPoint,
 } 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';
 import { useShowBlockTools } from './use-show-block-tools';
 import { unlock } from '../../lock-unlock';
-import getEditorRegion from '../../utils/get-editor-region';
 
 function selector( select ) {
 	const {
@@ -35,7 +33,8 @@ function selector( select ) {
 		getSettings,
 		__unstableGetEditorMode,
 		isTyping,
-	} = select( blockEditorStore );
+		isDragging,
+	} = unlock( select( blockEditorStore ) );
 
 	const clientId =
 		getSelectedBlockClientId() || getFirstMultiSelectedBlockClientId();
@@ -47,6 +46,7 @@ function selector( select ) {
 		hasFixedToolbar: getSettings().hasFixedToolbar,
 		isTyping: isTyping(),
 		isZoomOutMode: editorMode === 'zoom-out',
+		isDragging: isDragging(),
 	};
 }
 
@@ -64,10 +64,9 @@ export default function BlockTools( {
 	__unstableContentRef,
 	...props
 } ) {
-	const { clientId, hasFixedToolbar, isTyping, isZoomOutMode } = useSelect(
-		selector,
-		[]
-	);
+	const { clientId, hasFixedToolbar, isTyping, isZoomOutMode, isDragging } =
+		useSelect( selector, [] );
+
 	const isMatch = useShortcutEventMatch();
 	const {
 		getBlocksByClientId,
@@ -78,13 +77,11 @@ export default function BlockTools( {
 	const { getGroupingBlockName } = useSelect( blocksStore );
 	const {
 		showEmptyBlockSideInserter,
-		showBreadcrumb,
 		showBlockToolbarPopover,
 		showZoomOutToolbar,
 	} = useShowBlockTools();
 
 	const {
-		clearSelectedBlock,
 		duplicateBlocks,
 		removeBlocks,
 		replaceBlocks,
@@ -96,8 +93,6 @@ export default function BlockTools( {
 		expandBlock,
 	} = unlock( useDispatch( blockEditorStore ) );
 
-	const blockSelectionButtonRef = useRef();
-
 	function onKeyDown( event ) {
 		if ( event.defaultPrevented ) {
 			return;
@@ -158,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,
@@ -223,14 +211,6 @@ export default function BlockTools( {
 					/>
 				) }
 
-				{ showBreadcrumb && (
-					<BlockToolbarBreadcrumb
-						ref={ blockSelectionButtonRef }
-						__unstableContentRef={ __unstableContentRef }
-						clientId={ clientId }
-					/>
-				) }
-
 				{ showZoomOutToolbar && (
 					<ZoomOutPopover
 						__unstableContentRef={ __unstableContentRef }
@@ -251,7 +231,7 @@ export default function BlockTools( {
 					name="__unstable-block-tools-after"
 					ref={ blockToolbarAfterRef }
 				/>
-				{ isZoomOutMode && (
+				{ isZoomOutMode && ! isDragging && (
 					<ZoomOutModeInserters
 						__unstableContentRef={ __unstableContentRef }
 					/>

package/src/components/block-tools/insertion-point.js

@@ -37,7 +37,6 @@ function InbetweenInsertionPointPopover( {
 		rootClientId,
 		isInserterShown,
 		isDistractionFree,
-		isNavigationMode,
 		isZoomOutMode,
 	} = useSelect( ( select ) => {
 		const {
@@ -48,7 +47,6 @@ function InbetweenInsertionPointPopover( {
 			getPreviousBlockClientId,
 			getNextBlockClientId,
 			getSettings,
-			isNavigationMode: _isNavigationMode,
 			__unstableGetEditorMode,
 		} = select( blockEditorStore );
 		const insertionPoint = getBlockInsertionPoint();
@@ -78,7 +76,6 @@ function InbetweenInsertionPointPopover( {
 				getBlockListSettings( insertionPoint.rootClientId )
 					?.orientation || 'vertical',
 			rootClientId: insertionPoint.rootClientId,
-			isNavigationMode: _isNavigationMode(),
 			isDistractionFree: settings.isDistractionFree,
 			isInserterShown: insertionPoint?.__unstableWithInserter,
 			isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
@@ -144,7 +141,7 @@ function InbetweenInsertionPointPopover( {
 		},
 	};
 
-	if ( isDistractionFree && ! isNavigationMode ) {
+	if ( isDistractionFree ) {
 		return null;
 	}
 

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

@@ -84,84 +84,6 @@
 	}
 }
 
-/**
- * Block Label for Navigation/Selection Mode
- */
-
-.block-editor-block-list__block-selection-button {
-	display: inline-flex;
-	padding: 0 $grid-unit-15;
-	z-index: z-index(".block-editor-block-list__block-selection-button");
-
-	// Dark block UI appearance.
-	border-radius: $radius-small;
-	background-color: $gray-900;
-
-	font-size: $default-font-size;
-	height: $block-toolbar-height;
-
-	.block-editor-block-list__block-selection-button__content {
-		margin: auto;
-		display: inline-flex;
-		align-items: center;
-
-		> .components-flex__item {
-			margin-right: $grid-unit-15 * 0.5;
-		}
-	}
-	.components-button.has-icon.block-selection-button_drag-handle {
-		cursor: grab;
-		padding: 0;
-		height: $grid-unit-30;
-		min-width: $grid-unit-30;
-		margin-left: -2px;
-
-		// Drag handle is smaller than the others.
-		svg {
-			min-width: 18px;
-			min-height: 18px;
-		}
-	}
-
-	.block-editor-block-icon {
-		font-size: $default-font-size;
-		color: $white;
-		height: $block-toolbar-height;
-	}
-
-	// The button here has a special style to appear as a toolbar.
-	.components-button {
-		min-width: $button-size;
-		color: $white;
-		height: $block-toolbar-height;
-
-		// When button is focused, it receives a box-shadow instead of the border.
-		&:focus {
-			box-shadow: none;
-			border: none;
-		}
-
-		&:active {
-			color: $white;
-		}
-
-		// Make sure the button has no hover style when it's disabled.
-		&[aria-disabled="true"]:hover {
-			color: $white;
-		}
-
-		display: flex;
-	}
-	.block-selection-button_select-button.components-button {
-		padding: 0;
-	}
-
-	.block-editor-block-mover {
-		background: unset;
-		border: none;
-	}
-}
-
 // Hide the popover block editor list while dragging.
 // Using a hacky animation to delay hiding the element.
 // It's needed because if we hide the element immediately upon dragging,
@@ -178,14 +100,10 @@
 .components-popover.block-editor-block-list__block-popover {
 
 	// Position the block toolbar.
-	.block-editor-block-list__block-selection-button,
 	.block-editor-block-contextual-toolbar {
 		pointer-events: all;
 		margin-top: $grid-unit-10;
 		margin-bottom: $grid-unit-10;
-	}
-
-	.block-editor-block-contextual-toolbar {
 		border: $border-width solid $gray-900;
 		border-radius: $radius-small;
 		overflow: visible; // allow the parent selector to be visible
@@ -289,11 +207,3 @@
 		height: $button-size-next-default-40px;
 	}
 }
-
-.block-editor-block-tools__zoom-out-mode-inserter-button {
-	visibility: hidden;
-
-	&.is-visible {
-		visibility: visible;
-	}
-}

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.
@@ -22,10 +23,11 @@ export function useShowBlockTools() {
 			getBlock,
 			getBlockMode,
 			getSettings,
-			hasMultiSelection,
 			__unstableGetEditorMode,
 			isTyping,
-		} = select( blockEditorStore );
+			getBlockOrder,
+			getSectionRootClientId,
+		} = unlock( select( blockEditorStore ) );
 
 		const clientId =
 			getSelectedBlockClientId() || getFirstMultiSelectedBlockClientId();
@@ -42,29 +44,24 @@ export function useShowBlockTools() {
 			! isTyping() &&
 			editorMode === 'edit' &&
 			isEmptyDefaultBlock;
-		const maybeShowBreadcrumb =
-			hasSelectedBlock &&
-			! hasMultiSelection() &&
-			editorMode === 'navigation';
-
 		const isZoomOut = editorMode === 'zoom-out';
+		const isSectionSelected = getBlockOrder(
+			getSectionRootClientId()
+		).includes( clientId );
 		const _showZoomOutToolbar =
+			clientId &&
 			isZoomOut &&
-			block?.attributes?.align === 'full' &&
 			! _showEmptyBlockSideInserter &&
-			! maybeShowBreadcrumb;
+			isSectionSelected;
 		const _showBlockToolbarPopover =
 			! _showZoomOutToolbar &&
 			! getSettings().hasFixedToolbar &&
 			! _showEmptyBlockSideInserter &&
 			hasSelectedBlock &&
-			! isEmptyDefaultBlock &&
-			! maybeShowBreadcrumb;
+			! isEmptyDefaultBlock;
 
 		return {
 			showEmptyBlockSideInserter: _showEmptyBlockSideInserter,
-			showBreadcrumb:
-				! _showEmptyBlockSideInserter && maybeShowBreadcrumb,
 			showBlockToolbarPopover: _showBlockToolbarPopover,
 			showZoomOutToolbar: _showZoomOutToolbar,
 		};

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

@@ -6,17 +6,11 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
 import { Button } from '@wordpress/components';
 import { plus } from '@wordpress/icons';
 import { _x } from '@wordpress/i18n';
 
-function ZoomOutModeInserterButton( { isVisible, onClick } ) {
-	const [
-		zoomOutModeInserterButtonHovered,
-		setZoomOutModeInserterButtonHovered,
-	] = useState( false );
-
+function ZoomOutModeInserterButton( { onClick } ) {
 	return (
 		<Button
 			variant="primary"
@@ -24,18 +18,9 @@ function ZoomOutModeInserterButton( { isVisible, onClick } ) {
 			size="compact"
 			className={ clsx(
 				'block-editor-button-pattern-inserter__button',
-				'block-editor-block-tools__zoom-out-mode-inserter-button',
-				{
-					'is-visible': isVisible || zoomOutModeInserterButtonHovered,
-				}
+				'block-editor-block-tools__zoom-out-mode-inserter-button'
 			) }
 			onClick={ onClick }
-			onMouseOver={ () => {
-				setZoomOutModeInserterButtonHovered( true );
-			} }
-			onMouseOut={ () => {
-				setZoomOutModeInserterButtonHovered( false );
-			} }
 			label={ _x(
 				'Add pattern',
 				'Generic label for pattern inserter button'

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

@@ -16,41 +16,39 @@ function ZoomOutModeInserters() {
 	const [ isReady, setIsReady ] = useState( false );
 	const {
 		hasSelection,
-		blockInsertionPoint,
+		insertionPoint,
 		blockOrder,
 		blockInsertionPointVisible,
 		setInserterIsOpened,
 		sectionRootClientId,
 		selectedBlockClientId,
-		hoveredBlockClientId,
 	} = useSelect( ( select ) => {
 		const {
 			getSettings,
-			getBlockInsertionPoint,
+			getInsertionPoint,
 			getBlockOrder,
 			getSelectionStart,
 			getSelectedBlockClientId,
-			getHoveredBlockClientId,
-			isBlockInsertionPointVisible,
 			getSectionRootClientId,
+			isBlockInsertionPointVisible,
 		} = unlock( select( blockEditorStore ) );
 
 		const root = getSectionRootClientId();
 
 		return {
 			hasSelection: !! getSelectionStart().clientId,
-			blockInsertionPoint: getBlockInsertionPoint(),
+			insertionPoint: getInsertionPoint(),
 			blockOrder: getBlockOrder( root ),
 			blockInsertionPointVisible: isBlockInsertionPointVisible(),
 			sectionRootClientId: root,
 			setInserterIsOpened:
 				getSettings().__experimentalSetIsInserterOpened,
 			selectedBlockClientId: getSelectedBlockClientId(),
-			hoveredBlockClientId: getHoveredBlockClientId(),
 		};
 	}, [] );
 
-	const { showInsertionPoint } = useDispatch( blockEditorStore );
+	// eslint-disable-next-line @wordpress/no-unused-vars-before-return
+	const { showInsertionPoint } = unlock( useDispatch( blockEditorStore ) );
 
 	// Defer the initial rendering to avoid the jumps due to the animation.
 	useEffect( () => {
@@ -62,25 +60,20 @@ function ZoomOutModeInserters() {
 		};
 	}, [] );
 
-	if ( ! isReady ) {
+	if ( ! isReady || ! hasSelection ) {
 		return null;
 	}
 
 	return [ undefined, ...blockOrder ].map( ( clientId, index ) => {
 		const shouldRenderInsertionPoint =
-			blockInsertionPointVisible && blockInsertionPoint.index === index;
+			blockInsertionPointVisible && insertionPoint?.index === index;
 
 		const previousClientId = clientId;
 		const nextClientId = blockOrder[ index ];
 
 		const isSelected =
-			hasSelection &&
-			( selectedBlockClientId === previousClientId ||
-				selectedBlockClientId === nextClientId );
-
-		const isHovered =
-			hoveredBlockClientId === previousClientId ||
-			hoveredBlockClientId === nextClientId;
+			selectedBlockClientId === previousClientId ||
+			selectedBlockClientId === nextClientId;
 
 		return (
 			<BlockPopoverInbetween
@@ -88,9 +81,8 @@ function ZoomOutModeInserters() {
 				previousClientId={ previousClientId }
 				nextClientId={ nextClientId }
 			>
-				{ ! shouldRenderInsertionPoint && (
+				{ ! shouldRenderInsertionPoint && isSelected && (
 					<ZoomOutModeInserterButton
-						isVisible={ isSelected || isHovered }
 						onClick={ () => {
 							setInserterIsOpened( {
 								rootClientId: sectionRootClientId,

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,12 +1,7 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * 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';
@@ -20,14 +15,12 @@ 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(
 		( select ) => {
 			const {
 				getBlock,
-				hasBlockMovingClientId,
 				getNextBlockClientId,
 				getPreviousBlockClientId,
 				canRemoveBlock,
@@ -63,7 +56,6 @@ export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) {
 			}
 
 			return {
-				blockMovingMode: hasBlockMovingClientId(),
 				isBlockTemplatePart,
 				isNextBlockTemplatePart,
 				isPrevBlockTemplatePart,
@@ -76,28 +68,20 @@ export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) {
 	);
 
 	const {
-		blockMovingMode,
 		isBlockTemplatePart,
 		isNextBlockTemplatePart,
 		isPrevBlockTemplatePart,
 		canRemove,
 		canMove,
-		setIsInserterOpened,
 	} = selected;
 
-	const { removeBlock, __unstableSetEditorMode, resetZoomLevel } = unlock(
-		useDispatch( blockEditorStore )
-	);
-
-	const classNames = clsx( 'zoom-out-toolbar', {
-		'is-block-moving-mode': !! blockMovingMode,
-	} );
+	const { removeBlock } = useDispatch( blockEditorStore );
 
 	const showBlockDraggable = canMove && ! isBlockTemplatePart;
 
 	return (
 		<NavigableToolbar
-			className={ classNames }
+			className="zoom-out-toolbar"
 			/* translators: accessibility text for the block toolbar */
 			aria-label={ __( 'Block tools' ) }
 			// The variant is applied as "toolbar" when undefined, which is the black border style of the dropdown from the toolbar popover.
@@ -135,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"
@@ -159,6 +126,7 @@ export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) {
 					label={ __( 'Delete' ) }
 					onClick={ () => {
 						removeBlock( clientId );
+						__unstableContentRef.current?.focus();
 					} }
 				/>
 			) }

package/src/components/font-family/README.md

@@ -1,5 +1,9 @@
 # FontFamilyControl
 
+<div class="callout callout-alert">
+This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
+</div>
+
 FontFamilyControl is a React component that renders a UI that allows users to select a font family.
 The component renders a user interface that allows the user to select from a set of predefined font families as defined by the `typography.fontFamilies` presets.
 Optionally, you can provide a `fontFamilies` prop that overrides the predefined font families.
@@ -10,7 +14,7 @@ Optionally, you can provide a `fontFamilies` prop that overrides the predefined
 
 ```jsx
 import { useState } from 'react';
-import { FontFamilyControl } from '@wordpress/block-editor';
+import { __experimentalFontFamilyControl as FontFamilyControl } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 
 // ...

package/src/components/global-styles/border-panel.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import {
-	__experimentalBorderBoxControl as BorderBoxControl,
+	BorderBoxControl,
 	__experimentalHasSplitBorders as hasSplitBorders,
 	__experimentalIsDefinedBorder as isDefinedBorder,
 	__experimentalToolsPanel as ToolsPanel,

package/src/components/global-styles/dimensions-panel.js

@@ -10,7 +10,7 @@ import { __ } from '@wordpress/i18n';
 import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
-	__experimentalBoxControl as BoxControl,
+	BoxControl,
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,

package/src/components/iframe/content.scss

@@ -3,28 +3,23 @@
 	border: 0.01px solid transparent;
 }
 
-.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);
-}
-
 .block-editor-iframe__html {
 	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,10 +27,11 @@
 	$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;
 
 	// Chrome seems to respect that transform scale shouldn't affect the layout size of the element,