Move the block movers to the block toolbar

docs/designers-developers/developers/data/data-core-block-editor.md

@@ -756,6 +756,18 @@ _Returns_
 
 -   `boolean`: Whether the caret is within formatted text.
 
+<a name="isDraggingBlocks" href="#isDraggingBlocks">#</a> **isDraggingBlocks**
+
+Returns true if the user is dragging blocks, or false otherwise.
+
+_Parameters_
+
+-   _state_ `Object`: Global application state.
+
+_Returns_
+
+-   `boolean`: Whether user is dragging blocks.
+
 <a name="isFirstMultiSelectedBlock" href="#isFirstMultiSelectedBlock">#</a> **isFirstMultiSelectedBlock**
 
 Returns true if a multi-selection exists, and the block corresponding to the
@@ -1177,6 +1189,14 @@ _Returns_
 
 -   `Object`: Action object.
 
+<a name="startDraggingBlocks" href="#startDraggingBlocks">#</a> **startDraggingBlocks**
+
+Returns an action object used in signalling that the user has begun to drag blocks.
+
+_Returns_
+
+-   `Object`: Action object.
+
 <a name="startMultiSelect" href="#startMultiSelect">#</a> **startMultiSelect**
 
 Returns an action object used in signalling that a block multi-selection has started.
@@ -1193,6 +1213,14 @@ _Returns_
 
 -   `Object`: Action object.
 
+<a name="stopDraggingBlocks" href="#stopDraggingBlocks">#</a> **stopDraggingBlocks**
+
+Returns an action object used in signalling that the user has stopped dragging blocks.
+
+_Returns_
+
+-   `Object`: Action object.
+
 <a name="stopMultiSelect" href="#stopMultiSelect">#</a> **stopMultiSelect**
 
 Returns an action object used in signalling that block multi-selection stopped.

packages/block-editor/README.md

@@ -332,10 +332,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**
 
 Undocumented declaration.

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

@@ -2,22 +2,44 @@
  * WordPress dependencies
  */
 import { Draggable } from '@wordpress/components';
