Try dark toolbar for the write mode #66116

dhruvang21 · 2024-10-15T08:50:37Z

What?

Let's try adding an additional affordance to write mode to help you understand what "mode" you're in, writing or design, by leveraging the pre-existing styles for select mode. This way there's a clear visual affordance to indicate the difference in experiences.

Why?

Part of 66054

How?

I’ve applied the conditions for the is-contentonly-mode class, which gets added when the write mode is activated. I also tried to add the SCSS to match the design. While I did my best to ensure the SCSS is correct, I believe it can be further optimized through the review process if necessary.

Testing Instructions

Open a post or page.
Insert a any block or pattern.
Then change the mode to write mode see the toolbar in darkmode.

Screenshots or screencast

Dark-toolbar-mode.mp4

github-actions · 2024-10-15T08:50:50Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

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]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

dhruvang21 · 2024-10-18T06:21:11Z

@richtabor can you please review this PR

packages/block-editor/src/components/block-toolbar/style.scss

packages/block-editor/src/components/block-tools/style.scss

packages/block-editor/src/components/block-toolbar/style.scss

youknowriad · 2024-10-24T11:57:02Z

This is working decently well for me. Would love a design review to ensure it's inline what the original ideal.

jameskoster · 2024-10-24T12:40:57Z

packages/block-editor/src/components/block-toolbar/index.js

@@ -167,11 +171,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-dark-toolbar': ! isDefaultEditingMode && ! hasFixedToolbar,


I'd avoid words that dictate the appearance (dark) as we may need to re-evaluate the design when we introduce light/dark modes down the road.

So how you would name this. See my previous comment here #66116 (comment)

We could use inverted or alt (as in alternative)?

@dhruvang21 I think this line causes the issues in my video - isDefaultEditingMode applies to indivudual blocks which can be locked or in partially synced patterns so we can end up with the dark toolbar in default mode.

@draganescu, you’re absolutely right; this condition isn’t complete as it fails for blocks with unique states—like those that are locked, reusable, or partially synced in patterns—where each block’s mode can differ within the editor.

For now, I think we could add this condition: getBlockEditingMode(parentClientId) === 'contentOnly', which directly targets the parent block’s mode. However, a better approach might be to retrieve the editor mode in a way similar to how it’s done for zoom-out activation.

Let me know your thoughts!

jameskoster · 2024-10-24T13:05:43Z

I haven't been very close to this work so take my feedback with a grain of salt, but I don't know that I'd equate a different toolbar color to a different mode. I'd be tempted to try something with the canvas... maybe in design mode you see the artboard and resize handles:

In terms of the execution I don't love the style overrides; they generally lead to maintenance headaches down the road.

Toggled buttons are looking a bit odd and don't meet contrast requirements:

Menus and popovers remain light, is this intentional?

In an ideal world this would be handled more sustainably, IE at the component level via theming.

jasmussen · 2024-10-24T16:22:57Z

I would echo Jay's note. There are some good ideas, good intents. But compent and admin-level theming is increasingly on the radar, which will afford a systematic approach to more easily test and tune this in a way that does not risk adding technical debt. I would circle back to this once we're a bit further. But thank you for the contribution, the instinct, and the work!

jasmussen · 2024-10-24T18:13:02Z

My above comment aside, 66054 makes a good case for why a dark toolbar as outlined can make sense even before theming. If this passes a good code review, no blockers from my end.

jameskoster · 2024-10-25T08:55:24Z

I certainly agree it's worth trying something to help indicate the active mode. I'm not 100% sold on using the toolbar to do that because it's not always visible, and because 'top toolbar' exists. That said I would also not block :)

richtabor · 2024-10-25T09:54:07Z

Pushed a few slight color changes.

getdave

Thanks for this PR.

For me when the toolbar is over a black background it provides a poor experience. I suspect this might be a problem for a11y as well.

I think we need to have some kind of outline on the toolbar to ensure it stands out on darker background.

jasmussen · 2024-10-25T10:13:23Z

Related, though not for this PR: #66455.

richtabor · 2024-10-25T13:15:01Z

I think we need to have some kind of outline on the toolbar to ensure it stands out on darker background.

Good call, updated:

jameskoster · 2024-10-25T13:51:39Z

We also need to fix the contrast on toggled buttons.

jameskoster · 2024-10-31T09:44:49Z

Spotted another issue. Select a template part in the page editor and hover the name; it disappears:

draganescu

There is a bug in the implementation which keeps the light toolbar around after switching modes, plus the style leaks to all nstances of content only whereas we only want this for the write mode

dark-toolbar-leaks.mp4

dhruvang21 · 2024-11-05T11:29:01Z

Hello @draganescu,

Could you please share the steps to recreate the issue you showed in the video? I wasn’t able to reproduce it when testing in the Gutenberg PR reviewer.

draganescu · 2024-11-26T19:59:49Z

Hi @dhruvang21 sorry for the delay, and thanks for your patience too!

To repro the issues I encountered:

add a page
add some patterns
go to the inspector > Page > Template
Select template name
Select show template
Notice that now we can select the content block
in write mode the content block has a white toolbar

also

in a template
have some template parts
notice the template parts have a dark toolbar in design mode

I think the problem is we don't target the mode but the "locking" and the issue is to use the dark toolbar in write mode only, eg. when the blocks are locked in content only keep the white toolbar,

This PR also needs a rebase now as the write/design mode have been moved to an experiment. Hope this helps!

youknowriad · 2024-11-27T07:58:29Z

I fixed the issue raised by @oandregal above and addressed some feedback. I think this is ready to go.

I don't love it personally but I'm ok shipping and trying it.

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]>

dhruvang21 requested a review from ellatrix as a code owner October 15, 2024 08:50

