Move the block movers to the block toolbar

packages/base-styles/_variables.scss

@@ -51,7 +51,7 @@ $block-controls-height: 36px;
 $icon-button-size: 36px;
 $icon-button-size-small: 24px;
 $inserter-tabs-height: 36px;
-$block-toolbar-height: $block-controls-height + $border-width;
+$block-toolbar-height: 48px;
 $resize-handler-size: 15px;
 $resize-handler-container-size: $resize-handler-size + ($grid-size-small * 2); // Make the resize handle container larger so there's a larger grabbable area.
 

packages/block-editor/README.md

@@ -339,10 +339,6 @@ _Related_
 
 -   <https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/media-upload/README.md>
 
-<a name="MultiBlocksSwitcher" href="#MultiBlocksSwitcher">#</a> **MultiBlocksSwitcher**
-
-Undocumented declaration.
-
 <a name="MultiSelectScrollIntoView" href="#MultiSelectScrollIntoView">#</a> **MultiSelectScrollIntoView**
 
 Scrolls the multi block selection end into view if not in view already. This

packages/block-editor/src/components/block-draggable/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { castArray } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -21,14 +16,13 @@ const BlockDraggable = ( { children, clientIds } ) => {
 			getBlockRootClientId,
 			getTemplateLock,
 		} = select( 'core/block-editor' );
-		const normalizedClientIds = castArray( clientIds );
-		const rootClientId = normalizedClientIds.length === 1 ? getBlockRootClientId( normalizedClientIds[ 0 ] ) : null;
+		const rootClientId = clientIds.length === 1 ? getBlockRootClientId( clientIds[ 0 ] ) : null;
 		const templateLock = rootClientId ? getTemplateLock( rootClientId ) : null;
 
 		return {
-			index: getBlockIndex( normalizedClientIds[ 0 ], rootClientId ),
+			index: getBlockIndex( clientIds[ 0 ], rootClientId ),
 			srcRootClientId: rootClientId,
-			isDraggable: normalizedClientIds.length === 1 && 'all' !== templateLock,
+			isDraggable: clientIds.length === 1 && 'all' !== templateLock,
 		};
 	}, [ clientIds ] );
 	const isDragging = useRef( false );
@@ -44,15 +38,14 @@ const BlockDraggable = ( { children, clientIds } ) => {
 	}, [] );
 
 	if ( ! isDraggable ) {
-		return null;
+		return children( { isDraggable: false } );
 	}
 
-	const normalizedClientIds = castArray( clientIds );
-	const blockElementId = `block-${ normalizedClientIds[ 0 ] }`;
+	const blockElementId = `block-${ clientIds[ 0 ] }`;
 	const transferData = {
 		type: 'block',
 		srcIndex: index,
-		srcClientId: normalizedClientIds[ 0 ],
+		srcClientId: clientIds[ 0 ],
 		srcRootClientId,
 	};
 