-import { withSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 
-const BlockDraggable = ( { children, clientId, rootClientId, blockElementId, index, onDragStart, onDragEnd } ) => {
+const BlockDraggable = ( { children, clientIds } ) => {
+	const { srcRootClientId, index, isDraggable } = useSelect( ( select ) => {
+		const {
+			getBlockIndex,
+			getBlockRootClientId,
+			getTemplateLock,
+		} = select( 'core/block-editor' );
+		const rootClientId = clientIds.length === 1 ? getBlockRootClientId( clientIds[ 0 ] ) : null;
+		const templateLock = rootClientId ? getTemplateLock( rootClientId ) : null;
+
+		return {
+			index: getBlockIndex( clientIds[ 0 ], rootClientId ),
+			srcRootClientId: rootClientId,
+			isDraggable: clientIds.length === 1 && 'all' !== templateLock,
+		};
+	}, [ clientIds ] );
+	const { startDraggingBlocks, stopDraggingBlocks } = useDispatch( 'core/block-editor' );
+
+	if ( ! isDraggable ) {
+		return null;
+	}
+
+	const blockElementId = `block-${ clientIds[ 0 ] }`;
 	const transferData = {
 		type: 'block',
 		srcIndex: index,
-		srcRootClientId: rootClientId,
-		srcClientId: clientId,
+		srcClientId: clientIds[ 0 ],
+		srcRootClientId,
 	};
 
 	return (
 		<Draggable
 			elementId={ blockElementId }
 			transferData={ transferData }
-			onDragStart={ onDragStart }
-			onDragEnd={ onDragEnd }
+			onDragStart={ startDraggingBlocks }
+			onDragEnd={ stopDraggingBlocks }
 		>
 			{
 				( { onDraggableStart, onDraggableEnd } ) => {
@@ -31,11 +53,4 @@ const BlockDraggable = ( { children, clientId, rootClientId, blockElementId, ind
 	);
 };
 
-export default withSelect( ( select, { clientId } ) => {
-	const { getBlockIndex, getBlockRootClientId } = select( 'core/block-editor' );
-	const rootClientId = getBlockRootClientId( clientId );
-	return {
-		index: getBlockIndex( clientId, rootClientId ),
-		rootClientId,
-	};
-} )( BlockDraggable );
+export default BlockDraggable;

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

@@ -35,16 +35,13 @@ import { compose, pure, ifCondition } from '@wordpress/compose';
  * Internal dependencies
  */
 import BlockEdit from '../block-edit';
-import BlockMover from '../block-mover';
 import BlockDropZone from '../block-drop-zone';
 import BlockInvalidWarning from './block-invalid-warning';
 import BlockCrashWarning from './block-crash-warning';
 import BlockCrashBoundary from './block-crash-boundary';
 import BlockHtml from './block-html';
 import BlockBreadcrumb from './breadcrumb';
 import BlockContextualToolbar from './block-contextual-toolbar';
-import BlockMultiControls from './multi-controls';
-import BlockMobileToolbar from './block-mobile-toolbar';
 import BlockInsertionPoint from './insertion-point';
 import IgnoreNestedEvents from '../ignore-nested-events';
 import InserterWithShortcuts from '../inserter-with-shortcuts';
@@ -75,11 +72,10 @@ function BlockListBlock( {
 	isPartOfMultiSelection,
 	isFirstMultiSelected,
 	isTypingWithinBlock,
+	isDragging,
 	isCaretWithinFormattedText,
 	isEmptyDefaultBlock,
-	isMovable,
 	isParentOfSelectedBlock,
-	isDraggable,
 	isSelectionEnabled,
 	className,
 	name,
@@ -171,15 +167,6 @@ function BlockListBlock( {
 		}
 	} );
 
-	// Handling the dragging state
-	const [ isDragging, setBlockDraggingState ] = useState( false );
-	const onDragStart = () => {
-		setBlockDraggingState( true );
-	};
-	const onDragEnd = () => {
-		setBlockDraggingState( false );
-	};
-
 	// Handling the error state
 	const [ hasError, setErrorState ] = useState( false );
 	const onBlockError = () => setErrorState( true );
@@ -397,13 +384,6 @@ function BlockListBlock( {
 		! hasFixedToolbar &&
 		isHovered &&
 		! isEmptyDefaultBlock;
-	// We render block movers and block settings to keep them tabbale even if hidden
-	const shouldRenderMovers =
-		! isNavigationMode &&
-		isSelected &&
-		! showEmptyBlockSideInserter &&
-		! isPartOfMultiSelection &&
-		! isTypingWithinBlock;
 	const shouldShowBreadcrumb =
 		( isSelected && isNavigationMode ) ||
 		( ! isNavigationMode && ! isFocusMode && isHovered && ! isEmptyDefaultBlock );
@@ -415,7 +395,6 @@ function BlockListBlock( {
 			( isSelected && ( ! isTypingWithinBlock || isCaretWithinFormattedText ) ) ||
 			isFirstMultiSelected
 		);
-	const shouldShowMobileToolbar = ! isNavigationMode && shouldAppearSelected;
 
 	// Insertion point can only be made visible if the block is at the
 	// the extent of a multi-selection, or not in a multi-selection.
@@ -451,20 +430,6 @@ function BlockListBlock( {
 		};
 	}
 	const blockElementId = `block-${ clientId }`;
-	const blockMover = (
-		<BlockMover
-			clientIds={ clientId }
-			blockElementId={ blockElementId }
-			isHidden={ ! isSelected }
-			isDraggable={
-				isDraggable !== false &&
-				( ! isPartOfMultiSelection && isMovable )
-			}
-			onDragStart={ onDragStart }
-			onDragEnd={ onDragEnd }
-			__experimentalOrientation={ moverDirection }
-		/>
-	);
 
 	// We wrap the BlockEdit component in a div that hides it when editing in
 	// HTML mode. This allows us to render all of the ancillary pieces
@@ -525,19 +490,12 @@ function BlockListBlock( {
 				clientId={ clientId }
 				rootClientId={ rootClientId }
 			/>
-			{ isFirstMultiSelected && (
-				<BlockMultiControls
-					rootClientId={ rootClientId }
-					moverDirection={ moverDirection }
-				/>
-			) }
 			<div
 				className={ classnames(
 					'editor-block-list__block-edit block-editor-block-list__block-edit',
 					{ 'has-mover-inside': moverDirection === 'horizontal' },
 				) }
 			>
-				{ shouldRenderMovers && ( moverDirection === 'vertical' ) && blockMover }
 				{ shouldShowBreadcrumb && (
 					<BlockBreadcrumb
 						clientId={ clientId }
@@ -577,7 +535,6 @@ function BlockListBlock( {
 						{ isValid && mode === 'html' && (
 							<BlockHtml clientId={ clientId } />
 						) }
-						{ shouldRenderMovers && ( moverDirection === 'horizontal' ) && blockMover }
 						{ ! isValid && [
 							<BlockInvalidWarning
 								key="invalid-warning"
@@ -589,9 +546,6 @@ function BlockListBlock( {
 						] }
 					</BlockCrashBoundary>
 					{ !! hasError && <BlockCrashWarning /> }
-					{ shouldShowMobileToolbar && (
-						<BlockMobileToolbar clientId={ clientId } moverDirection={ moverDirection } />
-					) }
 				</IgnoreNestedEvents>
 			</div>
 			{ showInserterShortcuts && (
@@ -625,6 +579,7 @@ const applyWithSelect = withSelect(
 			isBlockMultiSelected,
 			isFirstMultiSelectedBlock,
 			isTyping,
+			isDraggingBlocks,
 			isCaretWithinFormattedText,
 			getBlockMode,
 			isSelectionEnabled,
@@ -644,15 +599,15 @@ const applyWithSelect = withSelect(
 		const isParentOfSelectedBlock = hasSelectedInnerBlock( clientId, true );
 		const index = getBlockIndex( clientId, rootClientId );
 		const blockOrder = getBlockOrder( rootClientId );
+		const isPartOfMultiSelection = isBlockMultiSelected( clientId ) || isAncestorMultiSelected( clientId );
 
 		// The fallback to `{}` is a temporary fix.
 		// This function should never be called when a block is not present in the state.
 		// It happens now because the order in withSelect rendering is not correct.
 		const { name, attributes, isValid } = block || {};
 
 		return {
-			isPartOfMultiSelection:
-				isBlockMultiSelected( clientId ) || isAncestorMultiSelected( clientId ),
+			isDragging: isDraggingBlocks() && ( isSelected || isPartOfMultiSelection ),
 			isFirstMultiSelected: isFirstMultiSelectedBlock( clientId ),
 			// We only care about this prop when the block is selected
 			// Thus to avoid unnecessary rerenders we avoid updating the prop if the block is not selected.
@@ -664,12 +619,12 @@ const applyWithSelect = withSelect(
 			initialPosition: isSelected ? getSelectedBlocksInitialCaretPosition() : null,
 			isEmptyDefaultBlock:
 				name && isUnmodifiedDefaultBlock( { name, attributes } ),
-			isMovable: 'all' !== templateLock,
 			isLocked: !! templateLock,
 			isFocusMode: focusMode && isLargeViewport,
 			hasFixedToolbar: hasFixedToolbar && isLargeViewport,
 			isLast: index === blockOrder.length - 1,
 			isNavigationMode: isNavigationMode(),
+			isPartOfMultiSelection,
 			isRTL,
 
 			// Users of the editor.BlockListBlock filter used to be able to access the block prop

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

@@ -196,7 +196,6 @@ class BlockList extends Component {
 			blockClientIds,
 			rootClientId,
 			__experimentalMoverDirection: moverDirection = 'vertical',
-			isDraggable,
 			selectedBlockClientId,
 			multiSelectedBlockClientIds,
 			hasMultiSelection,
@@ -227,7 +226,6 @@ class BlockList extends Component {
 								clientId={ clientId }
 								blockRef={ this.setBlockRef }
 								onSelectionStart={ this.onSelectionStart }
-								isDraggable={ isDraggable }
 								moverDirection={ moverDirection }
 
 								// This prop is explicitely computed and passed down