@wordpress/block-editor 12.17.0 → 12.18.1

package/src/components/link-control/style.scss

@@ -1,5 +1,4 @@
 $block-editor-link-control-number-of-actions: 1;
-$preview-image-height: 140px;
 
 @keyframes loadingpulse {
 	0% {
@@ -51,13 +50,6 @@ $preview-image-height: 140px;
 	position: relative;
 }
 
-// If the input doesn't have a visible label then
-// we need to expand the input itself to occupy
-// the full available horizontal space.
-.block-editor-link-control__search-input.has-no-label .block-editor-url-input__input {
-	flex: 1;
-}
-
 .block-editor-link-control__field {
 	margin: $grid-unit-20; // allow margin collapse for vertical spacing.
 
@@ -77,6 +69,10 @@ $preview-image-height: 140px;
 		padding: $grid-unit-10 $button-size-next-default-40px $grid-unit-10 $grid-unit-20;
 		position: relative;
 		width: 100%;
+
+		.has-actions & {
+			padding-right: $grid-unit-20;
+		}
 	}
 }
 
@@ -183,6 +179,7 @@ $preview-image-height: 140px;
 		flex-direction: row;
 		align-items: flex-start;
 		margin-right: $grid-unit-10;
+		gap: $grid-unit-10;
 
 		// Force text to wrap to improve UX when encountering long lines
 		// of text, particular those with no spaces.
@@ -191,6 +188,9 @@ $preview-image-height: 140px;
 		overflow-wrap: break-word;
 
 		.block-editor-link-control__search-item-info {
+			color: $gray-700;
+			line-height: 1.1;
+			font-size: $helptext-font-size;
 			word-break: break-all;
 		}
 	}
@@ -209,17 +209,29 @@ $preview-image-height: 140px;
 		word-break: break-all;
 	}
 
+	.block-editor-link-control__search-item-details {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		gap: $grid-unit-05;
+	}
+
+	.block-editor-link-control__search-item-header .block-editor-link-control__search-item-icon {
+		background-color: $gray-100;
+		width: $grid-unit-40;
+		height: $grid-unit-40;
+		border-radius: $radius-block-ui;
+	}
+
 	.block-editor-link-control__search-item-icon {
 		position: relative;
-		margin-right: $grid-unit-10;
-		max-height: 24px;
 		flex-shrink: 0;
-		width: 24px;
 		display: flex;
 		justify-content: center;
+		align-items: center;
 
 		img {
-			width: 16px; // favicons often have a source of 32px
+			width: $grid-unit-20; // favicons often have a source of 32px
 		}
 	}
 
@@ -230,10 +242,13 @@ $preview-image-height: 140px;
 	}
 
 	.block-editor-link-control__search-item-title {
-		display: block;
-		font-weight: 500;
-		position: relative;
-		line-height: $grid-unit-30;
+		border-radius: $radius-block-ui;
+		line-height: 1.1;
+
+		&:focus-visible {
+			@include block-toolbar-button-style__focus();
+			text-decoration: none;
+		}
 
 		mark {
 			font-weight: 600;
@@ -249,58 +264,6 @@ $preview-image-height: 140px;
 			display: none; // specifically requested to be removed visually as well.
 		}
 	}
-
-	.block-editor-link-control__search-item-description {
-		padding-top: 12px;
-		margin: 0;
-
-		&.is-placeholder {
-			margin-top: 12px;
-			padding-top: 0;
-			height: 28px;
-			display: flex;
-			flex-direction: column;
-			justify-content: space-around;
-
-			&::before,
-			&::after {
-				display: block;
-				content: "";
-				height: 0.7em;
-				width: 100%;
-				background-color: $gray-100;
-				border-radius: 3px;
-			}
-		}
-
-		.components-text {
-			font-size: 0.9em;
-		}
-	}
-
-	.block-editor-link-control__search-item-image {
-		display: flex;
-		width: 100%;
-		background-color: $gray-100;
-		justify-content: center;
-		height: $preview-image-height; // limit height
-		max-height: $preview-image-height; // limit height
-		overflow: hidden;
-		border-radius: 2px;
-		margin-top: 12px;
-
-		&.is-placeholder {
-			background-color: $gray-100;
-			border-radius: 3px;
-		}
-
-		img {
-			display: block; // remove unwanted space below image
-			width: 100%;
-			height: 100%;
-			object-fit: contain;
-		}
-	}
 }
 
 .block-editor-link-control__search-item-top {
@@ -310,24 +273,7 @@ $preview-image-height: 140px;
 	align-items: center;
 }
 
