Add setting to configure whether inserter sidebar remains open or not

[bph]

It felt a bit cumbersome to have to open the inserter after each widget again. When asked if it can stay open, there were accessibility and focus issues to consider.

I commented on another issue: "I understand the reasoning behind why the left bar Inserter needs to close when focus changes. Would there be a way to add a 'stay open' property to the modal, users can switch on and off? Default is "off"."

@mapk commented: I think that's totally possible! Maybe it resides as a setting in the new "Preferences" section?

[mapk]

Recent feedback about the Widget Screen has highlighted confusion around the Inserter and why it closes after adding a block to the widget area. This automatic closing is causing UX and usability problems.

Notable feedback collected in the comments of the Call for Testing post: https://make.wordpress.org/core/2020/09/30/call-for-testing-the-widgets-screen-in-gutenberg-9-1/

it would make a better widget screen if you left the + menu open all the time

On larger screens can the Add block left side menu just be displayed by default and let it stay after a block is added.

Is there a way to keep the Widgets selector area (Left side) always open? When you add a widget/block to a block area, the selector area auto-closes. If I wanted to quickly add say 5-10 individual widgets, currently I’d have to do a lot of back-and-forth clicking and scrolling.

I've also received 3-4 direct messages in Slack from people about this interaction causing an issue for them.

@bph maybe you can rename this issue title to outline the problem instead of a solution? Something like, "Widget Editor: Inserter closes after adding a block from it" ?

[bph]

@mapk Thank you for going back on this and rethink of a different approach for the left sidebar inserter section.

It removes cognitive load for users, to have it open by default, so they know where to find the blocks and to stay open after adding a block to a widget block area. That would be the optimal flow.

[paaljoachim]

Bottom line is sounds like we need an easy way for the user to have some kind of control and have a way select to have the Inserter Panel open.

Some brainstorming.

This mockup includes a checkbox.

This one contains a kind of button with an on/off state. It would need a hover tip though as it lacks text.

I will see what other ideas pop up...:)

[mapk]

@paaljoachim I would imagine a setting like this to be located under the Options > Preferences modal. That might be a better place to include it. I'm not sure what the text would say though because clicking the + button again should close the panel. The checkbox to "keep panel open" shouldn't overwrite that interaction.

[paaljoachim]

Hey Mark @mapk
Yeah, in the Options -> Preferences modal is a natural place to have it. The only issue I see with it is that it is harder for a user to discover. Perhaps we need some kind of tips/help system for the first time someone enters the new widget screen similar to entering Gutenberg for the first time. As it would give an initial run through of how the new widget screen works. Sounds like I need to create a new issue. A part of the tips/help screen could be a check box that mentions to automatically keeping the inserter panel open.

---

Let's say that there is a UI way similar to my mockups to click a control so that the panel automatically remains open. The check box etc should only affect the automatic closely of the panel so that it automatically changes to staying open as long as the user does not click the + inserter button to close it again. Btw having an obvious control to keep the Inserter panel open would benefit both Gutenberg and the Widget screen, as sometimes we need to quickly insert multiple blocks. Having the Inserter panel open between each time we add a block would in these situations be very helpful.

Another exploration uses the sticky Dashicon. I placed it to the right of the Search box.

[bph]

Making one UI entity do two different things, like open and close, is a bit of cognitive load. With the (+) being used not only for the left side panel, but also in sibling inserter through-out the editor. I can see that not many users will pick-up on the additional feature that it also closes the left sidebar.

In other apps and websites, users have been trained to close a modals/section by clicking on an "x" in upper-right corner. Maybe that could be considered here as well?

[mapk]

Perhaps we need some kind of tips/help system for the first time someone enters the new widget screen similar to entering Gutenberg for the first time.

@paaljoachim I know it's not the answer, but the Inserter does include "tips" at the bottom. We could try forcing the tip about how to keep the panel open always visible in the Widget Editor.

I can see that not many users will pick-up on the additional feature that it also closes the left sidebar.

@bph it's similar to the Settings "cog" in the upper right of the topbar. I think keeping the buttons somewhat consistent in that topbar is important even though it may not be realized initially. There's also an issue exploring a "close" indicator as well: #22871

[paaljoachim]

Hey Mark @mapk are you thinking something similar to this mockup?

Options is highlighted and is also a link that opens the Options screen so the user can directly turn on the "Keep Inserter Panel open" (Sticky panel) option.

I added in some dots below the tip so a user can click a dot to move to the next tip. Having a dot below the tip gives the opportunity for the user to view additional tips.

[mapk]

@paaljoachim, something like that is exactly what I was thinking. I'm open to whether or not the word "options" should be linked. As for the dots, let's not worry about those right now because they're trying to solve another possible problem, and currently feels like too much UI for that small space.

But yes, maybe just a simple tip there that brings awareness to the Options setting. Although, I'm not sure who actually finds and reads those tips at the bottom of the Inserter. 😉

[paaljoachim]

