From c164e9c04d73c951820fef80ab6bd43bc2aede2e Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Fri, 8 Apr 2022 13:29:43 +1000
Subject: [PATCH] List View: Only show ellipsis on first selected item or when
 focused

---
 .../src/components/list-view/block.js         |  9 +++-
 .../src/components/list-view/style.scss       | 48 +++++++++++++------
 2 files changed, 41 insertions(+), 16 deletions(-)

diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js
index 71a1c42638157d..28a4cbf44b820b 100644
--- a/packages/block-editor/src/components/list-view/block.js
+++ b/packages/block-editor/src/components/list-view/block.js
@@ -56,6 +56,11 @@ function ListViewBlock( {
 	const cellRef = useRef( null );
 	const [ isHovered, setIsHovered ] = useState( false );
 	const { clientId } = block;
+	const isFirstSelectedBlock =
+		isSelected && selectedClientIds[ 0 ] === clientId;
+	const isLastSelectedBlock =
+		isSelected &&
+		selectedClientIds[ selectedClientIds.length - 1 ] === clientId;
 
 	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
 
@@ -102,7 +107,7 @@ function ListViewBlock( {
 
 	const listViewBlockSettingsClassName = classnames(
 		'block-editor-list-view-block__menu-cell',
-		{ 'is-visible': isHovered || isSelected }
+		{ 'is-visible': isHovered || isFirstSelectedBlock }
 	);
 
 	// If ListView has experimental features related to the Persistent List View,
@@ -177,6 +182,8 @@ function ListViewBlock( {
 
 	const classes = classnames( {
 		'is-selected': isSelected,
+		'is-first-selected': isFirstSelectedBlock,
+		'is-last-selected': isLastSelectedBlock,
 		'is-branch-selected':
 			withExperimentalPersistentListViewFeatures && isBranchSelected,
 		'is-dragging': isDragged,
diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
index 318a71f8b92e81..a7f17303336307 100644
--- a/packages/block-editor/src/components/list-view/style.scss
+++ b/packages/block-editor/src/components/list-view/style.scss
@@ -46,11 +46,17 @@
 	}
 
 	// Border radius for corners of the selected item.
-	&.is-selected td:first-child {
-		border-radius: $radius-block-ui 0 0 $radius-block-ui;
+	&.is-first-selected td:first-child {
+		border-top-left-radius: $radius-block-ui;
 	}
-	&.is-selected td:last-child {
-		border-radius: 0 $radius-block-ui $radius-block-ui 0;
+	&.is-first-selected td:last-child {
+		border-top-right-radius: $radius-block-ui;
+	}
+	&.is-last-selected td:first-child {
+		border-bottom-left-radius: $radius-block-ui;
+	}
+	&.is-last-selected td:last-child {
+		border-bottom-right-radius: $radius-block-ui;
 	}
 	&.is-branch-selected:not(.is-selected) {
 		// Lighten a CSS variable without introducing a new SASS variable
@@ -58,18 +64,24 @@
 			linear-gradient(transparentize($white, 0.1), transparentize($white, 0.1)),
 			linear-gradient(var(--wp-admin-theme-color), var(--wp-admin-theme-color));
 	}
-	&.is-branch-selected.is-selected td:first-child {
-		border-radius: $radius-block-ui 0 0 0;
+	&.is-branch-selected.is-first-selected td:first-child {
+		border-top-left-radius: $radius-block-ui;
 	}
-	&.is-branch-selected.is-selected td:last-child {
-		border-radius: 0 $radius-block-ui 0 0;
+	&.is-branch-selected.is-first-selected td:last-child {
+		border-top-right-radius: $radius-block-ui;
 	}
 	&[aria-expanded="false"] {
-		&.is-branch-selected.is-selected td:first-child {
-			border-radius: $radius-block-ui 0 0 $radius-block-ui;
+		&.is-branch-selected.is-first-selected td:first-child {
+			border-top-left-radius: $radius-block-ui;
+		}
+		&.is-branch-selected.is-first-selected td:last-child {
+			border-top-right-radius: $radius-block-ui;
+		}
+		&.is-branch-selected.is-last-selected td:first-child {
+			border-bottom-left-radius: $radius-block-ui;
 		}
-		&.is-branch-selected.is-selected td:last-child {
-			border-radius: 0 $radius-block-ui $radius-block-ui 0;
+		&.is-branch-selected.is-last-selected td:last-child {
+			border-bottom-right-radius: $radius-block-ui;
 		}
 	}
 	&.is-branch-selected:not(.is-selected) td {
@@ -167,17 +179,23 @@
 	.block-editor-list-view-block__mover-cell {
 		line-height: 0;
 		width: $button-size;
-		opacity: 0;
 		vertical-align: middle;
 		@include reduce-motion("transition");
 
+		> * {
+			opacity: 0;
+		}
+
 		// Show on hover, visible, and show above to keep the hit area size.
 		&:hover,
 		&.is-visible {
 			position: relative;
 			z-index: 1;
-			opacity: 1;
-			@include edit-post__fade-in-animation;
+
+			> * {
+				opacity: 1;
+				@include edit-post__fade-in-animation;
+			}
 		}
 
 		&,