@wordpress/block-editor 10.3.0 → 10.5.0

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

@@ -15,7 +15,6 @@
 				// Focus style.
 				&::before {
 					height: calc(100% - 4px);
-					width: calc(100% - 4px);
 				}
 			}
 
@@ -61,3 +60,38 @@
 		overflow: hidden;
 	}
 }
+
+// Specificity is necessary to override block toolbar button styles.
+.components-button.block-editor-block-mover-button {
+	// Focus and toggle pseudo elements.
+	&::before {
+		content: "";
+		position: absolute;
+		display: block;
+		border-radius: $radius-block-ui;
+		height: $grid-unit-40;
+
+		// Position the focus rectangle.
+		left: $grid-unit-10;
+		right: $grid-unit-10;
+		z-index: -1;
+
+		// Animate in.
+		animation: components-button__appear-animation 0.1s ease;
+		animation-fill-mode: forwards;
+		@include reduce-motion("animation");
+	}
+
+	// Don't show the focus inherited by the Button component.
+	&:focus,
+	&:focus:enabled,
+	// Override focus styles from the block toolbar
+	&:focus::before {
+		box-shadow: none;
+		outline: none;
+	}
+
+	&:focus-visible::before {
+		@include block-toolbar-button-style__focus();
+	}
+}

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

@@ -268,6 +268,7 @@ function BlockPopoverInbetween( {
 			resize={ false }
 			flip={ false }
 			placement="bottom-start"
+			variant="unstyled"
 		>
 			<div
 				className="block-editor-block-popover__inbetween-container"

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

@@ -173,6 +173,7 @@ function BlockPopover(
 				'block-editor-block-popover',
 				props.className
 			) }
+			variant="unstyled"
 		>
 			{ __unstableCoverTarget && <div style={ style }>{ children }</div> }
 			{ ! __unstableCoverTarget && children }

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

@@ -13,15 +13,11 @@
 		margin: 0 !important;
 		min-width: auto;
 		width: max-content;
-		background: none;
-		border: none;
-		outline: none;
-		box-shadow: none;
 		overflow-y: visible;
 	}
 
 	// Enable pointer events for the toolbar's content.
