@wordpress/block-editor 8.5.4 → 9.0.0

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

@@ -0,0 +1,180 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useCallback, useMemo, createContext } from '@wordpress/element';
+import { Popover } from '@wordpress/components';
+import { isRTL } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+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';
+
+export const InsertionPointOpenRef = createContext();
+
+function BlockPopoverInbetween( {
+	previousClientId,
+	nextClientId,
+	children,
+	__unstablePopoverSlot,
+	__unstableContentRef,
+	...props
+} ) {
+	const { orientation, rootClientId } = useSelect(
+		( select ) => {
+			const { getBlockListSettings, getBlockRootClientId } = select(
+				blockEditorStore
+			);
+
+			const _rootClientId = getBlockRootClientId( previousClientId );
+			return {
+				orientation:
+					getBlockListSettings( _rootClientId )?.orientation ||
+					'vertical',
+				rootClientId: _rootClientId,
+			};
+		},
+		[ previousClientId ]
+	);
+	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, isVertical ] );
+
+	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 );
+
+	if ( ! previousElement || ! nextElement ) {
+		return null;
+	}
+
+	/* 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
+	return (
+		<Popover
+			ref={ popoverScrollRef }
+			noArrow
+			animate={ false }
+			getAnchorRect={ getAnchorRect }
+			focusOnMount={ false }
+			// 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 }
+			{ ...props }
+			className={ classnames(
+				'block-editor-block-popover',
+				props.className
+			) }
+		>
+			<div style={ style }>{ children }</div>
+		</Popover>
+	);
+	/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
+}
+
+export default BlockPopoverInbetween;

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

@@ -0,0 +1,90 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { Popover } from '@wordpress/components';
+import { getScrollContainer } from '@wordpress/dom';
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
+import usePopoverScroll from './use-popover-scroll';
+
+export default function BlockPopover( {
+	clientId,
+	bottomClientId,
+	children,
+	__unstableRefreshSize,
+	__unstableCoverTarget = false,
+	__unstablePopoverSlot,
+	__unstableContentRef,
+	...props
+} ) {
+	const selectedElement = useBlockElement( clientId );
+	const lastSelectedElement = useBlockElement( bottomClientId ?? clientId );
+	const popoverScrollRef = usePopoverScroll( __unstableContentRef );
+	const style = useMemo( () => {
+		if ( ! selectedElement || lastSelectedElement !== selectedElement ) {
+			return {};
+		}
+
+		return {
+			position: 'absolute',
+			width: selectedElement.offsetWidth,
+			height: selectedElement.offsetHeight,
+		};
+	}, [ selectedElement, lastSelectedElement, __unstableRefreshSize ] );
+
+	if ( ! selectedElement || ( bottomClientId && ! lastSelectedElement ) ) {
+		return null;
+	}
+
+	const anchorRef = {
+		top: selectedElement,
+		bottom: lastSelectedElement,
+	};
+
+	const { ownerDocument } = selectedElement;
+	const stickyBoundaryElement =
+		ownerDocument.defaultView.frameElement ||
+		getScrollContainer( selectedElement ) ||
+		ownerDocument.body;
+
+	return (
+		<Popover
+			ref={ popoverScrollRef }
+			noArrow
+			animate={ false }
+			position="top right left"
+			focusOnMount={ false }
+			anchorRef={ anchorRef }
+			__unstableStickyBoundaryElement={
+				__unstableCoverTarget ? undefined : 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={ selectedElement }
+			// Used to safeguard sticky position behavior against cases where it would permanently
+			// obscure specific sections of a block.
+			__unstableEditorCanvasWrapper={ __unstableContentRef?.current }
+			__unstableForcePosition={ __unstableCoverTarget }
+			{ ...props }
+			className={ classnames(
+				'block-editor-block-popover',
+				props.className
+			) }
+		>
+			{ __unstableCoverTarget && <div style={ style }>{ children }</div> }
+			{ ! __unstableCoverTarget && children }
+		</Popover>
+	);
+}

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

@@ -0,0 +1,27 @@
+
+.components-popover.block-editor-block-popover {
+	z-index: z-index(".block-editor-block-popover");
+	position: absolute;
+	// Shouldn't be needed but it looks
+	// like the popover is impacted by the block gap margin.
+	margin: 0 !important;
+
+	.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;
+
+		// Position the block toolbar.
+		> * {
+			pointer-events: all;
+		}
+	}
+}
+

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

@@ -10,7 +10,7 @@ import { useRefEffect } from '@wordpress/compose';
  *
  * @param {Object} scrollableRef
  */
