[Widgets editor] Global inserter open by default #24822
Conversation
adamziel
added
[Feature] Widgets Screen
adamziel
changed the title
|
Size Change: +1.7 kB (0%) Total Size: 1.17 MB
ℹ️ View Unchanged
|
|
I think in order to have it open by default we should not allow it to be closed — it should become a region that is always accessible. |
|
In terms of a11y, I think we need to bring the "popover" behavior of the "inserter" to edit-widgets screen. |
|
What I mean is having it open all the time in the same way the current widgets screen has widgets available on the page always visible. And remove the [+] toggle entirely. |
I'm hesitant on this, @mtias. Users will still be able to access the Settings sidebar for blocks too. Keeping the Inserter panel always open takes up a lot of space. Here's a quick mockup to visually convey what I'm talking about. And this is on a fairly wide screen (1278 x 800). Design notes
|
|
I don't think that's much of a problem but might be worth trying both. If it's not always open we should not have an "open by default" since it would also absorb focus and we don't want that on loading the page. |
|
I think we're fine showing the Inserter by default. It mimics the behavior of the original widgets screen. I've put this flow together here: #24561 (comment) It appears to work fine. The Inserter can collapse if needed to save space when opening the Inspector, or simply by clicking the |
|
@mapk there are different implications here since the inserter has popover / modal behaviours. Meaning focus is transferred and contained, which cannot happen on first load of the page as it'd be confusing. |
|
Could we just not capture focus on the first load in this specific inserter only? |
|
I don't think so because as soon as you insert a single widget/block, it will close itself which is confusing IMO. |
|
As @youknowriad mentions, the interaction model of the inserter as a toggle doesn't lend itself to open by default. The only way I can think of to make it open by default is to remove the toggle behaviour entirely. |
|
Potentially it could be a setting "inserter always visible or not" in an "options" modal if there's a big need for it. |
|
I updated this PR to:
I didn't update it to use If this direction seems right - let's figure out what's missing from this PR and how it could be better in terms of a11y / Gutenberg patterns. Also, is this comment relevant to the always-open sidebar inserter inspired by the post editor? @youknowriad
|
|
Thanks, @adamziel !
This interaction should work as it does in the Post Editor now. Opening the Inspector should not close the Inserter unless there's not enough space to show both. I believe there are settings established there that can be adopted here. Post Editor
It started out right to me. I can tab "skip to content" to jump into the topbar. BUT I can't seem to keyboard my way into the Inserter blocks. If I hit |
That makes sense, thank you! Fortunately it sounds like an easy change.
Good notes, thank you! I wonder if that's part of what @youknowriad meant by the popover behavior. |
|
I talked to @mapk, we compared this interaction to the post editor and the keyboard interaction is actually not trivial to solve with an inserter that doesn't act like a popover - what key should even transfer the focus to the inserter? Enter is for opening/closing. Tab is for navigating the toolbar. Down arrow wouldn't be consistent with other components. Ultimately that's a UX problem to solve, not a bug in the code. I'll defer to @mapk on what should we explore next here. |
|
Because of the complexity, I'd rather we hold off creating a new Inserter interaction that differs from the post editor and move to not include it by default. As your other PR is improving, let's just get the Inserter to mimic the Inserter in the post editor. This way rather than going down a rabbit hole on the Inserter, we can focus on completing the Widget Editor. |
I'd definitely agree the inserter interaction should be consistent everywhere. Our primary goal should be providing users with a predictable, expected, interaction across the WordPress UI. Also, keeping the inserter open by default and removing the toggle entirely would force keyboard users to tab through the whole inserter to get to the content each time the use this page. This would make keyboard navigation inefficient. It would also be an assumption that the users flow is always "add" while they might just want to "edit" or "delete" an existing widget (and thus there's no need for the inserter at all).
Interesting idea. What we're constantly learning with Gutenberg is that users have different needs or even just different preferences. Maybe it's worth reconsidering a bit the WordPress mantra "decisions not options" because a complex user interface needs to cover many different needs. To some extent, options can help. If in the future the need for some users to keep the inserter open will be clear, I wouldn't be opposed to a setting. It could also be a button within the inserter itself, something like "make the inserter sticky" (always open). Such a setting might be useful also in the block editor, for example with very large screens. |
|
It seems like we're pivoting - let's close this PR. |
Description
Before:
After:
Related to @mapk explorations in #24561.
This is the first stab at this feature. The code is partially copied from the post editor - to avoid repetition we could extract at least one reusable components here: BlockLibrary sidebar. It's not obvious to me where would it live though - ideas appreciated.
How has this been tested?
Types of changes
New feature (non-breaking change which adds functionality)
Checklist: