Add block binding toolbar button if block is connected to a source

packages/block-editor/src/hooks/use-bindings-attributes.js

@@ -41,6 +41,8 @@ const createEditFunctionWithBindingsAttribute = () =>
 			).getAllBlockBindingsSources();
 			const { getBlockAttributes } = useSelect( blockEditorStore );
 
+			let hasSource = false;
+
 			const updatedAttributes = getBlockAttributes( clientId );
 			if ( updatedAttributes?.metadata?.bindings ) {
 				Object.entries( updatedAttributes.metadata.bindings ).forEach(
@@ -74,27 +76,37 @@ const createEditFunctionWithBindingsAttribute = () =>
 
 							if ( metaValue ) {
 								updatedAttributes[ attributeName ] = metaValue;
+								hasSource = true;
 							}
 						}
 					}
 				);
 			}
 
 			return (
-				<>
-					<BlockControls group="first">
-						<ToolbarButton
-							icon={ connection }
-							label="Block bindings"
-							iconSize={ 24 }
-						></ToolbarButton>
-					</BlockControls>
+				// TODO: only set this if the block is connected to a source.
+				// this might not be a good way to do it if a block can have child
+				// blocks that are NOT connected to a source.
+				<div
+					style={
+						hasSource ? { '--wp-admin-theme-color': '#9747FF' } : {}
+					}
+				>
+					{ hasSource ? (
+						<BlockControls group="first">
+							<ToolbarButton
+								icon={ connection }
+								label="Block bindings"
+								iconSize={ 24 }
+							></ToolbarButton>
+						</BlockControls>
+					) : null }
 					<BlockEdit
 						key="edit"
 						{ ...props }
 						attributes={ updatedAttributes }
 					/>
-				</>
+				</div>
 			);
 		},
 		'useBoundAttributes'

packages/icons/src/library/connection.js

@@ -10,8 +10,8 @@ const connection = (
 		viewBox="0 0 24 24"
 		xmlns="http://www.w3.org/2000/svg"
 	>
-		<Path d="M5 19L8 16L5 19Z" fill="#911BEE" />
-		<Path d="M16 8L19 5L16 8Z" fill="#911BEE" />
+		<Path d="M5 19L8 16L5 19Z" fill="#9747FF" />
+		<Path d="M16 8L19 5L16 8Z" fill="#9747FF" />
 		<G
 			stroke-width="1.5"
 			stroke-linecap="round"