-export function usePopoverScroll( scrollableRef ) {
+function usePopoverScroll( scrollableRef ) {
 	return useRefEffect(
 		( node ) => {
 			if ( ! scrollableRef ) {
@@ -32,3 +32,5 @@ export function usePopoverScroll( scrollableRef ) {
 		[ scrollableRef ]
 	);
 }
+
+export default usePopoverScroll;

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

@@ -9,7 +9,6 @@ import classnames from 'classnames';
  */
 import { useState, useLayoutEffect } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
-import { ENTER, SPACE } from '@wordpress/keycodes';
 import {
 	Button,
 	__experimentalText as Text,
@@ -113,18 +112,8 @@ function BlockStyles( {
 							onFocus={ () => styleItemHandler( style ) }
 							onMouseLeave={ () => styleItemHandler( null ) }
 							onBlur={ () => styleItemHandler( null ) }
-							onKeyDown={ ( event ) => {
-								if (
-									ENTER === event.keyCode ||
-									SPACE === event.keyCode
-								) {
-									event.preventDefault();
-									onSelectStylePreview( style );
-								}
-							} }
 							onClick={ () => onSelectStylePreview( style ) }
-							role="button"
-							tabIndex="0"
+							aria-current={ activeStyle.name === style.name }
 						>
 							<Text
 								as="span"

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

@@ -1,6 +1,5 @@
 .block-editor-block-switcher {
 	position: relative;
-	padding: 0 ($grid-unit-15 * 0.5);
 
 	// @todo: override toolbar group inherited paddings from components/block-tools/style.scss.
 	// This is best fixed by making the mover control area a proper single toolbar group.
@@ -47,9 +46,6 @@
 
 .components-button.block-editor-block-switcher__no-switcher-icon {
 	display: flex;
-	// The `!important` is used to vastly simplify the overriding of an inherited selector.
-	// Can be removed if we refactor .block-editor-block-toolbar .components-toolbar-group .components-button.has-icon.has-icon
-	padding: ($grid-unit-15 * 0.5) $grid-unit-15 !important;
 
 	.block-editor-block-icon {
 		margin-right: auto;

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

@@ -71,10 +71,6 @@
 
 // Block controls.
 .block-editor-block-toolbar__block-controls {
-	// The !important modifier should be removed when https://github.com/WordPress/gutenberg/issues/24898 refactors the spacing grid.
-	height: auto !important;
-	padding: 0 !important;
-
 	// Switcher.
 	.block-editor-block-switcher .components-dropdown-menu__toggle,
 	.block-editor-block-switcher__no-switcher-icon {
@@ -84,14 +80,6 @@
 		}
 	}
 
-	// Match the parent selector button.
-	margin-left: -$border-width;
-
-	// Compensate for width of block switcher.
-	.block-editor-block-mover {
-		margin-left: -$grid-unit-15 * 0.5;
-	}
-
 	.block-editor-block-lock-toolbar {
 		margin-left: -$grid-unit-15 * 0.5 !important;
 	}

package/src/components/block-tools/back-compat.js

@@ -9,7 +9,7 @@ import deprecated from '@wordpress/deprecated';
  * Internal dependencies
  */
 import InsertionPoint, { InsertionPointOpenRef } from './insertion-point';
-import BlockPopover from './block-popover';
+import BlockPopover from './selected-block-popover';
 
 export default function BlockToolsBackCompat( { children } ) {
 	const openRef = useContext( InsertionPointOpenRef );

package/src/components/block-tools/block-selection-button.js

@@ -38,6 +38,7 @@ import BlockIcon from '../block-icon';
 import { store as blockEditorStore } from '../../store';
 import BlockDraggable from '../block-draggable';
 import useBlockDisplayInformation from '../use-block-display-information';
+import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
 
 /**
  * Block selection button component, displaying the label of the block. If the block
@@ -49,7 +50,7 @@ import useBlockDisplayInformation from '../use-block-display-information';
  *
  * @return {WPComponent} The component to be rendered.
  */
-function BlockSelectionButton( { clientId, rootClientId, blockElement } ) {
+function BlockSelectionButton( { clientId, rootClientId } ) {
 	const blockInformation = useBlockDisplayInformation( clientId );
 	const selected = useSelect(
 		( select ) => {
@@ -90,6 +91,7 @@ function BlockSelectionButton( { clientId, rootClientId, blockElement } ) {
 
 		speak( label );
 	}, [ label ] );
+	const blockElement = useBlockElement( clientId );
 
 	const {
 		hasBlockMovingClientId,

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

@@ -15,10 +15,10 @@ import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordp
  * Internal dependencies
  */
 import InsertionPoint from './insertion-point';
-import BlockPopover from './block-popover';
+import SelectedBlockPopover from './selected-block-popover';
 import { store as blockEditorStore } from '../../store';
 import BlockContextualToolbar from './block-contextual-toolbar';
-import { usePopoverScroll } from './use-popover-scroll';
+import usePopoverScroll from '../block-popover/use-popover-scroll';
 
 /**
  * Renders block tools (the block toolbar, select/navigation mode toolbar, the
@@ -112,8 +112,10 @@ export default function BlockTools( {
 					<BlockContextualToolbar isFixed />
 				) }
 				{ /* Even if the toolbar is fixed, the block popover is still
-                 needed for navigation mode. */ }
-				<BlockPopover __unstableContentRef={ __unstableContentRef } />
+					needed for navigation and exploded mode. */ }
+				<SelectedBlockPopover
+					__unstableContentRef={ __unstableContentRef }
+				/>
 				{ /* Used for the inline rich text toolbar. */ }
 				<Popover.Slot
 					name="block-toolbar"

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>
 	);