@@ -72,6 +65,7 @@ const BlockDraggable = ( { children, clientIds } ) => {
 			{
 				( { onDraggableStart, onDraggableEnd } ) => {
 					return children( {
+						isDraggable: true,
 						onDraggableStart,
 						onDraggableEnd,
 					} );

packages/block-editor/src/components/block-list/block-popover.js

@@ -124,10 +124,14 @@ function BlockPopover( {
 			className="block-editor-block-list__block-popover"
 			__unstableSticky={ showEmptyBlockSideInserter ? false : popoverIsSticky }
 			__unstableSlotName="block-toolbar"
+			__unstableBoundaryParent
 			// Allow subpixel positioning for the block movement animation.
 			__unstableAllowVerticalSubpixelPosition={ moverDirection !== 'horizontal' && node }
 			__unstableAllowHorizontalSubpixelPosition={ moverDirection === 'horizontal' && node }
 			onBlur={ () => setIsToolbarForced( false ) }
+			// Popover calculates the width once. Trigger a reset by remounting
+			// the component.
+			key={ shouldShowContextualToolbar }
 		>
 			{ ( shouldShowContextualToolbar || isToolbarForced ) && (
 				<div

packages/block-editor/src/components/block-list/style.scss

@@ -410,7 +410,7 @@
 .block-editor-block-list__insertion-point-inserter,
 .block-editor-block-list__block-popover-inserter {
 	// Show a clickable plus.
-	.block-editor-inserter__toggle {
+	.block-editor-inserter__toggle.components-button {
 		border-radius: 50%;
 		color: $blue-medium-focus;
 		background: $white;
@@ -469,17 +469,31 @@
 /**
  * Block Toolbar when contextual.
  */
-.block-editor-block-contextual-toolbar .block-editor-block-toolbar {
-	width: 100%;
-
-	@include break-small() {
-		width: auto;
+.block-editor-block-contextual-toolbar {
+	.block-editor-block-toolbar {
+		width: 100%;
 
 		// Hide right border on desktop, where the .components-toolbar instead has a right border.
 		border-right: none;
 	}
-}
 
+	// Adapt the height of the toolbar items.
+	.components-toolbar {
+		height: $block-toolbar-height + 1px;
+		border-top: $border-width solid $light-gray-800;
+		border-bottom: $border-width solid $light-gray-800;
+
+		// Ensure the icon buttons remain square.
+		.components-button.has-icon:not(.has-text) {
+			width: $block-toolbar-height;
+		}
+
+		// Adapt the height of all toolbar buttons.
+		.components-button {
+			height: $block-toolbar-height;
+		}
+	}
+}
 
 /**
  * Block Label for Navigation/Selection Mode
@@ -495,9 +509,8 @@
 		border: $border-width solid $blue-medium-focus;
 		border-left: none;
 		box-shadow: inset $block-left-border-width 0 0 0 $blue-medium-focus;
-		height: $block-toolbar-height + $border-width;
+		height: $icon-button-size + 2 * $border-width;
 		font-size: $default-font-size;
-		line-height: $block-toolbar-height - $grid-size;
 		padding-left: $grid-size;
 		padding-right: $grid-size;
 

packages/block-editor/src/components/block-mover/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { first, last, partial, castArray } from 'lodash';
+import { first, last, partial } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -18,7 +18,7 @@ import { withInstanceId, compose } from '@wordpress/compose';
  * Internal dependencies
  */
 import { getBlockMoverDescription } from './mover-description';
-import { leftArrow, rightArrow, upArrow, downArrow, dragHandle } from './icons';
+import { leftArrow, rightArrow, upArrow, downArrow } from './icons';
 import BlockDraggable from '../block-draggable';
 
 export class BlockMover extends Component {
@@ -46,7 +46,7 @@ export class BlockMover extends Component {
 	render() {
 		const { onMoveUp, onMoveDown, __experimentalOrientation: orientation, isRTL, isFirst, isLast, clientIds, blockType, firstIndex, isLocked, instanceId, isHidden, rootClientId } = this.props;
 		const { isFocused } = this.state;
-		const blocksCount = castArray( clientIds ).length;
+		const blocksCount = clientIds.length;
 		if ( isLocked || ( isFirst && isLast && ! rootClientId ) ) {
 			return null;
 		}
@@ -86,89 +86,85 @@ export class BlockMover extends Component {
 		// to an unfocused state (body as active element) without firing blur on,
 		// the rendering parent, leaving it unable to react to focus out.
 		return (
-			<ToolbarGroup className={ classnames( 'block-editor-block-mover', { 'is-visible': isFocused || ! isHidden, 'is-horizontal': orientation === 'horizontal' } ) }>
-				<Button
-					className="block-editor-block-mover__control"
-					onClick={ isFirst ? null : onMoveUp }
-					icon={ getArrowIcon( 'up' ) }
-					// translators: %s: Horizontal direction of block movement ( left, right )
-					label={ sprintf( __( 'Move %s' ), getMovementDirection( 'up' ) ) }
-					aria-describedby={ `block-editor-block-mover__up-description-${ instanceId }` }
-					aria-disabled={ isFirst }
-					onFocus={ this.onFocus }
-					onBlur={ this.onBlur }
-				/>
+			<BlockDraggable clientIds={ clientIds }>
+				{ ( { isDraggable, onDraggableStart, onDraggableEnd } ) => (
+					<div
+						className={ classnames( 'block-editor-block-mover', {
+							'is-visible': isFocused || ! isHidden, 'is-horizontal': orientation === 'horizontal',
+						} ) }
+						draggable={ isDraggable }
+						onDragStart={ onDraggableStart }
+						onDragEnd={ onDraggableEnd }
+					>
+						<ToolbarGroup>
+							<Button
+								className="block-editor-block-mover__control"
+								onClick={ isFirst ? null : onMoveUp }
+								icon={ getArrowIcon( 'up' ) }
+								// translators: %s: Horizontal direction of block movement ( left, right )
+								label={ sprintf( __( 'Move %s' ), getMovementDirection( 'up' ) ) }
+								aria-describedby={ `block-editor-block-mover__up-description-${ instanceId }` }
+								aria-disabled={ isFirst }
+								onFocus={ this.onFocus }
+								onBlur={ this.onBlur }
+							/>
 
-				<BlockDraggable clientIds={ clientIds }>
-					{ ( { onDraggableStart, onDraggableEnd } ) => (
-						<Button
-							icon={ dragHandle }
-							className="block-editor-block-mover__control-drag-handle block-editor-block-mover__control"
-							aria-hidden="true"
-							// Should not be able to tab to drag handle as this
-							// button can only be used with a pointer device.
-							tabIndex="-1"
-							onDragStart={ onDraggableStart }
-							onDragEnd={ onDraggableEnd }
-							draggable
-						/>
-					) }
-				</BlockDraggable>
-
-				<Button
-					className="block-editor-block-mover__control"
-					onClick={ isLast ? null : onMoveDown }
-					icon={ getArrowIcon( 'down' ) }
-					// translators: %s: Horizontal direction of block movement ( left, right )
-					label={ sprintf( __( 'Move %s' ), getMovementDirection( 'down' ) ) }
-					aria-describedby={ `block-editor-block-mover__down-description-${ instanceId }` }
-					aria-disabled={ isLast }
-					onFocus={ this.onFocus }
-					onBlur={ this.onBlur }
-				/>
-				<span id={ `block-editor-block-mover__up-description-${ instanceId }` } className="block-editor-block-mover__description">
-					{
-						getBlockMoverDescription(
-							blocksCount,
-							blockType && blockType.title,
-							firstIndex,
-							isFirst,
-							isLast,
-							-1,
-							orientation,
-							isRTL,
-						)
-					}
-				</span>
-				<span id={ `block-editor-block-mover__down-description-${ instanceId }` } className="block-editor-block-mover__description">
-					{
-						getBlockMoverDescription(
-							blocksCount,
-							blockType && blockType.title,
-							firstIndex,
-							isFirst,
-							isLast,
-							1,
-							orientation,
-							isRTL,
-						)
-					}
-				</span>
-			</ToolbarGroup>
+							<Button
+								className="block-editor-block-mover__control"
+								onClick={ isLast ? null : onMoveDown }
+								icon={ getArrowIcon( 'down' ) }
+								// translators: %s: Horizontal direction of block movement ( left, right )
+								label={ sprintf( __( 'Move %s' ), getMovementDirection( 'down' ) ) }
+								aria-describedby={ `block-editor-block-mover__down-description-${ instanceId }` }
+								aria-disabled={ isLast }
+								onFocus={ this.onFocus }
+								onBlur={ this.onBlur }
+							/>
+							<span id={ `block-editor-block-mover__up-description-${ instanceId }` } className="block-editor-block-mover__description">
+								{
+									getBlockMoverDescription(
+										blocksCount,
+										blockType && blockType.title,
+										firstIndex,
+										isFirst,
+										isLast,
+										-1,
+										orientation,
+										isRTL,
+									)
+								}
+							</span>
+							<span id={ `block-editor-block-mover__down-description-${ instanceId }` } className="block-editor-block-mover__description">
+								{
+									getBlockMoverDescription(
+										blocksCount,
+										blockType && blockType.title,
+										firstIndex,
+										isFirst,
+										isLast,
+										1,
+										orientation,
+										isRTL,
+									)
+								}
+							</span>
+						</ToolbarGroup>
+					</div>
+				) }
+			</BlockDraggable>
 		);
 	}
 }
 
 export default compose(
 	withSelect( ( select, { clientIds } ) => {
 		const { getBlock, getBlockIndex, getTemplateLock, getBlockRootClientId, getBlockOrder } = select( 'core/block-editor' );
-		const normalizedClientIds = castArray( clientIds );
-		const firstClientId = first( normalizedClientIds );
+		const firstClientId = first( clientIds );
 		const block = getBlock( firstClientId );
-		const rootClientId = getBlockRootClientId( first( normalizedClientIds ) );
+		const rootClientId = getBlockRootClientId( first( clientIds ) );
 		const blockOrder = getBlockOrder( rootClientId );
 		const firstIndex = getBlockIndex( firstClientId, rootClientId );
-		const lastIndex = getBlockIndex( last( normalizedClientIds ), rootClientId );
+		const lastIndex = getBlockIndex( last( clientIds ), rootClientId );
 		const { getSettings } = select( 'core/block-editor' );
 		const {
 			isRTL,