Adjust the icons and text of the binding connected blocks

packages/block-editor/src/components/block-bindings-toolbar-indicator/index.js

@@ -1,19 +1,134 @@
 /**
  * WordPress dependencies
  */
-import { ToolbarItem, ToolbarGroup, Icon } from '@wordpress/components';
-import { connection } from '@wordpress/icons';
-import { _x } from '@wordpress/i18n';
+import { useId } from '@wordpress/element';
+import { __, sprintf, _x } from '@wordpress/i18n';
+import {
+	DropdownMenu,
+	ToolbarGroup,
+	ToolbarItem,
+	__experimentalText as Text,
+} from '@wordpress/components';
+import { store as blocksStore } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
+import { copy } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import BlockIcon from '../block-icon';
+import useBlockDisplayTitle from '../block-title/use-block-display-title';
+
+export default function BlockBindingsToolbarIndicator( { clientIds } ) {
+	const isSingleBlockSelected = clientIds.length === 1;
+	const { icon, firstBlockName, isConnectedToPatternOverrides } = useSelect(
+		( select ) => {
+			const {
+				getBlockAttributes,
+				getBlockNamesByClientId,
+				getBlocksByClientId,
+			} = select( blockEditorStore );
+			const { getBlockType, getActiveBlockVariation } =
+				select( blocksStore );
+			const blockTypeNames = getBlockNamesByClientId( clientIds );
+			const _firstBlockTypeName = blockTypeNames[ 0 ];
+			const firstBlockType = getBlockType( _firstBlockTypeName );
+			let _icon;
+			if ( isSingleBlockSelected ) {
+				const match = getActiveBlockVariation(
+					_firstBlockTypeName,
+					getBlockAttributes( clientIds[ 0 ] )
+				);
+				// Take into account active block variations.
+				_icon = match?.icon || firstBlockType.icon;
+			} else {
+				const isSelectionOfSameType =
+					new Set( blockTypeNames ).size === 1;
+				// When selection consists of blocks of multiple types, display an
+				// appropriate icon to communicate the non-uniformity.
+				_icon = isSelectionOfSameType ? firstBlockType.icon : copy;
+			}
+
+			return {
+				icon: _icon,
+				firstBlockName: getBlockAttributes( clientIds[ 0 ] ).metadata
+					.name,
+				isConnectedToPatternOverrides: getBlocksByClientId(
+					clientIds
+				).some( ( block ) =>
+					Object.values( block?.attributes.metadata?.bindings ).some(
+						( binding ) =>
+							binding.source === 'core/pattern-overrides'
+					)
+				),
+			};
+		},
+		[ clientIds, isSingleBlockSelected ]
+	);
+	const firstBlockTitle = useBlockDisplayTitle( {
+		clientId: clientIds[ 0 ],
+		maximumLength: 35,
+	} );
+
+	let blockDescription = isSingleBlockSelected
+		? _x(
+				'This block is connected.',
+				'block toolbar button label and description'
+		  )
+		: _x(
+				'These blocks are connected.',
+				'block toolbar button label and description'
+		  );
+	if ( isConnectedToPatternOverrides && firstBlockName ) {
+		blockDescription = isSingleBlockSelected
+			? sprintf(
+					/* translators: %1s: The block type's name; %2s: The block's user-provided name (the same as the override name). */
+					__( 'This %1$s is editable using the "%2$s" override.' ),
+					firstBlockTitle.toLowerCase(),
+					firstBlockName
+			  )
+			: __( 'These blocks are editable using overrides.' );
+	}
+	const descriptionId = useId();
 
-export default function BlockBindingsToolbarIndicator() {
 	return (
 		<ToolbarGroup>
-			<ToolbarItem
-				as="div"
-				aria-label={ _x( 'Connected', 'block toolbar button label' ) }
-				className="block-editor-block-bindings-toolbar-indicator"
-			>
-				<Icon icon={ connection } size={ 24 } />
+			<ToolbarItem>
+				{ ( toggleProps ) => (
+					<DropdownMenu
+						className="block-editor-block-bindings-toolbar-indicator"
+						label={ firstBlockTitle }
+						popoverProps={ {
+							placement: 'bottom-start',
+							className:
+								'block-editor-block-bindings-toolbar-indicator__popover',
+						} }
+						icon={
+							<>
+								<BlockIcon
+									icon={ icon }
+									className="block-editor-block-bindings-toolbar-indicator-icon"
+									showColors
+								/>
+							</>
+						}
+						toggleProps={ {
+							describedBy: blockDescription,
+							...toggleProps,
+						} }
+						menuProps={ {
+							orientation: 'both',
+							'aria-describedby': descriptionId,
+						} }
+					>
+						{ () => (
+							<Text id={ descriptionId }>
+								{ blockDescription }
+							</Text>
+						) }
+					</DropdownMenu>
+				) }
 			</ToolbarItem>
 		</ToolbarGroup>
 	);

packages/block-editor/src/components/block-bindings-toolbar-indicator/style.scss

@@ -1,11 +1,10 @@
-.block-editor-block-bindings-toolbar-indicator {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	padding: 6px;
-	svg {
-		fill: var(--wp-block-synced-color);
-	}
+.block-editor-block-bindings-toolbar-indicator__popover .components-popover__content {
+	min-width: 260px;
+	padding: $grid-unit-20;
+}
+
+.block-editor-block-bindings-toolbar-indicator .block-editor-block-bindings-toolbar-indicator-icon.has-colors svg {
+	fill: var(--wp-block-synced-color);
 }
 
 .editor-collapsible-block-toolbar .block-editor-block-bindings-toolbar-indicator {

packages/block-editor/src/components/block-toolbar/index.js

@@ -168,7 +168,7 @@ export function PrivateBlockToolbar( {
 					isLargeViewport &&
 					isDefaultEditingMode && <BlockParentSelector /> }
 				{ isUsingBindings && canBindBlock( blockName ) && (
-					<BlockBindingsIndicator />
+					<BlockBindingsIndicator clientIds={ blockClientIds } />
 				) }
 				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
 					( isDefaultEditingMode || isSynced ) && (