Try dark toolbar for the write mode (#66116)

Co-authored-by: dhruvang21 <[email protected]> Co-authored-by: richtabor <[email protected]> Co-authored-by: youknowriad <[email protected]> Co-authored-by: draganescu <[email protected]> Co-authored-by: jameskoster <[email protected]> Co-authored-by: getdave <[email protected]> Co-authored-by: jasmussen <[email protected]> Co-authored-by: hanneslsm <[email protected]>
WordPress · Nov 27, 2024 · 0f6ab5d · 0f6ab5d · github-actions · Nov 27, 2024
1 parent ee17975
commit 0f6ab5d
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 0 deletions.
diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js
@@ -74,6 +74,8 @@ export function PrivateBlockToolbar( {
 		showGroupButtons,
 		showLockButtons,
 		showSwitchSectionStyleButton,
+		hasFixedToolbar,
+		isNavigationMode,
 	} = useSelect( ( select ) => {
 		const {
 			getBlockName,
@@ -85,8 +87,10 @@ export function PrivateBlockToolbar( {
 			getBlockAttributes,
 			getBlockParentsByBlockName,
 			getTemplateLock,
+			getSettings,
 			getParentSectionBlock,
 			isZoomOut,
+			isNavigationMode: _isNavigationMode,
 		} = unlock( select( blockEditorStore ) );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
 		const selectedBlockClientId = selectedBlockClientIds[ 0 ];
@@ -119,6 +123,7 @@ export function PrivateBlockToolbar( {
 		const _hasTemplateLock = selectedBlockClientIds.some(
 			( id ) => getTemplateLock( id ) === 'contentOnly'
 		);
+
 		return {
 			blockClientId: selectedBlockClientId,
 			blockClientIds: selectedBlockClientIds,
@@ -144,6 +149,8 @@ export function PrivateBlockToolbar( {
 			showGroupButtons: ! isZoomOut(),
 			showLockButtons: ! isZoomOut(),
 			showSwitchSectionStyleButton: isZoomOut(),
+			hasFixedToolbar: getSettings().hasFixedToolbar,
+			isNavigationMode: _isNavigationMode(),
 		};
 	}, [] );
 
@@ -170,6 +177,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-inverted-toolbar': isNavigationMode && ! 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
@@ -139,6 +139,45 @@
 		border-right-color: $gray-900;
 	}
 
+	.is-inverted-toolbar {
+		background-color: $gray-900;
+		color: $gray-100;
+
+		&.block-editor-block-contextual-toolbar {
+			border-color: $gray-800;
+		}
+
+		button {
+			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 {
+			color: $gray-100;
+		}
+
+		.components-toolbar-group,
+		.components-toolbar {
+			border-right-color: $gray-800 !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;