-.block-editor-link-control__search-item-bottom {
-	transition: opacity 1.5s;
-	width: 100%;
-}
-
 .block-editor-link-control__search-item.is-fetching {
-	.block-editor-link-control__search-item-description {
-		&::before,
-		&::after {
-			animation: loadingpulse 1s linear infinite;
-			animation-delay: 0.5s; // avoid animating for fast network responses
-		}
-	}
-
-	.block-editor-link-control__search-item-image {
-		animation: loadingpulse 1s linear infinite;
-		animation-delay: 0.5s; // avoid animating for fast network responses
-	}
 
 	.block-editor-link-control__search-item-icon {
 		svg,

package/src/components/link-control/test/index.js

@@ -2244,7 +2244,8 @@ describe( 'Rich link previews', () => {
 
 		const titlePreview = screen.getByText( selectedLink.title );
 
-		expect( titlePreview ).toHaveClass(
+		// eslint-disable-next-line testing-library/no-node-access
+		expect( titlePreview.parentElement ).toHaveClass(
 			'block-editor-link-control__search-item-title'
 		);
 	} );

package/src/components/list-view/block-contents.js

@@ -74,7 +74,11 @@ const ListViewBlockContents = forwardRef(
 						setInsertedBlock={ setInsertedBlock }
 					/>
 				) }
-				<BlockDraggable clientIds={ draggableClientIds }>
+				<BlockDraggable
+					appendToOwnerDocument
+					clientIds={ draggableClientIds }
+					cloneClassname={ 'block-editor-list-view-draggable-chip' }
+				>
 					{ ( { draggable, onDragStart, onDragEnd } ) => (
 						<ListViewBlockSelectButton
 							ref={ ref }

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

@@ -43,7 +43,10 @@ import AriaReferencedText from './aria-referenced-text';
 
 function ListViewBlock( {
 	block: { clientId },
+	displacement,
+	isAfterDraggedBlocks,
 	isDragged,
+	isNesting,
 	isSelected,
 	isBranchSelected,
 	selectBlock,
@@ -270,6 +273,11 @@ function ListViewBlock( {
 		'has-single-cell': ! showBlockActions,
 		'is-synced': blockInformation?.isSynced,
 		'is-draggable': canMove,
+		'is-displacement-normal': displacement === 'normal',
+		'is-displacement-up': displacement === 'up',
+		'is-displacement-down': displacement === 'down',
+		'is-after-dragged-blocks': isAfterDraggedBlocks,
+		'is-nesting': isNesting,
 	} );
 
 	// Only include all selected blocks if the currently clicked on block
@@ -296,6 +304,7 @@ function ListViewBlock( {
 	return (
 		<ListViewLeaf
 			className={ classes }
+			isDragged={ isDragged }
 			onKeyDown={ onKeyDown }
 			onMouseEnter={ onMouseEnter }
 			onMouseLeave={ onMouseLeave }

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

@@ -14,7 +14,7 @@ import { AsyncModeProvider, useSelect } from '@wordpress/data';
 import { Appender } from './appender';
 import ListViewBlock from './block';
 import { useListViewContext } from './context';
-import { isClientIdSelected } from './utils';
+import { getDragDisplacementValues, isClientIdSelected } from './utils';
 import { store as blockEditorStore } from '../../store';
 import useBlockDisplayInformation from '../use-block-display-information';
 
@@ -91,7 +91,6 @@ function ListViewBranch( props ) {
 		selectedClientIds,
 		level = 1,
 		path = '',
-		isBranchDragged = false,
 		isBranchSelected = false,
 		listPosition = 0,
 		fixedListWindow,
@@ -115,7 +114,14 @@ function ListViewBranch( props ) {
 		[ parentId ]
 	);
 
-	const { expandedState, draggedClientIds } = useListViewContext();
+	const {
+		blockDropPosition,
+		blockDropTargetIndex,
+		firstDraggedBlockIndex,
+		blockIndexes,
+		expandedState,
+		draggedClientIds,
+	} = useListViewContext();
 
 	if ( ! canParentExpand ) {
 		return null;
@@ -143,6 +149,21 @@ function ListViewBranch( props ) {
 					);
 				}
 
+				const isDragged = !! draggedClientIds?.includes( clientId );
+
+				// Determine the displacement of the block while dragging. This
+				// works out whether the current block should be displaced up or
+				// down, relative to the dragged blocks and the drop target.
+				const { displacement, isAfterDraggedBlocks, isNesting } =
+					getDragDisplacementValues( {
+						blockIndexes,
+						blockDropTargetIndex,
+						blockDropPosition,
+						clientId,
+						firstDraggedBlockIndex,
+						isDragged,
+					} );
+
 				const { itemInView } = fixedListWindow;
 				const blockInView = itemInView( nextPosition );
 
@@ -158,8 +179,6 @@ function ListViewBranch( props ) {
 						? expandedState[ clientId ] ?? isExpanded
 						: undefined;
 
-				const isDragged = !! draggedClientIds?.includes( clientId );
-
 				// Make updates to the selected or dragged blocks synchronous,
 				// but asynchronous for any other block.
 				const isSelected = isClientIdSelected(
@@ -178,7 +197,6 @@ function ListViewBranch( props ) {
 				const showBlock =
 					isDragged ||
 					blockInView ||
-					isBranchDragged ||
 					( isSelected && clientId === selectedClientIds[ 0 ] );
 				return (
 					<AsyncModeProvider key={ clientId } value={ ! isSelected }>
@@ -188,17 +206,20 @@ function ListViewBranch( props ) {
 								selectBlock={ selectBlock }
 								isSelected={ isSelected }
 								isBranchSelected={ isSelectedBranch }
-								isDragged={ isDragged || isBranchDragged }
+								isDragged={ isDragged }
 								level={ level }
 								position={ position }
 								rowCount={ rowCount }
 								siblingBlockCount={ blockCount }
 								showBlockMovers={ showBlockMovers }
 								path={ updatedPath }
-								isExpanded={ shouldExpand }
+								isExpanded={ isDragged ? false : shouldExpand }
 								listPosition={ nextPosition }
 								selectedClientIds={ selectedClientIds }
 								isSyncedBranch={ syncedBranch }
+								displacement={ displacement }
+								isAfterDraggedBlocks={ isAfterDraggedBlocks }
+								isNesting={ isNesting }
 							/>
 						) }
 						{ ! showBlock && (
@@ -206,7 +227,7 @@ function ListViewBranch( props ) {
 								<td className="block-editor-list-view-placeholder" />
 							</tr>
 						) }
-						{ hasNestedBlocks && shouldExpand && (
+						{ hasNestedBlocks && shouldExpand && ! isDragged && (
 							<ListViewBranch
 								parentId={ clientId }
 								blocks={ innerBlocks }
@@ -217,7 +238,6 @@ 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

@@ -1,15 +1,40 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-import { Popover } from '@wordpress/components';
+import {
+	__experimentalHStack as HStack,
+	__experimentalTruncate as Truncate,
+	Popover,
+} from '@wordpress/components';
+
 import { getScrollContainer } from '@wordpress/dom';
 import { useCallback, useMemo } from '@wordpress/element';
 import { isRTL } from '@wordpress/i18n';
 
-export default function ListViewDropIndicator( {
+/**
+ * Internal dependencies
+ */
+import BlockIcon from '../block-icon';
+import useBlockDisplayInformation from '../use-block-display-information';
+import useBlockDisplayTitle from '../block-title/use-block-display-title';
+import ListViewExpander from './expander';
+
+export default function ListViewDropIndicatorPreview( {
+	draggedBlockClientId,
 	listViewRef,
 	blockDropTarget,
 } ) {
+	const blockInformation = useBlockDisplayInformation( draggedBlockClientId );
+	const blockTitle = useBlockDisplayTitle( {
+		clientId: draggedBlockClientId,
+		context: 'list-view',
+	} );
+
 	const { rootClientId, clientId, dropPosition } = blockDropTarget || {};
 
 	const [ rootBlockElement, blockElement ] = useMemo( () => {
@@ -35,7 +60,7 @@ export default function ListViewDropIndicator( {
 			: undefined;
 
 		return [ _rootBlockElement, _blockElement ];
-	}, [ rootClientId, clientId ] );
+	}, [ listViewRef, rootClientId, clientId ] );
 
 	// The targetElement is the element that the drop indicator will appear
 	// before or after. When dropping into an empty block list, blockElement
@@ -44,27 +69,6 @@ export default function ListViewDropIndicator( {
 
 	const rtl = isRTL();
 
-	const getDropIndicatorIndent = useCallback(
-		( targetElementRect ) => {
-			if ( ! rootBlockElement ) {
-				return 0;
-			}
-
-			// Calculate the indent using the block icon of the root block.
-			// Using a classname selector here might be flaky and could be
-			// improved.
-			const rootBlockIconElement = rootBlockElement.querySelector(
-				'.block-editor-block-icon'
-			);
-			const rootBlockIconRect =
-				rootBlockIconElement.getBoundingClientRect();
-			return rtl
-				? targetElementRect.right - rootBlockIconRect.left
-				: rootBlockIconRect.right - targetElementRect.left;
-		},
-		[ rootBlockElement, rtl ]
-	);
-
 	const getDropIndicatorWidth = useCallback(
 		( targetElementRect, indent ) => {
 			if ( ! targetElement ) {
@@ -143,12 +147,69 @@ export default function ListViewDropIndicator( {
 		}
 
 		const targetElementRect = targetElement.getBoundingClientRect();
-		const indent = getDropIndicatorIndent( targetElementRect );
 
 		return {
-			width: getDropIndicatorWidth( targetElementRect, indent ),
+			width: getDropIndicatorWidth( targetElementRect, 0 ),
 		};
-	}, [ getDropIndicatorIndent, getDropIndicatorWidth, targetElement ] );
+	}, [ getDropIndicatorWidth, targetElement ] );
+
+	const horizontalScrollOffsetStyle = useMemo( () => {
+		if ( ! targetElement ) {
+			return {};
+		}
+
+		const scrollContainer = getScrollContainer( targetElement );
+		const ownerDocument = targetElement.ownerDocument;
+		const windowScroll =
+			scrollContainer === ownerDocument.body ||
+			scrollContainer === ownerDocument.documentElement;
+
+		if ( scrollContainer && ! windowScroll ) {
+			const scrollContainerRect = scrollContainer.getBoundingClientRect();
+			const targetElementRect = targetElement.getBoundingClientRect();
+
+			const distanceBetweenContainerAndTarget = rtl
+				? scrollContainerRect.right - targetElementRect.right
+				: targetElementRect.left - scrollContainerRect.left;
+
+			if ( ! rtl && scrollContainerRect.left > targetElementRect.left ) {
+				return {
+					transform: `translateX( ${ distanceBetweenContainerAndTarget }px )`,
+				};
+			}
+
+			if ( rtl && scrollContainerRect.right < targetElementRect.right ) {
+				return {
+					transform: `translateX( ${
+						distanceBetweenContainerAndTarget * -1
+					}px )`,
+				};
+			}
+		}
+
+		return {};
+	}, [ rtl, targetElement ] );
+
+	const ariaLevel = useMemo( () => {
+		if ( ! rootBlockElement ) {
+			return 1;
+		}
+
+		const _ariaLevel = parseInt(
+			rootBlockElement.getAttribute( 'aria-level' ),
+			10
+		);
+
+		return _ariaLevel ? _ariaLevel + 1 : 1;
+	}, [ rootBlockElement ] );
+
+	const hasAdjacentSelectedBranch = useMemo( () => {
+		if ( ! targetElement ) {
+			return false;
+		}
+
+		return targetElement.classList.contains( 'is-branch-selected' );
+	}, [ targetElement ] );
 
 	const popoverAnchor = useMemo( () => {
 		const isValidDropPosition =
@@ -163,16 +224,15 @@ export default function ListViewDropIndicator( {
 			contextElement: targetElement,
 			getBoundingClientRect() {
 				const rect = targetElement.getBoundingClientRect();
-				const indent = getDropIndicatorIndent( rect );
 				// 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 left = rtl ? rect.left : rect.left + indent;
+				let left = rect.left;
 				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
@@ -212,27 +272,19 @@ export default function ListViewDropIndicator( {
 				}
 
 				if ( dropPosition === 'top' ) {
-					top = rect.top;
-					bottom = rect.top;
+					top = rect.top - rect.height * 2;
 				} else {
 					// `dropPosition` is either `bottom` or `inside`
-					top = rect.bottom;
-					bottom = rect.bottom;
+					top = rect.top;
 				}
 
-				const width = getDropIndicatorWidth( rect, indent );
-				const height = bottom - top;
+				const width = getDropIndicatorWidth( rect, 0 );
+				const height = rect.height;
 
 				return new window.DOMRect( left, top, width, height );
 			},
 		};
-	}, [
-		targetElement,
-		dropPosition,
-		getDropIndicatorIndent,
-		getDropIndicatorWidth,
-		rtl,
-	] );
+	}, [ targetElement, dropPosition, getDropIndicatorWidth, rtl ] );
 
 	if ( ! targetElement ) {
 		return null;
@@ -243,13 +295,54 @@ export default function ListViewDropIndicator( {
 			animate={ false }
 			anchor={ popoverAnchor }
 			focusOnMount={ false }
-			className="block-editor-list-view-drop-indicator"
+			className="block-editor-list-view-drop-indicator--preview"
 			variant="unstyled"
+			flip={ false }
+			resize={ true }
 		>
 			<div
 				style={ style }
-				className="block-editor-list-view-drop-indicator__line"
-			/>
+				className={ classnames(
+					'block-editor-list-view-drop-indicator__line',
+					{
+						'block-editor-list-view-drop-indicator__line--darker':
+							hasAdjacentSelectedBranch,
+					}
+				) }
+			>
+				<div
+					className="block-editor-list-view-leaf"
+					aria-level={ ariaLevel }
+				>
+					<div
+						className={ classnames(
+							'block-editor-list-view-block-select-button',
+							'block-editor-list-view-block-contents'
+						) }
+						style={ horizontalScrollOffsetStyle }
+					>
+						<ListViewExpander onClick={ () => {} } />
+						<BlockIcon
+							icon={ blockInformation?.icon }
+							showColors
+							context="list-view"
+						/>
+						<HStack
+							alignment="center"
+							className="block-editor-list-view-block-select-button__label-wrapper"
+							justify="flex-start"
+							spacing={ 1 }
+						>
+							<span className="block-editor-list-view-block-select-button__title">
+								<Truncate ellipsizeMode="auto">
+									{ blockTitle }
+								</Truncate>
+							</span>
+						</HStack>
+					</div>
+					<div className="block-editor-list-view-block__menu-cell"></div>
+				</div>
+			</div>
 		</Popover>
 	);
 }