Initial styling for the block connected info.

WordPress · Dec 5, 2024 · d4f15dd · d4f15dd
1 parent ab449ed
commit d4f15dd
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 11 deletions.
diff --git a/packages/block-editor/src/components/block-card/index.js b/packages/block-editor/src/components/block-card/index.js
@@ -12,7 +12,7 @@ import {
 	__experimentalText as Text,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
-import { chevronLeft, chevronRight } from '@wordpress/icons';
+import { Icon, chevronLeft, chevronRight, connection } from '@wordpress/icons';
 import { __, _x, isRTL, sprintf } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 
@@ -98,9 +98,10 @@ function BlockCard( { title, icon, description, blockType, className, name } ) {
 				{ isUsingBindings && (
 					<Text
 						as="p"
-						className="block-editor-block-card__description"
+						className="block-editor-block-card__connected-block-description"
 					>
-						{ __( 'This blocks is connected.' ) }
+						<Icon icon={ connection } />
+						{ __( 'This block is connected.' ) }
 					</Text>
 				) }
 			</VStack>

diff --git a/packages/block-editor/src/components/block-card/style.scss b/packages/block-editor/src/components/block-card/style.scss
@@ -27,3 +27,15 @@
 .block-editor-block-card.is-synced .block-editor-block-icon {
 	color: var(--wp-block-synced-color);
 }
+
+.block-editor-block-card__connected-block-description {
+	display: flex;
+	align-items: center;
+	gap: $grid-unit-05;
+	padding-top: $grid-unit-20;
+
+	svg {
+		flex-shrink: 0;
+		fill: var(--wp-block-synced-color);
+	}
+}
diff --git a/packages/block-editor/src/components/multi-selection-inspector/index.js b/packages/block-editor/src/components/multi-selection-inspector/index.js
@@ -5,7 +5,7 @@ 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 { Icon, connection, copy } from '@wordpress/icons';
 import { __experimentalText as Text } from '@wordpress/components';
 
 /**
@@ -45,18 +45,19 @@ export default function MultiSelectionInspector() {
 						blocks.length
 					) }
 				</p>
-				<p className="block-editor-multi-selection-inspector__card-description">
+				<Text as="p">
 					{ sprintf(
 						/* translators: %d: number of words */
 						_n( '%d word selected.', '%d words selected.', words ),
 						words
 					) }
-				</p>
+				</Text>
 				{ isUsingBindings && (
 					<Text
 						as="p"
-						className="block-editor-multi-selection-inspector__card-description"
+						className="block-editor-multi-selection-inspector__connected-block-description"
 					>
+						<Icon icon={ connection } />
 						{ __( 'These blocks are connected.' ) }
 					</Text>
 				) }

diff --git a/packages/block-editor/src/components/multi-selection-inspector/style.scss b/packages/block-editor/src/components/multi-selection-inspector/style.scss
@@ -13,14 +13,22 @@
 	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;
 }
+
+.block-editor-multi-selection-inspector__connected-block-description {
+	display: flex;
+	align-items: center;
+	gap: $grid-unit-05;
+	padding-top: $grid-unit-20;
+
+	svg {
+		flex-shrink: 0;
+		fill: var(--wp-block-synced-color);
+	}
+}