@wordpress/block-editor 8.6.0 → 9.2.0

package/src/components/block-mover/index.native.js

@@ -11,7 +11,7 @@ import { __ } from '@wordpress/i18n';
 import { Picker, ToolbarButton } from '@wordpress/components';
 import { withInstanceId, compose } from '@wordpress/compose';
 import { withSelect, withDispatch } from '@wordpress/data';
-import { useRef, useState } from '@wordpress/element';
+import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -36,6 +36,7 @@ export const BlockMover = ( {
 	isStackedHorizontally,
 } ) => {
 	const pickerRef = useRef();
+	const [ shouldPresentPicker, setShouldPresentPicker ] = useState( false );
 	const [ blockPageMoverState, setBlockPageMoverState ] = useState(
 		undefined
 	);
@@ -46,9 +47,17 @@ export const BlockMover = ( {
 		}
 
 		setBlockPageMoverState( direction );
-		pickerRef.current.presentPicker();
+		setShouldPresentPicker( true );
 	};
 
+	// Ensure that the picker is only presented after state updates.
+	useEffect( () => {
+		if ( shouldPresentPicker ) {
+			pickerRef.current?.presentPicker();
+			setShouldPresentPicker( false );
+		}
+	}, [ shouldPresentPicker ] );
+
 	const {
 		description: {
 			backwardButtonHint,
@@ -86,6 +95,15 @@ export const BlockMover = ( {
 		if ( option && option.onSelect ) option.onSelect();
 	};
 
+	const onLongPressMoveUp = useCallback(
+		showBlockPageMover( BLOCK_MOVER_DIRECTION_TOP ),
+		[]
+	);
+	const onLongPressMoveDown = useCallback(
+		showBlockPageMover( BLOCK_MOVER_DIRECTION_BOTTOM ),
+		[]
+	);
+
 	if ( ! canMove || ( isFirst && isLast && ! rootClientId ) ) {
 		return null;
 	}
@@ -96,7 +114,7 @@ export const BlockMover = ( {
 				title={ ! isFirst ? backwardButtonTitle : firstBlockTitle }
 				isDisabled={ isFirst }
 				onClick={ onMoveUp }
-				onLongPress={ showBlockPageMover( BLOCK_MOVER_DIRECTION_TOP ) }
+				onLongPress={ onLongPressMoveUp }
 				icon={ backwardButtonIcon }
 				extraProps={ { hint: backwardButtonHint } }
 			/>
@@ -105,9 +123,7 @@ export const BlockMover = ( {
 				title={ ! isLast ? forwardButtonTitle : lastBlockTitle }
 				isDisabled={ isLast }
 				onClick={ onMoveDown }
-				onLongPress={ showBlockPageMover(
-					BLOCK_MOVER_DIRECTION_BOTTOM
-				) }
+				onLongPress={ onLongPressMoveDown }
 				icon={ forwardButtonIcon }
 				extraProps={ {
 					hint: forwardButtonHint,

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

@@ -34,6 +34,11 @@ Array [
       }
     >
       <View
+        collapsable={false}
+        handlerTag={3}
+        handlerType="LongPressGestureHandler"
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
         style={
           Object {
             "alignItems": "center",
@@ -89,6 +94,11 @@ Array [
       }
     >
       <View
+        collapsable={false}
+        handlerTag={4}
+        handlerType="LongPressGestureHandler"
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
         style={
           Object {
             "alignItems": "center",

package/src/components/block-navigation/dropdown.js

@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import deprecated from '@wordpress/deprecated';
+
 /**
  * WordPress dependencies
  */
@@ -36,10 +41,12 @@ function BlockNavigationDropdownToggle( {
 	);
 }
 
-function BlockNavigationDropdown(
-	{ isDisabled, __experimentalFeatures, ...props },
-	ref
-) {
+function BlockNavigationDropdown( { isDisabled, ...props }, ref ) {
+	deprecated( 'wp.blockEditor.BlockNavigationDropdown', {
+		since: '6.1',
+		alternative: 'wp.components.Dropdown and wp.blockEditor.ListView',
+	} );
+
 	const hasBlocks = useSelect(
 		( select ) => !! select( blockEditorStore ).getBlockCount(),
 		[]
@@ -65,10 +72,7 @@ function BlockNavigationDropdown(
 						{ __( 'List view' ) }
 					</p>
 
-					<ListView
-						showNestedBlocks
-						__experimentalFeatures={ __experimentalFeatures }
-					/>
+					<ListView />
 				</div>
 			) }
 		/>

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

@@ -28,11 +28,13 @@ function BlockPopoverInbetween( {
 	__unstableContentRef,
 	...props
 } ) {
-	const { orientation, rootClientId } = useSelect(
+	const { orientation, rootClientId, isVisible } = useSelect(
 		( select ) => {
-			const { getBlockListSettings, getBlockRootClientId } = select(
-				blockEditorStore
-			);
+			const {
+				getBlockListSettings,
+				getBlockRootClientId,
+				isBlockVisible,
+			} = select( blockEditorStore );
 
 			const _rootClientId = getBlockRootClientId( previousClientId );
 			return {
@@ -40,6 +42,9 @@ function BlockPopoverInbetween( {
 					getBlockListSettings( _rootClientId )?.orientation ||
 					'vertical',
 				rootClientId: _rootClientId,
+				isVisible:
+					isBlockVisible( previousClientId ) &&
+					isBlockVisible( nextClientId ),
 			};
 		},
 		[ previousClientId ]
@@ -48,7 +53,7 @@ function BlockPopoverInbetween( {
 	const nextElement = useBlockElement( nextClientId );
 	const isVertical = orientation === 'vertical';
 	const style = useMemo( () => {
-		if ( ! previousElement && ! nextElement ) {
+		if ( ( ! previousElement && ! nextElement ) || ! isVisible ) {
 			return {};
 		}
 
@@ -87,7 +92,7 @@ function BlockPopoverInbetween( {
 	}, [ previousElement, nextElement, isVertical ] );
 
 	const getAnchorRect = useCallback( () => {
-		if ( ! previousElement && ! nextElement ) {
+		if ( ( ! previousElement && ! nextElement ) || ! isVisible ) {
 			return {};
 		}
 
@@ -107,6 +112,8 @@ function BlockPopoverInbetween( {
 					left: previousRect ? previousRect.right : nextRect.right,
 					right: previousRect ? previousRect.left : nextRect.left,
 					bottom: nextRect ? nextRect.top : previousRect.bottom,
+					height: 0,
+					width: 0,
 					ownerDocument,
 				};
 			}
@@ -116,6 +123,8 @@ function BlockPopoverInbetween( {
 				left: previousRect ? previousRect.left : nextRect.left,
 				right: previousRect ? previousRect.right : nextRect.right,
 				bottom: nextRect ? nextRect.top : previousRect.bottom,
+				height: 0,
+				width: 0,
 				ownerDocument,
 			};
 		}
@@ -126,6 +135,8 @@ function BlockPopoverInbetween( {
 				left: previousRect ? previousRect.left : nextRect.right,
 				right: nextRect ? nextRect.right : previousRect.left,
 				bottom: previousRect ? previousRect.bottom : nextRect.bottom,
+				height: 0,
+				width: 0,
 				ownerDocument,
 			};
 		}
@@ -135,13 +146,15 @@ function BlockPopoverInbetween( {
 			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 ) {
+	if ( ! previousElement || ! nextElement || ! isVisible ) {
 		return null;
 	}
 
@@ -155,7 +168,6 @@ function BlockPopoverInbetween( {
 	return (
 		<Popover
 			ref={ popoverScrollRef }
-			noArrow
 			animate={ false }
 			getAnchorRect={ getAnchorRect }
 			focusOnMount={ false }
@@ -170,6 +182,7 @@ function BlockPopoverInbetween( {
 				'block-editor-block-popover',
 				props.className
 			) }
+			__unstableForcePosition
 		>
 			<div style={ style }>{ children }</div>
 		</Popover>

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

@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { Popover } from '@wordpress/components';
-import { getScrollContainer } from '@wordpress/dom';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -19,6 +19,8 @@ export default function BlockPopover( {
 	clientId,
 	bottomClientId,
 	children,
+	__unstableRefreshSize,
+	__unstableCoverTarget = false,
 	__unstablePopoverSlot,
 	__unstableContentRef,
 	...props
@@ -26,6 +28,17 @@ export default function BlockPopover( {
 	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;
@@ -36,38 +49,28 @@ export default function BlockPopover( {
 		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 }
+			__unstableForcePosition
+			__unstableShift
 			{ ...props }
 			className={ classnames(
 				'block-editor-block-popover',
 				props.className
 			) }
 		>
-			{ children }
+			{ __unstableCoverTarget && <div style={ style }>{ children }</div> }
+			{ ! __unstableCoverTarget && children }
 		</Popover>
 	);
 }

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

@@ -2,6 +2,9 @@
 .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;
@@ -9,6 +12,7 @@
 		width: max-content;
 		background: none;
 		border: none;
+		outline: none;
 		box-shadow: none;
 		overflow-y: visible;
 

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-switcher/style.scss

@@ -39,11 +39,6 @@
 	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;
 
@@ -93,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});
 	}
 }
 
@@ -138,7 +101,6 @@
 
 	// Position correctly. Needs specificity.
 	&.components-popover {
-		margin-left: $grid-unit-05;
 		margin-top: $grid-unit-15 - $border-width;
 	}
 
@@ -151,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-tools/block-selection-button.js

@@ -262,6 +262,7 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 						onClick={ () => setNavigationMode( false ) }
 						onKeyDown={ onKeyDown }
 						label={ label }
+						showTooltip={ false }
 						className="block-selection-button_select-button"
 					>
 						<BlockTitle

package/src/components/block-tools/selected-block-popover.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useState, useRef, useEffect } from '@wordpress/element';
+import { useRef, useEffect } from '@wordpress/element';
 import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
@@ -18,7 +18,6 @@ import { useViewportMatch } from '@wordpress/compose';
  */
 import BlockSelectionButton from './block-selection-button';
 import BlockContextualToolbar from './block-contextual-toolbar';
-import Inserter from '../inserter';
 import { store as blockEditorStore } from '../../store';
 import BlockPopover from '../block-popover';
 
@@ -77,7 +76,6 @@ function SelectedBlockPopover( {
 	);
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const isToolbarForced = useRef( false );
-	const [ isInserterShown, setIsInserterShown ] = useState( false );
 	const { stopTyping } = useDispatch( blockEditorStore );
 
 	const showEmptyBlockSideInserter =
@@ -119,14 +117,6 @@ function SelectedBlockPopover( {
 		return null;
 	}
 
-	function onFocus() {
-		setIsInserterShown( true );
-	}
-
-	function onBlur() {
-		setIsInserterShown( false );
-	}
-
 	return (
 		<BlockPopover
 			clientId={ capturingClientId || clientId }
@@ -137,31 +127,6 @@ function SelectedBlockPopover( {
 			__unstablePopoverSlot={ __unstablePopoverSlot }
 			__unstableContentRef={ __unstableContentRef }
 		>
-			{ shouldShowContextualToolbar && (
-				<div
-					onFocus={ onFocus }
-					onBlur={ onBlur }
-					// 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
-					tabIndex={ -1 }
-					className={ classnames(
-						'block-editor-block-list__block-popover-inserter',
-						{
-							'is-visible': isInserterShown,
-						}
-					) }
-				>
-					<Inserter
-						clientId={ clientId }
-						rootClientId={ rootClientId }
-						__experimentalIsQuick
-					/>
-				</div>
-			) }
 			{ shouldShowContextualToolbar && (
 				<BlockContextualToolbar
 					// If the toolbar is being shown because of being forced

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

@@ -42,20 +42,9 @@
 	left: calc(50% - #{$button-size-small * 0.5});
 }
 
-.block-editor-block-list__block-popover-inserter {
-	position: absolute;
-	top: -9999em;
-	margin-bottom: $block-padding;
-
-	&.is-visible {
-		position: static;
-	}
-}
-
 // Sibling inserter / "inbetweenserter".
 .block-editor-default-block-appender,
-.block-editor-block-list__insertion-point-inserter,
-.block-editor-block-list__block-popover-inserter {
+.block-editor-block-list__insertion-point-inserter {
 	.block-editor-inserter__toggle.components-button.has-icon {
 		// Basic look
 		background: $gray-900;

package/src/components/block-variation-transforms/index.js

@@ -17,6 +17,7 @@ import { chevronDown } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import BlockIcon from '../block-icon';
 import { store as blockEditorStore } from '../../store';
 
 function VariationsButtons( {
@@ -33,7 +34,7 @@ function VariationsButtons( {
 			{ variations.map( ( variation ) => (
 				<Button
 					key={ variation.name }
-					icon={ variation.icon }
+					icon={ <BlockIcon icon={ variation.icon } showColors /> }
 					isPressed={ selectedValue === variation.name }
 					label={
 						selectedValue === variation.name
@@ -121,9 +122,12 @@ function __experimentalBlockVariationTransforms( { blockClientId } ) {
 	// Check if each variation has a unique icon.
 	const hasUniqueIcons = useMemo( () => {
 		const variationIcons = new Set();
+		if ( ! variations ) {
+			return false;
+		}
 		variations.forEach( ( variation ) => {
 			if ( variation.icon ) {
-				variationIcons.add( variation.icon );
+				variationIcons.add( variation.icon?.src || variation.icon );
 			}
 		} );
 		return variationIcons.size === variations.length;

package/src/components/border-radius-control/input-controls.js

@@ -1,7 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalUnitControl as UnitControl } from '@wordpress/components';
+import {
+	__experimentalUnitControl as UnitControl,
+	Tooltip,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 const CORNERS = {
@@ -39,16 +42,21 @@ export default function BoxInputControls( {
 			  };
 
 	// Controls are wrapped in tooltips as visible labels aren't desired here.
+	// Tooltip rendering also requires the UnitControl to be wrapped. See:
+	// https://github.com/WordPress/gutenberg/pull/24966#issuecomment-685875026
 	return (
 		<div className="components-border-radius-control__input-controls-wrapper">
 			{ Object.entries( CORNERS ).map( ( [ key, label ] ) => (
-				<UnitControl
-					{ ...props }
-					key={ key }
-					aria-label={ label }
-					value={ values[ key ] }
-					onChange={ createHandleOnChange( key ) }
-				/>
+				<Tooltip text={ label } position="top" key={ key }>
+					<div className="components-border-radius-control__tooltip-wrapper">
+						<UnitControl
+							{ ...props }
+							aria-label={ label }
+							value={ values[ key ] }
+							onChange={ createHandleOnChange( key ) }
+						/>
+					</div>
+				</Tooltip>
 			) ) }
 		</div>
 	);

package/src/components/border-radius-control/style.scss

@@ -13,7 +13,7 @@
 		> .components-unit-control-wrapper {
 			width: 110px;
 			margin-bottom: 0;
-			margin-right: #{ $grid-unit-10 };
+			margin-right: #{ $grid-unit-15 };
 			flex-shrink: 0;
 		}
 
@@ -41,7 +41,7 @@
 		width: 70%;
 		flex-wrap: wrap;
 
-		.components-unit-control-wrapper {
+		.components-border-radius-control__tooltip-wrapper {
 			width: calc(50% - #{ $grid-unit-10 });
 			margin-bottom: $grid-unit-10;
 			margin-right: $grid-unit-10;
@@ -52,6 +52,7 @@
 		display: flex;
 		justify-content: center;
 		margin-left: 2px;
+		margin-top: 3px;
 
 		svg {
 			margin-right: 0;

package/src/components/color-palette/test/__snapshots__/control.js.snap

@@ -231,7 +231,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
             >
               <button
                 aria-describedby={null}
-                className="components-button components-circular-option-picker__clear is-secondary is-small"
+                className="components-button components-circular-option-picker__clear is-tertiary"
                 onClick={[Function]}
                 type="button"
               >

package/src/components/color-style-selector/index.js

@@ -10,6 +10,7 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { DOWN } from '@wordpress/keycodes';
+import deprecated from '@wordpress/deprecated';
 
 const ColorSelectorSVGIcon = () => (
 	<SVG xmlns="https://www.w3.org/2000/svg" viewBox="0 0 20 20">
@@ -78,14 +79,22 @@ const renderToggleComponent = ( { TextColor, BackgroundColor } ) => ( {
 	);
 };
 
-const BlockColorsStyleSelector = ( { children, ...other } ) => (
-	<Dropdown
-		position="bottom right"
-		className="block-library-colors-selector"
-		contentClassName="block-library-colors-selector__popover"
-		renderToggle={ renderToggleComponent( other ) }
-		renderContent={ () => children }
-	/>
-);
+const BlockColorsStyleSelector = ( { children, ...other } ) => {
+	deprecated( `wp.blockEditor.BlockColorsStyleSelector`, {
+		alternative: 'block supports API',
+		since: '6.1',
+		version: '6.3',
+	} );
+
+	return (
+		<Dropdown
+			position="bottom right"
+			className="block-library-colors-selector"
+			contentClassName="block-library-colors-selector__popover"
+			renderToggle={ renderToggleComponent( other ) }
+			renderContent={ () => children }
+		/>
+	);
+};
 
 export default BlockColorsStyleSelector;