Check if block can be bound before adding styles

WordPress · Feb 28, 2024 · ac72c0a · ac72c0a
1 parent 6cd25eb
commit ac72c0a
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 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
@@ -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
@@ -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
@@ -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>