WordPress
Try dark toolbar for the write mode
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
https://github.com/user-attachments/assets/b7e6e5d5-15ab-4e85-8712-52ed656ecee9
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.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
This is working decently well for me. Would love a design review to ensure it's inline what the original ideal.
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.
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!
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.
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 :)
I think we need to have some kind of outline on the toolbar to ensure it stands out on darker background.
Good call, updated:
Spotted another issue. Select a template part in the page editor and hover the name; it disappears:
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.
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!
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.