@wordpress/block-editor 8.5.0 → 8.6.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,73 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { Popover } from '@wordpress/components';
+import { getScrollContainer } from '@wordpress/dom';
+
+/**
+ * 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,
+	__unstablePopoverSlot,
+	__unstableContentRef,
+	...props
+} ) {
+	const selectedElement = useBlockElement( clientId );
+	const lastSelectedElement = useBlockElement( bottomClientId ?? clientId );
+	const popoverScrollRef = usePopoverScroll( __unstableContentRef );
+
+	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={ 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 }
+			shouldAnchorIncludePadding
+			// Used to safeguard sticky position behavior against cases where it would permanently
+			// obscure specific sections of a block.
+			__unstableEditorCanvasWrapper={ __unstableContentRef?.current }
+			{ ...props }
+			className={ classnames(
+				'block-editor-block-popover',
+				props.className
+			) }
+		>
+			{ children }
+		</Popover>
+	);
+}

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

@@ -0,0 +1,24 @@
+
+.components-popover.block-editor-block-popover {
+	z-index: z-index(".block-editor-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;
+
+		// 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/auto.js

@@ -19,7 +19,11 @@ let MemoizedBlockList;
 
 const MAX_HEIGHT = 2000;
 
-function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
+function AutoBlockPreview( {
+	viewportWidth,
+	__experimentalPadding,
+	__experimentalMinHeight,
+} ) {
 	const [
 		containerResizeListener,
 		{ width: containerWidth },
@@ -68,6 +72,7 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
 						contentHeight > MAX_HEIGHT
 							? MAX_HEIGHT * scale
 							: undefined,
+					minHeight: __experimentalMinHeight,
 				} }
 			>
 				<Iframe
@@ -98,6 +103,10 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
 						// This is a catch-all max-height for patterns.
 						// See: https://github.com/WordPress/gutenberg/pull/38175.
 						maxHeight: MAX_HEIGHT,
+						minHeight:
+							scale < 1 && __experimentalMinHeight
+								? __experimentalMinHeight / scale
+								: __experimentalMinHeight,
 					} }
 				>
 					{ contentResizeListener }

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

@@ -29,6 +29,7 @@ export function BlockPreview( {
 	viewportWidth = 1200,
 	__experimentalLive = false,
 	__experimentalOnClick,
+	__experimentalMinHeight,
 } ) {
 	const originalSettings = useSelect(
 		( select ) => select( blockEditorStore ).getSettings(),
@@ -51,6 +52,7 @@ export function BlockPreview( {
 				<AutoHeightBlockPreview
 					viewportWidth={ viewportWidth }
 					__experimentalPadding={ __experimentalPadding }
+					__experimentalMinHeight={ __experimentalMinHeight }
 				/>
 			) }
 		</BlockEditorProvider>

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/index.js

@@ -108,7 +108,19 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 					disabled
 					className="block-editor-block-switcher__no-switcher-icon"
 					title={ blockTitle }
-					icon={ <BlockIcon icon={ icon } showColors /> }
+					icon={
+						<>
+							<BlockIcon icon={ icon } showColors />
+							{ ( isReusable || isTemplate ) && (
+								<span className="block-editor-block-switcher__toggle-text">
+									<BlockTitle
+										clientId={ clientIds }
+										maximumLength={ 35 }
+									/>
+								</span>
+							) }
+						</>
+					}
 				/>
 			</ToolbarGroup>
 		);

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.
@@ -46,11 +45,12 @@
 }
 
 .components-button.block-editor-block-switcher__no-switcher-icon {
-	width: $block-toolbar-height;
+	display: flex;
 
-	.block-editor-blocks-icon {
+	.block-editor-block-icon {
 		margin-right: auto;
 		margin-left: auto;
+		min-width: $icon-size !important;
 	}
 }
 
@@ -172,7 +172,7 @@
 // The block switcher in the contextual toolbar should be bigger.
 .block-editor-block-contextual-toolbar {
 	.components-button.block-editor-block-switcher__no-switcher-icon {
-		width: $grid-unit-60;
+		min-width: $button-size;
 	}
 
 	.components-button.block-editor-block-switcher__no-switcher-icon,

package/src/components/block-switcher/test/__snapshots__/index.js.snap

@@ -6,19 +6,21 @@ exports[`BlockSwitcherDropdownMenu should render disabled block switcher with mu
     className="block-editor-block-switcher__no-switcher-icon"
     disabled={true}
     icon={
-      <Memo(BlockIcon)
-        icon={
-          <SVG
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <Path
-              d="M20.2 8v11c0 .7-.6 1.2-1.2 1.2H6v1.5h13c1.5 0 2.7-1.2 2.7-2.8V8zM18 16.4V4.6c0-.9-.7-1.6-1.6-1.6H4.6C3.7 3 3 3.7 3 4.6v11.8c0 .9.7 1.6 1.6 1.6h11.8c.9 0 1.6-.7 1.6-1.6zm-13.5 0V4.6c0-.1.1-.1.1-.1h11.8c.1 0 .1.1.1.1v11.8c0 .1-.1.1-.1.1H4.6l-.1-.1z"
-            />
-          </SVG>
-        }
-        showColors={true}
-      />
+      <React.Fragment>
+        <Memo(BlockIcon)
+          icon={
+            <SVG
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <Path
+                d="M20.2 8v11c0 .7-.6 1.2-1.2 1.2H6v1.5h13c1.5 0 2.7-1.2 2.7-2.8V8zM18 16.4V4.6c0-.9-.7-1.6-1.6-1.6H4.6C3.7 3 3 3.7 3 4.6v11.8c0 .9.7 1.6 1.6 1.6h11.8c.9 0 1.6-.7 1.6-1.6zm-13.5 0V4.6c0-.1.1-.1.1-.1h11.8c.1 0 .1.1.1.1v11.8c0 .1-.1.1-.1.1H4.6l-.1-.1z"
+              />
+            </SVG>
+          }
+          showColors={true}
+        />
+      </React.Fragment>
     }
   />
 </ToolbarGroup>

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"