@wordpress/block-editor 12.3.0 → 12.3.2

package/src/components/list-view/block-select-button.js

@@ -10,12 +10,14 @@ import {
 	Button,
 	__experimentalHStack as HStack,
 	__experimentalTruncate as Truncate,
+	Tooltip,
 } from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
-import { Icon, lockSmall as lock } from '@wordpress/icons';
+import { Icon, lockSmall as lock, pinSmall } from '@wordpress/icons';
 import { SPACE, ENTER, BACKSPACE, DELETE } from '@wordpress/keycodes';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -60,6 +62,15 @@ function ListViewBlockSelectButton(
 	} = useSelect( blockEditorStore );
 	const { removeBlocks } = useDispatch( blockEditorStore );
 	const isMatch = useShortcutEventMatch();
+	const isSticky = blockInformation?.positionType === 'sticky';
+
+	const positionLabel = blockInformation?.positionLabel
+		? sprintf(
+				// translators: 1: Position of selected block, e.g. "Sticky" or "Fixed".
+				__( 'Position: %1$s' ),
+				blockInformation.positionLabel
+		  )
+		: '';
 
 	// The `href` attribute triggers the browser's native HTML drag operations.
 	// When the link is dragged, the element's outerHTML is set in DataTransfer object as text/html.
@@ -166,6 +177,13 @@ function ListViewBlockSelectButton(
 							</Truncate>
 						</span>
 					) }
