From 4dc11032bead87178814029fd0593c0a66ce6cf0 Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Thu, 29 Feb 2024 15:25:47 +0000 Subject: [PATCH] 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 52dfeb3899d77..5760753c48ce8 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 dd3f3eee016d5..4b2d3df725a66 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() { 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 30e4b724b5b52..4aeabdf8acf6e 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 891c574af6588..c929c1014dc03 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 b5200006b7e1e..1214ec4ec7c08 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( ) } { isConnected && canBindBlock( blockName ) && ( - + ) } diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss index 11cf1fafa0e14..1245bfbabcb7a 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; +}