Remove words count in the multi-selection inspector (#67624)

Co-authored-by: ntsekouras <[email protected]> Co-authored-by: Mamaduka <[email protected]> Co-authored-by: jasmussen <[email protected]> Co-authored-by: t-hamano <[email protected]> Co-authored-by: afercia <[email protected]>
WordPress · Dec 5, 2024 · 03ab05e · 03ab05e
1 parent 6be0083
commit 03ab05e
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 39 deletions.
diff --git a/packages/block-editor/src/components/multi-selection-inspector/index.js b/packages/block-editor/src/components/multi-selection-inspector/index.js
@@ -3,9 +3,8 @@
  */
 import { sprintf, _n } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
-import { serialize } from '@wordpress/blocks';
-import { count as wordCount } from '@wordpress/wordcount';
 import { copy } from '@wordpress/icons';
+import { __experimentalHStack as HStack } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -14,33 +13,24 @@ import BlockIcon from '../block-icon';
 import { store as blockEditorStore } from '../../store';
 
 export default function MultiSelectionInspector() {
-	const { blocks } = useSelect( ( select ) => {
-		const { getMultiSelectedBlocks } = select( blockEditorStore );
-		return {
-			blocks: getMultiSelectedBlocks(),
-		};
-	}, [] );
-	const words = wordCount( serialize( blocks ), 'words' );
-
+	const selectedBlockCount = useSelect(
+		( select ) => select( blockEditorStore ).getSelectedBlockCount(),
+		[]
+	);
 	return (
-		<div className="block-editor-multi-selection-inspector__card">
+		<HStack
+			justify="flex-start"
+			spacing={ 2 }
+			className="block-editor-multi-selection-inspector__card"
+		>
 			<BlockIcon icon={ copy } showColors />
-			<div className="block-editor-multi-selection-inspector__card-content">
-				<div className="block-editor-multi-selection-inspector__card-title">
-					{ sprintf(
-						/* translators: %d: number of blocks */
-						_n( '%d Block', '%d Blocks', blocks.length ),
-						blocks.length
-					) }
-				</div>
-				<div className="block-editor-multi-selection-inspector__card-description">
-					{ sprintf(
-						/* translators: %d: number of words */
-						_n( '%d word selected.', '%d words selected.', words ),
-						words
-					) }
-				</div>
+			<div className="block-editor-multi-selection-inspector__card-title">
+				{ sprintf(
+					/* translators: %d: number of blocks */
+					_n( '%d Block', '%d Blocks', selectedBlockCount ),
+					selectedBlockCount
+				) }
 			</div>
-		</div>
+		</HStack>
 	);
 }
diff --git a/packages/block-editor/src/components/multi-selection-inspector/style.scss b/packages/block-editor/src/components/multi-selection-inspector/style.scss
@@ -1,25 +1,13 @@
 .block-editor-multi-selection-inspector__card {
-	display: flex;
-	align-items: flex-start;
 	padding: $grid-unit-20;
 }
 
-.block-editor-multi-selection-inspector__card-content {
-	flex-grow: 1;
-}
-
 .block-editor-multi-selection-inspector__card-title {
 	font-weight: 500;
-	margin-bottom: 5px;
-}
-
-.block-editor-multi-selection-inspector__card-description {
-	font-size: $default-font-size;
 }
 
 .block-editor-multi-selection-inspector__card .block-editor-block-icon {
 	margin-left: -2px;
-	margin-right: 10px;
 	padding: 0 3px;
 	width: $button-size;
 	height: $button-size-small;