From 6bcef6676b59b8cfe0766f309ca38c167b603458 Mon Sep 17 00:00:00 2001
From: Michal Czaplinski <mmczaplinski@gmail.com>
Date: Mon, 19 Feb 2024 13:24:05 +0000
Subject: [PATCH 01/18] Add BlockControlsFirst slot to block controls groups

---
 .../src/components/block-controls/groups.js   |  2 ++
 .../src/components/block-toolbar/index.js     |  5 +++++
 .../src/hooks/use-bindings-attributes.js      | 21 ++++++++++++++-----
 3 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/packages/block-editor/src/components/block-controls/groups.js b/packages/block-editor/src/components/block-controls/groups.js
index 9b9dfec8d8d450..cbd3264a3cad42 100644
--- a/packages/block-editor/src/components/block-controls/groups.js
+++ b/packages/block-editor/src/components/block-controls/groups.js
@@ -8,6 +8,7 @@ const BlockControlsBlock = createSlotFill( 'BlockControlsBlock' );
 const BlockControlsInline = createSlotFill( 'BlockFormatControls' );
 const BlockControlsOther = createSlotFill( 'BlockControlsOther' );
 const BlockControlsParent = createSlotFill( 'BlockControlsParent' );
+const BlockControlsFirst = createSlotFill( 'BlockControlsFirst' );
 
 const groups = {
 	default: BlockControlsDefault,
@@ -15,6 +16,7 @@ const groups = {
 	inline: BlockControlsInline,
 	other: BlockControlsOther,
 	parent: BlockControlsParent,
+	first: BlockControlsFirst,
 };
 
 export default groups;
diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js
index 140532de15b768..61a8d257f9d408 100644
--- a/packages/block-editor/src/components/block-toolbar/index.js
+++ b/packages/block-editor/src/components/block-toolbar/index.js
@@ -166,6 +166,11 @@ export function PrivateBlockToolbar( {
 				{ ! isMultiToolbar &&
 					isLargeViewport &&
 					isDefaultEditingMode && <BlockParentSelector /> }
+				<BlockControls.Slot
+					// TODO: Rename "first" to something more meaningful.
+					group="first"
+					className="block-editor-block-toolbar__slot"
+				/>
 				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
 					isDefaultEditingMode && (
 						<div
diff --git a/packages/block-editor/src/hooks/use-bindings-attributes.js b/packages/block-editor/src/hooks/use-bindings-attributes.js
index 0e5b6614f07cbf..1a1f2f440639bb 100644
--- a/packages/block-editor/src/hooks/use-bindings-attributes.js
+++ b/packages/block-editor/src/hooks/use-bindings-attributes.js
@@ -5,12 +5,18 @@ import { getBlockType, store as blocksStore } from '@wordpress/blocks';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { addFilter } from '@wordpress/hooks';
+/**
+ * Internal dependencies
+ */
+import { BlockControls } from '../components';
+
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../store';
 import { useBlockEditContext } from '../components/block-edit/context';
 import { unlock } from '../lock-unlock';
+import { ToolbarButton } from '@wordpress/components';
 
 /** @typedef {import('@wordpress/compose').WPHigherOrderComponent} WPHigherOrderComponent */
 /** @typedef {import('@wordpress/blocks').WPBlockSettings} WPBlockSettings */
@@ -78,11 +84,16 @@ const createEditFunctionWithBindingsAttribute = () =>
 			}
 
 			return (
-				<BlockEdit
-					key="edit"
-					{ ...props }
-					attributes={ updatedAttributes }
-				/>
+				<>
+					<BlockControls group="first">
+						<ToolbarButton icon="admin-plugins" color="purple" />
+					</BlockControls>
+					<BlockEdit
+						key="edit"
+						{ ...props }
+						attributes={ updatedAttributes }
+					/>
+				</>
 			);
 		},
 		'useBoundAttributes'

From 3d6fe729f46494a95b32d8661d63c5b8fc956fa0 Mon Sep 17 00:00:00 2001
From: Michal Czaplinski <mmczaplinski@gmail.com>
Date: Mon, 19 Feb 2024 18:06:39 +0000
Subject: [PATCH 02/18] Add connection icon to BlockControls toolbar button

---
 .../src/hooks/use-bindings-attributes.js      | 13 ++++---
 packages/icons/src/index.js                   |  1 +
 packages/icons/src/library/connection.js      | 37 +++++++++++++++++++
 3 files changed, 45 insertions(+), 6 deletions(-)
 create mode 100644 packages/icons/src/library/connection.js

diff --git a/packages/block-editor/src/hooks/use-bindings-attributes.js b/packages/block-editor/src/hooks/use-bindings-attributes.js
index 1a1f2f440639bb..6f8ca25f7f5e63 100644
--- a/packages/block-editor/src/hooks/use-bindings-attributes.js
+++ b/packages/block-editor/src/hooks/use-bindings-attributes.js
@@ -5,18 +5,15 @@ import { getBlockType, store as blocksStore } from '@wordpress/blocks';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { addFilter } from '@wordpress/hooks';
+import { ToolbarButton } from '@wordpress/components';
+import { connection } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
 import { BlockControls } from '../components';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../store';
 import { useBlockEditContext } from '../components/block-edit/context';
 import { unlock } from '../lock-unlock';
-import { ToolbarButton } from '@wordpress/components';
 
 /** @typedef {import('@wordpress/compose').WPHigherOrderComponent} WPHigherOrderComponent */
 /** @typedef {import('@wordpress/blocks').WPBlockSettings} WPBlockSettings */
@@ -86,7 +83,11 @@ const createEditFunctionWithBindingsAttribute = () =>
 			return (
 				<>
 					<BlockControls group="first">
-						<ToolbarButton icon="admin-plugins" color="purple" />
+						<ToolbarButton
+							icon={ connection }
+							label="Block bindings"
+							iconSize={ 24 }
+						></ToolbarButton>
 					</BlockControls>
 					<BlockEdit
 						key="edit"
diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js
index 1d3c8c24c5cfd9..788fc0152ba1de 100644
--- a/packages/icons/src/index.js
+++ b/packages/icons/src/index.js
@@ -59,6 +59,7 @@ export { default as commentAuthorName } from './library/comment-author-name';
 export { default as commentContent } from './library/comment-content';
 export { default as commentReplyLink } from './library/comment-reply-link';
 export { default as commentEditLink } from './library/comment-edit-link';
+export { default as connection } from './library/connection';
 export { default as cover } from './library/cover';
 export { default as create } from './library/create';
 export { default as crop } from './library/crop';
diff --git a/packages/icons/src/library/connection.js b/packages/icons/src/library/connection.js
new file mode 100644
index 00000000000000..f7295f80b977ff
--- /dev/null
+++ b/packages/icons/src/library/connection.js
@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path, G } from '@wordpress/primitives';
+
+const connection = (
+	<SVG
+		width="24"
+		height="24"
+		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" />
+		<G
+			stroke-width="1.5"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke="#9747FF"
+		>
+			<Path d="M5 19L8 16" />
+			<Path
+				d="M9.30003 17.3C9.523 17.5237 9.78794 17.7013 10.0797 17.8224C10.3714 17.9435 10.6842 18.0059 11 18.0059C11.3159 18.0059 11.6287 17.9435 11.9204 17.8224C12.2121 17.7013 12.4771 17.5237 12.7 17.3L15 15L9.00003 9L6.70003 11.3C6.47629 11.523 6.29876 11.7879 6.17763 12.0796C6.05649 12.3714 5.99414 12.6841 5.99414 13C5.99414 13.3159 6.05649 13.6286 6.17763 13.9204C6.29876 14.2121 6.47629 14.477 6.70003 14.7L9.30003 17.3Z"
+				fill="white"
+			/>
+			<Path d="M10.5 10.5L13 8" />
+			<Path d="M13.5 13.5L16 11" />
+			<Path d="M16 8L19 5" />
+			<Path
+				d="M9 9.00003L15 15L17.3 12.7C17.5237 12.4771 17.7013 12.2121 17.8224 11.9204C17.9435 11.6287 18.0059 11.3159 18.0059 11C18.0059 10.6842 17.9435 10.3714 17.8224 10.0797C17.7013 9.78794 17.5237 9.523 17.3 9.30003L14.7 6.70003C14.477 6.47629 14.2121 6.29876 13.9204 6.17763C13.6286 6.05649 13.3159 5.99414 13 5.99414C12.6841 5.99414 12.3714 6.05649 12.0796 6.17763C11.7879 6.29876 11.523 6.47629 11.3 6.70003L9 9.00003Z"
+				fill="white"
+			/>
+		</G>
+	</SVG>
+);
+
+export default connection;

From 385b13cb41d6c50bc3624d5f489c6753bfcceac1 Mon Sep 17 00:00:00 2001
From: Michal Czaplinski <mmczaplinski@gmail.com>
Date: Mon, 19 Feb 2024 19:59:41 +0000
Subject: [PATCH 03/18] Add block binding toolbar button if block is connected
 to a source

---
 .../src/hooks/use-bindings-attributes.js      | 30 +++++++++++++------
 packages/icons/src/library/connection.js      |  4 +--
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/packages/block-editor/src/hooks/use-bindings-attributes.js b/packages/block-editor/src/hooks/use-bindings-attributes.js
index 6f8ca25f7f5e63..7bc980242ee4f1 100644
--- a/packages/block-editor/src/hooks/use-bindings-attributes.js
+++ b/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,6 +76,7 @@ const createEditFunctionWithBindingsAttribute = () =>
 
 							if ( metaValue ) {
 								updatedAttributes[ attributeName ] = metaValue;
+								hasSource = true;
 							}
 						}
 					}