+					{ positionLabel && isSticky && (
+						<Tooltip text={ positionLabel }>
+							<span className="block-editor-list-view-block-select-button__sticky">
+								<Icon icon={ pinSmall } />
+							</span>
+						</Tooltip>
+					) }
 					{ isLocked && (
 						<span className="block-editor-list-view-block-select-button__lock">
 							<Icon icon={ lock } />

package/src/components/list-view/branch.js

@@ -91,6 +91,7 @@ function ListViewBranch( props ) {
 		selectedClientIds,
 		level = 1,
 		path = '',
+		isBranchDragged = false,
 		isBranchSelected = false,
 		listPosition = 0,
 		fixedListWindow,
@@ -167,7 +168,8 @@ function ListViewBranch( props ) {
 				);
 				const isSelectedBranch =
 					isBranchSelected || ( isSelected && hasNestedBlocks );
-				const showBlock = isDragged || blockInView || isSelected;
+				const showBlock =
+					isDragged || blockInView || isSelected || isBranchDragged;
 				return (
 					<AsyncModeProvider key={ clientId } value={ ! isSelected }>
 						{ showBlock && (
@@ -176,7 +178,7 @@ function ListViewBranch( props ) {
 								selectBlock={ selectBlock }
 								isSelected={ isSelected }
 								isBranchSelected={ isSelectedBranch }
-								isDragged={ isDragged }
+								isDragged={ isDragged || isBranchDragged }
 								level={ level }
 								position={ position }
 								rowCount={ rowCount }
@@ -194,7 +196,7 @@ function ListViewBranch( props ) {
 								<td className="block-editor-list-view-placeholder" />
 							</tr>
 						) }
-						{ hasNestedBlocks && shouldExpand && ! isDragged && (
+						{ hasNestedBlocks && shouldExpand && (
 							<ListViewBranch
 								parentId={ clientId }
 								blocks={ innerBlocks }
@@ -205,6 +207,7 @@ function ListViewBranch( props ) {
 								listPosition={ nextPosition + 1 }
 								fixedListWindow={ fixedListWindow }
 								isBranchSelected={ isSelectedBranch }
+								isBranchDragged={ isDragged || isBranchDragged }
 								selectedClientIds={ selectedClientIds }
 								isExpanded={ isExpanded }
 								isSyncedBranch={ syncedBranch }

package/src/components/list-view/drop-indicator.js

@@ -4,6 +4,7 @@
 import { Popover } from '@wordpress/components';
 import { getScrollContainer } from '@wordpress/dom';
 import { useCallback, useMemo } from '@wordpress/element';
+import { isRTL } from '@wordpress/i18n';
 
 export default function ListViewDropIndicator( {
 	listViewRef,
@@ -41,6 +42,8 @@ export default function ListViewDropIndicator( {
 	// is undefined, so the indicator will appear after the rootBlockElement.
 	const targetElement = blockElement || rootBlockElement;
 
+	const rtl = isRTL();
+
 	const getDropIndicatorIndent = useCallback(
 		( targetElementRect ) => {
 			if ( ! rootBlockElement ) {
@@ -55,9 +58,11 @@ export default function ListViewDropIndicator( {
 			);
 			const rootBlockIconRect =
 				rootBlockIconElement.getBoundingClientRect();
-			return rootBlockIconRect.right - targetElementRect.left;
+			return rtl
+				? targetElementRect.right - rootBlockIconRect.left
+				: rootBlockIconRect.right - targetElementRect.left;
 		},
-		[ rootBlockElement ]
+		[ rootBlockElement, rtl ]
 	);
 
 	const getDropIndicatorWidth = useCallback(
@@ -80,21 +85,56 @@ export default function ListViewDropIndicator( {
 				'horizontal'
 			);
 
-			if ( scrollContainer ) {
+			const ownerDocument = targetElement.ownerDocument;
+			const windowScroll =
+				scrollContainer === ownerDocument.body ||
+				scrollContainer === ownerDocument.documentElement;
+
+			if ( scrollContainer && ! windowScroll ) {
 				const scrollContainerRect =
 					scrollContainer.getBoundingClientRect();
 
-				if ( scrollContainer.clientWidth < width ) {
+				const distanceBetweenContainerAndTarget = isRTL()
+					? scrollContainerRect.right - targetElementRect.right
+					: targetElementRect.left - scrollContainerRect.left;
+
+				const scrollContainerWidth = scrollContainer.clientWidth;
+
+				if (
+					scrollContainerWidth <
+					width + distanceBetweenContainerAndTarget
+				) {
 					width =
-						scrollContainer.clientWidth -
-						( targetElementRect.left - scrollContainerRect.left );
+						scrollContainerWidth -
+						distanceBetweenContainerAndTarget;
+				}
+
+				// LTR logic for ensuring the drop indicator does not extend
+				// beyond the right edge of the scroll container.
+				if (
+					! rtl &&
+					targetElementRect.left + indent < scrollContainerRect.left
+				) {
+					width -= scrollContainerRect.left - targetElementRect.left;
+					return width;
+				}
+
+				// RTL logic for ensuring the drop indicator does not extend
+				// beyond the right edge of the scroll container.
+				if (
+					rtl &&
+					targetElementRect.right - indent > scrollContainerRect.right
+				) {
+					width -=
+						targetElementRect.right - scrollContainerRect.right;
+					return width;
 				}
 			}
 
 			// Subtract the indent from the final width of the indicator.
 			return width - indent;
 		},
-		[ targetElement ]
+		[ rtl, targetElement ]
 	);
 
 	const style = useMemo( () => {
@@ -119,15 +159,59 @@ export default function ListViewDropIndicator( {
 			return undefined;
 		}
 
+		const ownerDocument = targetElement.ownerDocument;
+
 		return {
-			ownerDocument: targetElement.ownerDocument,
+			ownerDocument,
 			getBoundingClientRect() {
 				const rect = targetElement.getBoundingClientRect();
 				const indent = getDropIndicatorIndent( rect );
-				const left = rect.left + indent;
+				// In RTL languages, the drop indicator should be positioned
+				// to the left of the target element, with the width of the
+				// indicator determining the indent at the right edge of the
+				// target element. In LTR languages, the drop indicator should
+				// end at the right edge of the target element, with the indent
+				// added to the position of the left edge of the target element.
+				let left = rtl ? rect.left : rect.left + indent;
 				let top = 0;
 				let bottom = 0;
 
+				// In deeply nested lists, where a scrollbar is present,
+				// the width of the drop indicator should be the width of
+				// the visible area of the scroll container. Additionally,
+				// the left edge of the drop indicator line needs to be
+				// offset by the distance the left edge of the target element
+				// and the left edge of the scroll container. The ensures
+				// that the drop indicator position never breaks out of the
+				// visible area of the scroll container.
+				const scrollContainer = getScrollContainer(
+					targetElement,
+					'horizontal'
+				);
+
+				const windowScroll =
+					scrollContainer === ownerDocument.body ||
+					scrollContainer === ownerDocument.documentElement;
+
+				// If the scroll container is not the window, offset the left position, if need be.
+				if ( scrollContainer && ! windowScroll ) {
+					const scrollContainerRect =
+						scrollContainer.getBoundingClientRect();
+
+					// In RTL languages, a vertical scrollbar is present on the
+					// left edge of the scroll container. The width of the
+					// scrollbar needs to be accounted for when positioning the
+					// drop indicator.
+					const scrollbarWidth = rtl
+						? scrollContainer.offsetWidth -
+						  scrollContainer.clientWidth
+						: 0;
+
+					if ( left < scrollContainerRect.left + scrollbarWidth ) {
+						left = scrollContainerRect.left + scrollbarWidth;
+					}
+				}
+
 				if ( dropPosition === 'top' ) {
 					top = rect.top;
 					bottom = rect.top;
@@ -148,6 +232,7 @@ export default function ListViewDropIndicator( {
 		dropPosition,
 		getDropIndicatorIndent,
 		getDropIndicatorWidth,
+		rtl,
 	] );
 
 	if ( ! targetElement ) {

package/src/components/list-view/style.scss

@@ -27,6 +27,17 @@
 		}
 	}
 
+	&:not(.is-selected) .block-editor-list-view-block-select-button {
+		// While components are being dragged, ensure that hover styles are not applied.
+		// This resolves a bug where while dragging, the hover styles would be applied to
+		// the wrong list item while scrolling long lists, particularly in Chrome.
+		.is-dragging-components-draggable & {
+			&:hover {
+				color: inherit;
+			}
+		}
+	}
+
 	// The background has to be applied to the td, not tr, or border-radius won't work.
 	&.is-selected td {
 		background: var(--wp-admin-theme-color);
@@ -51,13 +62,6 @@
 	&.is-selected .components-button.has-icon {
 		color: $white;
 	}
-	&.is-selected .block-editor-list-view-block-contents {
-		// Hide selection styles while a user is dragging blocks/files etc.
-		.is-dragging-components-draggable & {
-			background: none;
-			color: $gray-900;
-		}
-	}
 	&.is-selected .block-editor-list-view-block-contents:focus {
 		&::after {
 			box-shadow:
@@ -76,10 +80,6 @@
 		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $white;
 	}
 
-	&.is-dragging {
-		display: none;
-	}
-
 	// Border radius for corners of the selected item.
 	&.is-first-selected td:first-child {
 		border-top-left-radius: $radius-block-ui;
@@ -335,7 +335,8 @@
 		background: rgba($black, 0.3);
 	}
 
-	.block-editor-list-view-block-select-button__lock {
+	.block-editor-list-view-block-select-button__lock,
+	.block-editor-list-view-block-select-button__sticky {
 		line-height: 0;
 	}
 }

package/src/components/list-view/test/use-list-view-drop-zone.js

@@ -103,78 +103,118 @@ describe( 'getListViewDropTarget', () => {
 	];
 
 	it( 'should return the correct target when dragging a block over the top half of the first block', () => {
-		const position = { x: 50, y: 70 };
-		const target = getListViewDropTarget( blocksData, position );
-
-		expect( target ).toEqual( {
-			blockIndex: 0,
-			clientId: 'block-1',
-			dropPosition: 'top',
-			rootClientId: '',
+		[
+			{ position: { x: 50, y: 70 }, rtl: false },
+			{ position: { x: 250, y: 70 }, rtl: true },
+		].forEach( ( { position, rtl } ) => {
+			const target = getListViewDropTarget( blocksData, position, rtl );
+
+			expect( target ).toEqual( {
+				blockIndex: 0,
+				clientId: 'block-1',
+				dropPosition: 'top',
+				rootClientId: '',
+			} );
 		} );
 	} );
 
 	it( 'should nest when dragging a block over the bottom half of an expanded block', () => {
-		const position = { x: 50, y: 90 };
-		const target = getListViewDropTarget( blocksData, position );
-
-		expect( target ).toEqual( {
-			blockIndex: 0,
-			dropPosition: 'inside',
-			rootClientId: 'block-1',
+		[
+			{ position: { x: 50, y: 90 }, rtl: false },
+			{ position: { x: 250, y: 90 }, rtl: true },
+		].forEach( ( { position, rtl } ) => {
+			const target = getListViewDropTarget( blocksData, position, rtl );
+
+			expect( target ).toEqual( {
+				blockIndex: 0,
+				dropPosition: 'inside',
+				rootClientId: 'block-1',
+			} );
 		} );
 	} );
 
 	it( 'should nest when dragging a block over the right side of the bottom half of a block nested to three levels', () => {
-		const position = { x: 250, y: 180 };
-		const target = getListViewDropTarget( blocksData, position );
-
-		expect( target ).toEqual( {
-			blockIndex: 0,
-			dropPosition: 'inside',
-			rootClientId: 'block-3',
+		[
+			{ position: { x: 250, y: 180 }, rtl: false },
+			{ position: { x: 50, y: 180 }, rtl: true },
+		].forEach( ( { position, rtl } ) => {
+			const target = getListViewDropTarget( blocksData, position, rtl );
+
+			expect( target ).toEqual( {
+				blockIndex: 0,
+				dropPosition: 'inside',
+				rootClientId: 'block-3',
+			} );
 		} );
 	} );
 
 	it( 'should drag below when positioned at the bottom half of a block nested to three levels, and over the third level horizontally', () => {
-		const position = { x: 10 + NESTING_LEVEL_INDENTATION * 3, y: 180 };
-		const target = getListViewDropTarget( blocksData, position );
-
-		expect( target ).toEqual( {
-			blockIndex: 1,
-			clientId: 'block-3',
-			dropPosition: 'bottom',
-			rootClientId: 'block-2',
+		[
+			{
+				position: { x: 10 + NESTING_LEVEL_INDENTATION * 3, y: 180 },
+				rtl: false,
+			},
+			{
+				position: { x: 300 - NESTING_LEVEL_INDENTATION * 3, y: 180 },
+				rtl: true,
+			},
+		].forEach( ( { position, rtl } ) => {
+			const target = getListViewDropTarget( blocksData, position, rtl );
+
+			expect( target ).toEqual( {
+				blockIndex: 1,
+				clientId: 'block-3',
+				dropPosition: 'bottom',
+				rootClientId: 'block-2',
+			} );
 		} );
 	} );
 
-	it( 'should drag one level up below when positioned at the bottom half of a block nested to three levels, and over the second level horizontally', () => {
-		const position = { x: 10 + NESTING_LEVEL_INDENTATION * 2, y: 180 };
-		const target = getListViewDropTarget( blocksData, position );
-
-		expect( target ).toEqual( {
-			blockIndex: 1,
-			clientId: 'block-3',
-			dropPosition: 'bottom',
-			rootClientId: 'block-1',
+	it( 'should drag one level up when positioned at the bottom half of a block nested to three levels, and over the second level horizontally', () => {
+		[
+			{
+				position: { x: 10 + NESTING_LEVEL_INDENTATION * 2, y: 180 },
+				rtl: false,
+			},
+			{
+				position: { x: 300 - NESTING_LEVEL_INDENTATION * 2, y: 180 },
+				rtl: true,
+			},
+		].forEach( ( { position, rtl } ) => {
+			const target = getListViewDropTarget( blocksData, position, rtl );
+
+			expect( target ).toEqual( {
+				blockIndex: 1,
+				clientId: 'block-3',
+				dropPosition: 'bottom',
+				rootClientId: 'block-1',
+			} );
 		} );
 	} );
 
 	it( 'should drag two levels up below when positioned at the bottom half of a block nested to three levels, and over the first level horizontally', () => {
-		const position = { x: 10 + NESTING_LEVEL_INDENTATION, y: 180 };
-		const target = getListViewDropTarget( blocksData, position );
-
-		expect( target ).toEqual( {
-			blockIndex: 1,
-			clientId: 'block-3',
-			dropPosition: 'bottom',
-			rootClientId: '',
+		[
+			{
+				position: { x: 10 + NESTING_LEVEL_INDENTATION, y: 180 },
+				rtl: false,
+			},
+			{
+				position: { x: 300 - NESTING_LEVEL_INDENTATION, y: 180 },
+				rtl: true,
+			},
+		].forEach( ( { position, rtl } ) => {
+			const target = getListViewDropTarget( blocksData, position, rtl );
+
+			expect( target ).toEqual( {
+				blockIndex: 1,
+				clientId: 'block-3',
+				dropPosition: 'bottom',
+				rootClientId: '',
+			} );
 		} );
 	} );
 
 	it( 'should nest and append to end when dragging a block over the right side and bottom half of a collapsed block with children', () => {
-		const position = { x: 160, y: 90 };
-
 		const collapsedBlockData = [ ...blocksData ];
 
 		// Set the first block to be collapsed.
@@ -186,38 +226,64 @@ describe( 'getListViewDropTarget', () => {
 		// Hide the first block's children.
 		collapsedBlockData.splice( 1, 1 );
 
-		const target = getListViewDropTarget( collapsedBlockData, position );
-
-		expect( target ).toEqual( {
-			blockIndex: 1,
-			dropPosition: 'inside',
-			rootClientId: 'block-1',
+		[
+			{
+				position: { x: 250, y: 90 },
+				rtl: false,
+			},
+			{
+				position: { x: 50, y: 90 },
+				rtl: true,
+			},
+		].forEach( ( { position, rtl } ) => {
+			const target = getListViewDropTarget(
+				collapsedBlockData,
+				position,
+				rtl
+			);
+
+			expect( target ).toEqual( {
+				blockIndex: 1,
+				dropPosition: 'inside',
+				rootClientId: 'block-1',
+			} );
 		} );
 	} );
 
 	it( 'should nest and prepend when dragging a block over the right side and bottom half of an expanded block with children', () => {
-		const position = { x: 160, y: 90 };
-
 		const collapsedBlockData = [ ...blocksData ];
 
-		// Set the first block to be collapsed.
+		// Set the first block to be expanded.
 		collapsedBlockData[ 0 ] = {
 			...collapsedBlockData[ 0 ],
 			isExpanded: true,
 		};
 
-		const target = getListViewDropTarget( collapsedBlockData, position );
-
-		expect( target ).toEqual( {
-			blockIndex: 0,
-			dropPosition: 'inside',
-			rootClientId: 'block-1',
+		[
+			{
+				position: { x: 250, y: 90 },
+				rtl: false,
+			},
+			{
+				position: { x: 50, y: 90 },
+				rtl: true,
+			},
+		].forEach( ( { position, rtl } ) => {
+			const target = getListViewDropTarget(
+				collapsedBlockData,
+				position,
+				rtl
+			);
+
+			expect( target ).toEqual( {
+				blockIndex: 0,
+				dropPosition: 'inside',
+				rootClientId: 'block-1',
+			} );
 		} );
 	} );
 
 	it( 'should drag below when dragging a block over the left side and bottom half of a collapsed block with children', () => {
-		const position = { x: 30, y: 90 };
-
 		const collapsedBlockData = [ ...blocksData ];
 
 		// Set the first block to be collapsed.
@@ -229,19 +295,32 @@ describe( 'getListViewDropTarget', () => {
 		// Hide the first block's children.
 		collapsedBlockData.splice( 1, 1 );
 
-		const target = getListViewDropTarget( collapsedBlockData, position );
-
-		expect( target ).toEqual( {
-			blockIndex: 1,
-			clientId: 'block-1',
-			dropPosition: 'bottom',
-			rootClientId: '',
+		[
+			{
+				position: { x: 30, y: 90 },
+				rtl: false,
+			},
+			{
+				position: { x: 270, y: 90 },
+				rtl: true,
+			},
+		].forEach( ( { position, rtl } ) => {
+			const target = getListViewDropTarget(
+				collapsedBlockData,
+				position,
+				rtl
+			);
+
+			expect( target ).toEqual( {
+				blockIndex: 1,
+				clientId: 'block-1',
+				dropPosition: 'bottom',
+				rootClientId: '',
+			} );
 		} );
 	} );
 
 	it( 'should drag below when attempting to nest but the dragged block is not allowed as a child', () => {
-		const position = { x: 70, y: 90 };
-
 		const childNotAllowedBlockData = [ ...blocksData ];
 
 		// Set the first block to not be allowed as a child.
@@ -250,16 +329,28 @@ describe( 'getListViewDropTarget', () => {
 			canInsertDraggedBlocksAsChild: false,
 		};
 
-		const target = getListViewDropTarget(
-			childNotAllowedBlockData,
-			position
-		);
-
-		expect( target ).toEqual( {
-			blockIndex: 1,
-			clientId: 'block-1',
-			dropPosition: 'bottom',
-			rootClientId: '',
+		[
+			{
+				position: { x: 70, y: 90 },
+				rtl: false,
+			},
+			{
+				position: { x: 230, y: 90 },
+				rtl: true,
+			},
+		].forEach( ( { position, rtl } ) => {
+			const target = getListViewDropTarget(
+				childNotAllowedBlockData,
+				position,
+				rtl
+			);
+
+			expect( target ).toEqual( {
+				blockIndex: 1,
+				clientId: 'block-1',
+				dropPosition: 'bottom',
+				rootClientId: '',
+			} );
 		} );
 	} );
 
@@ -288,14 +379,18 @@ describe( 'getListViewDropTarget', () => {
 		// This position is to the right of the block, but below the bottom of the block.
 		// This should result in the block being moved below the bottom-most block, and
 		// not being treated as a nesting gesture.
-		const position = { x: 160, y: 250 };
-		const target = getListViewDropTarget( singleBlock, position );
-
-		expect( target ).toEqual( {
-			blockIndex: 1,
-			clientId: 'block-1',
-			dropPosition: 'bottom',
-			rootClientId: '',
+		[
+			{ position: { x: 160, y: 250 }, rtl: false },
+			{ position: { x: 140, y: 250 }, rtl: true },
+		].forEach( ( { position, rtl } ) => {
+			const target = getListViewDropTarget( singleBlock, position, rtl );
+
+			expect( target ).toEqual( {
+				blockIndex: 1,
+				clientId: 'block-1',
+				dropPosition: 'bottom',
+				rootClientId: '',
+			} );
 		} );
 	} );
 } );