@wordpress/block-editor 8.5.0 → 8.6.0

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

@@ -7,24 +7,16 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	useCallback,
-	useRef,
-	useMemo,
-	createContext,
-	useContext,
-} from '@wordpress/element';
-import { Popover, __unstableMotion as motion } from '@wordpress/components';
+import { useRef, createContext, useContext } from '@wordpress/element';
+import { __unstableMotion as motion } from '@wordpress/components';
 import { useReducedMotion } from '@wordpress/compose';
-import { isRTL } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import Inserter from '../inserter';
 import { store as blockEditorStore } from '../../store';
-import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
-import { usePopoverScroll } from './use-popover-scroll';
+import BlockPopoverInbetween from '../block-popover/inbetween';
 
 export const InsertionPointOpenRef = createContext();
 
@@ -78,109 +70,10 @@ function InsertionPointPopover( {
 			isInserterShown: insertionPoint?.__unstableWithInserter,
 		};
 	}, [] );
-	const previousElement = useBlockElement( previousClientId );
-	const nextElement = useBlockElement( nextClientId );
 	const isVertical = orientation === 'vertical';
-	const style = useMemo( () => {
-		if ( ! previousElement && ! nextElement ) {
-			return {};
-		}
-
-		const previousRect = previousElement
-			? previousElement.getBoundingClientRect()
-			: null;
-		const nextRect = nextElement
-			? nextElement.getBoundingClientRect()
-			: null;
-
-		if ( isVertical ) {
-			return {
-				width: previousElement
-					? previousElement.offsetWidth
-					: nextElement.offsetWidth,
-				height:
-					nextRect && previousRect
-						? nextRect.top - previousRect.bottom
-						: 0,
-			};
-		}
-
-		let width = 0;
-		if ( previousRect && nextRect ) {
-			width = isRTL()
-				? previousRect.left - nextRect.right
-				: nextRect.left - previousRect.right;
-		}
-
-		return {
-			width,
-			height: previousElement
-				? previousElement.offsetHeight
-				: nextElement.offsetHeight,
-		};
-	}, [ previousElement, nextElement ] );
-
-	const getAnchorRect = useCallback( () => {
-		if ( ! previousElement && ! nextElement ) {
-			return {};
-		}
-
-		const { ownerDocument } = previousElement || nextElement;
-
-		const previousRect = previousElement
-			? previousElement.getBoundingClientRect()
-			: null;
-		const nextRect = nextElement
-			? nextElement.getBoundingClientRect()
-			: null;
-
-		if ( isVertical ) {
-			if ( isRTL() ) {
-				return {
-					top: previousRect ? previousRect.bottom : nextRect.top,
-					left: previousRect ? previousRect.right : nextRect.right,
-					right: previousRect ? previousRect.left : nextRect.left,
-					bottom: nextRect ? nextRect.top : previousRect.bottom,
-					ownerDocument,
-				};
-			}
-
-			return {
-				top: previousRect ? previousRect.bottom : nextRect.top,
-				left: previousRect ? previousRect.left : nextRect.left,
-				right: previousRect ? previousRect.right : nextRect.right,
-				bottom: nextRect ? nextRect.top : previousRect.bottom,
-				ownerDocument,
-			};
-		}
-
-		if ( isRTL() ) {
-			return {
-				top: previousRect ? previousRect.top : nextRect.top,
-				left: previousRect ? previousRect.left : nextRect.right,
-				right: nextRect ? nextRect.right : previousRect.left,
-				bottom: previousRect ? previousRect.bottom : nextRect.bottom,
-				ownerDocument,
-			};
-		}
 
-		return {
-			top: previousRect ? previousRect.top : nextRect.top,
-			left: previousRect ? previousRect.right : nextRect.left,
-			right: nextRect ? nextRect.left : previousRect.right,
-			bottom: previousRect ? previousRect.bottom : nextRect.bottom,
-			ownerDocument,
-		};
-	}, [ previousElement, nextElement ] );
-
-	const popoverScrollRef = usePopoverScroll( __unstableContentRef );
 	const disableMotion = useReducedMotion();
 
