Fix issues with block binding indicator color

WordPress · Feb 29, 2024 · 4dc1103 · 4dc1103
1 parent 3f9fa3b
commit 4dc1103
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 12 deletions.
diff --git a/packages/base-styles/_default-custom-properties.scss b/packages/base-styles/_default-custom-properties.scss
@@ -1,9 +1,9 @@
-
 // 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.
 :root {
 	@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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
+}