@wordpress/block-editor 8.5.4 → 9.0.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-navigation/dropdown.js

@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import deprecated from '@wordpress/deprecated';
+
 /**
  * WordPress dependencies
  */
@@ -36,10 +41,12 @@ function BlockNavigationDropdownToggle( {
 	);
 }
 
-function BlockNavigationDropdown(
-	{ isDisabled, __experimentalFeatures, ...props },
-	ref
-) {
+function BlockNavigationDropdown( { isDisabled, ...props }, ref ) {
+	deprecated( 'wp.blockEditor.BlockNavigationDropdown', {
+		since: '6.1',
+		alternative: 'wp.components.Dropdown and wp.blockEditor.ListView',
+	} );
+
 	const hasBlocks = useSelect(
 		( select ) => !! select( blockEditorStore ).getBlockCount(),
 		[]
@@ -65,10 +72,7 @@ function BlockNavigationDropdown(
 						{ __( 'List view' ) }
 					</p>
 
-					<ListView
-						showNestedBlocks
-						__experimentalFeatures={ __experimentalFeatures }
-					/>
+					<ListView />
 				</div>
 			) }
 		/>

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