Inserter: Its not obvious how to close the inserter

[shaunandrews]

During some recent usability testing, I watched a user who had managed to open both the inserter and the inspector at the same time. Her screen looked something like this:

Now this person had opened both of these panels intentionally, and was making some progress on creating a new page. However, with both panels open much of their content was "squished" and they wanted to hide some tools that they no longer needed.

This person quickly found the "x" icon in the top-right of the Inspector panel...

...but they were unable to find a way to close the inserter. You'll notice that there's no obvious way to close the panel.

The changing color of the button (from blue to black) wasn't obvious to them, and they didn't connect it with a toggle interaction.

[paaljoachim]

A quick idea would actually be to turn the + icon into an x icon when the inserter is open. Like so.

As the X gives the idea of closing.

[shaunandrews]

That’s an interesting idea. However, part of me thinks that whatever we do, the pattern for closing a panel should be consistent regardless of if the panel is on the left or the right.

[chrisvanpatten]

It might be interesting to swap the search box down into the tab panel, then align the tab header styles in the inserter and document inspector. Right now they use different styles, but it might be a good opportunity to unify…

(I don't necessarily love the grey background behind the tabs but thought I'd put it in to show what a 100% style alignment would look like)

[pablohoneyhoney]

Liking @paaljoachim idea, but it's worth looking first at other instances that would have that behavior and value if it still makes sense, to @shaunandrews point.

I don't think we should copy the existing pattern in the sidebar, as this interface needs work to do and it would be a regression to adopt something that might evolve anyways.

The search below the tabs is misleading, as the search has a higher architectural significance.

[ZebulanStanphill]

@pablohoneyhoney Well, the search bar actually changes behavior depending on which tab you're on, so it's really two different search bars. So it actually makes more sense for it to appear below the tabs.

[richtabor]

Is there any reason why the library/sidebar toggle acts differently from the settings sidebar toggle (OFF: icon without background color, ON: Icon with black background color)?

Here's a Figma prototype of what it would feel like if they acted the same: https://www.figma.com/proto/VIyk72dx50GifV5ifPM63X/Library-Toggle?node-id=1%3A4&viewport=380%2C1085%2C0.5&scaling=contain

[ZebulanStanphill]

The "Add block" button is a primary button (just like the Publish button), so that's why it has a blue background by default. It is a bit awkward that the active state looks the same as a standard button, though.

[richtabor]

Why is it considered a primary button? 🤔

[ZebulanStanphill]

Because adding blocks was considered a primary action. I think @jasmussen would know more.

[pablohoneyhoney]

I don't think it's a primary action but intrinsic to the editing experience. Color and shape helps for hierarchy in the context of the collective UI, both within the top bar left functions as well as the rest of the interface.

[paaljoachim]

This is a somewhat associated issue. This is in regards to the inserter parent-child relationship in the Buttons Block. Check out the video as well. #21509 (comment)

[mapk]

I'm favorable to @paaljoachim's idea about turning the + into an x. Noting that most of the topbar icons work as a toggle anyways, I think this could work well.

[ghost]

It never occurred to us to look outside of the panel for the close button. The only workaround we figured out was to click on the black plus icon on the page for inserting new blocks, not the plus button on the top toolbar. We also did a search online to figure out if there was a way to close it and didn't readily find one. Now that we know about the toggle on the top toolbar, we have a decent workaround. However, after reading the details in this ticket, it would make sense to either have a close X on the Browse All panel or remove the close X on the other panels and force users to open and close using the top toolbar. I wonder if there are any accessibility implications of not having an option to close panels easily from within the panel though.

[ZebulanStanphill]

#24429 changed the inserter behavior so that it automatically closes when focus leaves it (making it act more like a popover/dropdown), so I think this issue can be closed.

Remaining accessibility issues with the inserter are being discussed in #24975.

[afercia]

This was also reported on Trac (see https://core.trac.wordpress.org/ticket/50725) and during today's accessibility meeting we closed the Trac ticket in favor of this issue. I'm not sure the problem can be considered fully solved or at least I'd like to see it discussed more in depth by the accessibility team. Also, to keep track of the specific issue reported on Trac, I'd like to reopen this 🙂

[sarahricker]

This issue was discussed again in today's Accessibility + Design Office hours in slack.

Overall, we agreed that either design would work, and that it would be great to offer easier visibility on how to close the inserter.

When opening the inserter:

• converting the [+] button that opens inserter into a [x] close inserter button would be helpful for users with dexterity issues that opened the inserter by accident, and which to close right away.
• adding the [x] button to the right of the tab panel is also a great idea -- as it matches the other closable panels, adding consistency to the experience.

Ideal combination of options based on our discussion:

1. Use both, if not too complex! 😂 🥇
2. Use tab panel option only, but convert the [+] button to be disabled, as it doesn't actually mean anything at all if the inserter is already open.
3. Convert the [+] button that opens inserter into a [x] close inserter button only. (seems the easiest answer, but prefer option 1).

Any of those would be acceptable re: accessibility. Thanks so much @shaunandrews! 🎉

[paaljoachim]

Here is a support issue that was shared in the slack design channel.
https://wordpress.org/support/topic/stop-gutenberg-sidebar-disappearing-when-edit-code-in-editor/

From Aleksandar.
"When I click to edit any part of the editor text or code, the gutenberg sidebar disappears, now I know this is new update so it might be normal to work that but it is really annoying that every time I click to write paragraph text, whole page move to the side.
Please take a look at the photos, Is it possible to keep the sidebar sticky all the time."

[bcworkz-wp]

When opening the inserter, the right side meta boxes close (5.7). This makes sense due to limited screen real estate. However, when the inserter closes, the previously open meta boxes remain closed. This isn't cool, the user's previous state should be restored. If it was closed, it stays closed. If it was open, it should be reopened.

[paaljoachim]

Hey @bcworkz-wp
I believe you are talking about what is mentioned in this issue:
If the Inserter panel closes the Inspector panel, the inspector should re-open
#23968

[paaljoachim]

@jameskoster
James has made a PR for an open and close "Add block" inserter panel.
Here: #29759

[annezazu]

Closing this out now that Jay's PR has merged and this no longer occurs 🥳

Screen.Recording.2021-05-17.at.10.32.49.PM.mov