From 6eeb8f3e7fe052fe556abb82d52853c486543393 Mon Sep 17 00:00:00 2001 From: dhruvang21 Date: Tue, 15 Oct 2024 14:12:31 +0530 Subject: [PATCH 1/8] Try dark toolbar for the write mode --- .../src/components/block-toolbar/index.js | 6 ++++++ .../src/components/block-toolbar/style.scss | 20 +++++++++++++++++++ 2 files changed, 26 insertions(+) diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js index ea068d8126526..66a7c42fbedf5 100644 --- a/packages/block-editor/src/components/block-toolbar/index.js +++ b/packages/block-editor/src/components/block-toolbar/index.js @@ -74,6 +74,7 @@ export function PrivateBlockToolbar( { showGroupButtons, showLockButtons, showSwitchSectionStyleButton, + hasFixedToolbar, } = useSelect( ( select ) => { const { getBlockName, @@ -85,6 +86,7 @@ export function PrivateBlockToolbar( { getBlockAttributes, getBlockParentsByBlockName, getTemplateLock, + getSettings, getParentSectionBlock, isZoomOut, } = unlock( select( blockEditorStore ) ); @@ -119,6 +121,7 @@ export function PrivateBlockToolbar( { const _hasTemplateLock = selectedBlockClientIds.some( ( id ) => getTemplateLock( id ) === 'contentOnly' ); + return { blockClientId: selectedBlockClientId, blockClientIds: selectedBlockClientIds, @@ -144,6 +147,7 @@ export function PrivateBlockToolbar( { showGroupButtons: ! isZoomOut(), showLockButtons: ! isZoomOut(), showSwitchSectionStyleButton: isZoomOut(), + hasFixedToolbar: getSettings().hasFixedToolbar, }; }, [] ); @@ -170,11 +174,13 @@ export function PrivateBlockToolbar( { // Shifts the toolbar to make room for the parent block selector. const classes = clsx( 'block-editor-block-contextual-toolbar', { 'has-parent': showParentSelector, + 'is-contentonly-mode': ! isDefaultEditingMode && ! hasFixedToolbar, } ); const innerClasses = clsx( 'block-editor-block-toolbar', { 'is-synced': isSynced, 'is-connected': isUsingBindings, + 'is-contentonly-mode': ! isDefaultEditingMode && ! hasFixedToolbar, } ); return ( diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss index 26bf71356925e..7c6703d0f6165 100644 --- a/packages/block-editor/src/components/block-toolbar/style.scss +++ b/packages/block-editor/src/components/block-toolbar/style.scss @@ -57,6 +57,22 @@ } } + &.is-contentonly-mode { + background-color: $gray-900; + color: $white; + button { + color: $white; + background-color: $gray-900 !important; + } + .block-editor-block-switcher__toggle { + color: $white; + } + .components-toolbar-group, + .components-toolbar { + border-right-color: $gray-600 !important; + } + } + > :last-child, > :last-child .components-toolbar-group, > :last-child .components-toolbar, @@ -93,6 +109,10 @@ box-shadow: 0 $border-width 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha. } + &.is-contentonly-mode { + background-color: $gray-900; + } + .block-editor-block-toolbar { overflow: auto; overflow-y: hidden; From 13cd51188b01ee2d314af3aec9392848159f1521 Mon Sep 17 00:00:00 2001 From: dhruvang21 Date: Tue, 15 Oct 2024 17:39:59 +0530 Subject: [PATCH 2/8] Add active color --- packages/block-editor/src/components/block-toolbar/style.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss index 7c6703d0f6165..4e04c92f1baeb 100644 --- a/packages/block-editor/src/components/block-toolbar/style.scss +++ b/packages/block-editor/src/components/block-toolbar/style.scss @@ -71,6 +71,9 @@ .components-toolbar { border-right-color: $gray-600 !important; } + .is-pressed { + color: var(--wp-admin-theme-color); + } } > :last-child, From 991de5cb6727eae6570024402e66e437b1e1abd3 Mon Sep 17 00:00:00 2001 From: dhruvang21 Date: Thu, 24 Oct 2024 16:04:00 +0530 Subject: [PATCH 3/8] Changes in classname and css --- .../src/components/block-toolbar/index.js | 4 ++-- .../src/components/block-toolbar/style.scss | 19 --------------- .../src/components/block-tools/style.scss | 23 +++++++++++++++---- 3 files changed, 21 insertions(+), 25 deletions(-) diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js index 66a7c42fbedf5..8cfb83b632054 100644 --- a/packages/block-editor/src/components/block-toolbar/index.js +++ b/packages/block-editor/src/components/block-toolbar/index.js @@ -174,13 +174,13 @@ export function PrivateBlockToolbar( { // Shifts the toolbar to make room for the parent block selector. const classes = clsx( 'block-editor-block-contextual-toolbar', { 'has-parent': showParentSelector, - 'is-contentonly-mode': ! isDefaultEditingMode && ! hasFixedToolbar, + 'is-dark-toolbar': ! isDefaultEditingMode && ! hasFixedToolbar, } ); const innerClasses = clsx( 'block-editor-block-toolbar', { 'is-synced': isSynced, 'is-connected': isUsingBindings, - 'is-contentonly-mode': ! isDefaultEditingMode && ! hasFixedToolbar, + 'is-dark-toolbar': ! isDefaultEditingMode && ! hasFixedToolbar, } ); return ( diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss index 4e04c92f1baeb..c185732c598a5 100644 --- a/packages/block-editor/src/components/block-toolbar/style.scss +++ b/packages/block-editor/src/components/block-toolbar/style.scss @@ -57,25 +57,6 @@ } } - &.is-contentonly-mode { - background-color: $gray-900; - color: $white; - button { - color: $white; - background-color: $gray-900 !important; - } - .block-editor-block-switcher__toggle { - color: $white; - } - .components-toolbar-group, - .components-toolbar { - border-right-color: $gray-600 !important; - } - .is-pressed { - color: var(--wp-admin-theme-color); - } - } - > :last-child, > :last-child .components-toolbar-group, > :last-child .components-toolbar, diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss index b553d42668cf3..b188f5061c54d 100644 --- a/packages/block-editor/src/components/block-tools/style.scss +++ b/packages/block-editor/src/components/block-tools/style.scss @@ -130,15 +130,30 @@ } } - .block-editor-block-toolbar { - overflow: visible; - } - .block-editor-block-toolbar .components-toolbar-group, .block-editor-block-toolbar .components-toolbar { border-right-color: $gray-900; } + .is-dark-toolbar { + background-color: $gray-900; + color: $white; + button { + color: $white; + background-color: $gray-900 !important; + } + .block-editor-block-switcher__toggle { + color: $white; + } + .components-toolbar-group, + .components-toolbar { + border-right-color: $gray-600 !important; + } + .is-pressed { + color: var(--wp-admin-theme-color); + } + } + // Hide the block toolbar if the insertion point is shown. &.is-insertion-point-visible { visibility: hidden; From cba6adc3acb9862f28cc072da1bbe566c8bdf8fd Mon Sep 17 00:00:00 2001 From: dhruvang21 Date: Fri, 25 Oct 2024 12:33:32 +0530 Subject: [PATCH 4/8] Update css --- packages/block-editor/src/components/block-toolbar/style.scss | 4 ---- packages/block-editor/src/components/block-tools/style.scss | 4 ++++ 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss index c185732c598a5..26bf71356925e 100644 --- a/packages/block-editor/src/components/block-toolbar/style.scss +++ b/packages/block-editor/src/components/block-toolbar/style.scss @@ -93,10 +93,6 @@ box-shadow: 0 $border-width 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha. } - &.is-contentonly-mode { - background-color: $gray-900; - } - .block-editor-block-toolbar { overflow: auto; overflow-y: hidden; diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss index b188f5061c54d..f87efbfb50270 100644 --- a/packages/block-editor/src/components/block-tools/style.scss +++ b/packages/block-editor/src/components/block-tools/style.scss @@ -130,6 +130,10 @@ } } + .block-editor-block-toolbar { + overflow: visible; + } + .block-editor-block-toolbar .components-toolbar-group, .block-editor-block-toolbar .components-toolbar { border-right-color: $gray-900; From c39a0523b2cd4f46d08c5d17ad382ef71576eca5 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Fri, 25 Oct 2024 11:52:52 +0200 Subject: [PATCH 5/8] minor color changes --- .../src/components/block-tools/style.scss | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss index f87efbfb50270..41e55a7e9b34f 100644 --- a/packages/block-editor/src/components/block-tools/style.scss +++ b/packages/block-editor/src/components/block-tools/style.scss @@ -141,18 +141,26 @@ .is-dark-toolbar { background-color: $gray-900; - color: $white; + color: $gray-100; + button { - color: $white; + color: $gray-200; background-color: $gray-900 !important; + + &:hover { + color: $white; + } } + .block-editor-block-switcher__toggle { - color: $white; + color: $gray-100; } + .components-toolbar-group, .components-toolbar { - border-right-color: $gray-600 !important; + border-right-color: $gray-700 !important; } + .is-pressed { color: var(--wp-admin-theme-color); } From 4c0b8691288ede9cad2e2fe4137589fca68a2c9c Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Fri, 25 Oct 2024 15:12:56 +0200 Subject: [PATCH 6/8] add slight border to provide better contrast on dark --- .../src/components/block-tools/style.scss | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss index 41e55a7e9b34f..2320dd2f28a8c 100644 --- a/packages/block-editor/src/components/block-tools/style.scss +++ b/packages/block-editor/src/components/block-tools/style.scss @@ -143,13 +143,25 @@ background-color: $gray-900; color: $gray-100; + &.block-editor-block-contextual-toolbar { + border-color: $gray-800; + } + button { - color: $gray-200; - background-color: $gray-900 !important; + color: $gray-300; &:hover { color: $white; } + + &:focus::before { + box-shadow: inset 0 0 0 1px $gray-900, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); + } + } + + .block-editor-block-parent-selector .block-editor-block-parent-selector__button { + border-color: $gray-800; + background-color: $gray-900; } .block-editor-block-switcher__toggle { @@ -158,7 +170,7 @@ .components-toolbar-group, .components-toolbar { - border-right-color: $gray-700 !important; + border-right-color: $gray-800 !important; } .is-pressed { From e833472fa7d707541c1cbb2dd7a222ff074e3750 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 27 Nov 2024 08:50:49 +0100 Subject: [PATCH 7/8] Change the classname --- packages/block-editor/src/components/block-toolbar/index.js | 2 +- packages/block-editor/src/components/block-tools/style.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js index 8cfb83b632054..9beed8cede3ca 100644 --- a/packages/block-editor/src/components/block-toolbar/index.js +++ b/packages/block-editor/src/components/block-toolbar/index.js @@ -174,7 +174,7 @@ export function PrivateBlockToolbar( { // Shifts the toolbar to make room for the parent block selector. const classes = clsx( 'block-editor-block-contextual-toolbar', { 'has-parent': showParentSelector, - 'is-dark-toolbar': ! isDefaultEditingMode && ! hasFixedToolbar, + 'is-inverted-toolbar': ! isDefaultEditingMode && ! hasFixedToolbar, } ); const innerClasses = clsx( 'block-editor-block-toolbar', { diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss index 2320dd2f28a8c..0ed9c138519d2 100644 --- a/packages/block-editor/src/components/block-tools/style.scss +++ b/packages/block-editor/src/components/block-tools/style.scss @@ -139,7 +139,7 @@ border-right-color: $gray-900; } - .is-dark-toolbar { + .is-inverted-toolbar { background-color: $gray-900; color: $gray-100; From 3fb856b65e57e83c637a726ad9c12a5973628a42 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 27 Nov 2024 08:55:30 +0100 Subject: [PATCH 8/8] Fix condition --- packages/block-editor/src/components/block-toolbar/index.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js index 9beed8cede3ca..63b2f6ad7f9a0 100644 --- a/packages/block-editor/src/components/block-toolbar/index.js +++ b/packages/block-editor/src/components/block-toolbar/index.js @@ -75,6 +75,7 @@ export function PrivateBlockToolbar( { showLockButtons, showSwitchSectionStyleButton, hasFixedToolbar, + isNavigationMode, } = useSelect( ( select ) => { const { getBlockName, @@ -89,6 +90,7 @@ export function PrivateBlockToolbar( { getSettings, getParentSectionBlock, isZoomOut, + isNavigationMode: _isNavigationMode, } = unlock( select( blockEditorStore ) ); const selectedBlockClientIds = getSelectedBlockClientIds(); const selectedBlockClientId = selectedBlockClientIds[ 0 ]; @@ -148,6 +150,7 @@ export function PrivateBlockToolbar( { showLockButtons: ! isZoomOut(), showSwitchSectionStyleButton: isZoomOut(), hasFixedToolbar: getSettings().hasFixedToolbar, + isNavigationMode: _isNavigationMode(), }; }, [] ); @@ -174,13 +177,12 @@ export function PrivateBlockToolbar( { // Shifts the toolbar to make room for the parent block selector. const classes = clsx( 'block-editor-block-contextual-toolbar', { 'has-parent': showParentSelector, - 'is-inverted-toolbar': ! isDefaultEditingMode && ! hasFixedToolbar, + 'is-inverted-toolbar': isNavigationMode && ! hasFixedToolbar, } ); const innerClasses = clsx( 'block-editor-block-toolbar', { 'is-synced': isSynced, 'is-connected': isUsingBindings, - 'is-dark-toolbar': ! isDefaultEditingMode && ! hasFixedToolbar, } ); return (