@wordpress/block-editor 8.5.2 → 8.6.0

package/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,20 +20,35 @@ 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;
@@ -43,22 +56,14 @@ function BlockMover( {
 
 	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,8 +78,8 @@ 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 }
@@ -82,7 +87,7 @@ function BlockMover( {
 						/>
 					) }
 				</ToolbarItem>
-				<ToolbarItem onFocus={ onFocus } onBlur={ onBlur }>
+				<ToolbarItem>
 					{ ( itemProps ) => (
 						<BlockMoverDownButton
 							clientIds={ clientIds }
@@ -90,40 +95,12 @@ function BlockMover( {
 						/>
 					) }
 				</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;

package/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>
+	);
+};

package/src/components/block-mover/style.scss

@@ -1,159 +1,69 @@
-.block-editor-block-mover-button__description {
-	display: none;
-}
-
-.block-editor-block-mover-button.has-icon {
+.block-editor-block-mover__move-button-container {
+	display: flex;
 	padding: 0;
-}
-
-// Show the mover in a single button under the contextual toolbar.
-.block-editor-block-mover {
-	display: inline-flex;
-	flex-direction: row;
-
-	.block-editor-block-mover__move-button-container,
-	.components-toolbar {
-		flex: 1;
+	border: none;
 
-		// Increase touch targets on mobile.
-		flex-direction: row;
-		border-right: none !important;
-
-		@include break-small() {
+	@include break-small() {
+		.block-editor-block-mover:not(.is-horizontal) & {
 			flex-direction: column;
-		}
-
-		// @todo: override toolbar group inherited paddings from components/block-tools/style.scss.
-		// This is best fixed by making the mover control area a proper single toolbar group.
-		padding: 0;
-	}
-
-	&.is-horizontal .block-editor-block-mover__move-button-container,
-	&.is-horizontal .components-toolbar {
-		flex-direction: row;
-	}
-
-	.block-editor-block-mover-button {
-		&.block-editor-block-mover-button {
-			padding-right: 0;
-			padding-left: 0;
-			min-width: $button-size;
-		}
-
-		@include break-small() {
-			// The !important modifier should be removed when https://github.com/WordPress/gutenberg/issues/24898 refactors the spacing grid.
-			height: $block-toolbar-height*0.5;
-			width: $block-toolbar-height - $grid-unit-15 * 0.5;
-			padding-right: $grid-unit-15 - $border-width !important;
-			padding-left: $grid-unit-15 * 0.5 !important;
-
-			// Extra specificity to override standard toolbar button styles.
-			&.block-editor-block-mover-button {
-				min-width: $block-toolbar-height - $grid-unit-15 * 0.5;
+			width: $block-toolbar-height - $grid-unit-15;
+
+			> * {
+				height: $block-toolbar-height * 0.5;
+				width: 100%;
+				min-width: 0 !important; // overrides default button width.
+
+				// Focus style.
+				&::before {
+					height: 100%;
+					width: 100%;
+				}
 			}
-		}
 
-		// Focus style.
-		// Overrides .components-toolbar-group styles
-		&::before {
-			@include break-small() {
-				left: $grid-unit-10 !important;
-				right: $grid-unit-10 !important;
+			.block-editor-block-mover-button.is-up-button svg {
+				top: 5px;
+				flex-shrink: 0;
 			}
-		}
-	}
 
-	.block-editor-block-mover__drag-handle {
-		width: $button-size-small;
-		cursor: grab;
-
-		// The !important modifier should be removed when https://github.com/WordPress/gutenberg/issues/24898 refactors the spacing grid.
-		min-width: $button-size-small !important;
-		padding: 0 !important;
-
-		&:focus::before {
-			left: 0 !important;
-			right: 0 !important;
-		}
-	}
-
-	// Position the icons correctly.
-	@include break-small() {
-		.components-toolbar-group .block-editor-block-mover-button,
-		.components-toolbar .block-editor-block-mover-button {
-			margin: 0 auto 0 0;
-		}
-
-		// Up button.
-		.components-toolbar-group .block-editor-block-mover-button.is-up-button,
-		.components-toolbar .block-editor-block-mover-button.is-up-button {
-			// Focus style.
-			&::before {
-				bottom: 0;
-				height: calc(100% - #{ $border-width });
+			.block-editor-block-mover-button.is-down-button svg {
+				bottom: 5px;
+				flex-shrink: 0;
 			}
 		}
 
-		// Down button.
-		.components-toolbar-group .block-editor-block-mover-button.is-down-button,
-		.components-toolbar .block-editor-block-mover-button.is-down-button {
-			// Focus style.
-			&::before {
-				top: 0;
-				height: calc(100% - #{ $border-width });
-			}
-		}
-	}
+		.block-editor-block-mover.is-horizontal & {
+			width: $block-toolbar-height;
 
-	// Mover is horizontal.
-	&.is-horizontal {
-		.block-editor-block-mover-button.has-icon {
-			height: $block-toolbar-height;
-			// Overrides .components-toolbar-group styles
-			width: $block-toolbar-height * 0.5;
-			padding-left: 0;
-			padding-right: 0;
+			> * {
+				width: $block-toolbar-height * 0.5;
+				min-width: 0 !important; // overrides default button width.
+				padding-left: 0 !important;
+				padding-right: 0 !important;
+				overflow: hidden;
 
-			// Focus style.
-			&::before {
-				top: $border-width;
-				bottom: $border-width;
-				min-width: 0;
-				width: auto;
-				height: auto;
+				// Focus style.
+				&::before {
+					height: 100%;
+				}
 			}
-		}
 
-		// Position the icons correctly.
-		.block-editor-block-mover-button.is-up-button.has-icon {
-			svg {
-				margin-left: 0;
-				margin-right: -$grid-unit-10;
-				margin-bottom: 0;
+			.block-editor-block-mover-button.is-up-button svg {
+				left: 5px;
 			}
 
-			// Focus style.
-			// Overrides .components-toolbar-group styles
-			&::before {
-				left: 0 !important;
-				right: 0 !important;
+			.block-editor-block-mover-button.is-down-button svg {
+				right: 5px;
 			}
 		}
+	}
+}
 
-		.block-editor-block-mover-button.is-down-button.has-icon {
-			svg {
-				margin-left: -$grid-unit-10;
-				margin-right: 0;
-				margin-top: 0;
-			}
-
-			// Focus style.
-			// Overrides .components-toolbar-group styles
-			&::before {
-				left: 0 !important;
-				right: 0 !important;
-				width: calc(100% + #{ $border-width });
-			}
-		}
+.block-editor-block-mover__drag-handle {
+	@include break-small() {
+		width: $block-toolbar-height * 0.5;
+		min-width: 0 !important; // overrides default button width.
+		padding-left: 0 !important;
+		padding-right: 0 !important;
+		overflow: hidden;
 	}
 }

package/src/components/block-popover/README.md

@@ -0,0 +1,41 @@
+# BlockPopover and BlockPopoverInbetween
+
+These two components allow rendering editor UI by the block (in a popover) but outside the canvas. This is important to avoid messing with the style and layout of the block list.
+
+For example, it's used to render the contextual block toolbar and the in-between block inserter.
+
+## BlockPopover
+
+### Props
+
+#### clientId
+
+The client ID of the block representing the top position of the popover.
+
+-   Type: `String`
+-   Required: Yes
+
+#### bottomClientId
+
+The client ID of the block representing the bottom position of the popover.
+
+-   Type: `String`
+-   Required: No
+
+## BlockPopoverInbetween
+
+### Props
+
+#### previousClientId
+
+The client ID of the block before the popover.
+
+-   Type: `String`
+-   Required: Yes
+
+#### nextClientId
+
+The client ID of the block after the popover.
+
+-   Type: `String`
+-   Required: Yes

package/src/components/block-popover/inbetween.js

@@ -0,0 +1,180 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useCallback, useMemo, createContext } from '@wordpress/element';
+import { Popover } from '@wordpress/components';
+import { isRTL } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
+import usePopoverScroll from './use-popover-scroll';
+
+export const InsertionPointOpenRef = createContext();
+
+function BlockPopoverInbetween( {
+	previousClientId,
+	nextClientId,
+	children,
+	__unstablePopoverSlot,
+	__unstableContentRef,
+	...props
+} ) {
+	const { orientation, rootClientId } = useSelect(
+		( select ) => {
+			const { getBlockListSettings, getBlockRootClientId } = select(
+				blockEditorStore
+			);
+
+			const _rootClientId = getBlockRootClientId( previousClientId );
+			return {
+				orientation:
+					getBlockListSettings( _rootClientId )?.orientation ||
+					'vertical',
+				rootClientId: _rootClientId,
+			};
+		},
+		[ previousClientId ]
+	);
+	const previousElement = useBlockElement( previousClientId );
+	const nextElement = useBlockElement( nextClientId );
+	const isVertical = orientation === 'vertical';
+	const style = useMemo( () => {
+		if ( ! previousElement && ! nextElement ) {
+			return {};
+		}
+
+		const previousRect = previousElement
+			? previousElement.getBoundingClientRect()
+			: null;
+		const nextRect = nextElement
+			? nextElement.getBoundingClientRect()
+			: null;
+
+		if ( isVertical ) {
+			return {
+				width: previousElement
+					? previousElement.offsetWidth
+					: nextElement.offsetWidth,
+				height:
+					nextRect && previousRect
+						? nextRect.top - previousRect.bottom
+						: 0,
+			};
+		}
+
+		let width = 0;
+		if ( previousRect && nextRect ) {
+			width = isRTL()
+				? previousRect.left - nextRect.right
+				: nextRect.left - previousRect.right;
+		}
+
+		return {
+			width,
+			height: previousElement
+				? previousElement.offsetHeight
+				: nextElement.offsetHeight,
+		};
+	}, [ previousElement, nextElement, isVertical ] );
+
+	const getAnchorRect = useCallback( () => {
+		if ( ! previousElement && ! nextElement ) {
+			return {};
+		}
+
+		const { ownerDocument } = previousElement || nextElement;
+
+		const previousRect = previousElement
+			? previousElement.getBoundingClientRect()
+			: null;
+		const nextRect = nextElement
+			? nextElement.getBoundingClientRect()
+			: null;
+
+		if ( isVertical ) {
+			if ( isRTL() ) {
+				return {
+					top: previousRect ? previousRect.bottom : nextRect.top,
+					left: previousRect ? previousRect.right : nextRect.right,
+					right: previousRect ? previousRect.left : nextRect.left,
+					bottom: nextRect ? nextRect.top : previousRect.bottom,
+					ownerDocument,
+				};
+			}
+
+			return {
+				top: previousRect ? previousRect.bottom : nextRect.top,
+				left: previousRect ? previousRect.left : nextRect.left,
+				right: previousRect ? previousRect.right : nextRect.right,
+				bottom: nextRect ? nextRect.top : previousRect.bottom,
+				ownerDocument,
+			};
+		}
+
+		if ( isRTL() ) {
+			return {
+				top: previousRect ? previousRect.top : nextRect.top,
+				left: previousRect ? previousRect.left : nextRect.right,
+				right: nextRect ? nextRect.right : previousRect.left,
+				bottom: previousRect ? previousRect.bottom : nextRect.bottom,
+				ownerDocument,
+			};
+		}
+
+		return {
+			top: previousRect ? previousRect.top : nextRect.top,
+			left: previousRect ? previousRect.right : nextRect.left,
+			right: nextRect ? nextRect.left : previousRect.right,
+			bottom: previousRect ? previousRect.bottom : nextRect.bottom,
+			ownerDocument,
+		};
+	}, [ previousElement, nextElement ] );
+
+	const popoverScrollRef = usePopoverScroll( __unstableContentRef );
+
+	if ( ! previousElement || ! nextElement ) {
+		return null;
+	}
+
+	/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
+	// While ideally it would be enough to capture the
+	// bubbling focus event from the Inserter, due to the
+	// characteristics of click focusing of `button`s in
+	// Firefox and Safari, it is not reliable.
+	//
+	// See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
+	return (
+		<Popover
+			ref={ popoverScrollRef }
+			noArrow
+			animate={ false }
+			getAnchorRect={ getAnchorRect }
+			focusOnMount={ false }
+			// Render in the old slot if needed for backward compatibility,
+			// otherwise render in place (not in the the default popover slot).
+			__unstableSlotName={ __unstablePopoverSlot || null }
+			// Forces a remount of the popover when its position changes
+			// This makes sure the popover doesn't animate from its previous position.
+			key={ nextClientId + '--' + rootClientId }
+			{ ...props }
+			className={ classnames(
+				'block-editor-block-popover',
+				props.className
+			) }
+		>
+			<div style={ style }>{ children }</div>
+		</Popover>
+	);
+	/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
+}
+
+export default BlockPopoverInbetween;