@wordpress/block-editor 13.3.0 → 14.0.0

package/src/components/grid/grid-item-movers.js

@@ -1,10 +1,25 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { ToolbarButton } from '@wordpress/components';
-import { arrowLeft, arrowUp, arrowDown, arrowRight } from '@wordpress/icons';
+import {
+	VisuallyHidden,
+	ToolbarButton,
+	ToolbarGroup,
+} from '@wordpress/components';
+import {
+	chevronLeft,
+	chevronUp,
+	chevronDown,
+	chevronRight,
+} from '@wordpress/icons';
 import { useDispatch } from '@wordpress/data';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -39,74 +54,131 @@ export function GridItemMovers( {
 
 	return (
 		<BlockControls group="parent">
+			<ToolbarGroup className="block-editor-grid-item-mover__move-button-container">
+				<div className="block-editor-grid-item-mover__move-horizontal-button-container is-left">
+					<GridItemMover
+						icon={ chevronLeft }
+						label={ __( 'Move left' ) }
+						description={ __( 'Move left' ) }
+						isDisabled={ columnStart <= 1 }
+						onClick={ () => {
+							onChange( {
+								columnStart: columnStart - 1,
+							} );
+							__unstableMarkNextChangeAsNotPersistent();
+							moveBlocksToPosition(
+								[ blockClientId ],
+								gridClientId,
+								gridClientId,
+								getNumberOfBlocksBeforeCell(
+									columnStart - 1,
+									rowStart
+								)
+							);
+						} }
+					/>
+				</div>
+				<div className="block-editor-grid-item-mover__move-vertical-button-container">
+					<GridItemMover
+						className="is-up-button"
+						icon={ chevronUp }
+						label={ __( 'Move up' ) }
+						description={ __( 'Move up' ) }
+						isDisabled={ rowStart <= 1 }
+						onClick={ () => {
+							onChange( {
+								rowStart: rowStart - 1,
+							} );
+							__unstableMarkNextChangeAsNotPersistent();
+							moveBlocksToPosition(
+								[ blockClientId ],
+								gridClientId,
+								gridClientId,
+								getNumberOfBlocksBeforeCell(
+									columnStart,
+									rowStart - 1
+								)
+							);
+						} }
+					/>
+					<GridItemMover
+						className="is-down-button"
+						icon={ chevronDown }
+						label={ __( 'Move down' ) }
+						description={ __( 'Move down' ) }
+						isDisabled={ rowCount && rowEnd >= rowCount }
+						onClick={ () => {
+							onChange( {
+								rowStart: rowStart + 1,
+							} );
+							__unstableMarkNextChangeAsNotPersistent();
+							moveBlocksToPosition(
+								[ blockClientId ],
+								gridClientId,
+								gridClientId,
+								getNumberOfBlocksBeforeCell(
+									columnStart,
+									rowStart + 1
+								)
+							);
+						} }
+					/>
+				</div>
+				<div className="block-editor-grid-item-mover__move-horizontal-button-container is-right">
+					<GridItemMover
+						icon={ chevronRight }
+						label={ __( 'Move right' ) }
+						description={ __( 'Move right' ) }
+						isDisabled={ columnCount && columnEnd >= columnCount }
+						onClick={ () => {
+							onChange( {
+								columnStart: columnStart + 1,
+							} );
+							__unstableMarkNextChangeAsNotPersistent();
+							moveBlocksToPosition(
+								[ blockClientId ],
+								gridClientId,
+								gridClientId,
+								getNumberOfBlocksBeforeCell(
+									columnStart + 1,
+									rowStart
+								)
+							);
+						} }
+					/>
+				</div>
+			</ToolbarGroup>
+		</BlockControls>
+	);
+}
+
+function GridItemMover( {
+	className,
+	icon,
+	label,
+	isDisabled,
+	onClick,
+	description,
+} ) {
+	const instanceId = useInstanceId( GridItemMover );
+	const descriptionId = `block-editor-grid-item-mover-button__description-${ instanceId }`;
+	return (
+		<>
 			<ToolbarButton
-				icon={ arrowUp }
-				label={ __( 'Move block up' ) }
-				disabled={ rowStart <= 1 }
-				onClick={ () => {
-					onChange( {
-						rowStart: rowStart - 1,
-					} );
-					__unstableMarkNextChangeAsNotPersistent();
-					moveBlocksToPosition(
-						[ blockClientId ],
-						gridClientId,
-						gridClientId,
-						getNumberOfBlocksBeforeCell( columnStart, rowStart - 1 )
-					);
-				} }
-			/>
-			<ToolbarButton
-				icon={ arrowDown }
-				label={ __( 'Move block down' ) }
-				disabled={ rowCount && rowEnd >= rowCount }
-				onClick={ () => {
-					onChange( {
-						rowStart: rowStart + 1,
-					} );
-					__unstableMarkNextChangeAsNotPersistent();
-					moveBlocksToPosition(
-						[ blockClientId ],
-						gridClientId,
-						gridClientId,
-						getNumberOfBlocksBeforeCell( columnStart, rowStart + 1 )
-					);
-				} }
-			/>
-			<ToolbarButton
-				icon={ arrowLeft }
-				label={ __( 'Move block left' ) }
-				disabled={ columnStart <= 1 }
-				onClick={ () => {
-					onChange( {
-						columnStart: columnStart - 1,
-					} );
-					__unstableMarkNextChangeAsNotPersistent();
-					moveBlocksToPosition(
-						[ blockClientId ],
-						gridClientId,
-						gridClientId,
-						getNumberOfBlocksBeforeCell( columnStart - 1, rowStart )
-					);
-				} }
-			/>
-			<ToolbarButton
-				icon={ arrowRight }
-				label={ __( 'Move block right' ) }
-				disabled={ columnCount && columnEnd >= columnCount }
-				onClick={ () => {
-					onChange( {
-						columnStart: columnStart + 1,
-					} );
-					__unstableMarkNextChangeAsNotPersistent();
-					moveBlocksToPosition(
-						[ blockClientId ],
-						gridClientId,
-						gridClientId,
-						getNumberOfBlocksBeforeCell( columnStart + 1, rowStart )
-					);
-				} }
+				className={ clsx(
+					'block-editor-grid-item-mover-button',
+					className
+				) }
+				icon={ icon }
+				label={ label }
+				aria-describedby={ descriptionId }
+				onClick={ isDisabled ? null : onClick }
+				disabled={ isDisabled }
+				accessibleWhenDisabled
 			/>
-		</BlockControls>
+			<VisuallyHidden id={ descriptionId }>
+				{ description }
+			</VisuallyHidden>
+		</>
 	);
 }

package/src/components/grid/grid-item-resizer.js

@@ -7,7 +7,7 @@ import { useState, useEffect } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
+import { useBlockElement } from '../block-list/use-block-props/use-block-refs';
 import BlockPopoverCover from '../block-popover/cover';
 import { getComputedCSS, getGridTracks, getClosestTrack } from './utils';
 
@@ -98,7 +98,7 @@ function GridItemResizerInner( {
 		<BlockPopoverCover
 			className="block-editor-grid-item-resizer"
 			clientId={ clientId }
-			__unstablePopoverSlot="block-toolbar"
+			__unstablePopoverSlot="__unstable-block-tools-after"
 			additionalStyles={ styles }
 		>
 			<ResizableBox
@@ -119,6 +119,15 @@ function GridItemResizerInner( {
 				} }
 				bounds={ bounds }
 				boundsByDirection
+				onPointerDown={ ( { target, pointerId } ) => {
+					/*
+					 * Captures the pointer to avoid hiccups while dragging over objects
+					 * like iframes and ensures that the event to end the drag is
+					 * captured by the target (resize handle) whether or not it’s under
+					 * the pointer.
+					 */
+					target.setPointerCapture( pointerId );
+				} }
 				onResizeStart={ ( event, direction ) => {
 					/*
 					 * The container justification and alignment need to be set
@@ -126,21 +135,6 @@ function GridItemResizerInner( {
 					 * so that it resizes in the right direction.
 					 */
 					setResizeDirection( direction );
-
-					/*
-					 * The mouseup event on the resize handle doesn't trigger if the mouse
-					 * isn't directly above the handle, so we try to detect if it happens
-					 * outside the grid and dispatch a mouseup event on the handle.
-					 */
-					blockElement.ownerDocument.addEventListener(
-						'mouseup',
-						() => {
-							event.target.dispatchEvent(
-								new Event( 'mouseup', { bubbles: true } )
-							);
-						},
-						{ once: true }
-					);
 				} }
 				onResizeStop={ ( event, direction, boxElement ) => {
 					const columnGap = parseFloat(

package/src/components/grid/grid-visualizer.js

@@ -13,7 +13,7 @@ import { __experimentalUseDropZone as useDropZone } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
+import { useBlockElement } from '../block-list/use-block-props/use-block-refs';
 import BlockPopoverCover from '../block-popover/cover';
 import { range, GridRect, getGridInfo } from './utils';
 import { store as blockEditorStore } from '../../store';
@@ -89,7 +89,7 @@ const GridVisualizerGrid = forwardRef(
 					'is-dropping-allowed': isDroppingAllowed,
 				} ) }
 				clientId={ gridClientId }
-				__unstablePopoverSlot="block-toolbar"
+				__unstablePopoverSlot="__unstable-block-tools-after"
 			>
 				<div
 					ref={ ref }

package/src/components/grid/style.scss

@@ -96,3 +96,167 @@
 	}
 }
 
+.block-editor-grid-item-mover__move-button-container {
+	display: flex;
+	padding: 0;
+	border: none;
+	justify-content: center;
+
+	.block-editor-grid-item-mover-button {
+		width: $block-toolbar-height * 0.5;
+		min-width: 0 !important; // overrides default button width.
+		padding-left: 0;
+		padding-right: 0;
+
+		svg {
+			min-width: $grid-unit-30;
+		}
+
+		// Focus and toggle pseudo elements.
+		&::before {
+			content: "";
+			position: absolute;
+			display: block;
+			border-radius: $radius-block-ui;
+			height: $grid-unit-40;
+
+			// Position the focus rectangle.
+			left: $grid-unit-10;
+			right: $grid-unit-10;
+			z-index: -1;
+
+			// Animate in.
+			animation: components-button__appear-animation 0.1s ease;
+			animation-fill-mode: forwards;
+			@include reduce-motion("animation");
+		}
+
+		// Don't show the focus inherited by the Button component.
+		&:focus,
+		&:focus:enabled,
+		&:focus::before {
+			box-shadow: none;
+			outline: none;
+		}
+
+		&:focus-visible::before {
+			@include block-toolbar-button-style__focus();
+		}
+	}
+}
+
+
+.block-editor-grid-item-mover__move-vertical-button-container {
+	display: flex;
+	position: relative;
+	@include break-small() {
+		flex-direction: column;
+		justify-content: space-around;
+
+		> .block-editor-grid-item-mover-button.block-editor-grid-item-mover-button {
+			height: $block-toolbar-height * 0.5 - $grid-unit-05 !important; // overrides toolbar button height.
+			width: 100%;
+			min-width: 0 !important; // overrides default button width.
+
+			// Focus style.
+			&::before {
+				height: calc(100% - 4px);
+			}
+		}
+
+		.block-editor-grid-item-mover-button.is-up-button svg,
+		.block-editor-grid-item-mover-button.is-down-button svg {
+			flex-shrink: 0;
+			height: $block-toolbar-height * 0.5 - $grid-unit-05;
+		}
+	}
+}
+
+.editor-collapsible-block-toolbar {
+	.block-editor-grid-item-mover__move-vertical-button-container {
+		// Move up a little to prevent the toolbar shift when focus is on the vertical movers.
+		@include break-small() {
+			height: $grid-unit-50;
+			position: relative;
+			top: -5px; // Should be -4px, but that causes scrolling when focus lands on the movers, in a 60px header.
+		}
+	}
+}
+
+.show-icon-labels {
+
+	.block-editor-grid-item-mover__move-horizontal-button-container {
+		position: relative;
+
+		&::before {
+			@include break-small() {
+				content: "";
+				height: 100%;
+				width: $border-width;
+				background: $gray-200;
+				position: absolute;
+				top: 0;
+			}
+
+			@include break-medium() {
+				background: $gray-900;
+			}
+		}
+
+		&.is-left {
+			padding-right: 6px;
+
+			&::before {
+				right: 0;
+			}
+		}
+
+		&.is-right {
+			padding-left: 6px;
+
+			&::before {
+				left: 0;
+			}
+		}
+	}
+
+	.block-editor-grid-item-mover__move-vertical-button-container {
+		&::before {
+			@include break-small() {
+				content: "";
+				height: $border-width;
+				width: 100%;
+				background: $gray-200;
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				// With Top toolbar enabled, this separator has a smaller width. Translating the
+				// X axis allows to make the separator always centered regardless of its width.
+				transform: translate(-50%, 0);
+				margin-top: -$border-width * 0.5;
+			}
+
+			@include break-medium {
+				background: $gray-900;
+			}
+		}
+	}
+
+	.block-editor-grid-item-mover-button {
+		white-space: nowrap;
+	}
+
+	.editor-collapsible-block-toolbar {
+		.block-editor-grid-item-mover__move-horizontal-button-container::before {
+			height: $grid-unit-30;
+			background: $gray-300;
+			top: $grid-unit-05;
+		}
+
+		.block-editor-grid-item-mover__move-vertical-button-container::before {
+			background: $gray-300;
+			width: calc(100% - #{$grid-unit-30});
+		}
+	}
+}
+