@@ -81,20 +84,29 @@ const createEditFunctionWithBindingsAttribute = () =>
 			}
 
 			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'
diff --git a/packages/icons/src/library/connection.js b/packages/icons/src/library/connection.js
index f7295f80b977ff..8ede0a17ff3f64 100644
--- a/packages/icons/src/library/connection.js
+++ b/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"

From 44b1c72bd57357f8a25f46b0b323e30bddf6a97e Mon Sep 17 00:00:00 2001
From: Michal Czaplinski <mmczaplinski@gmail.com>
Date: Wed, 21 Feb 2024 16:23:31 +0000
Subject: [PATCH 04/18] Add i18n support for block toolbar button label

---
 packages/block-editor/src/hooks/use-bindings-attributes.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/hooks/use-bindings-attributes.js b/packages/block-editor/src/hooks/use-bindings-attributes.js
index 7bc980242ee4f1..290821d9288438 100644
--- a/packages/block-editor/src/hooks/use-bindings-attributes.js
+++ b/packages/block-editor/src/hooks/use-bindings-attributes.js
@@ -7,6 +7,7 @@ import { useSelect } from '@wordpress/data';
 import { addFilter } from '@wordpress/hooks';
 import { ToolbarButton } from '@wordpress/components';
 import { connection } from '@wordpress/icons';
+import { _x } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
@@ -96,7 +97,11 @@ const createEditFunctionWithBindingsAttribute = () =>
 						<BlockControls group="first">
 							<ToolbarButton
 								icon={ connection }
-								label="Block bindings"
+								label={ _x(
+									// TODO: Let's get this naming right
+									'Connected to a block bindings source',
+									'block toolbar button label'
+								) }
 								iconSize={ 24 }
 							></ToolbarButton>
 						</BlockControls>

From 91c78a4475e63ffa724cc1b12ec947fa72cb14ff Mon Sep 17 00:00:00 2001
From: Michal Czaplinski <mmczaplinski@gmail.com>
Date: Wed, 21 Feb 2024 18:59:44 +0000
Subject: [PATCH 05/18] Add BlockBindingsButton component and remove
 BlockControlsFirst group

---
 .../components/block-bindings-button/index.js | 36 +++++++++++++++++++
 .../src/components/block-controls/groups.js   |  2 --
 .../src/components/block-toolbar/index.js     |  7 ++--
 .../src/hooks/use-bindings-attributes.js      | 17 ---------
 packages/icons/src/library/connection.js      |  6 ++--
 5 files changed, 41 insertions(+), 27 deletions(-)
 create mode 100644 packages/block-editor/src/components/block-bindings-button/index.js

diff --git a/packages/block-editor/src/components/block-bindings-button/index.js b/packages/block-editor/src/components/block-bindings-button/index.js
new file mode 100644
index 00000000000000..d5292bfbe48999
--- /dev/null
+++ b/packages/block-editor/src/components/block-bindings-button/index.js
@@ -0,0 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import { ToolbarButton } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { connection } from '@wordpress/icons';
+import { _x } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+export default function BlockBindingsButton( { clientId } ) {
+	const { blockAttributes } = useSelect(
+		( select ) => {
+			const { getBlockAttributes } = select( blockEditorStore );
+			return {
+				blockAttributes: getBlockAttributes( clientId ),
+			};
+		},
+		[ clientId ]
+	);
+
+	return blockAttributes?.metadata?.bindings ? (
+		<ToolbarButton
+			icon={ connection }
+			label={ _x(
+				// TODO: Let's get this naming right
+				'Connected to a block bindings source',
+				'block toolbar button label'
+			) }
+			iconSize={ 24 }
+		></ToolbarButton>
+	) : null;
+}
diff --git a/packages/block-editor/src/components/block-controls/groups.js b/packages/block-editor/src/components/block-controls/groups.js
index cbd3264a3cad42..9b9dfec8d8d450 100644
--- a/packages/block-editor/src/components/block-controls/groups.js
+++ b/packages/block-editor/src/components/block-controls/groups.js
@@ -8,7 +8,6 @@ const BlockControlsBlock = createSlotFill( 'BlockControlsBlock' );
 const BlockControlsInline = createSlotFill( 'BlockFormatControls' );
 const BlockControlsOther = createSlotFill( 'BlockControlsOther' );
 const BlockControlsParent = createSlotFill( 'BlockControlsParent' );
