Add the block selection button

WordPress · Apr 18, 2022 · 704fe94 · 704fe94
1 parent 7650634
commit 704fe94
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 50 deletions.
diff --git a/packages/block-editor/src/components/block-list/use-block-props/index.js b/packages/block-editor/src/components/block-list/use-block-props/index.js
@@ -70,6 +70,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		isPartOfSelection,
 		adjustScrolling,
 		enableAnimation,
+		isExplodedMode,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -82,6 +83,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 				isBlockMultiSelected,
 				isAncestorMultiSelected,
 				isFirstMultiSelectedBlock,
+				__unstableGetEditorMode,
 			} = select( blockEditorStore );
 			const isSelected = isBlockSelected( clientId );
 			const isPartOfMultiSelection =
@@ -102,6 +104,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 				enableAnimation:
 					! isTyping() &&
 					getGlobalBlockCount() <= BLOCK_ANIMATION_THRESHOLD,
+				isExplodedMode: __unstableGetEditorMode() === 'exploded',
 			};
 		},
 		[ clientId ]
@@ -124,6 +127,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 			adjustScrolling,
 			enableAnimation,
 			triggerAnimationOnChange: index,
+			scale: isExplodedMode ? 0.8 : 1,
 		} ),
 	] );
 

diff --git a/packages/block-editor/src/components/block-tools/block-popover.js b/packages/block-editor/src/components/block-tools/block-popover.js
@@ -27,7 +27,7 @@ import { usePopoverScroll } from './use-popover-scroll';
 
 function selector( select ) {
 	const {
-		isNavigationMode,
+		__unstableGetEditorMode,
 		isMultiSelecting,
 		hasMultiSelection,
 		isTyping,
@@ -36,7 +36,7 @@ function selector( select ) {
 		getLastMultiSelectedBlockClientId,
 	} = select( blockEditorStore );
 	return {
-		isNavigationMode: isNavigationMode(),
+		editorMode: __unstableGetEditorMode(),
 		isMultiSelecting: isMultiSelecting(),
 		isTyping: isTyping(),
 		isCaretWithinFormattedText: isCaretWithinFormattedText(),
@@ -56,7 +56,7 @@ function BlockPopover( {
 	__unstableContentRef,
 } ) {
 	const {
-		isNavigationMode,
+		editorMode,
 		isMultiSelecting,
 		isTyping,
 		isCaretWithinFormattedText,
@@ -90,17 +90,21 @@ function BlockPopover( {
 	// Controls when the side inserter on empty lines should
 	// be shown, including writing and selection modes.
 	const showEmptyBlockSideInserter =
-		! isTyping && ! isNavigationMode && isEmptyDefaultBlock && isValid;
-	const shouldShowBreadcrumb = isNavigationMode;
+		! isTyping &&
+		! editorMode === 'visual' &&
+		isEmptyDefaultBlock &&
+		isValid;
+	const shouldShowBreadcrumb =
+		editorMode === 'navigation' || editorMode === 'exploded';
 	const shouldShowContextualToolbar =
-		! isNavigationMode &&
+		editorMode === 'visual' &&
 		! hasFixedToolbar &&
 		isLargeViewport &&
 		! showEmptyBlockSideInserter &&
 		! isMultiSelecting &&
 		( ! isTyping || isCaretWithinFormattedText );
 	const canFocusHiddenToolbar =
-		! isNavigationMode &&
+		editorMode === 'visual' &&
 		! shouldShowContextualToolbar &&
 		! hasFixedToolbar &&
 		! isEmptyDefaultBlock;

diff --git a/packages/block-editor/src/components/block-tools/block-selection-button.js b/packages/block-editor/src/components/block-tools/block-selection-button.js
@@ -38,6 +38,7 @@ import BlockIcon from '../block-icon';
 import { store as blockEditorStore } from '../../store';
 import BlockDraggable from '../block-draggable';
 import useBlockDisplayInformation from '../use-block-display-information';
+import BlockMover from '../block-mover';
 
 /**
  * Block selection button component, displaying the label of the block. If the block
@@ -58,6 +59,7 @@ function BlockSelectionButton( { clientId, rootClientId, blockElement } ) {
 				getBlockIndex,
 				hasBlockMovingClientId,
 				getBlockListSettings,
+				__unstableGetEditorMode,
 			} = select( blockEditorStore );
 			const index = getBlockIndex( clientId );
 			const { name, attributes } = getBlock( clientId );
@@ -68,11 +70,19 @@ function BlockSelectionButton( { clientId, rootClientId, blockElement } ) {
 				attributes,
 				blockMovingMode,
 				orientation: getBlockListSettings( rootClientId )?.orientation,
+				editorMode: __unstableGetEditorMode(),
 			};
 		},
 		[ clientId, rootClientId ]
 	);
-	const { index, name, attributes, blockMovingMode, orientation } = selected;
+	const {
+		index,
+		name,
+		attributes,
+		blockMovingMode,
+		orientation,
+		editorMode,
+	} = selected;
 	const { setNavigationMode, removeBlock } = useDispatch( blockEditorStore );
 	const ref = useRef();
 
@@ -239,20 +249,25 @@ function BlockSelectionButton( { clientId, rootClientId, blockElement } ) {
 					<BlockIcon icon={ blockInformation?.icon } showColors />
 				</FlexItem>
 				<FlexItem>
-					<BlockDraggable clientIds={ [ clientId ] }>
-						{ ( draggableProps ) => (
-							<Button
-								icon={ dragHandle }
-								className="block-selection-button_drag-handle"
-								aria-hidden="true"
-								label={ dragHandleLabel }
-								// Should not be able to tab to drag handle as this
-								// button can only be used with a pointer device.
-								tabIndex="-1"
-								{ ...draggableProps }
-							/>
-						) }
-					</BlockDraggable>
+					{ editorMode === 'exploded' && (
+						<BlockMover clientIds={ [ clientId ] } hideDragHandle />
+					) }
+					{ editorMode === 'navigation' && (
+						<BlockDraggable clientIds={ [ clientId ] }>
+							{ ( draggableProps ) => (
+								<Button
+									icon={ dragHandle }
+									className="block-selection-button_drag-handle"
+									aria-hidden="true"
+									label={ dragHandleLabel }
+									// Should not be able to tab to drag handle as this
+									// button can only be used with a pointer device.
+									tabIndex="-1"
+									{ ...draggableProps }
+								/>
+							) }
+						</BlockDraggable>
+					) }
 				</FlexItem>
 				<FlexItem>
 					<Button

diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js
@@ -10,11 +10,15 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { useViewportMatch } from '@wordpress/compose';
 import { Popover } from '@wordpress/components';
 import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';
+import { useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import InsertionPoint from './insertion-point';
+import {
+	InsertionPointOpenRef,
+	default as InsertionPoint,
+} from './insertion-point';
 import BlockPopover from './block-popover';
 import { store as blockEditorStore } from '../../store';
 import BlockContextualToolbar from './block-contextual-toolbar';
@@ -35,10 +39,16 @@ export default function BlockTools( {
 	...props
 } ) {
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const hasFixedToolbar = useSelect(
-		( select ) => select( blockEditorStore ).getSettings().hasFixedToolbar,
-		[]
-	);
+	const { hasFixedToolbar, isExplodedMode } = useSelect( ( select ) => {
+		const { __unstableGetEditorMode, getSettings } = select(
+			blockEditorStore
+		);
+
+		return {
+			isExplodedMode: __unstableGetEditorMode() === 'exploded',
+			hasFixedToolbar: getSettings().hasFixedToolbar,
+		};
+	}, [] );
 	const isMatch = useShortcutEventMatch();
 	const { getSelectedBlockClientIds, getBlockRootClientId } = useSelect(
 		blockEditorStore
@@ -104,28 +114,34 @@ export default function BlockTools( {
 		}
 	}
 
+	const blockToolbarRef = usePopoverScroll( __unstableContentRef );
+	const blockToolbarAfterRef = usePopoverScroll( __unstableContentRef );
+
 	return (
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div { ...props } onKeyDown={ onKeyDown }>
-			<InsertionPoint __unstableContentRef={ __unstableContentRef }>
-				{ ( hasFixedToolbar || ! isLargeViewport ) && (
-					<BlockContextualToolbar isFixed />
+			<InsertionPointOpenRef.Provider value={ useRef( false ) }>
+				{ ! isExplodedMode && (
+					<InsertionPoint
+						__unstableContentRef={ __unstableContentRef }
+					/>
 				) }
+				{ ! isExplodedMode &&
+					( hasFixedToolbar || ! isLargeViewport ) && (
+						<BlockContextualToolbar isFixed />
+					) }
 				{ /* Even if the toolbar is fixed, the block popover is still
-                 needed for navigation mode. */ }
+					needed for navigation and exploded mode. */ }
 				<BlockPopover __unstableContentRef={ __unstableContentRef } />
 				{ /* Used for the inline rich text toolbar. */ }
-				<Popover.Slot
-					name="block-toolbar"
-					ref={ usePopoverScroll( __unstableContentRef ) }
-				/>
+				<Popover.Slot name="block-toolbar" ref={ blockToolbarRef } />
 				{ children }
 				{ /* Used for inline rich text popovers. */ }
 				<Popover.Slot
 					name="__unstable-block-tools-after"
-					ref={ usePopoverScroll( __unstableContentRef ) }
+					ref={ blockToolbarAfterRef }
 				/>
-			</InsertionPoint>
+			</InsertionPointOpenRef.Provider>
 		</div>
 	);
 }
diff --git a/packages/block-editor/src/components/block-tools/insertion-point.js b/packages/block-editor/src/components/block-tools/insertion-point.js
@@ -352,7 +352,6 @@ function InsertionPointPopover( {
 }
 
 export default function InsertionPoint( {
-	children,
 	__unstablePopoverSlot,
 	__unstableContentRef,
 } ) {
@@ -361,14 +360,11 @@ export default function InsertionPoint( {
 	}, [] );
 
 	return (
-		<InsertionPointOpenRef.Provider value={ useRef( false ) }>
-			{ isVisible && (
-				<InsertionPointPopover
-					__unstablePopoverSlot={ __unstablePopoverSlot }
-					__unstableContentRef={ __unstableContentRef }
-				/>
-			) }
-			{ children }
-		</InsertionPointOpenRef.Provider>
+		isVisible && (
+			<InsertionPointPopover
+				__unstablePopoverSlot={ __unstablePopoverSlot }
+				__unstableContentRef={ __unstableContentRef }
+			/>
+		)
 	);
 }
diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss
@@ -179,6 +179,11 @@
 	.block-selection-button_select-button.components-button {
 		padding: 0;
 	}
+
+	.block-editor-block-mover__move-button-container {
+		background: unset;
+		border: none;
+	}
 }
 
 /**

diff --git a/packages/block-editor/src/components/use-moving-animation/index.js b/packages/block-editor/src/components/use-moving-animation/index.js
@@ -47,12 +47,14 @@ const getAbsolutePosition = ( element ) => {
  * @param {boolean} $1.adjustScrolling          Adjust the scroll position to the current block.
  * @param {boolean} $1.enableAnimation          Enable/Disable animation.
  * @param {*}       $1.triggerAnimationOnChange Variable used to trigger the animation if it changes.
+ * @param {*}       $1.scale                    Scale of the element
  */
 function useMovingAnimation( {
 	isSelected,
 	adjustScrolling,
 	enableAnimation,
 	triggerAnimationOnChange,
+	scale = 1,
 } ) {
 	const ref = useRef();
 	const prefersReducedMotion = useReducedMotion() || ! enableAnimation;
@@ -126,10 +128,10 @@ function useMovingAnimation( {
 		}
 
 		const isMoving = x === 0 && y === 0;
-		ref.current.style.transformOrigin = isMoving ? '' : 'center';
+		ref.current.style.transformOrigin = 'center';
 		ref.current.style.transform = isMoving
-			? ''
-			: `translate3d(${ x }px,${ y }px,0)`;
+			? `scale(${ scale })`
+			: `translate3d(${ x }px,${ y }px,0) scale(${ scale })`;
 		ref.current.style.zIndex = ! isSelected || isMoving ? '' : '1';
 
 		preserveScrollPosition();