-	const className = classnames(
-		'block-editor-block-list__insertion-point',
-		'is-' + orientation
-	);
-
 	function onClick( event ) {
 		if ( event.target === ref.current && nextClientId ) {
 			selectBlock( nextClientId, -1 );
@@ -203,11 +96,6 @@ function InsertionPointPopover( {
 		}
 	}
 
-	// Only show the in-between inserter between blocks, so when there's a
-	// previous and a next element.
-	const showInsertionPointInserter =
-		previousElement && nextElement && isInserterShown;
-
 	// Define animation variants for the line element.
 	const horizontalLine = {
 		start: {
@@ -261,7 +149,7 @@ function InsertionPointPopover( {
 			...( ! isVertical ? horizontalLine.rest : verticalLine.rest ),
 			opacity: 1,
 			borderRadius: '2px',
-			transition: { delay: showInsertionPointInserter ? 0.4 : 0 },
+			transition: { delay: isInserterShown ? 0.4 : 0 },
 		},
 		hover: {
 			...( ! isVertical ? horizontalLine.hover : verticalLine.hover ),
@@ -281,27 +169,17 @@ function InsertionPointPopover( {
 		},
 	};
 
-	/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
-	// While ideally it would be enough to capture the
-	// bubbling focus event from the Inserter, due to the
-	// characteristics of click focusing of `button`s in
-	// Firefox and Safari, it is not reliable.
-	//
-	// See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
+	const className = classnames(
+		'block-editor-block-list__insertion-point',
+		'is-' + orientation
+	);
+
 	return (
-		<Popover
-			ref={ popoverScrollRef }
-			noArrow
-			animate={ false }
-			getAnchorRect={ getAnchorRect }
-			focusOnMount={ false }
-			className="block-editor-block-list__insertion-point-popover"
-			// Render in the old slot if needed for backward compatibility,
-			// otherwise render in place (not in the the default popover slot).
-			__unstableSlotName={ __unstablePopoverSlot || null }
-			// Forces a remount of the popover when its position changes
-			// This makes sure the popover doesn't animate from its previous position.
-			key={ nextClientId + '--' + rootClientId }
+		<BlockPopoverInbetween
+			previousClientId={ previousClientId }
+			nextClientId={ nextClientId }
+			__unstablePopoverSlot={ __unstablePopoverSlot }
+			__unstableContentRef={ __unstableContentRef }
 		>
 			<motion.div
 				layout={ ! disableMotion }
@@ -315,16 +193,15 @@ function InsertionPointPopover( {
 				onClick={ onClick }
 				onFocus={ onFocus }
 				className={ classnames( className, {
-					'is-with-inserter': showInsertionPointInserter,
+					'is-with-inserter': isInserterShown,
 				} ) }
 				onHoverEnd={ maybeHideInserterPoint }
-				style={ style }
 			>
 				<motion.div
 					variants={ lineVariants }
 					className="block-editor-block-list__insertion-point-indicator"
 				/>
-				{ showInsertionPointInserter && (
+				{ isInserterShown && (
 					<motion.div
 						variants={ inserterVariants }
 						className={ classnames(
@@ -346,28 +223,18 @@ function InsertionPointPopover( {
 					</motion.div>
 				) }
 			</motion.div>
-		</Popover>
+		</BlockPopoverInbetween>
 	);
-	/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
 }
 
-export default function InsertionPoint( {
-	children,
-	__unstablePopoverSlot,
-	__unstableContentRef,
-} ) {
+export default function InsertionPoint( { children, ...props } ) {
 	const isVisible = useSelect( ( select ) => {
 		return select( blockEditorStore ).isBlockInsertionPointVisible();
 	}, [] );
 
 	return (
 		<InsertionPointOpenRef.Provider value={ useRef( false ) }>
-			{ isVisible && (
-				<InsertionPointPopover
-					__unstablePopoverSlot={ __unstablePopoverSlot }
-					__unstableContentRef={ __unstableContentRef }
-				/>
-			) }
+			{ isVisible && <InsertionPointPopover { ...props } /> }
 			{ children }
 		</InsertionPointOpenRef.Provider>
 	);

package/src/components/block-tools/{block-popover.js → selected-block-popover.js}

@@ -9,11 +9,9 @@ import classnames from 'classnames';
  */
 import { useState, useRef, useEffect } from '@wordpress/element';
 import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
-import { Popover } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
 import { useViewportMatch } from '@wordpress/compose';
-import { getScrollContainer } from '@wordpress/dom';
 
 /**
  * Internal dependencies
@@ -22,8 +20,7 @@ import BlockSelectionButton from './block-selection-button';
 import BlockContextualToolbar from './block-contextual-toolbar';
 import Inserter from '../inserter';
 import { store as blockEditorStore } from '../../store';
-import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
-import { usePopoverScroll } from './use-popover-scroll';
+import BlockPopover from '../block-popover';
 
 function selector( select ) {
 	const {
@@ -31,7 +28,6 @@ function selector( select ) {
 		isMultiSelecting,
 		hasMultiSelection,
 		isTyping,
-		isCaretWithinFormattedText,
 		getSettings,
 		getLastMultiSelectedBlockClientId,
 	} = select( blockEditorStore );
@@ -39,17 +35,16 @@ function selector( select ) {
 		isNavigationMode: isNavigationMode(),
 		isMultiSelecting: isMultiSelecting(),
 		isTyping: isTyping(),
-		isCaretWithinFormattedText: isCaretWithinFormattedText(),
-		hasMultiSelection: hasMultiSelection(),
 		hasFixedToolbar: getSettings().hasFixedToolbar,
-		lastClientId: getLastMultiSelectedBlockClientId(),
+		lastClientId: hasMultiSelection()
+			? getLastMultiSelectedBlockClientId()
+			: null,
 	};
 }
 
-function BlockPopover( {
+function SelectedBlockPopover( {
 	clientId,
 	rootClientId,
-	isValid,
 	isEmptyDefaultBlock,
 	capturingClientId,
 	__unstablePopoverSlot,
@@ -59,8 +54,6 @@ function BlockPopover( {
 		isNavigationMode,
 		isMultiSelecting,
 		isTyping,
-		isCaretWithinFormattedText,
-		hasMultiSelection,
 		hasFixedToolbar,
 		lastClientId,
 	} = useSelect( selector, [] );
@@ -83,22 +76,20 @@ function BlockPopover( {
 		[ clientId ]
 	);
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const [ isToolbarForced, setIsToolbarForced ] = useState( false );
+	const isToolbarForced = useRef( false );
 	const [ isInserterShown, setIsInserterShown ] = useState( false );
 	const { stopTyping } = useDispatch( blockEditorStore );
 
-	// Controls when the side inserter on empty lines should
-	// be shown, including writing and selection modes.
 	const showEmptyBlockSideInserter =
-		! isTyping && ! isNavigationMode && isEmptyDefaultBlock && isValid;
+		! isTyping && ! isNavigationMode && isEmptyDefaultBlock;
 	const shouldShowBreadcrumb = isNavigationMode;
 	const shouldShowContextualToolbar =
 		! isNavigationMode &&
 		! hasFixedToolbar &&
 		isLargeViewport &&
-		! showEmptyBlockSideInserter &&
 		! isMultiSelecting &&
-		( ! isTyping || isCaretWithinFormattedText );
+		! showEmptyBlockSideInserter &&
+		! isTyping;
 	const canFocusHiddenToolbar =
 		! isNavigationMode &&
 		! shouldShowContextualToolbar &&
@@ -108,7 +99,7 @@ function BlockPopover( {
 	useShortcut(
 		'core/block-editor/focus-toolbar',
 		() => {
-			setIsToolbarForced( true );
+			isToolbarForced.current = true;
 			stopTyping( true );
 		},
 		{
@@ -117,55 +108,17 @@ function BlockPopover( {
 	);
 
 	useEffect( () => {
-		if ( ! shouldShowContextualToolbar ) {
-			setIsToolbarForced( false );
-		}
-	}, [ shouldShowContextualToolbar ] );
+		isToolbarForced.current = false;
+	} );
 
 	// Stores the active toolbar item index so the block toolbar can return focus
 	// to it when re-mounting.
 	const initialToolbarItemIndexRef = useRef();
 
-	const selectedElement = useBlockElement( clientId );
-	const lastSelectedElement = useBlockElement( lastClientId );
-	const capturingElement = useBlockElement( capturingClientId );
-
-	const popoverScrollRef = usePopoverScroll( __unstableContentRef );
-
-	if (
-		! shouldShowBreadcrumb &&
-		! shouldShowContextualToolbar &&
-		! isToolbarForced &&
-		! showEmptyBlockSideInserter
-	) {
+	if ( ! shouldShowBreadcrumb && ! shouldShowContextualToolbar ) {
 		return null;
 	}
 
-	let node = selectedElement;
-
-	if ( ! node ) {
-		return null;
-	}
-
-	if ( capturingClientId ) {
-		node = capturingElement;
-	}
-
-	let anchorRef = node;
-
-	if ( hasMultiSelection ) {
-		// Wait to render the popover until the bottom reference is available
-		// as well.
-		if ( ! lastSelectedElement ) {
-			return null;
-		}
-
-		anchorRef = {
-			top: node,
-			bottom: lastSelectedElement,
-		};
-	}
-
 	function onFocus() {
 		setIsInserterShown( true );
 	}
@@ -174,48 +127,17 @@ function BlockPopover( {
 		setIsInserterShown( false );
 	}
 
-	// Position above the anchor, pop out towards the right, and position in the
-	// left corner. For the side inserter, pop out towards the left, and
-	// position in the right corner.
-	// To do: refactor `Popover` to make this prop clearer.
-	const popoverPosition = showEmptyBlockSideInserter
-		? 'top left right'
-		: 'top right left';
-	const { ownerDocument } = node;
-	const stickyBoundaryElement = showEmptyBlockSideInserter
-		? undefined
-		: // The sticky boundary element should be the boundary at which the
-		  // the block toolbar becomes sticky when the block scolls out of view.
-		  // In case of an iframe, this should be the iframe boundary, otherwise
-		  // the scroll container.
-		  ownerDocument.defaultView.frameElement ||
-		  getScrollContainer( node ) ||
-		  ownerDocument.body;
-
 	return (
-		<Popover
-			ref={ popoverScrollRef }
-			noArrow
-			animate={ false }
-			position={ popoverPosition }
-			focusOnMount={ false }
-			anchorRef={ anchorRef }
+		<BlockPopover
+			clientId={ capturingClientId || clientId }
+			bottomClientId={ lastClientId }
 			className={ classnames( 'block-editor-block-list__block-popover', {
 				'is-insertion-point-visible': isInsertionPointVisible,
 			} ) }
-			__unstableStickyBoundaryElement={ stickyBoundaryElement }
-			// Render in the old slot if needed for backward compatibility,
-			// otherwise render in place (not in the the default popover slot).
-			__unstableSlotName={ __unstablePopoverSlot || null }
-			__unstableBoundaryParent
-			// Observe movement for block animations (especially horizontal).
-			__unstableObserveElement={ node }
-			shouldAnchorIncludePadding
-			// Used to safeguard sticky position behavior against cases where it would permanently
-			// obscure specific sections of a block.
-			__unstableEditorCanvasWrapper={ __unstableContentRef?.current }
+			__unstablePopoverSlot={ __unstablePopoverSlot }
+			__unstableContentRef={ __unstableContentRef }
 		>
-			{ ( shouldShowContextualToolbar || isToolbarForced ) && (
+			{ shouldShowContextualToolbar && (
 				<div
 					onFocus={ onFocus }
 					onBlur={ onBlur }
@@ -240,11 +162,11 @@ function BlockPopover( {
 					/>
 				</div>
 			) }
-			{ ( shouldShowContextualToolbar || isToolbarForced ) && (
+			{ shouldShowContextualToolbar && (
 				<BlockContextualToolbar
 					// If the toolbar is being shown because of being forced
 					// it should focus the toolbar right after the mount.
-					focusOnMount={ isToolbarForced }
+					focusOnMount={ isToolbarForced.current }
 					__experimentalInitialIndex={
 						initialToolbarItemIndexRef.current
 					}
@@ -260,20 +182,9 @@ function BlockPopover( {
 				<BlockSelectionButton
 					clientId={ clientId }
 					rootClientId={ rootClientId }
-					blockElement={ node }
 				/>
 			) }
-			{ showEmptyBlockSideInserter && (
-				<div className="block-editor-block-list__empty-block-inserter">
-					<Inserter
-						position="bottom right"
-						rootClientId={ rootClientId }
-						clientId={ clientId }
-						__experimentalIsQuick
-					/>
-				</div>
-			) }
-		</Popover>
+		</BlockPopover>
 	);
 }
 
@@ -294,7 +205,7 @@ function wrapperSelector( select ) {
 		return;
 	}
 
-	const { name, attributes = {}, isValid } = getBlock( clientId ) || {};
+	const { name, attributes = {} } = getBlock( clientId ) || {};
 	const blockParentsClientIds = getBlockParents( clientId );
 
 	// Get Block List Settings for all ancestors of the current Block clientId.
@@ -314,7 +225,6 @@ function wrapperSelector( select ) {
 		clientId,
 		rootClientId: getBlockRootClientId( clientId ),
 		name,
-		isValid,
 		isEmptyDefaultBlock:
 			name && isUnmodifiedDefaultBlock( { name, attributes } ),
 		capturingClientId,
@@ -335,7 +245,6 @@ export default function WrappedBlockPopover( {
 		clientId,
 		rootClientId,
 		name,
-		isValid,
 		isEmptyDefaultBlock,
 		capturingClientId,
 	} = selected;
@@ -345,10 +254,9 @@ export default function WrappedBlockPopover( {
 	}
 
 	return (
-		<BlockPopover
+		<SelectedBlockPopover
 			clientId={ clientId }
 			rootClientId={ rootClientId }
-			isValid={ isValid }
 			isEmptyDefaultBlock={ isEmptyDefaultBlock }
 			capturingClientId={ capturingClientId }
 			__unstablePopoverSlot={ __unstablePopoverSlot }

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

@@ -4,6 +4,10 @@
 
 .block-editor-block-list__insertion-point {
 	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
 }
 
 .block-editor-block-list__insertion-point-indicator {
@@ -49,7 +53,6 @@
 }
 
 // Sibling inserter / "inbetweenserter".
-.block-editor-block-list__empty-block-inserter,
 .block-editor-default-block-appender,
 .block-editor-block-list__insertion-point-inserter,
 .block-editor-block-list__block-popover-inserter {
@@ -98,7 +101,7 @@
 		position: sticky;
 		top: 0;
 		width: 100%;
-		z-index: z-index(".block-editor-block-list__block-popover");
+		z-index: z-index(".block-editor-block-popover");
 		// Fill up when empty
 		min-height: $block-toolbar-height;
 		display: block;
@@ -112,42 +115,6 @@
 			border-right-color: $gray-200;
 		}
 	}
-
-	.block-editor-block-mover-button {
-		overflow: hidden;
-	}
-
-	// Extra specificity to override standard toolbar button styles.
-	.block-editor-block-mover.is-horizontal .block-editor-block-mover-button.block-editor-block-mover-button {
-		min-width: $block-toolbar-height*0.5;
-		width: $block-toolbar-height*0.5;
-
-		svg {
-			min-width: $block-toolbar-height*0.5;
-		}
-	}
-}
-
-// Position mover arrows for both toolbars.
-.block-editor-block-contextual-toolbar .block-editor-block-mover:not(.is-horizontal) {
-	// Position SVGs.
-	.block-editor-block-mover-button {
-		&:focus::before {
-			left: 0 !important;
-			min-width: 0;
-			width: 100%;
-		}
-	}
-
-	@include break-small() {
-		.block-editor-block-mover-button.is-up-button svg {
-			top: 5px;
-		}
-
-		.block-editor-block-mover-button.is-down-button svg {
-			bottom: 5px;
-		}
-	}
 }
 
 /**
@@ -217,37 +184,6 @@
 	}
 }
 
-/**
- * Popovers.
- */
-
-.block-editor-block-list__insertion-point-popover.is-without-arrow {
-	z-index: z-index(".block-editor-block-list__insertion-point-popover");
-	position: absolute;
-	pointer-events: none;
-
-	* {
-		pointer-events: none;
-	}
-
-	.is-with-inserter {
-		pointer-events: all;
-
-		* {
-			pointer-events: all;
-		}
-	}
-
-	.components-popover__content.components-popover__content {
-		// Needs specificity.
-		background: none;
-		border: none;
-		box-shadow: none;
-		overflow-y: visible;
-		margin-left: 0;
-	}
-}
-
 // 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,
@@ -262,33 +198,12 @@
 }
 
 .components-popover.block-editor-block-list__block-popover {
-	z-index: z-index(".block-editor-block-list__block-popover");
-	position: absolute;
-
-	.components-popover__content {
-		margin: 0 !important;
-		min-width: auto;
-		width: max-content;
-		background: none;
-		border: none;
-		box-shadow: none;
-		overflow-y: visible;
-
-		// Allow clicking through the toolbar holder.
-		pointer-events: none;
-
-		.block-editor-block-list__block-selection-button,
-		.block-editor-block-contextual-toolbar,
-		.block-editor-block-list__empty-block-inserter {
-			pointer-events: all;
-		}
-
-		// Position the block toolbar.
-		.block-editor-block-list__block-selection-button,
-		.block-editor-block-contextual-toolbar {
-			margin-top: $grid-unit-15;
-			margin-bottom: $grid-unit-15;
-		}
+	// Position the block toolbar.
+	.block-editor-block-list__block-selection-button,
+	.block-editor-block-contextual-toolbar {
+		pointer-events: all;
+		margin-top: $grid-unit-15;
+		margin-bottom: $grid-unit-15;
 	}
 
 	// Hide the block toolbar if the insertion point is shown.
@@ -307,30 +222,3 @@
 .is-dragging-components-draggable .components-tooltip {
 	display: none;
 }
-
-
-// Size multiple sequential buttons to be optically balanced.
-// Icons are 36px, as set by a 24px icon and 12px padding.
-.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot, // When a plugin adds to a slot, the segment has a `components-toolbar` class.
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar, // The nesting order is sometimes reversed.
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown, // Targets unique markup for the "Replace" button.
-.block-editor-block-toolbar .components-toolbar-group {
-	padding-left: $grid-unit-15 * 0.5; // 6px.
-	padding-right: $grid-unit-15 * 0.5;
-
-	.components-button,
-	.components-button.has-icon.has-icon {
-		min-width: $block-toolbar-height - $grid-unit-15;
-		padding-left: $grid-unit-15 * 0.5; // 6px.
-		padding-right: $grid-unit-15 * 0.5;
-
-		svg {
-			min-width: $button-size-small; // This is the optimal icon size, and we size the whole button after this.
-		}
-
-		&::before {
-			left: 2px;
-			right: 2px;
-		}
-	}
-}