Try grouping the two pieces of truncated text within the one parent

WordPress · Jul 29, 2022 · 9545679 · 9545679
1 parent 32cf057
commit 9545679
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 9 deletions.
diff --git a/packages/block-editor/src/components/list-view/block-select-button.js b/packages/block-editor/src/components/list-view/block-select-button.js
@@ -105,15 +105,19 @@ function ListViewBlockSelectButton(
 					spacing={ 1 }
 				>
 					<span className="block-editor-list-view-block-select-button__title">
-						<Truncate ellipsizeMode="auto">{ blockTitle }</Truncate>
-					</span>
-					{ !! partialContent && (
-						<span className="block-editor-list-view-block-select-button__partial-content">
+						<span className="block-editor-list-view-block-select-button__title__inner-wrapper">
 							<Truncate ellipsizeMode="auto">
-								{ partialContent }
+								{ blockTitle }
 							</Truncate>
+							{ !! partialContent && (
+								<span className="block-editor-list-view-block-select-button__partial-content">
+									<Truncate ellipsizeMode="auto">
+										{ partialContent }
+									</Truncate>
+								</span>
+							) }
 						</span>
-					) }
+					</span>
 					{ blockInformation?.anchor && (
 						<span className="block-editor-list-view-block-select-button__anchor">
 							{ blockInformation.anchor }

diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
@@ -301,12 +301,11 @@
 		min-width: 120px;
 	}
 
-	.block-editor-list-view-block-select-button__title,
-	.block-editor-list-view-block-select-button__partial-content {
+	.block-editor-list-view-block-select-button__title {
 		flex: 1;
 		position: relative;
 
-		.components-truncate {
+		.block-editor-list-view-block-select-button__title__inner-wrapper {
 			position: absolute;
 			width: 100%;
 			transform: translateY(-50%);