Add button text labels to site editor. #38317
Conversation
tellthemachines
added
Needs Design Feedback
tellthemachines
requested review from
kevin940726,
jorgefilipecosta,
jasmussen,
talldan and
Mamaduka
|
Size Change: +1.36 kB (0%) Total Size: 1.21 MB
ℹ️ View Unchanged
|
|
Nice, thank you! Here's a quick visual of toggling the option from the more menu: You mention this with #24370, we need to unify the options interface across post and site editor. I would dare to say it's likely that if you want text-only buttons in the post editor, you likely want it in the site editor as well. That's also the biggest challenge to this PR; it takes one of the options you access in the Preferences modal in the post editor, and puts it right at the top in the site editor, making it unclear why that option is there, but all the other options aren't, such as "Show most used blocks", "Contain text cursor inside blocks", "Reduce the interface", etc. Can we bring the preferences modal to the site editor? |
|
Thanks for the feedback @jasmussen , it does make sense to have consistency in the preferences modal. There's work in progress in #34195 and #34191 to unify the modal so we might want to wait on that to be done, though if there's anything I can improve in the meantime with regards to the button text, spacing etc. let me know! |
|
This is a good start and can be merged separately from the Preferences modal. @tellthemachines, it looks like we need to update a few Unit Tests. I will leave design feedback to @jasmussen 🙇 |
|
With #38873 in progress to try and unify the Options menu across editors, I'm hoping to get back on this PR soon. Unifying the preference interface won't solve all our problems though; if
we also need to think about how potential cross-editor settings will work. #24370 kicked off the discussion on that, but there's still an important UX question that remains to be answered: where would cross-editor settings live? If a setting is within an editor, as the ones in the Options menu are, it seems weird for it to have an effect on other editors. So where should global settings go? In the general site settings? Would be great to have some design thoughts on this, @jasmussen ! |
Indeed that's a good point. Perhaps this setting isn't cross-editor after all: if we (as is probably likely) continue to have two separate editors, I might want a reduced UI with no breadcrumb bar in the post editor, but not in the site editor. There might be additional configurations I'd want to tailor to each. Especially if it can unblock this PR, it seems fine to making the change local just to one editor, have it live in the same place in both. That would also give some time for design explorations for where global settings could live, which to my current instinct would be the global Settings > Writing interface, which then comes with its own set of questions. |
tellthemachines
force-pushed
the
add/site-editor-icon-labels
branch
from
e6b09db to
1d3f3c4
Compare
|
Ok I rebased and updated to add the toggle inside the new preferences modal 😄 Labels on the header are not quite right yet, they look a bit squished at 900px:
On the post editor, when text labels are enabled the left hand side toolbar only shows at 1280px. I'm tempted to do the same here, except the List View is more of an essential tool in the site editor, so it's not great to hide it away. Any thoughts on this? Cc. @jasmussen |
|
Nice one, thank you for your patience. As a quick litmus test, here's the post editor: Here's the site editor:
A few small things. I don't know why the "Add" button looks right in the post editor but off in the site editor, maybe some drift? The "Show template details" button could probably do both with some left margin, and some verbiage change to compress it; it's useful, but not nearly as useful as the tempate title itself. Could it simply read "Details"?
This is the fundamental challenge with text labels, and when collapsing to icons for balancing relative value isn't an option, we have only a few options, and hiding the items feels like the last resort. A few options: reducing the font size, padding, and margins, and rephrasing long labels to be shorter. Here's a hacky inspector mockup that reduces the font size to 11px, margins to 4px, and horizontal paddings to 6px:
Given the fact that you can at any one time press ⌘+ to zoom in, this doesn't feel bad at all to me, especially since it feels like an improvement over hiding the tools on the left. MacOS uses the same font size, but goes a step further in allowing chevron based overflow handling: The only other option I can think of, would be to let toolbars stack onto multiple rows. |
|
Ok, I fiddled a bit with the button margins and paddings, and I think we can get away with not reducing the font size. I'd rather not reduce it if we can possibly avoid it, because it gets super hard to read, and zooming in on a laptop screen can easily end up with all the buttons being hid as we hit the smaller breakpoint 😅 |
|
Given this one brings parity with what exists in the post editor, it seems fine to land given a technical review.
Of course good to exhaust other options. Though I'd still keep it as an option: a 12px font size might be preferrable over a cropped block toolbar in terms of picking between tradeoffs. |
* Add button text labels to site editor. * Move preference into modal. * Update tests. * Update feature selector. * Adjust margins and paddings on header buttons.
priethor
added
[Focus] Accessibility (a11y)
Description
Partially addresses #15311. Like #24234, #24304 and #26135 did for the post editor, this adds an option to the site editor to show text labels instead of icons on interface buttons.
This might also be a good time to bring up #24370 again, as it would be convenient to be able to set this option across all editors at once.
Testing Instructions
Screenshots
Types of changes
New feature (non-breaking change which adds functionality)
Checklist:
*.native.jsfiles for terms that need renaming or removal).