diff --git a/packages/block-editor/src/components/block-card/index.js b/packages/block-editor/src/components/block-card/index.js index 0659b2a17851b6..2e248c614066f9 100644 --- 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 && ( - { __( 'This blocks is connected.' ) } + + { __( 'This block is connected.' ) } ) } diff --git a/packages/block-editor/src/components/block-card/style.scss b/packages/block-editor/src/components/block-card/style.scss index 42cf77aa4b0a84..3d26f000dcab0d 100644 --- 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 index 5b8a41aba480c8..6117bd0198a189 100644 --- 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 ) }

-

+ { sprintf( /* translators: %d: number of words */ _n( '%d word selected.', '%d words selected.', words ), words ) } -

+ { isUsingBindings && ( + { __( 'These blocks are connected.' ) } ) } diff --git a/packages/block-editor/src/components/multi-selection-inspector/style.scss b/packages/block-editor/src/components/multi-selection-inspector/style.scss index 61bf5f8cdb3820..c67851a8c2cc94 100644 --- a/packages/block-editor/src/components/multi-selection-inspector/style.scss +++ b/packages/block-editor/src/components/multi-selection-inspector/style.scss @@ -13,10 +13,6 @@ 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; @@ -24,3 +20,15 @@ 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); + } +}