Update block-bindings-button import to block-bindings-indicator

WordPress · Feb 22, 2024 · 06fdbf7 · 06fdbf7
1 parent bbd3fcc
commit 06fdbf7
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 9 deletions.
diff --git a/...components/block-bindings-button/index.js → ...ponents/block-bindings-indicator/index.js b/...components/block-bindings-button/index.js → ...ponents/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
@@ -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
@@ -35,7 +35,7 @@ import { store as blockEditorStore } from '../../store';
 import __unstableBlockNameContext from './block-name-context';
 import NavigableToolbar from '../navigable-toolbar';
 import { useHasAnyBlockControls } from '../block-controls/use-has-block-controls';
-import BlockBindingsButton from '../block-bindings-button';
+import BlockBindingsIndicator from '../block-bindings-indicator';
 
 /**
  * Renders the block toolbar.
@@ -166,7 +166,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
@@ -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";