Add BlockBindingsButton component and remove BlockControlsFirst group

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;
+}

packages/block-editor/src/components/block-controls/groups.js

@@ -8,15 +8,13 @@ const BlockControlsBlock = createSlotFill( 'BlockControlsBlock' );
 const BlockControlsInline = createSlotFill( 'BlockFormatControls' );
 const BlockControlsOther = createSlotFill( 'BlockControlsOther' );
 const BlockControlsParent = createSlotFill( 'BlockControlsParent' );
-const BlockControlsFirst = createSlotFill( 'BlockControlsFirst' );
 
 const groups = {
 	default: BlockControlsDefault,
 	block: BlockControlsBlock,
 	inline: BlockControlsInline,
 	other: BlockControlsOther,
 	parent: BlockControlsParent,
-	first: BlockControlsFirst,
 };
 
 export default groups;

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

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 }

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" />