Clean BlockMover component and styles (#40379)

WordPress · Apr 18, 2022 · c135816 · c135816
1 parent 1fc751c
commit c135816
Show file tree

Hide file tree

Showing 12 changed files with 220 additions and 342 deletions.
diff --git a/packages/base-styles/_z-index.scss b/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,

diff --git a/packages/block-editor/src/components/block-mobile-toolbar/index.js b/packages/block-editor/src/components/block-mobile-toolbar/index.js
diff --git a/packages/block-editor/src/components/block-mobile-toolbar/style.scss b/packages/block-editor/src/components/block-mobile-toolbar/style.scss
diff --git a/packages/block-editor/src/components/block-mover/button.js b/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';
@@ -139,12 +139,10 @@ const BlockMoverButton = forwardRef(
 					aria-describedby={ descriptionId }
 					{ ...props }
 					onClick={ isDisabled ? null : onClick }
-					aria-disabled={ isDisabled }
+					disabled={ isDisabled }
+					__experimentalIsFocusable
 				/>
-				<span
-					id={ descriptionId }
-					className="block-editor-block-mover-button__description"
-				>
+				<VisuallyHidden id={ descriptionId }>
 					{ getBlockMoverDescription(
 						blocksCount,
 						blockType && blockType.title,
@@ -154,7 +152,7 @@ const BlockMoverButton = forwardRef(
 						direction === 'up' ? -1 : 1,
 						orientation
 					) }
-				</span>
+				</VisuallyHidden>
 			</>
 		);
 	}

diff --git a/packages/block-editor/src/components/block-mover/index.js b/packages/block-editor/src/components/block-mover/index.js
@@ -10,9 +10,7 @@ import classnames from 'classnames';
 
 import { dragHandle } from '@wordpress/icons';
 import { ToolbarGroup, ToolbarItem, Button } from '@wordpress/components';
-import { getBlockType } from '@wordpress/blocks';
-import { useState } from '@wordpress/element';
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -22,43 +20,50 @@ import BlockDraggable from '../block-draggable';
 import { BlockMoverUpButton, BlockMoverDownButton } from './button';
 import { store as blockEditorStore } from '../../store';
 
-function BlockMover( {
-	isFirst,
-	isLast,
-	clientIds,
-	canMove,
-	isHidden,
-	rootClientId,
-	orientation,
-	hideDragHandle,
-} ) {
-	const [ isFocused, setIsFocused ] = useState( false );
+function BlockMover( { clientIds, hideDragHandle } ) {
+	const { canMove, rootClientId, isFirst, isLast, orientation } = useSelect(
+		( select ) => {
+			const {
+				getBlockIndex,
+				getBlockListSettings,
+				canMoveBlocks,
+				getBlockOrder,
+				getBlockRootClientId,
+			} = select( blockEditorStore );
+			const normalizedClientIds = castArray( clientIds );
+			const firstClientId = first( normalizedClientIds );
+			const _rootClientId = getBlockRootClientId(
+				first( normalizedClientIds )
+			);
+			const firstIndex = getBlockIndex( firstClientId );
+			const lastIndex = getBlockIndex( last( normalizedClientIds ) );
+			const blockOrder = getBlockOrder( _rootClientId );
 
-	const onFocus = () => setIsFocused( true );
-	const onBlur = () => setIsFocused( false );
+			return {
+				canMove: canMoveBlocks( clientIds, _rootClientId ),
+				rootClientId: _rootClientId,
+				isFirst: firstIndex === 0,
+				isLast: lastIndex === blockOrder.length - 1,
+				orientation: getBlockListSettings( _rootClientId )?.orientation,
+			};
+		},
+		[ clientIds ]
+	);
 
 	if ( ! canMove || ( isFirst && isLast && ! rootClientId ) ) {
 		return null;
 	}
 
 	const dragHandleLabel = __( 'Drag' );
 
-	// We emulate a disabled state because forcefully applying the `disabled`
-	// attribute on the buttons while it has focus causes the screen to change
-	// 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',
 			} ) }
 		>
 			{ ! hideDragHandle && (
-				<BlockDraggable
-					clientIds={ clientIds }
-					cloneClassname="block-editor-block-mover__drag-clone"
-				>
+				<BlockDraggable clientIds={ clientIds }>
 					{ ( draggableProps ) => (
 						<Button
 							icon={ dragHandle }
@@ -73,57 +78,29 @@ function BlockMover( {
 					) }
 				</BlockDraggable>
 			) }
-			<ToolbarGroup className="block-editor-block-mover__move-button-container">
-				<ToolbarItem onFocus={ onFocus } onBlur={ onBlur }>
+			<div className="block-editor-block-mover__move-button-container">
+				<ToolbarItem>
 					{ ( itemProps ) => (
 						<BlockMoverUpButton
 							clientIds={ clientIds }
 							{ ...itemProps }
 						/>
 					) }
 				</ToolbarItem>
-				<ToolbarItem onFocus={ onFocus } onBlur={ onBlur }>
+				<ToolbarItem>
 					{ ( itemProps ) => (
 						<BlockMoverDownButton
 							clientIds={ clientIds }
 							{ ...itemProps }
 						/>
 					) }
 				</ToolbarItem>
-			</ToolbarGroup>
-		</div>
+			</div>
+		</ToolbarGroup>
 	);
 }
 
 /**
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-mover/README.md
  */
-export default withSelect( ( select, { clientIds } ) => {
-	const {
-		getBlock,
-		getBlockIndex,
-		getBlockListSettings,
-		canMoveBlocks,
-		getBlockOrder,
-		getBlockRootClientId,
-	} = select( blockEditorStore );
-	const normalizedClientIds = castArray( clientIds );
-	const firstClientId = first( normalizedClientIds );
-	const block = getBlock( firstClientId );
-	const rootClientId = getBlockRootClientId( first( normalizedClientIds ) );
-	const firstIndex = getBlockIndex( firstClientId );
-	const lastIndex = getBlockIndex( last( normalizedClientIds ) );
-	const blockOrder = getBlockOrder( rootClientId );
-	const isFirst = firstIndex === 0;
-	const isLast = lastIndex === blockOrder.length - 1;
-
-	return {
-		blockType: block ? getBlockType( block.name ) : null,
-		canMove: canMoveBlocks( clientIds, rootClientId ),
-		rootClientId,
-		firstIndex,
-		isFirst,
-		isLast,
-		orientation: getBlockListSettings( rootClientId )?.orientation,
-	};
-} )( BlockMover );
+export default BlockMover;
diff --git a/packages/block-editor/src/components/block-mover/stories/index.js b/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>
+	);
+};