Improve consistency of block card and multi-selection card.

WordPress · Dec 6, 2024 · e186f05 · e186f05
1 parent 958be5e
commit e186f05
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 8 deletions.
diff --git a/packages/block-editor/src/components/block-card/style.scss b/packages/block-editor/src/components/block-card/style.scss
@@ -32,7 +32,7 @@
 	display: flex;
 	align-items: center;
 	gap: $grid-unit-05;
-	padding-top: $grid-unit-20;
+	padding-top: $grid-unit-10;
 
 	svg {
 		flex-shrink: 0;

diff --git a/packages/block-editor/src/components/multi-selection-inspector/index.js b/packages/block-editor/src/components/multi-selection-inspector/index.js
@@ -37,18 +37,18 @@ export default function MultiSelectionInspector() {
 		<HStack
 			justify="flex-start"
 			align="flex-start"
-			spacing={ 2 }
+			spacing={ 0 }
 			className="block-editor-multi-selection-inspector__card"
 		>
 			<BlockIcon icon={ copy } showColors />
 			<VStack spacing={ 1 }>
-				<p className="block-editor-multi-selection-inspector__card-title">
+				<h2 className="block-editor-multi-selection-inspector__card-title">
 					{ sprintf(
 						/* translators: %d: number of blocks */
 						_n( '%d Block', '%d Blocks', selectedBlockCount ),
 						selectedBlockCount
 					) }
-				</p>
+				</h2>
 				{ isUsingBindings && (
 					<Text
 						as="p"

diff --git a/packages/block-editor/src/components/multi-selection-inspector/style.scss b/packages/block-editor/src/components/multi-selection-inspector/style.scss
@@ -4,20 +4,28 @@
 
 .block-editor-multi-selection-inspector__card-title {
 	font-weight: 500;
+
+	&.block-editor-multi-selection-inspector__card-title {
+		font-size: $default-font-size;
+		line-height: $default-line-height;
+		margin: 0;
+		padding: 3px 0; // This makes the title as high as the icon.
+	}
 }
 
 .block-editor-multi-selection-inspector__card .block-editor-block-icon {
-	margin-left: -2px;
-	padding: 0 3px;
-	width: $button-size;
+	flex: 0 0 $button-size-small;
+	margin-left: 0;
+	margin-right: $grid-unit-15;
+	width: $button-size-small;
 	height: $button-size-small;
 }
 
 .block-editor-multi-selection-inspector__connected-block-description {
 	display: flex;
 	align-items: center;
 	gap: $grid-unit-05;
-	padding-top: $grid-unit-20;
+	padding-top: $grid-unit-10;
 
 	svg {
 		flex-shrink: 0;