@wordpress/block-editor 9.0.0 → 9.3.0

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

@@ -12,11 +12,8 @@ import { store as blockEditorStore } from '../../store';
 
 export default function BlockToolbar() {
 	const { blockClientIds, isValid, mode } = useSelect( ( select ) => {
-		const {
-			getBlockMode,
-			getSelectedBlockClientIds,
-			isBlockValid,
-		} = select( blockEditorStore );
+		const { getBlockMode, getSelectedBlockClientIds, isBlockValid } =
+			select( blockEditorStore );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
 
 		return {

package/src/components/block-toolbar/utils.js

@@ -1,15 +1,10 @@
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
-
 /**
  * WordPress dependencies
  */
 import { useState, useRef, useEffect } from '@wordpress/element';
 
 const { clearTimeout, setTimeout } = window;
-
+const noop = () => {};
 const DEBOUNCE_TIMEOUT = 200;
 
 /**
@@ -116,11 +111,8 @@ export function useShowMoversGestures( {
 	onChange = noop,
 } ) {
 	const [ isFocused, setIsFocused ] = useState( false );
-	const {
-		showMovers,
-		debouncedShowMovers,
-		debouncedHideMovers,
-	} = useDebouncedShowMovers( { ref, debounceTimeout, isFocused, onChange } );
+	const { showMovers, debouncedShowMovers, debouncedHideMovers } =
+		useDebouncedShowMovers( { ref, debounceTimeout, isFocused, onChange } );
 
 	const registerRef = useRef( false );
 

package/src/components/block-tools/block-contextual-toolbar.js

@@ -20,11 +20,8 @@ import { store as blockEditorStore } from '../../store';
 function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 	const { blockType, hasParents, showParentSelector } = useSelect(
 		( select ) => {
-			const {
-				getBlockName,
-				getBlockParents,
-				getSelectedBlockClientIds,
-			} = select( blockEditorStore );
+			const { getBlockName, getBlockParents, getSelectedBlockClientIds } =
+				select( blockEditorStore );
 			const { getBlockType } = select( blocksStore );
 			const selectedBlockClientIds = getSelectedBlockClientIds();
 			const selectedBlockClientId = selectedBlockClientIds[ 0 ];

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

@@ -40,9 +40,8 @@ export default function BlockTools( {
 		[]
 	);
 	const isMatch = useShortcutEventMatch();
-	const { getSelectedBlockClientIds, getBlockRootClientId } = useSelect(
-		blockEditorStore
-	);
+	const { getSelectedBlockClientIds, getBlockRootClientId } =
+		useSelect( blockEditorStore );
 	const {
 		duplicateBlocks,
 		removeBlocks,

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

@@ -45,10 +45,8 @@ export default function BlockTypesList( {
 	}, [] );
 
 	function calculateItemWidth() {
-		const {
-			paddingLeft: itemPaddingLeft,
-			paddingRight: itemPaddingRight,
-		} = InserterButton.Styles.modalItem;
+		const { paddingLeft: itemPaddingLeft, paddingRight: itemPaddingRight } =
+			InserterButton.Styles.modalItem;
 		const { width } = InserterButton.Styles.modalIconWrapper;
 		return width + itemPaddingLeft + itemPaddingRight;
 	}

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
@@ -98,12 +99,10 @@ function __experimentalBlockVariationTransforms( { blockClientId } ) {
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 	const { activeBlockVariation, variations } = useSelect(
 		( select ) => {
-			const { getActiveBlockVariation, getBlockVariations } = select(
-				blocksStore
-			);
-			const { getBlockName, getBlockAttributes } = select(
-				blockEditorStore
-			);
+			const { getActiveBlockVariation, getBlockVariations } =
+				select( blocksStore );
+			const { getBlockName, getBlockAttributes } =
+				select( blockEditorStore );
 			const name = blockClientId && getBlockName( blockClientId );
 			return {
 				activeBlockVariation: getActiveBlockVariation(
@@ -121,9 +120,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/control.js

@@ -2,13 +2,14 @@
  * External dependencies
  */
 import { create, act } from 'react-test-renderer';
-import { noop } from 'lodash';
 
 /**
  * Internal dependencies
  */
 import ColorPaletteControl from '../control';
 
+const noop = () => {};
+
 describe( 'ColorPaletteControl', () => {
 	it( 'matches the snapshot', async () => {
 		let root;

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

@@ -49,35 +49,34 @@ const ColorSelectorIcon = ( { style, className } ) => {
  *
  * @return {*} React toggle button component.
  */
-const renderToggleComponent = ( { TextColor, BackgroundColor } ) => ( {
-	onToggle,
-	isOpen,
-} ) => {
-	const openOnArrowDown = ( event ) => {
-		if ( ! isOpen && event.keyCode === DOWN ) {
-			event.preventDefault();
-			onToggle();
-		}
-	};
+const renderToggleComponent =
+	( { TextColor, BackgroundColor } ) =>
+	( { onToggle, isOpen } ) => {
+		const openOnArrowDown = ( event ) => {
+			if ( ! isOpen && event.keyCode === DOWN ) {
+				event.preventDefault();
+				onToggle();
+			}
+		};
 
-	return (
-		<ToolbarGroup>
-			<ToolbarButton
-				className="components-toolbar__control block-library-colors-selector__toggle"
-				label={ __( 'Open Colors Selector' ) }
-				onClick={ onToggle }
-				onKeyDown={ openOnArrowDown }
-				icon={
-					<BackgroundColor>
-						<TextColor>
-							<ColorSelectorIcon />
-						</TextColor>
-					</BackgroundColor>
-				}
-			/>
-		</ToolbarGroup>
-	);
-};
+		return (
+			<ToolbarGroup>
+				<ToolbarButton
+					className="components-toolbar__control block-library-colors-selector__toggle"
+					label={ __( 'Open Colors Selector' ) }
+					onClick={ onToggle }
+					onKeyDown={ openOnArrowDown }
+					icon={
+						<BackgroundColor>
+							<TextColor>
+								<ColorSelectorIcon />
+							</TextColor>
+						</BackgroundColor>
+					}
+				/>
+			</ToolbarGroup>
+		);
+	};
 
 const BlockColorsStyleSelector = ( { children, ...other } ) => {
 	deprecated( `wp.blockEditor.BlockColorsStyleSelector`, {

package/src/components/colors/test/with-colors.js

@@ -28,13 +28,13 @@ describe( 'createCustomColorsHOC', () => {
 		const withCustomColors = createCustomColorsHOC( [
 			{ name: 'Red', slug: 'red', color: 'ff0000' },
 		] );
-		const EnhancedComponent = withCustomColors(
-			'backgroundColor'
-		)( ( props ) => (
-			<button onClick={ () => props.setBackgroundColor( 'ff0000' ) }>
-				Test Me
-			</button>
-		) );
+		const EnhancedComponent = withCustomColors( 'backgroundColor' )(
+			( props ) => (
+				<button onClick={ () => props.setBackgroundColor( 'ff0000' ) }>
+					Test Me
+				</button>
+			)
+		);
 
 		const setAttributes = jest.fn();
 
@@ -56,13 +56,13 @@ describe( 'createCustomColorsHOC', () => {
 		const withCustomColors = createCustomColorsHOC( [
 			{ name: 'Red', slug: 'red', color: 'ff0000' },
 		] );
-		const EnhancedComponent = withCustomColors(
-			'backgroundColor'
-		)( ( props ) => (
-			<button onClick={ () => props.setBackgroundColor( '000000' ) }>
-				Test Me
-			</button>
-		) );
+		const EnhancedComponent = withCustomColors( 'backgroundColor' )(
+			( props ) => (
+				<button onClick={ () => props.setBackgroundColor( '000000' ) }>
+					Test Me
+				</button>
+			)
+		);
 
 		const setAttributes = jest.fn();
 

package/src/components/colors/with-colors.js

@@ -30,9 +30,8 @@ import useSetting from '../use-setting';
  */
 const withCustomColorPalette = ( colorsArray ) =>
 	createHigherOrderComponent(
-		( WrappedComponent ) => ( props ) => (
-			<WrappedComponent { ...props } colors={ colorsArray } />
-		),
+		( WrappedComponent ) => ( props ) =>
+			<WrappedComponent { ...props } colors={ colorsArray } />,
 		'withCustomColorPalette'
 	);
 
@@ -96,9 +95,8 @@ function createColorHOC( colorTypes, withColorPalette ) {
 
 					this.setters = this.createSetters();
 					this.colorUtils = {
-						getMostReadableColor: this.getMostReadableColor.bind(
-							this
-						),
+						getMostReadableColor:
+							this.getMostReadableColor.bind( this ),
 					};
 
 					this.state = {};
@@ -117,9 +115,8 @@ function createColorHOC( colorTypes, withColorPalette ) {
 							colorContext,
 							colorAttributeName
 						) => {
-							const upperFirstColorAttributeName = upperFirst(
-								colorAttributeName
-							);
+							const upperFirstColorAttributeName =
+								upperFirst( colorAttributeName );
 							const customColorAttributeName = `custom${ upperFirstColorAttributeName }`;
 							settersAccumulator[
 								`set${ upperFirstColorAttributeName }`
@@ -181,9 +178,8 @@ function createColorHOC( colorTypes, withColorPalette ) {
 								previousColor === colorObject.color &&
 								previousColorObject
 							) {
-								newState[
-									colorAttributeName
-								] = previousColorObject;
+								newState[ colorAttributeName ] =
+									previousColorObject;
 							} else {
 								newState[ colorAttributeName ] = {
 									...colorObject,