@mapk Yeah. It is very easy to overlook the bottom tips. I think it atleast is a beginning something that we can gradually iterate on. The reason for the dots is that the existing tip "While writing, you can press / to quickly insert new blocks." is a good tip to also have available. Perhaps we need a left/right arrow to move between tips. Anyhow that is for another time. In another issue.

[mapk]

It appears that the "options" menu has been removed from the Widget Screen though. This causes a problem to my solution. See no ellipses icon next to the cog icon in the topbar:

It seems like providing this in the Options menu is a good place because I could see it useful in the Post Editor too. Maybe we can add back the ellipses options menu to the Widget Screen?

[noisysocks]

It seems like providing this in the Options menu is a good place because I could see it useful in the Post Editor too. Maybe we can add back the ellipses options menu to the Widget Screen?

Yes, there's no reason we can't have this on the widgets screen.

Right now the inserter behaviour on the widgets screen matches the behaviour on the post screen. Any solution we come up with here should apply to both screens.

[shaunandrews]

I'm not sure about adding an option. I think the current behavior is simply broken; The sidebar should not close when you select a block. Instead, I believe the sidebar should remain open until intentionally closed, just like the other sidebars within the editor.

More here: #24429 (comment)

[EmSixTeen]

This is both infuriating and confusing, and is one of the many off-putting things about Gutenberg. It's bad enough that 'Fullscreen mode' is enabled by default. Please, oh please add this preference setting.

[sinanisler]

why is this issue ignored ?
@m

there should be setting in the WordPress itself to make this option default for other users as well.

[ShahriarKh]

This is one of the most basic things that Gutenberg should be able to handle and I don't know why is the issue closed. Even if it's not going to be implemented soon, please let us know how to disable the behavior with a plugin or something.

[Tukaramdas]

In all honesty, this sidebar closing is the most annoying thing about the block editor. How can we edit easily when the block inserter goes away every time we choose a block? Extremely frustrating, I hope it is addressed eventually. This discussion has been ignored for 2 years... so it is already later, than sooner, so eventually?

[joedolson]

I'm inclined to agree with @shaunandrews; closing this sidebar should be a choice by the user, and not happen automatically. I don't think this should have been closed by the related PR, though that helps the situation. That PR allowed a user to insert more than one block without closing the sidebar, but it still automatically closes the sidebar as soon as a block is focused. That's a behavior more like a modal, which would be fine if this interface had any of the normal affordances associated with a modal.

[paaljoachim]

I am reopening this issue as mentioned on Slack in the Accessibility channel.
There are some accessibility concerns which will need to be addressed first before we can move ahead with this issue.

[noisysocks]

When I test this locally I see that the inserter sidebar remains open after inserting a block in the post editor, widgets editor, and site editor.

[noisysocks]

Oh! My mistake. This is an enhancement request to add a setting that allows this behaviour to be configurable.

[noisysocks]

@paaljoachim: What were the a11y concerns discussed?

[Tukaramdas]

When I test this locally I see that the inserter sidebar remains open after inserting a block in the post editor, widgets editor, and site editor.

My side bar NEVER stays open after selecting a block. It is a major pain in the butt and really hampers efficient work.

[youknowriad]

@noisysocks I think this is a bit difficult and not suited for "Good First Issue" as there are a lot of a11y implications related to the removal of the "dialog behavior" of the inserter (focus out closes it). I'm removing the label but feel free to restore it if I misunderstood the issue :)

[paaljoachim]

Hey Robert @noisysocks

Here is a comment from @alexstine made on Slack in the Core Editor channel
https://wordpress.slack.com/archives/C02QB2JS7/p1666869815396689

It will only be the right way to go if my list view test goes well. Really, this whole section needs to be refactored first, but could hack it together if necessary. The whole problem was if focus moved away, there was no way to get back to the inserter sidebar. Another problem to think about in the context of the inserter is how to skip to the last inserted block. Anyway, my PR fixes one of those.
#45135
Just need further feedback before I finish it off.

For anyone who wants to go to Slack but is not a member of Making WordPress on Slack then follow this tutorial I have made: https://easywebdesigntutorials.com/how-to-join-wordpress-slack-channels/

[alexstine]

Yes, this will be completely premature until I land my POC for fixing this in the list view sidebar. If it works, I think this can be explored more. As of now, A11Y is still a blocker. Just did not want anyone to have loss of hope, this will likely be doable soon.

[sinanisler]

does anyone know with what .js object I can control and keep the block inserter open all the time?
thanks

[sinanisler]

ok, it looks like with this trigger it is possible to keep open the inserter.

wp.data.dispatch('core/edit-post').setIsInserterOpened(true);

but the problem is keeping the inserter open creates other problems. need some core changes to make that possible. every time I try to keep it open inserter, the cursor focus breaks and it becomes impossible to write properly.

cursor forcing to stay on the search input. if click on the editor gets more and more annoying. it just doestn let me write in editor while keeping the inserter. :)