-const BlockControlsFirst = createSlotFill( 'BlockControlsFirst' );
 
 const groups = {
 	default: BlockControlsDefault,
@@ -16,7 +15,6 @@ const groups = {
 	inline: BlockControlsInline,
 	other: BlockControlsOther,
 	parent: BlockControlsParent,
-	first: BlockControlsFirst,
 };
 
 export default groups;
diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js
index 61a8d257f9d408..42ff2beab8005a 100644
--- a/packages/block-editor/src/components/block-toolbar/index.js
+++ b/packages/block-editor/src/components/block-toolbar/index.js
@@ -36,6 +36,7 @@ import __unstableBlockNameContext from './block-name-context';
 import NavigableToolbar from '../navigable-toolbar';
 import { useHasAnyBlockControls } from '../block-controls/use-has-block-controls';
 import Shuffle from './shuffle';
+import BlockBindingsButton from '../block-bindings-button';
 
 /**
  * Renders the block toolbar.
@@ -166,11 +167,7 @@ export function PrivateBlockToolbar( {
 				{ ! isMultiToolbar &&
 					isLargeViewport &&
 					isDefaultEditingMode && <BlockParentSelector /> }
-				<BlockControls.Slot
-					// TODO: Rename "first" to something more meaningful.
-					group="first"
-					className="block-editor-block-toolbar__slot"
-				/>
+				<BlockBindingsButton clientId={ blockClientId } />
 				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
 					isDefaultEditingMode && (
 						<div
diff --git a/packages/block-editor/src/hooks/use-bindings-attributes.js b/packages/block-editor/src/hooks/use-bindings-attributes.js
index 290821d9288438..cbaa17b8fd1f64 100644
--- a/packages/block-editor/src/hooks/use-bindings-attributes.js
+++ b/packages/block-editor/src/hooks/use-bindings-attributes.js
@@ -5,13 +5,9 @@ import { getBlockType, store as blocksStore } from '@wordpress/blocks';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { addFilter } from '@wordpress/hooks';
-import { ToolbarButton } from '@wordpress/components';
-import { connection } from '@wordpress/icons';
-import { _x } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { BlockControls } from '../components';
 import { store as blockEditorStore } from '../store';
 import { useBlockEditContext } from '../components/block-edit/context';
 import { unlock } from '../lock-unlock';
@@ -93,19 +89,6 @@ const createEditFunctionWithBindingsAttribute = () =>
 						hasSource ? { '--wp-admin-theme-color': '#9747FF' } : {}
 					}
 				>
-					{ hasSource ? (
-						<BlockControls group="first">
-							<ToolbarButton
-								icon={ connection }
-								label={ _x(
-									// TODO: Let's get this naming right
-									'Connected to a block bindings source',
-									'block toolbar button label'
-								) }
-								iconSize={ 24 }
-							></ToolbarButton>
-						</BlockControls>
-					) : null }
 					<BlockEdit
 						key="edit"
 						{ ...props }
diff --git a/packages/icons/src/library/connection.js b/packages/icons/src/library/connection.js
index 8ede0a17ff3f64..7096c4f3fcf3fb 100644
--- a/packages/icons/src/library/connection.js
+++ b/packages/icons/src/library/connection.js
@@ -13,9 +13,9 @@ const connection = (
 		<Path d="M5 19L8 16L5 19Z" fill="#9747FF" />
 		<Path d="M16 8L19 5L16 8Z" fill="#9747FF" />
 		<G
-			stroke-width="1.5"
-			stroke-linecap="round"
-			stroke-linejoin="round"
+			strokeWidth="1.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
 			stroke="#9747FF"
 		>
 			<Path d="M5 19L8 16" />

From be8afcdfa9f8917a29abd0c70790f4b3487ede64 Mon Sep 17 00:00:00 2001
From: Michal Czaplinski <mmczaplinski@gmail.com>
Date: Thu, 22 Feb 2024 13:19:08 +0000
Subject: [PATCH 06/18] Refactor BlockBindingsButton to check for block
 connections

---
 .../src/components/block-bindings-button/index.js    | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/block-editor/src/components/block-bindings-button/index.js b/packages/block-editor/src/components/block-bindings-button/index.js
index d5292bfbe48999..ce214bd9cbbcdd 100644
--- a/packages/block-editor/src/components/block-bindings-button/index.js
+++ b/packages/block-editor/src/components/block-bindings-button/index.js
@@ -12,17 +12,17 @@ import { _x } from '@wordpress/i18n';
 import { store as blockEditorStore } from '../../store';
 
 export default function BlockBindingsButton( { clientId } ) {
-	const { blockAttributes } = useSelect(
+	const isConnected = useSelect(
 		( select ) => {
-			const { getBlockAttributes } = select( blockEditorStore );
-			return {
-				blockAttributes: getBlockAttributes( clientId ),
-			};
+			const attributes =
+				select( blockEditorStore ).getBlockAttributes( clientId );
+
+			return !! attributes?.metadata?.bindings;
 		},
 		[ clientId ]
 	);
 
-	return blockAttributes?.metadata?.bindings ? (
+	return isConnected ? (
 		<ToolbarButton
 			icon={ connection }
 			label={ _x(

From 1c51cc2463630f89dd95f29c585a0cc618218c0f Mon Sep 17 00:00:00 2001
From: Michal Czaplinski <mmczaplinski@gmail.com>
Date: Thu, 22 Feb 2024 14:01:23 +0000
Subject: [PATCH 07/18] Change the ToolbarButton label

---
 .../src/components/block-bindings-button/index.js           | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/block-editor/src/components/block-bindings-button/index.js b/packages/block-editor/src/components/block-bindings-button/index.js
index ce214bd9cbbcdd..ba1d3f667798fe 100644
--- a/packages/block-editor/src/components/block-bindings-button/index.js
+++ b/packages/block-editor/src/components/block-bindings-button/index.js
@@ -25,11 +25,7 @@ export default function BlockBindingsButton( { clientId } ) {
 	return isConnected ? (
 		<ToolbarButton
 			icon={ connection }
-			label={ _x(
-				// TODO: Let's get this naming right
-				'Connected to a block bindings source',
-				'block toolbar button label'
-			) }
+			label={ _x( 'Connected', 'block toolbar button label' ) }
 			iconSize={ 24 }
 		></ToolbarButton>
 	) : null;

From 752dcc3fd1094800cf1c8926082dbba05bc84489 Mon Sep 17 00:00:00 2001
From: Michal Czaplinski <mmczaplinski@gmail.com>
Date: Thu, 22 Feb 2024 18:13:09 +0000
Subject: [PATCH 08/18] Update block-bindings-button import to
 block-bindings-indicator

---
 .../index.js                                   | 18 +++++++++++-------
 .../block-bindings-indicator/style.scss        |  6 ++++++
 .../src/components/block-toolbar/index.js      |  4 ++--
 packages/block-editor/src/style.scss           |  1 +
 4 files changed, 20 insertions(+), 9 deletions(-)
 rename packages/block-editor/src/components/{block-bindings-button => block-bindings-indicator}/index.js (55%)
 create mode 100644 packages/block-editor/src/components/block-bindings-indicator/style.scss

diff --git a/packages/block-editor/src/components/block-bindings-button/index.js b/packages/block-editor/src/components/block-bindings-indicator/index.js
similarity index 55%
rename from packages/block-editor/src/components/block-bindings-button/index.js
rename to packages/block-editor/src/components/block-bindings-indicator/index.js
index ba1d3f667798fe..dbd248811a4bcb 100644
--- a/packages/block-editor/src/components/block-bindings-button/index.js
+++ b/packages/block-editor/src/components/block-bindings-indicator/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { ToolbarButton } from '@wordpress/components';
+import { ToolbarItem, ToolbarGroup, Icon } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { connection } from '@wordpress/icons';
 import { _x } from '@wordpress/i18n';
@@ -11,7 +11,7 @@ import { _x } from '@wordpress/i18n';
  */
 import { store as blockEditorStore } from '../../store';
 
-export default function BlockBindingsButton( { clientId } ) {
+export default function BlockBindingsIndicator( { clientId } ) {
 	const isConnected = useSelect(
 		( select ) => {
 			const attributes =
@@ -23,10 +23,14 @@ export default function BlockBindingsButton( { clientId } ) {
 	);
 
 	return isConnected ? (
-		<ToolbarButton
-			icon={ connection }
-			label={ _x( 'Connected', 'block toolbar button label' ) }
-			iconSize={ 24 }
-		></ToolbarButton>
+		<ToolbarGroup>
+			<ToolbarItem
+				as={ 'div' }
+				aria-label={ _x( 'Connected', 'block toolbar button label' ) }
+				className="block-editor-block-bindings-indicator"
+			>
+				<Icon icon={ connection } size={ 24 } />
+			</ToolbarItem>
+		</ToolbarGroup>
 	) : null;
 }
diff --git a/packages/block-editor/src/components/block-bindings-indicator/style.scss b/packages/block-editor/src/components/block-bindings-indicator/style.scss
new file mode 100644
index 00000000000000..71d836dc3bfef9
--- /dev/null
+++ b/packages/block-editor/src/components/block-bindings-indicator/style.scss
@@ -0,0 +1,6 @@
+.block-editor-block-bindings-indicator {
+	display: inline-flex;
+	align-items: center;
+	height: 48px;
+	padding: 6px;
+}
diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js
index 42ff2beab8005a..bde98402c7358d 100644
--- a/packages/block-editor/src/components/block-toolbar/index.js
+++ b/packages/block-editor/src/components/block-toolbar/index.js
@@ -36,7 +36,7 @@ import __unstableBlockNameContext from './block-name-context';
 import NavigableToolbar from '../navigable-toolbar';
 import { useHasAnyBlockControls } from '../block-controls/use-has-block-controls';
 import Shuffle from './shuffle';
-import BlockBindingsButton from '../block-bindings-button';
+import BlockBindingsIndicator from '../block-bindings-indicator';
 
 /**
  * Renders the block toolbar.
@@ -167,7 +167,7 @@ export function PrivateBlockToolbar( {
 				{ ! isMultiToolbar &&
 					isLargeViewport &&
 					isDefaultEditingMode && <BlockParentSelector /> }
-				<BlockBindingsButton clientId={ blockClientId } />
+				<BlockBindingsIndicator clientId={ blockClientId } />
 				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
 					isDefaultEditingMode && (
 						<div
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
index 1cbc49f58551e5..211b86ca0d7267 100644
--- a/packages/block-editor/src/style.scss
+++ b/packages/block-editor/src/style.scss
@@ -1,5 +1,6 @@
 @import "./autocompleters/style.scss";
 @import "./components/block-alignment-control/style.scss";
+@import "./components/block-bindings-indicator/style.scss";
 @import "./components/block-canvas/style.scss";
 @import "./components/block-icon/style.scss";
 @import "./components/block-inspector/style.scss";

From bbdd7bf73158de0fc8cc876b61f6568e2f3400be Mon Sep 17 00:00:00 2001
From: Artemio Morales <artemio.morales@a8c.com>
Date: Mon, 26 Feb 2024 15:09:48 -0500
Subject: [PATCH 09/18] Block Bindings: Add connection icon to list view
 (#59331)

* Add connection icon to list view

* Remove extraneous string
---
 .../src/components/list-view/block-select-button.js   | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/list-view/block-select-button.js b/packages/block-editor/src/components/list-view/block-select-button.js
index 6b9de943ea0bf2..bc32baf9609d69 100644
--- a/packages/block-editor/src/components/list-view/block-select-button.js
+++ b/packages/block-editor/src/components/list-view/block-select-button.js
@@ -14,7 +14,12 @@ import {
 	Tooltip,
 } from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
-import { Icon, lockSmall as lock, pinSmall } from '@wordpress/icons';
+import {
+	Icon,
+	connection,
+	lockSmall as lock,
+	pinSmall,
+} from '@wordpress/icons';
 import { SPACE, ENTER, BACKSPACE, DELETE } from '@wordpress/keycodes';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';
@@ -66,6 +71,7 @@ function ListViewBlockSelectButton(
 		getBlockRootClientId,
 		getBlockOrder,
 		getBlocksByClientId,
+		getBlockAttributes,
 		canRemoveBlocks,
 	} = useSelect( blockEditorStore );
 	const { duplicateBlocks, multiSelect, removeBlocks } =
@@ -75,6 +81,8 @@ function ListViewBlockSelectButton(
 	const images = useListViewImages( { clientId, isExpanded } );
 	const { rootClientId } = useListViewContext();
 
+	const isConnected = getBlockAttributes( clientId )?.metadata?.bindings;
+
 	const positionLabel = blockInformation?.positionLabel
 		? sprintf(
 				// translators: 1: Position of selected block, e.g. "Sticky" or "Fixed".
@@ -278,6 +286,7 @@ function ListViewBlockSelectButton(
 							</Truncate>
 						</span>
 					) }
+					{ isConnected && <Icon icon={ connection } /> }
 					{ positionLabel && isSticky && (
 						<Tooltip text={ positionLabel }>
 							<Icon icon={ pinSmall } />

From 3bc3062915c301a27cd3eb5f497df6cc3d3f1a19 Mon Sep 17 00:00:00 2001
From: Ricardo Artemio Morales <ric.morales22@gmail.com>
Date: Tue, 27 Feb 2024 18:37:51 -0500
Subject: [PATCH 10/18] Move bindings style to useBlockProps

---
 .../block-list/use-block-props/index.js       | 12 ++++++++++--
 .../src/hooks/use-bindings-attributes.js      | 19 +++++--------------
 2 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/use-block-props/index.js b/packages/block-editor/src/components/block-list/use-block-props/index.js
index 08b43fa46257e4..b126f5cae48215 100644
--- a/packages/block-editor/src/components/block-list/use-block-props/index.js
+++ b/packages/block-editor/src/components/block-list/use-block-props/index.js
@@ -19,7 +19,10 @@ import useMovingAnimation from '../../use-moving-animation';
 import { PrivateBlockContext } from '../private-block-context';
 import { useFocusFirstElement } from './use-focus-first-element';
 import { useIsHovered } from './use-is-hovered';
-import { useBlockEditContext } from '../../block-edit/context';
+import {
+	blockBindingsKey,
+	useBlockEditContext,
+} from '../../block-edit/context';
 import { useFocusHandler } from './use-focus-handler';
 import { useEventHandlers } from './use-selected-block-event-handlers';
 import { useNavModeExit } from './use-nav-mode-exit';
@@ -123,6 +126,11 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 	] );
 
 	const blockEditContext = useBlockEditContext();
+	const hasBlockBindings = !! blockEditContext[ blockBindingsKey ];
+	const bindingsStyle = hasBlockBindings
+		? { '--wp-admin-theme-color': '#9747FF' }
+		: {};
+
 	// Ensures it warns only inside the `edit` implementation for the block.
 	if ( blockApiVersion < 2 && clientId === blockEditContext.clientId ) {
 		warning(
@@ -168,7 +176,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 			wrapperProps.className,
 			defaultClassName
 		),
-		style: { ...wrapperProps.style, ...props.style },
+		style: { ...wrapperProps.style, ...props.style, ...bindingsStyle },
 	};
 }
 
diff --git a/packages/block-editor/src/hooks/use-bindings-attributes.js b/packages/block-editor/src/hooks/use-bindings-attributes.js
index cbaa17b8fd1f64..6656b68741d464 100644
--- a/packages/block-editor/src/hooks/use-bindings-attributes.js
+++ b/packages/block-editor/src/hooks/use-bindings-attributes.js
@@ -38,8 +38,6 @@ const createEditFunctionWithBindingsAttribute = () =>
 			).getAllBlockBindingsSources();
 			const { getBlockAttributes } = useSelect( blockEditorStore );
 
-			let hasSource = false;
-
 			const updatedAttributes = getBlockAttributes( clientId );
 			if ( updatedAttributes?.metadata?.bindings ) {
 				Object.entries( updatedAttributes.metadata.bindings ).forEach(
@@ -73,7 +71,6 @@ const createEditFunctionWithBindingsAttribute = () =>
 
 							if ( metaValue ) {
 								updatedAttributes[ attributeName ] = metaValue;
-								hasSource = true;
 							}
 						}
 					}
@@ -84,17 +81,11 @@ const createEditFunctionWithBindingsAttribute = () =>
 				// 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' } : {}
-					}
-				>
-					<BlockEdit
-						key="edit"
-						{ ...props }
-						attributes={ updatedAttributes }
-					/>
-				</div>
+				<BlockEdit
+					key="edit"
+					{ ...props }
+					attributes={ updatedAttributes }
+				/>
 			);
 		},
 		'useBoundAttributes'

From 9d6f97c42fcc5447f0e1b38bc413ab3db9513cc5 Mon Sep 17 00:00:00 2001
From: Ricardo Artemio Morales <ric.morales22@gmail.com>
Date: Tue, 27 Feb 2024 18:40:15 -0500
Subject: [PATCH 11/18] Remove extraneous comment

---
 packages/block-editor/src/hooks/use-bindings-attributes.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/block-editor/src/hooks/use-bindings-attributes.js b/packages/block-editor/src/hooks/use-bindings-attributes.js
index 6656b68741d464..0e5b6614f07cbf 100644
--- a/packages/block-editor/src/hooks/use-bindings-attributes.js
+++ b/packages/block-editor/src/hooks/use-bindings-attributes.js
@@ -78,9 +78,6 @@ const createEditFunctionWithBindingsAttribute = () =>
 			}
 
 			return (
-				// 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.
 				<BlockEdit
 					key="edit"
 					{ ...props }

From ec3885dcca2e3c851f6b1dd3a2461a8f8e300c91 Mon Sep 17 00:00:00 2001
From: Ricardo Artemio Morales <ric.morales22@gmail.com>
Date: Wed, 28 Feb 2024 16:04:58 -0500
Subject: [PATCH 12/18] Move bindings selector logic to toolbar

---
 .../block-bindings-indicator/index.js         | 22 +++----------------
 .../src/components/block-toolbar/index.js     |  7 +++++-
 2 files changed, 9 insertions(+), 20 deletions(-)

diff --git a/packages/block-editor/src/components/block-bindings-indicator/index.js b/packages/block-editor/src/components/block-bindings-indicator/index.js
index dbd248811a4bcb..3db3e87c6de378 100644
--- a/packages/block-editor/src/components/block-bindings-indicator/index.js
+++ b/packages/block-editor/src/components/block-bindings-indicator/index.js
@@ -2,27 +2,11 @@
  * WordPress dependencies
  */
 import { ToolbarItem, ToolbarGroup, Icon } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
 import { connection } from '@wordpress/icons';
 import { _x } from '@wordpress/i18n';
 
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../store';
-
-export default function BlockBindingsIndicator( { clientId } ) {
-	const isConnected = useSelect(
-		( select ) => {
-			const attributes =
-				select( blockEditorStore ).getBlockAttributes( clientId );
-
-			return !! attributes?.metadata?.bindings;
-		},
-		[ clientId ]
-	);
-
-	return isConnected ? (
+export default function BlockBindingsIndicator() {
+	return (
 		<ToolbarGroup>
 			<ToolbarItem
 				as={ 'div' }
@@ -32,5 +16,5 @@ export default function BlockBindingsIndicator( { clientId } ) {
 				<Icon icon={ connection } size={ 24 } />
 			</ToolbarItem>
 		</ToolbarGroup>
-	) : null;
+	);
 }
diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js
index bde98402c7358d..03990c3320569c 100644
--- a/packages/block-editor/src/components/block-toolbar/index.js
+++ b/packages/block-editor/src/components/block-toolbar/index.js
@@ -64,6 +64,7 @@ export function PrivateBlockToolbar( {
 		blockType,
 		shouldShowVisualToolbar,
 		showParentSelector,
+		isUsingBindings,
 	} = useSelect( ( select ) => {
 		const {
 			getBlockName,
@@ -73,6 +74,7 @@ export function PrivateBlockToolbar( {
 			isBlockValid,
 			getBlockRootClientId,
 			getBlockEditingMode,
+			getBlockAttributes,
 		} = select( blockEditorStore );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
 		const selectedBlockClientId = selectedBlockClientIds[ 0 ];
@@ -89,6 +91,8 @@ export function PrivateBlockToolbar( {
 		const isVisual = selectedBlockClientIds.every(
 			( id ) => getBlockMode( id ) === 'visual'
 		);
+		const _isUsingBindings = !! getBlockAttributes( selectedBlockClientId )
+			?.metadata?.bindings;
 		return {
 			blockClientId: selectedBlockClientId,
 			blockClientIds: selectedBlockClientIds,
@@ -109,6 +113,7 @@ export function PrivateBlockToolbar( {
 				) &&
 				selectedBlockClientIds.length === 1 &&
 				_isDefaultEditingMode,
+			isUsingBindings: _isUsingBindings,
 		};
 	}, [] );
 
@@ -167,7 +172,7 @@ export function PrivateBlockToolbar( {
 				{ ! isMultiToolbar &&
 					isLargeViewport &&
 					isDefaultEditingMode && <BlockParentSelector /> }
-				<BlockBindingsIndicator clientId={ blockClientId } />
+				{ isUsingBindings && <BlockBindingsIndicator /> }
 				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
 					isDefaultEditingMode && (
 						<div

From d9a4b8880b392bf3ea9db26f7cc7e9ebd9425a8e Mon Sep 17 00:00:00 2001
From: Ricardo Artemio Morales <ric.morales22@gmail.com>
Date: Wed, 28 Feb 2024 16:29:44 -0500
Subject: [PATCH 13/18] Rename indicator file

---
 .../index.js                                                    | 2 +-
 .../style.scss                                                  | 0
 packages/block-editor/src/components/block-toolbar/index.js     | 2 +-
 packages/block-editor/src/style.scss                            | 2 +-
 4 files changed, 3 insertions(+), 3 deletions(-)
 rename packages/block-editor/src/components/{block-bindings-indicator => block-bindings-toolbar-indicator}/index.js (88%)
 rename packages/block-editor/src/components/{block-bindings-indicator => block-bindings-toolbar-indicator}/style.scss (100%)

diff --git a/packages/block-editor/src/components/block-bindings-indicator/index.js b/packages/block-editor/src/components/block-bindings-toolbar-indicator/index.js
similarity index 88%
rename from packages/block-editor/src/components/block-bindings-indicator/index.js
rename to packages/block-editor/src/components/block-bindings-toolbar-indicator/index.js
index 3db3e87c6de378..033dd1a8f80fef 100644
--- a/packages/block-editor/src/components/block-bindings-indicator/index.js
+++ b/packages/block-editor/src/components/block-bindings-toolbar-indicator/index.js
@@ -5,7 +5,7 @@ import { ToolbarItem, ToolbarGroup, Icon } from '@wordpress/components';
 import { connection } from '@wordpress/icons';
 import { _x } from '@wordpress/i18n';
 
-export default function BlockBindingsIndicator() {
+export default function BlockBindingsToolbarIndicator() {
 	return (
 		<ToolbarGroup>
 			<ToolbarItem
diff --git a/packages/block-editor/src/components/block-bindings-indicator/style.scss b/packages/block-editor/src/components/block-bindings-toolbar-indicator/style.scss
similarity index 100%
rename from packages/block-editor/src/components/block-bindings-indicator/style.scss
rename to packages/block-editor/src/components/block-bindings-toolbar-indicator/style.scss
diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js
index 03990c3320569c..36dd5ee2b01fbb 100644
--- a/packages/block-editor/src/components/block-toolbar/index.js
+++ b/packages/block-editor/src/components/block-toolbar/index.js
@@ -36,7 +36,7 @@ import __unstableBlockNameContext from './block-name-context';
 import NavigableToolbar from '../navigable-toolbar';
 import { useHasAnyBlockControls } from '../block-controls/use-has-block-controls';
 import Shuffle from './shuffle';
-import BlockBindingsIndicator from '../block-bindings-indicator';
+import BlockBindingsIndicator from '../block-bindings-toolbar-indicator';
 
 /**
  * Renders the block toolbar.
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
index 211b86ca0d7267..015cffde42a239 100644
--- a/packages/block-editor/src/style.scss
+++ b/packages/block-editor/src/style.scss
@@ -1,6 +1,6 @@
 @import "./autocompleters/style.scss";
 @import "./components/block-alignment-control/style.scss";
-@import "./components/block-bindings-indicator/style.scss";
+@import "./components/block-bindings-toolbar-indicator/style.scss";
 @import "./components/block-canvas/style.scss";
 @import "./components/block-icon/style.scss";
 @import "./components/block-inspector/style.scss";

From d571f82ef0b6797c3a2e8ab07d13e5e261f5810e Mon Sep 17 00:00:00 2001
From: Ricardo Artemio Morales <ric.morales22@gmail.com>
Date: Wed, 28 Feb 2024 17:19:19 -0500
Subject: [PATCH 14/18] Move purple stroke style from SVG markup to CSS

---
 .../components/block-bindings-toolbar-indicator/index.js    | 2 +-
 .../components/block-bindings-toolbar-indicator/style.scss  | 6 +++++-
 .../src/components/list-view/block-select-button.js         | 6 +++++-
 packages/icons/src/library/connection.js                    | 6 +++---
 4 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/block-editor/src/components/block-bindings-toolbar-indicator/index.js b/packages/block-editor/src/components/block-bindings-toolbar-indicator/index.js
index 033dd1a8f80fef..fcc69ffa3d2bfa 100644
--- a/packages/block-editor/src/components/block-bindings-toolbar-indicator/index.js
+++ b/packages/block-editor/src/components/block-bindings-toolbar-indicator/index.js
@@ -11,7 +11,7 @@ export default function BlockBindingsToolbarIndicator() {
 			<ToolbarItem
 				as={ 'div' }
 				aria-label={ _x( 'Connected', 'block toolbar button label' ) }
-				className="block-editor-block-bindings-indicator"
+				className="block-editor-block-bindings-indicator block-toolbar-block-bindings-indicator"
 			>
 				<Icon icon={ connection } size={ 24 } />
 			</ToolbarItem>
diff --git a/packages/block-editor/src/components/block-bindings-toolbar-indicator/style.scss b/packages/block-editor/src/components/block-bindings-toolbar-indicator/style.scss
index 71d836dc3bfef9..aee0e8d2dd5f7b 100644
--- a/packages/block-editor/src/components/block-bindings-toolbar-indicator/style.scss
+++ b/packages/block-editor/src/components/block-bindings-toolbar-indicator/style.scss
@@ -1,6 +1,10 @@
-.block-editor-block-bindings-indicator {
+.block-toolbar-block-bindings-indicator {
 	display: inline-flex;
 	align-items: center;
 	height: 48px;
 	padding: 6px;
 }
+
+.block-editor-block-bindings-indicator svg g {
+	stroke: #9747ff;
+}
diff --git a/packages/block-editor/src/components/list-view/block-select-button.js b/packages/block-editor/src/components/list-view/block-select-button.js
index bc32baf9609d69..62a322eec3c121 100644
--- a/packages/block-editor/src/components/list-view/block-select-button.js
+++ b/packages/block-editor/src/components/list-view/block-select-button.js
@@ -286,7 +286,11 @@ function ListViewBlockSelectButton(
 							</Truncate>
 						</span>
 					) }
-					{ isConnected && <Icon icon={ connection } /> }
+					{ isConnected && (
+						<span className="block-editor-block-bindings-indicator">
+							<Icon icon={ connection } />
+						</span>
+					) }
 					{ positionLabel && isSticky && (
 						<Tooltip text={ positionLabel }>
 							<Icon icon={ pinSmall } />
diff --git a/packages/icons/src/library/connection.js b/packages/icons/src/library/connection.js
index 7096c4f3fcf3fb..b0eb182aaa8f9b 100644
--- a/packages/icons/src/library/connection.js
+++ b/packages/icons/src/library/connection.js
@@ -10,13 +10,13 @@ const connection = (
 		viewBox="0 0 24 24"
 		xmlns="http://www.w3.org/2000/svg"
 	>
-		<Path d="M5 19L8 16L5 19Z" fill="#9747FF" />
-		<Path d="M16 8L19 5L16 8Z" fill="#9747FF" />
+		<Path d="M5 19L8 16L5 19Z" />
+		<Path d="M16 8L19 5L16 8Z" />
 		<G
 			strokeWidth="1.5"
 			strokeLinecap="round"
 			strokeLinejoin="round"
-			stroke="#9747FF"
+			stroke="#000000"
 		>
 			<Path d="M5 19L8 16" />
 			<Path

From ac72c0a108631f1f41060ef77a5c96b7333d2563 Mon Sep 17 00:00:00 2001
From: Ricardo Artemio Morales <ric.morales22@gmail.com>
Date: Wed, 28 Feb 2024 18:31:24 -0500
Subject: [PATCH 15/18] Check if block can be bound before adding styles

---
 .../components/block-list/use-block-props/index.js  |  8 +++++---
 .../src/components/block-toolbar/index.js           | 13 ++++++++-----
 .../src/components/list-view/block-select-button.js |  5 +++--
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/use-block-props/index.js b/packages/block-editor/src/components/block-list/use-block-props/index.js
index b126f5cae48215..891c574af65883 100644
--- a/packages/block-editor/src/components/block-list/use-block-props/index.js
+++ b/packages/block-editor/src/components/block-list/use-block-props/index.js
@@ -29,6 +29,7 @@ import { useNavModeExit } from './use-nav-mode-exit';
 import { useBlockRefProvider } from './use-block-refs';
 import { useIntersectionObserver } from './use-intersection-observer';
 import { useFlashEditableBlocks } from '../../use-flash-editable-blocks';
+import { canBindBlock } from '../../../hooks/use-bindings-attributes';
 
 /**
  * This hook is used to lightly mark an element as a block element. The element
@@ -127,9 +128,10 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 
 	const blockEditContext = useBlockEditContext();
 	const hasBlockBindings = !! blockEditContext[ blockBindingsKey ];
-	const bindingsStyle = hasBlockBindings
-		? { '--wp-admin-theme-color': '#9747FF' }
-		: {};
+	const bindingsStyle =
+		hasBlockBindings && canBindBlock( name )
+			? { '--wp-admin-theme-color': '#9747FF' }
+			: {};
 
 	// Ensures it warns only inside the `edit` implementation for the block.
 	if ( blockApiVersion < 2 && clientId === blockEditContext.clientId ) {
diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js
index 1e574b0aaebc20..e566096d54f269 100644
--- a/packages/block-editor/src/components/block-toolbar/index.js
+++ b/packages/block-editor/src/components/block-toolbar/index.js
@@ -37,6 +37,7 @@ import NavigableToolbar from '../navigable-toolbar';
 import Shuffle from './shuffle';
 import BlockBindingsIndicator from '../block-bindings-toolbar-indicator';
 import { useHasBlockToolbar } from './use-has-block-toolbar';
+import { canBindBlock } from '../../hooks/use-bindings-attributes';
 /**
  * Renders the block toolbar.
  *
@@ -61,6 +62,7 @@ export function PrivateBlockToolbar( {
 		blockClientIds,
 		isDefaultEditingMode,
 		blockType,
+		blockName,
 		shouldShowVisualToolbar,
 		showParentSelector,
 		isUsingBindings,
@@ -84,6 +86,7 @@ export function PrivateBlockToolbar( {
 		const parentBlockType = getBlockType( parentBlockName );
 		const _isDefaultEditingMode =
 			getBlockEditingMode( selectedBlockClientId ) === 'default';
+		const _blockName = getBlockName( selectedBlockClientId );
 		const isValid = selectedBlockClientIds.every( ( id ) =>
 			isBlockValid( id )
 		);
@@ -96,10 +99,8 @@ export function PrivateBlockToolbar( {
 			blockClientId: selectedBlockClientId,
 			blockClientIds: selectedBlockClientIds,
 			isDefaultEditingMode: _isDefaultEditingMode,
-			blockType:
-				selectedBlockClientId &&
-				getBlockType( getBlockName( selectedBlockClientId ) ),
-
+			blockName: _blockName,
+			blockType: selectedBlockClientId && getBlockType( _blockName ),
 			shouldShowVisualToolbar: isValid && isVisual,
 			rootClientId: blockRootClientId,
 			showParentSelector:
@@ -164,7 +165,9 @@ export function PrivateBlockToolbar( {
 				{ ! isMultiToolbar &&
 					isLargeViewport &&
 					isDefaultEditingMode && <BlockParentSelector /> }
-				{ isUsingBindings && <BlockBindingsIndicator /> }
+				{ isUsingBindings && canBindBlock( blockName ) && (
+					<BlockBindingsIndicator />
+				) }
 				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
 					isDefaultEditingMode && (
 						<div
diff --git a/packages/block-editor/src/components/list-view/block-select-button.js b/packages/block-editor/src/components/list-view/block-select-button.js
index 62a322eec3c121..4c07658cca794e 100644
--- a/packages/block-editor/src/components/list-view/block-select-button.js
+++ b/packages/block-editor/src/components/list-view/block-select-button.js
@@ -37,11 +37,12 @@ import { useBlockLock } from '../block-lock';
 import { store as blockEditorStore } from '../../store';
 import useListViewImages from './use-list-view-images';
 import { useListViewContext } from './context';
+import { canBindBlock } from '../../hooks/use-bindings-attributes';
 
 function ListViewBlockSelectButton(
 	{
 		className,
-		block: { clientId },
+		block: { clientId, name: blockName },
 		onClick,
 		onContextMenu,
 		onMouseDown,
@@ -286,7 +287,7 @@ function ListViewBlockSelectButton(
 							</Truncate>
 						</span>
 					) }
-					{ isConnected && (
+					{ isConnected && canBindBlock( blockName ) && (
 						<span className="block-editor-block-bindings-indicator">
 							<Icon icon={ connection } />
 						</span>

From f63e4ef8f469aa0cbde3f3e5954bf802113785fb Mon Sep 17 00:00:00 2001
From: Michal Czaplinski <mmczaplinski@gmail.com>
Date: Thu, 29 Feb 2024 13:24:43 +0000
Subject: [PATCH 16/18] Simplify the SVG icon: - get rid of 2 unnecessary
 `<path>` elements - move the stroke styles to CSS - add the `evenodd` rule

---
 .../style.scss                                |  4 ++++
 packages/icons/src/library/connection.js      | 20 ++++---------------
 2 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/packages/block-editor/src/components/block-bindings-toolbar-indicator/style.scss b/packages/block-editor/src/components/block-bindings-toolbar-indicator/style.scss
index aee0e8d2dd5f7b..69267e586aa172 100644
--- a/packages/block-editor/src/components/block-bindings-toolbar-indicator/style.scss
+++ b/packages/block-editor/src/components/block-bindings-toolbar-indicator/style.scss
@@ -7,4 +7,8 @@
 
 .block-editor-block-bindings-indicator svg g {
 	stroke: #9747ff;
+	fill: transparent;
+	stroke-width: 1.5;
+	stroke-linecap: round;
+	stroke-linejoin: round;
 }
diff --git a/packages/icons/src/library/connection.js b/packages/icons/src/library/connection.js
index b0eb182aaa8f9b..47cee6c66a3ef8 100644
--- a/packages/icons/src/library/connection.js
+++ b/packages/icons/src/library/connection.js
@@ -9,27 +9,15 @@ const connection = (
 		height="24"
 		viewBox="0 0 24 24"
 		xmlns="http://www.w3.org/2000/svg"
+		fill-rule="evenodd"
 	>
 		<Path d="M5 19L8 16L5 19Z" />
 		<Path d="M16 8L19 5L16 8Z" />
-		<G
-			strokeWidth="1.5"
-			strokeLinecap="round"
-			strokeLinejoin="round"
-			stroke="#000000"
-		>
+		<G>
 			<Path d="M5 19L8 16" />
-			<Path
-				d="M9.30003 17.3C9.523 17.5237 9.78794 17.7013 10.0797 17.8224C10.3714 17.9435 10.6842 18.0059 11 18.0059C11.3159 18.0059 11.6287 17.9435 11.9204 17.8224C12.2121 17.7013 12.4771 17.5237 12.7 17.3L15 15L9.00003 9L6.70003 11.3C6.47629 11.523 6.29876 11.7879 6.17763 12.0796C6.05649 12.3714 5.99414 12.6841 5.99414 13C5.99414 13.3159 6.05649 13.6286 6.17763 13.9204C6.29876 14.2121 6.47629 14.477 6.70003 14.7L9.30003 17.3Z"
-				fill="white"
-			/>
-			<Path d="M10.5 10.5L13 8" />
-			<Path d="M13.5 13.5L16 11" />
+			<Path d="M9.30003 17.3C9.523 17.5237 9.78794 17.7013 10.0797 17.8224C10.3714 17.9435 10.6842 18.0059 11 18.0059C11.3159 18.0059 11.6287 17.9435 11.9204 17.8224C12.2121 17.7013 12.4771 17.5237 12.7 17.3L15 15L9.00003 9L6.70003 11.3C6.47629 11.523 6.29876 11.7879 6.17763 12.0796C6.05649 12.3714 5.99414 12.6841 5.99414 13C5.99414 13.3159 6.05649 13.6286 6.17763 13.9204C6.29876 14.2121 6.47629 14.477 6.70003 14.7L9.30003 17.3Z" />
 			<Path d="M16 8L19 5" />
-			<Path
-				d="M9 9.00003L15 15L17.3 12.7C17.5237 12.4771 17.7013 12.2121 17.8224 11.9204C17.9435 11.6287 18.0059 11.3159 18.0059 11C18.0059 10.6842 17.9435 10.3714 17.8224 10.0797C17.7013 9.78794 17.5237 9.523 17.3 9.30003L14.7 6.70003C14.477 6.47629 14.2121 6.29876 13.9204 6.17763C13.6286 6.05649 13.3159 5.99414 13 5.99414C12.6841 5.99414 12.3714 6.05649 12.0796 6.17763C11.7879 6.29876 11.523 6.47629 11.3 6.70003L9 9.00003Z"
-				fill="white"
-			/>
+			<Path d="M9 9.00003L15 15L17.3 12.7C17.5237 12.4771 17.7013 12.2121 17.8224 11.9204C17.9435 11.6287 18.0059 11.3159 18.0059 11C18.0059 10.6842 17.9435 10.3714 17.8224 10.0797C17.7013 9.78794 17.5237 9.523 17.3 9.30003L14.7 6.70003C14.477 6.47629 14.2121 6.29876 13.9204 6.17763C13.6286 6.05649 13.3159 5.99414 13 5.99414C12.6841 5.99414 12.3714 6.05649 12.0796 6.17763C11.7879 6.29876 11.523 6.47629 11.3 6.70003L9 9.00003Z" />
 		</G>
 	</SVG>
 );

From 3f9fa3bc2622ef8af610816e3c75e1a387c159c0 Mon Sep 17 00:00:00 2001
From: Michal Czaplinski <mmczaplinski@gmail.com>
Date: Thu, 29 Feb 2024 13:38:43 +0000
Subject: [PATCH 17/18] Update the CSS namespacing to include the `__`

---
 .../src/components/block-bindings-toolbar-indicator/index.js  | 2 +-
 .../components/block-bindings-toolbar-indicator/style.scss    | 4 ++--
 .../src/components/list-view/block-select-button.js           | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/block-editor/src/components/block-bindings-toolbar-indicator/index.js b/packages/block-editor/src/components/block-bindings-toolbar-indicator/index.js
index fcc69ffa3d2bfa..dd3f3eee016d57 100644
--- a/packages/block-editor/src/components/block-bindings-toolbar-indicator/index.js
+++ b/packages/block-editor/src/components/block-bindings-toolbar-indicator/index.js
@@ -11,7 +11,7 @@ export default function BlockBindingsToolbarIndicator() {
 			<ToolbarItem
 				as={ 'div' }
 				aria-label={ _x( 'Connected', 'block toolbar button label' ) }
-				className="block-editor-block-bindings-indicator block-toolbar-block-bindings-indicator"
+				className="block-editor__block-bindings-indicator block-toolbar__block-bindings-indicator"
 			>
 				<Icon icon={ connection } size={ 24 } />
 			</ToolbarItem>
diff --git a/packages/block-editor/src/components/block-bindings-toolbar-indicator/style.scss b/packages/block-editor/src/components/block-bindings-toolbar-indicator/style.scss
index 69267e586aa172..30e4b724b5b52d 100644
--- a/packages/block-editor/src/components/block-bindings-toolbar-indicator/style.scss
+++ b/packages/block-editor/src/components/block-bindings-toolbar-indicator/style.scss
@@ -1,11 +1,11 @@
-.block-toolbar-block-bindings-indicator {
+.block-toolbar__block-bindings-indicator {
 	display: inline-flex;
 	align-items: center;
 	height: 48px;
 	padding: 6px;
 }
 
-.block-editor-block-bindings-indicator svg g {
+.block-editor__block-bindings-indicator svg g {
 	stroke: #9747ff;
 	fill: transparent;
 	stroke-width: 1.5;
diff --git a/packages/block-editor/src/components/list-view/block-select-button.js b/packages/block-editor/src/components/list-view/block-select-button.js
index 4c07658cca794e..b5200006b7e1ed 100644
--- a/packages/block-editor/src/components/list-view/block-select-button.js
+++ b/packages/block-editor/src/components/list-view/block-select-button.js
@@ -288,7 +288,7 @@ function ListViewBlockSelectButton(
 						</span>
 					) }
 					{ isConnected && canBindBlock( blockName ) && (
-						<span className="block-editor-block-bindings-indicator">
+						<span className="block-editor__block-bindings-indicator">
 							<Icon icon={ connection } />
 						</span>
 					) }

From 4dc11032bead87178814029fd0593c0a66ce6cf0 Mon Sep 17 00:00:00 2001
From: Michal Czaplinski <mmczaplinski@gmail.com>
Date: Thu, 29 Feb 2024 15:25:47 +0000
Subject: [PATCH 18/18] Fix issues with block binding indicator color

---
 .../base-styles/_default-custom-properties.scss  |  2 +-
 .../block-bindings-toolbar-indicator/index.js    |  2 +-
 .../block-bindings-toolbar-indicator/style.scss  | 16 ++++++++--------
 .../block-list/use-block-props/index.js          |  2 +-
 .../components/list-view/block-select-button.js  |  2 +-
 .../src/components/list-view/style.scss          |  8 ++++++++
 6 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/packages/base-styles/_default-custom-properties.scss b/packages/base-styles/_default-custom-properties.scss
index 52dfeb3899d772..5760753c48ce85 100644
--- a/packages/base-styles/_default-custom-properties.scss
+++ b/packages/base-styles/_default-custom-properties.scss
@@ -1,4 +1,3 @@
-
 // It is important to include these styles in all built stylesheets.
 // This allows to CSS variables post CSS plugin to generate fallbacks.
 // It also provides default CSS variables for npm package consumers.
@@ -6,4 +5,5 @@
 	@include admin-scheme(#007cba);
 	--wp-block-synced-color: #7a00df;
 	--wp-block-synced-color--rgb: #{hex-to-rgb(#7a00df)};
+	--wp-bound-block-color: #9747ff;
 }
diff --git a/packages/block-editor/src/components/block-bindings-toolbar-indicator/index.js b/packages/block-editor/src/components/block-bindings-toolbar-indicator/index.js
index dd3f3eee016d57..4b2d3df725a66b 100644
--- a/packages/block-editor/src/components/block-bindings-toolbar-indicator/index.js
+++ b/packages/block-editor/src/components/block-bindings-toolbar-indicator/index.js
@@ -11,7 +11,7 @@ export default function BlockBindingsToolbarIndicator() {
 			<ToolbarItem
 				as={ 'div' }
 				aria-label={ _x( 'Connected', 'block toolbar button label' ) }
-				className="block-editor__block-bindings-indicator block-toolbar__block-bindings-indicator"
+				className="block-editor-block-bindings-toolbar-indicator"
 			>
 				<Icon icon={ connection } size={ 24 } />
 			</ToolbarItem>
diff --git a/packages/block-editor/src/components/block-bindings-toolbar-indicator/style.scss b/packages/block-editor/src/components/block-bindings-toolbar-indicator/style.scss
index 30e4b724b5b52d..4aeabdf8acf6e8 100644
--- a/packages/block-editor/src/components/block-bindings-toolbar-indicator/style.scss
+++ b/packages/block-editor/src/components/block-bindings-toolbar-indicator/style.scss
@@ -1,14 +1,14 @@
-.block-toolbar__block-bindings-indicator {
+.block-editor-block-bindings-toolbar-indicator {
 	display: inline-flex;
 	align-items: center;
 	height: 48px;
 	padding: 6px;
-}
 
-.block-editor__block-bindings-indicator svg g {
-	stroke: #9747ff;
-	fill: transparent;
-	stroke-width: 1.5;
-	stroke-linecap: round;
-	stroke-linejoin: round;
+	svg g {
+		stroke: var(--wp-bound-block-color);
+		fill: transparent;
+		stroke-width: 1.5;
+		stroke-linecap: round;
+		stroke-linejoin: round;
+	}
 }
diff --git a/packages/block-editor/src/components/block-list/use-block-props/index.js b/packages/block-editor/src/components/block-list/use-block-props/index.js
index 891c574af65883..c929c1014dc030 100644
--- a/packages/block-editor/src/components/block-list/use-block-props/index.js
+++ b/packages/block-editor/src/components/block-list/use-block-props/index.js
@@ -130,7 +130,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 	const hasBlockBindings = !! blockEditContext[ blockBindingsKey ];
 	const bindingsStyle =
 		hasBlockBindings && canBindBlock( name )
-			? { '--wp-admin-theme-color': '#9747FF' }
+			? { '--wp-admin-theme-color': 'var(--wp-bound-block-color)' }
 			: {};
 
 	// Ensures it warns only inside the `edit` implementation for the block.
diff --git a/packages/block-editor/src/components/list-view/block-select-button.js b/packages/block-editor/src/components/list-view/block-select-button.js
index b5200006b7e1ed..1214ec4ec7c08a 100644
--- a/packages/block-editor/src/components/list-view/block-select-button.js
+++ b/packages/block-editor/src/components/list-view/block-select-button.js
@@ -288,7 +288,7 @@ function ListViewBlockSelectButton(
 						</span>
 					) }
 					{ isConnected && canBindBlock( blockName ) && (
-						<span className="block-editor__block-bindings-indicator">
+						<span className="block-editor-list-view-block-select-button__bindings">
 							<Icon icon={ connection } />
 						</span>
 					) }
diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
index 11cf1fafa0e14b..1245bfbabcb7a7 100644
--- a/packages/block-editor/src/components/list-view/style.scss
+++ b/packages/block-editor/src/components/list-view/style.scss
@@ -557,3 +557,11 @@ $block-navigation-max-indent: 8;
 .list-view-appender__description {
 	display: none;
 }
+
+.block-editor-list-view-block-select-button__bindings svg g {
+	stroke: var(--wp-bound-block-color);
+	fill: transparent;
+	stroke-width: 1.5;
+	stroke-linecap: round;
+	stroke-linejoin: round;
+}