@wordpress/block-editor 8.5.7 → 9.1.0

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

@@ -0,0 +1,188 @@
+/**
+ * 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,
+					height: 0,
+					width: 0,
+					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,
+				height: 0,
+				width: 0,
+				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,
+				height: 0,
+				width: 0,
+				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,
+			height: 0,
+			width: 0,
+			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 }
+			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
+			) }
+			__unstableForcePosition
+		>
+			<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,75 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { Popover } from '@wordpress/components';
+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,
+	};
+
+	return (
+		<Popover
+			ref={ popoverScrollRef }
+			animate={ false }
+			position="top right left"
+			focusOnMount={ false }
+			anchorRef={ anchorRef }
+			// Render in the old slot if needed for backward compatibility,
+			// otherwise render in place (not in the the default popover slot).
+			__unstableSlotName={ __unstablePopoverSlot || null }
+			// Observe movement for block animations (especially horizontal).
+			__unstableObserveElement={ selectedElement }
+			__unstableForcePosition
+			{ ...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,28 @@
+
+.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;
+		outline: 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-preview/index.js

@@ -7,10 +7,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalUseDisabled as useDisabled,
-	useMergeRefs,
-} from '@wordpress/compose';
+import { useDisabled, useMergeRefs } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { memo, useMemo } from '@wordpress/element';
 

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.
@@ -40,16 +39,8 @@
 	font-size: 14px;
 }
 
-// Indent the popover to match the button position.
-.block-editor-block-switcher__popover {
-	margin-left: 6px;
-}
-
 .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;
@@ -97,43 +88,11 @@
 	min-width: 300px;
 }
 
-// We keep the min width the same for the border to work.
-.components-popover.block-editor-block-switcher__popover .components-popover__content > div {
-	min-width: auto;
-	display: flex;
-	background: $white;
-	padding: 0;
-
-	.components-menu-group {
-		margin: 0;
-	}
-}
-
-.block-editor-block-switcher__popover .components-popover__content {
-
-	.block-editor-block-styles {
-		margin: 0 -3px; // Remove the panel body padding while keeping it for the title.
-	}
-
-	// Hide the bottom border on the last panel so it stacks with the popover.
-	.components-panel__body {
-		border: 0;
-
-		// Elevate this so the hover style is visible.
-		position: relative;
-		z-index: 1;
-	}
-
-	.components-panel__body + .components-panel__body {
-		border-top: $border-width solid $gray-200;
-	}
-}
-
 .block-editor-block-switcher__popover__preview__parent {
 	.block-editor-block-switcher__popover__preview__container {
 		position: absolute;
 		top: -$grid-unit-15;
-		left: calc(100% + #{$grid-unit-40});
+		left: calc(100% + #{$grid-unit-20});
 	}
 }
 
@@ -142,7 +101,6 @@
 
 	// Position correctly. Needs specificity.
 	&.components-popover {
-		margin-left: $grid-unit-05;
 		margin-top: $grid-unit-15 - $border-width;
 	}
 
@@ -155,6 +113,7 @@
 		border: $border-width solid $gray-900;
 		background: $white;
 		border-radius: $radius-block-ui;
+		outline: none;
 	}
 
 	.block-editor-block-switcher__preview {

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"