draganescu requested review from draganescu, youknowriad and richtabor October 22, 2024 11:38

draganescu assigned dhruvang21 Oct 22, 2024

draganescu added [Type] Enhancement A suggestion for improvement. Needs Design Feedback Needs general design feedback. [Feature] Write mode labels Oct 22, 2024

draganescu linked an issue Oct 22, 2024 that may be closed by this pull request

Use the previous "select mode" dark toolbar style for Write mode #66054

Closed

draganescu added [Feature] Edit Mode and removed [Feature] Write mode labels Oct 22, 2024

draganescu reviewed Oct 22, 2024

View reviewed changes

packages/block-editor/src/components/block-toolbar/style.scss Outdated Show resolved Hide resolved

youknowriad reviewed Oct 22, 2024

View reviewed changes

packages/block-editor/src/components/block-toolbar/style.scss Outdated Show resolved Hide resolved

dhruvang21 commented Oct 24, 2024

View reviewed changes

packages/block-editor/src/components/block-tools/style.scss Outdated Show resolved Hide resolved

youknowriad reviewed Oct 24, 2024

View reviewed changes

packages/block-editor/src/components/block-toolbar/style.scss Outdated Show resolved Hide resolved

youknowriad requested review from jameskoster and jasmussen October 24, 2024 11:56

jameskoster reviewed Oct 24, 2024

View reviewed changes

getdave reviewed Oct 25, 2024

View reviewed changes

jasmussen mentioned this pull request Oct 25, 2024

Add support for "more" dropdown for additional tools in Write mode #66455

Closed

draganescu reviewed Oct 31, 2024

View reviewed changes

richtabor added [Feature] Write mode and removed [Feature] Edit Mode labels Nov 1, 2024

dhruvang21 requested review from draganescu, youknowriad and getdave November 21, 2024 11:49

dhruvang21 and others added 8 commits November 27, 2024 08:56

Try dark toolbar for the write mode

6eeb8f3

Add active color

13cd511

Changes in classname and css

991de5c

Update css

cba6adc

minor color changes

c39a052

add slight border to provide better contrast on dark

4c0b869

Change the classname

e833472

Fix condition

3fb856b

youknowriad force-pushed the try/dark-toolbar-mode branch from 10d338c to 3fb856b Compare November 27, 2024 07:57

youknowriad approved these changes Nov 27, 2024

View reviewed changes

youknowriad enabled auto-merge (squash) November 27, 2024 07:58

youknowriad merged commit 0f6ab5d into WordPress:trunk Nov 27, 2024
62 checks passed

github-actions bot added this to the Gutenberg 19.8 milestone Nov 27, 2024

t-hamano mentioned this pull request Nov 27, 2024

Fix color of disabled buttons in dark toolbar #67348

Merged

jameskoster mentioned this pull request Nov 29, 2024

Applying design system foundations to the Block Toolbar #67426

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Try dark toolbar for the write mode #66116

Try dark toolbar for the write mode #66116

dhruvang21 commented Oct 15, 2024 •

edited by draganescu

Loading

github-actions bot commented Oct 15, 2024 •

edited

Loading

dhruvang21 commented Oct 18, 2024 •

edited

Loading

youknowriad commented Oct 24, 2024

jameskoster Oct 24, 2024

youknowriad Oct 24, 2024

getdave Oct 25, 2024

draganescu Nov 5, 2024

dhruvang21 Nov 6, 2024

jameskoster commented Oct 24, 2024

jasmussen commented Oct 24, 2024

jasmussen commented Oct 24, 2024 •

edited

Loading

jameskoster commented Oct 25, 2024

richtabor commented Oct 25, 2024

getdave left a comment

jasmussen commented Oct 25, 2024

richtabor commented Oct 25, 2024

jameskoster commented Oct 25, 2024

jameskoster commented Oct 31, 2024

draganescu left a comment

dhruvang21 commented Nov 5, 2024

draganescu commented Nov 26, 2024

youknowriad commented Nov 27, 2024

Try dark toolbar for the write mode #66116

Try dark toolbar for the write mode #66116

Conversation

dhruvang21 commented Oct 15, 2024 • edited by draganescu Loading

What?

Why?

How?

Testing Instructions

Screenshots or screencast

github-actions bot commented Oct 15, 2024 • edited Loading

dhruvang21 commented Oct 18, 2024 • edited Loading

youknowriad commented Oct 24, 2024

jameskoster Oct 24, 2024

Choose a reason for hiding this comment

youknowriad Oct 24, 2024

Choose a reason for hiding this comment

getdave Oct 25, 2024

Choose a reason for hiding this comment

draganescu Nov 5, 2024

Choose a reason for hiding this comment

dhruvang21 Nov 6, 2024

Choose a reason for hiding this comment

jameskoster commented Oct 24, 2024

jasmussen commented Oct 24, 2024

jasmussen commented Oct 24, 2024 • edited Loading

jameskoster commented Oct 25, 2024

richtabor commented Oct 25, 2024

getdave left a comment

Choose a reason for hiding this comment

jasmussen commented Oct 25, 2024

richtabor commented Oct 25, 2024

jameskoster commented Oct 25, 2024

jameskoster commented Oct 31, 2024

draganescu left a comment

Choose a reason for hiding this comment

dhruvang21 commented Nov 5, 2024

draganescu commented Nov 26, 2024

youknowriad commented Nov 27, 2024

dhruvang21 commented Oct 15, 2024 •

edited by draganescu

Loading

github-actions bot commented Oct 15, 2024 •

edited

Loading

dhruvang21 commented Oct 18, 2024 •

edited

Loading

jasmussen commented Oct 24, 2024 •

edited

Loading