-	&:not(.block-editor-block-popover__inbetween, .block-editor-block-popover__drop-zone) .components-popover__content {
+	&:not(.block-editor-block-popover__inbetween, .block-editor-block-popover__drop-zone, .block-editor-block-list__block-side-inserter-popover) .components-popover__content {
 		* {
 			pointer-events: all;
 		}

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

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { castArray } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -36,7 +35,10 @@ export function BlockPreview( {
 		() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),
 		[ originalSettings ]
 	);
-	const renderedBlocks = useMemo( () => castArray( blocks ), [ blocks ] );
+	const renderedBlocks = useMemo(
+		() => ( Array.isArray( blocks ) ? blocks : [ blocks ] ),
+		[ blocks ]
+	);
 	if ( ! blocks || blocks.length === 0 ) {
 		return null;
 	}
@@ -99,7 +101,10 @@ export function useBlockPreview( {
 	);
 	const disabledRef = useDisabled();
 	const ref = useMergeRefs( [ props.ref, disabledRef ] );
-	const renderedBlocks = useMemo( () => castArray( blocks ), [ blocks ] );
+	const renderedBlocks = useMemo(
+		() => ( Array.isArray( blocks ) ? blocks : [ blocks ] ),
+		[ blocks ]
+	);
 
 	const children = (
 		<BlockEditorProvider value={ renderedBlocks } settings={ settings }>

package/src/components/block-settings-menu/block-settings-dropdown.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { castArray } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -41,7 +36,7 @@ const noop = () => {};
 const POPOVER_PROPS = {
 	className: 'block-editor-block-settings-menu__popover',
 	position: 'bottom right',
-	isAlternate: true,
+	variant: 'toolbar',
 };
 
 function CopyMenuItem( { blocks, onCopy } ) {
@@ -58,7 +53,9 @@ export function BlockSettingsDropdown( {
 	__unstableDisplayLocation,
 	...props
 } ) {
-	const blockClientIds = castArray( clientIds );
+	const blockClientIds = Array.isArray( clientIds )
+		? clientIds
+		: [ clientIds ];
 	const count = blockClientIds.length;
 	const firstBlockClientId = blockClientIds[ 0 ];
 	const {

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

@@ -11,7 +11,7 @@ import { _x } from '@wordpress/i18n';
 /**
  * Returns the active style from the given className.
  *
- * @param {Array}  styles    Block style variations.
+ * @param {Array}  styles    Block styles.
  * @param {string} className Class name
  *
  * @return {Object?} The active style.
@@ -59,7 +59,7 @@ export function replaceActiveStyle( className, activeStyle, newStyle ) {
  * act as a fallback for when there is no active style applied to a block. The default item also serves
  * as a switch on the frontend to deactivate non-default styles.
  *
- * @param {Array} styles Block style variations.
+ * @param {Array} styles Block styles.
  *
  * @return {Array<Object?>}        The style collection.
  */
@@ -83,7 +83,7 @@ export function getRenderedStyles( styles ) {
 /**
  * Returns a style object from a collection of styles where that style object is the default block style.
  *
- * @param {Array} styles Block style variations.
+ * @param {Array} styles Block styles.
  *
  * @return {Object?}        The default style object, if found.
  */

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { castArray } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -34,7 +29,7 @@ import PatternTransformationsMenu from './pattern-transformations-menu';
 import useBlockDisplayTitle from '../block-title/use-block-display-title';
 
 export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
-	const { replaceBlocks } = useDispatch( blockEditorStore );
+	const { replaceBlocks, multiSelect } = useDispatch( blockEditorStore );
 	const blockInformation = useBlockDisplayInformation( blocks[ 0 ].clientId );
 	const {
 		possibleBlockTransformations,
@@ -52,7 +47,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 			const { getBlockStyles, getBlockType } = select( blocksStore );
 			const { canRemoveBlocks } = select( blockEditorStore );
 			const rootClientId = getBlockRootClientId(
-				castArray( clientIds )[ 0 ]
+				Array.isArray( clientIds ) ? clientIds[ 0 ] : clientIds
 			);
 			const [ { name: firstBlockName } ] = blocks;
 			const _isSingleBlockSelected = blocks.length === 1;
@@ -94,12 +89,27 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 	const isReusable = blocks.length === 1 && isReusableBlock( blocks[ 0 ] );
 	const isTemplate = blocks.length === 1 && isTemplatePart( blocks[ 0 ] );
 
+	function selectForMultipleBlocks( insertedBlocks ) {
+		if ( insertedBlocks.length > 1 ) {
+			multiSelect(
+				insertedBlocks[ 0 ].clientId,
+				insertedBlocks[ insertedBlocks.length - 1 ].clientId
+			);
+		}
+	}
+
 	// Simple block tranformation based on the `Block Transforms` API.
-	const onBlockTransform = ( name ) =>
-		replaceBlocks( clientIds, switchToBlockType( blocks, name ) );
+	function onBlockTransform( name ) {
+		const newBlocks = switchToBlockType( blocks, name );
+		replaceBlocks( clientIds, newBlocks );
+		selectForMultipleBlocks( newBlocks );
+	}
+
 	// Pattern transformation through the `Patterns` API.
-	const onPatternTransform = ( transformedBlocks ) =>
+	function onPatternTransform( transformedBlocks ) {
 		replaceBlocks( clientIds, transformedBlocks );
+		selectForMultipleBlocks( transformedBlocks );
+	}
 
 	/**
 	 * The `isTemplate` check is a stopgap solution here.
@@ -163,7 +173,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 						label={ blockSwitcherLabel }
 						popoverProps={ {
 							position: 'bottom right',
-							isAlternate: true,
+							variant: 'toolbar',
 							className: 'block-editor-block-switcher__popover',
 						} }
 						icon={

package/src/components/block-switcher/preview-block-popover.js

@@ -15,7 +15,7 @@ export default function PreviewBlockPopover( { blocks } ) {
 			<div className="block-editor-block-switcher__popover__preview__container">
 				<Popover
 					className="block-editor-block-switcher__preview__popover"
-					position="bottom right"
+					placement="bottom-start"
 					focusOnMount={ false }
 				>
 					<div className="block-editor-block-switcher__preview">

package/src/components/block-tools/insertion-point.js

@@ -25,7 +25,7 @@ function InbetweenInsertionPointPopover( {
 	__unstablePopoverSlot,
 	__unstableContentRef,
 } ) {
-	const { selectBlock } = useDispatch( blockEditorStore );
+	const { selectBlock, hideInsertionPoint } = useDispatch( blockEditorStore );
 	const openRef = useContext( InsertionPointOpenRef );
 	const ref = useRef();
 	const {
@@ -89,6 +89,14 @@ function InbetweenInsertionPointPopover( {
 		}
 	}
 
+	function maybeHideInserterPoint( event ) {
+		// Only hide the inserter if it's triggered on the wrapper,
+		// and the inserter is not open.
+		if ( event.target === ref.current && ! openRef.current ) {
+			hideInsertionPoint();
+		}
+	}
+
 	function onFocus( event ) {
 		// Only handle click on the wrapper specifically, and not an event
 		// bubbled from the inserter itself.
@@ -200,6 +208,7 @@ function InbetweenInsertionPointPopover( {
 				className={ classnames( className, {
 					'is-with-inserter': isInserterShown,
 				} ) }
+				onHoverEnd={ maybeHideInserterPoint }
 			>
 				<motion.div
 					variants={ lineVariants }

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

@@ -21,6 +21,7 @@ import BlockContextualToolbar from './block-contextual-toolbar';
 import { store as blockEditorStore } from '../../store';
 import BlockPopover from '../block-popover';
 import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
+import Inserter from '../inserter';
 
 function selector( select ) {
 	const {
@@ -28,13 +29,16 @@ function selector( select ) {
 		isMultiSelecting,
 		hasMultiSelection,
 		isTyping,
+		__experimentalIsBlockInterfaceHidden: isBlockInterfaceHidden,
 		getSettings,
 		getLastMultiSelectedBlockClientId,
 	} = select( blockEditorStore );
+
 	return {
 		editorMode: __unstableGetEditorMode(),
 		isMultiSelecting: isMultiSelecting(),
 		isTyping: isTyping(),
+		isBlockInterfaceHidden: isBlockInterfaceHidden(),
 		hasFixedToolbar: getSettings().hasFixedToolbar,
 		isDistractionFree: getSettings().isDistractionFree,
 		lastClientId: hasMultiSelection()
@@ -56,6 +60,7 @@ function SelectedBlockPopover( {
 		editorMode,
 		isMultiSelecting,
 		isTyping,
+		isBlockInterfaceHidden,
 		hasFixedToolbar,
 		isDistractionFree,
 		lastClientId,
@@ -92,7 +97,8 @@ function SelectedBlockPopover( {
 		isLargeViewport &&
 		! isMultiSelecting &&
 		! showEmptyBlockSideInserter &&
-		! isTyping;
+		! isTyping &&
+		! isBlockInterfaceHidden;
 	const canFocusHiddenToolbar =
 		editorMode === 'edit' &&
 		! shouldShowContextualToolbar &&
@@ -124,45 +130,85 @@ function SelectedBlockPopover( {
 		clientId,
 	} );
 
-	if ( ! shouldShowBreadcrumb && ! shouldShowContextualToolbar ) {
+	if (
+		! shouldShowBreadcrumb &&
+		! shouldShowContextualToolbar &&
+		! showEmptyBlockSideInserter
+	) {
 		return null;
 	}
 
 	return (
-		<BlockPopover
-			clientId={ capturingClientId || clientId }
-			bottomClientId={ lastClientId }
-			className={ classnames( 'block-editor-block-list__block-popover', {
-				'is-insertion-point-visible': isInsertionPointVisible,
-			} ) }
-			__unstablePopoverSlot={ __unstablePopoverSlot }
-			__unstableContentRef={ __unstableContentRef }
-			resize={ false }
-			{ ...popoverProps }
-		>
-			{ shouldShowContextualToolbar && showContents && (
-				<BlockContextualToolbar
-					// If the toolbar is being shown because of being forced
-					// it should focus the toolbar right after the mount.
-					focusOnMount={ isToolbarForced.current }
-					__experimentalInitialIndex={
-						initialToolbarItemIndexRef.current
-					}
-					__experimentalOnIndexChange={ ( index ) => {
-						initialToolbarItemIndexRef.current = index;
-					} }
-					// Resets the index whenever the active block changes so
-					// this is not persisted. See https://github.com/WordPress/gutenberg/pull/25760#issuecomment-717906169
-					key={ clientId }
-				/>
+		<>
+			{ showEmptyBlockSideInserter && (
+				<BlockPopover
+					clientId={ capturingClientId || clientId }
+					__unstableCoverTarget
+					bottomClientId={ lastClientId }
+					className={ classnames(
+						'block-editor-block-list__block-side-inserter-popover',
+						{
+							'is-insertion-point-visible':
+								isInsertionPointVisible,
+						}
+					) }
+					__unstablePopoverSlot={ __unstablePopoverSlot }
+					__unstableContentRef={ __unstableContentRef }
+					resize={ false }
+					shift={ false }
+					{ ...popoverProps }
+				>
+					<div className="block-editor-block-list__empty-block-inserter">
+						<Inserter
+							position="bottom right"
+							rootClientId={ rootClientId }
+							clientId={ clientId }
+							__experimentalIsQuick
+						/>
+					</div>
+				</BlockPopover>
 			) }
-			{ shouldShowBreadcrumb && (
-				<BlockSelectionButton
-					clientId={ clientId }
-					rootClientId={ rootClientId }
-				/>
+			{ ( shouldShowBreadcrumb || shouldShowContextualToolbar ) && (
+				<BlockPopover
+					clientId={ capturingClientId || clientId }
+					bottomClientId={ lastClientId }
+					className={ classnames(
+						'block-editor-block-list__block-popover',
+						{
+							'is-insertion-point-visible':
+								isInsertionPointVisible,
+						}
+					) }
+					__unstablePopoverSlot={ __unstablePopoverSlot }
+					__unstableContentRef={ __unstableContentRef }
+					resize={ false }
+					{ ...popoverProps }
+				>
+					{ shouldShowContextualToolbar && showContents && (
+						<BlockContextualToolbar
+							// If the toolbar is being shown because of being forced
+							// it should focus the toolbar right after the mount.
+							focusOnMount={ isToolbarForced.current }
+							__experimentalInitialIndex={
+								initialToolbarItemIndexRef.current
+							}
+							__experimentalOnIndexChange={ ( index ) => {
+								initialToolbarItemIndexRef.current = index;
+							} }
+							// Resets the index whenever the active block changes so
+							// this is not persisted. See https://github.com/WordPress/gutenberg/pull/25760#issuecomment-717906169
+							key={ clientId }
+						/>
+					) }
+					{ shouldShowBreadcrumb && (
+						<BlockSelectionButton
+							clientId={ clientId }
+							rootClientId={ rootClientId }
+						/>
+					) }
+				</BlockPopover>
 			) }
-		</BlockPopover>
+		</>
 	);
 }
 

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

@@ -42,7 +42,16 @@
 	left: calc(50% - #{$button-size-small * 0.5});
 }
 
+.block-editor-block-list__block-side-inserter-popover .components-popover__content > div {
+	pointer-events: none;
+
+	> * {
+		pointer-events: all;
+	}
+}
+
 // Sibling inserter / "inbetweenserter".
+.block-editor-block-list__empty-block-inserter,
 .block-editor-default-block-appender,
 .block-editor-block-list__insertion-point-inserter {
 	.block-editor-inserter__toggle.components-button.has-icon {
@@ -166,6 +175,12 @@
 		&:active {
 			color: $white;
 		}
+
+		// Make sure the button has no hover style when it's disabled.
+		&[aria-disabled="true"]:hover {
+			color: $white;
+		}
+
 		display: flex;
 	}
 	.block-selection-button_select-button.components-button {

package/src/components/block-variation-picker/README.md

@@ -68,7 +68,7 @@ The different variations of the block.
 
 -   Type: `Function`
 
-Callback called when a block variation is selected. It recieves the selected variation as a parameter.
+Callback called when a block variation is selected. It receives the selected variation as a parameter.
 
 #### `icon`
 

package/src/components/block-vertical-alignment-control/ui.js

@@ -28,7 +28,7 @@ const DEFAULT_CONTROLS = [ 'top', 'center', 'bottom' ];
 const DEFAULT_CONTROL = 'top';
 
 const POPOVER_PROPS = {
-	isAlternate: true,
+	variant: 'toolbar',
 };
 
 function BlockVerticalAlignmentUI( {

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

@@ -61,6 +61,7 @@ export default function AllInputControl( {
 			onChange={ handleOnChange }
 			onUnitChange={ handleOnUnitChange }
 			placeholder={ allPlaceholder }
+			size={ '__unstable-large' }
 		/>
 	);
 }

package/src/components/border-radius-control/index.js

@@ -113,6 +113,7 @@ export default function BorderRadiusControl( { onChange, values } ) {
 							withInputField={ false }
 							onChange={ handleSliderChange }
 							step={ step }
+							__nextHasNoMarginBottom
 						/>
 					</>
 				) : (

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

@@ -80,6 +80,7 @@ export default function BoxInputControls( {
 								onUnitChange={ createHandleOnUnitChange(
 									corner
 								) }
+								size={ '__unstable-large' }
 							/>
 						</div>
 					</Tooltip>

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

@@ -10,24 +10,21 @@
 		justify-content: space-between;
 		align-items: flex-start;
 
-		> .components-unit-control-wrapper {
-			width: 110px;
+		.components-border-radius-control__unit-control {
+			width: calc((100% - #{$grid-unit-20}) / 2);
 			margin-bottom: 0;
-			margin-right: #{ $grid-unit-15 };
+			margin-right: $grid-unit-20;
 			flex-shrink: 0;
 		}
 
-		.components-range-control {
+		.components-border-radius-control__range-control {
 			flex: 1;
-			margin-bottom: 0;
-
-			.components-base-control__field {
-				margin-bottom: 0;
-				height: 30px;
-			}
+			margin-right: $grid-unit-15;
 
-			.components-range-control__wrapper {
-				margin-right: 10px;
+			> div {
+				height: 40px;
+				display: flex;
+				align-items: center;
 			}
 		}
 
@@ -37,22 +34,16 @@
 	}
 
 	.components-border-radius-control__input-controls-wrapper {
-		display: flex;
-		width: 70%;
-		flex-wrap: wrap;
-
-		.components-border-radius-control__tooltip-wrapper {
-			width: calc(50% - #{ $grid-unit-10 });
-			margin-bottom: $grid-unit-10;
-			margin-right: $grid-unit-10;
-		}
+		display: grid;
+		gap: $grid-unit-20;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+		margin-right: $grid-unit-15;
 	}
 
-	.component-border-radius-control__linked-button.has-icon {
+	.component-border-radius-control__linked-button {
 		display: flex;
 		justify-content: center;
-		margin-left: 2px;
-		margin-top: 3px;
+		margin-top: $grid-unit-10;
 
 		svg {
 			margin-right: 0;