Clean BlockMover component and styles

packages/base-styles/_z-index.scss

@@ -83,10 +83,6 @@ $z-layers: (
 	// Ensures content overlay appears higher than resize containers used for image/video/etc.
 	".block-editor-block-content-overlay__overlay": 10,
 
-	// The block mover, particularly in nested contexts,
-	// should overlap most block content.
-	".block-editor-block-list__block.is-{selected,hovered} .block-editor-block-mover": 61,
-
 	// Query block setup state.
 	".block-editor-block-pattern-setup .pattern-slide": 100,
 	".block-editor-block-pattern-setup .{next,previous}-slide": 101,

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

@@ -8,7 +8,7 @@ import { castArray, first, last } from 'lodash';
  * WordPress dependencies
  */
 import { getBlockType } from '@wordpress/blocks';
-import { Button } from '@wordpress/components';
+import { Button, VisuallyHidden } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { forwardRef } from '@wordpress/element';
@@ -141,7 +141,7 @@ const BlockMoverButton = forwardRef(
 					onClick={ isDisabled ? null : onClick }
 					aria-disabled={ isDisabled }
 				/>
-				<span
+				<VisuallyHidden
 					id={ descriptionId }
 					className="block-editor-block-mover-button__description"
 				>
@@ -154,7 +154,7 @@ const BlockMoverButton = forwardRef(
 						direction === 'up' ? -1 : 1,
 						orientation
 					) }
-				</span>
+				</VisuallyHidden>
 			</>
 		);
 	}

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

@@ -48,7 +48,7 @@ function BlockMover( {
 	// to an unfocused state (body as active element) without firing blur on,
 	// the rendering parent, leaving it unable to react to focus out.
 	return (
-		<div
+		<ToolbarGroup
 			className={ classnames( 'block-editor-block-mover', {
 				'is-visible': isFocused || ! isHidden,
 				'is-horizontal': orientation === 'horizontal',
@@ -73,7 +73,7 @@ function BlockMover( {
 					) }
 				</BlockDraggable>
 			) }
-			<ToolbarGroup className="block-editor-block-mover__move-button-container">
+			<div className="block-editor-block-mover__move-button-container">
 				<ToolbarItem onFocus={ onFocus } onBlur={ onBlur }>
 					{ ( itemProps ) => (
 						<BlockMoverUpButton
@@ -90,8 +90,8 @@ function BlockMover( {
 						/>
 					) }
 				</ToolbarItem>
-			</ToolbarGroup>
-		</div>
+			</div>
+		</ToolbarGroup>
 	);
 }
 

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

@@ -0,0 +1,110 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+import { createBlock } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
+import { useDispatch } from '@wordpress/data';
+import { Toolbar } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import BlockMover from '../';
+import BlockEditorProvider from '../../provider';
+import { store as blockEditorStore } from '../../../store';
+
+registerCoreBlocks();
+const blocks = [
+	// vertical
+	createBlock( 'core/group', { layout: { type: 'flex' } }, [
+		createBlock( 'core/paragraph' ),
+		createBlock( 'core/paragraph' ),
+		createBlock( 'core/paragraph' ),
+	] ),
+	// horizontal
+	createBlock( 'core/buttons', {}, [
+		createBlock( 'core/button' ),
+		createBlock( 'core/button' ),
+		createBlock( 'core/button' ),
+	] ),
+];
+
+function Provider( { children } ) {
+	const wrapperStyle = { margin: '24px', position: 'relative' };
+
+	return (
+		<div style={ wrapperStyle }>
+			<BlockEditorProvider value={ blocks }>
+				{ children }
+			</BlockEditorProvider>
+		</div>
+	);
+}
+
+function BlockMoverStory() {
+	const { updateBlockListSettings } = useDispatch( blockEditorStore );
+
+	useEffect( () => {
+		/**
+		 * This shouldn't be needed but unfortunatley
+		 * the layout orientation is not declarative, we need
+		 *  to render the blocks to update the block settings in the state.
+		 */
+		updateBlockListSettings( blocks[ 1 ].clientId, {
+			orientation: 'horizontal',
+		} );
+	}, [] );
+
+	return (
+		<div>
+			<p>The mover by default is vertical</p>
+			<Toolbar label="Block Mover">
+				<BlockMover
+					clientIds={
+						blocks.length
+							? [ blocks[ 0 ].innerBlocks[ 1 ].clientId ]
+							: []
+					}
+				/>
+			</Toolbar>
+
+			<p style={ { marginTop: 36 } }>
+				But it can also accomodate horizontal blocks.
+			</p>
+			<Toolbar label="Block Mover">
+				<BlockMover
+					clientIds={
+						blocks.length
+							? [ blocks[ 1 ].innerBlocks[ 1 ].clientId ]
+							: []
+					}
+				/>
+			</Toolbar>
+
+			<p style={ { marginTop: 36 } }>We can also hide the drag handle.</p>
+			<Toolbar label="Block Mover">
+				<BlockMover
+					clientIds={
+						blocks.length
+							? [ blocks[ 1 ].innerBlocks[ 0 ].clientId ]
+							: []
+					}
+					hideDragHandle
+				/>
+			</Toolbar>
+		</div>
+	);
+}
+
+export default {
+	title: 'BlockEditor/BlockMover',
+};
+
+export const _default = () => {
+	return (
+		<Provider>
+			<BlockMoverStory />
+		</Provider>
+	);
+};