Gutenberg: Merge Inserter and Settings; Drag and Drop blocks from Inserter into Navigator

[mariohamann]

I apologize for opening two issues in one, but they are so closely related that they only make sense together.

Problem

1: Space problem due to current block inserter

The current trend shows that the Block/Pattern Inserter can be activated and deactivated by clicking. At the moment the inserter and the settings panel take up quite a lot of space when activated. In fact both panels are never used at the same time. You do not insert a block and set it at the same time. I also had to realize that I am often busy activating and deactivating the block inserter to get the space on the screen back (16" display).

2: Block inserter and Navigator cannot be used simultaneously.

What would be much more likely to be used simultaneously would be the Block Inserter and the Navigator Panel, so that you could drag and drop something from the Block Inserter into the Navigator Panel. This is currently not possible because both the Block Inserter and the Navigator Panel are placed on the left side, as can be seen here: https://github.com/WordPress/gutenberg/issues/22113

Solution

Merge Block Inserter and Settings Panel

Referring to https://github.com/WordPress/gutenberg/issues/21080#issuecomment-615437507 the question arises whether the block inserter might not be better placed on the right side where the settings panel is.

Floating Action Button to display the blocks

The block overview could, for example, be displayed using a floating button (hereinafter FAB). As defined in the material design, the function to insert blocks would be quite suitable for this: "Floating action buttons provide quick access to important or common actions within an app. (https://material.io/develop/android/components/floating-action-button/)

A small shadow for this button might be quite good from a usability perspective, but might not fit the current Gutenberg design.´
The question arises whether after inserting the block, the settings should rather be displayed or whether the inserter should continue to be displayed until the focus is changed to another area. One way or another: A central function would be to use drag-and-drop from the inserter, as mentioned here: https://github.com/WordPress/gutenberg/issues/21080#issuecomment-623586138
BTW: The plus icon would of course disappear from the top bar, which is not bad considering the lack of space described here: (https://github.com/WordPress/gutenberg/issues/20877#issuecomment-601283215)

Disable the sidebar and still display the Floating Action button

The FAB should still be visible when the sidebar is deactivated. (Here the icon would also have to change, since there would no longer be only settings in the sidebar).

Display inserter temporarily if sidebar is closed

This would allow the inserter to be displayed temporarily - in an overlay that is slightly smaller than the sidebar, but still has a maximum height. Here the overlay should definitely disappear when clicking into the content area as well as after inserting the block.

Navigator Panel in the left sidebar without replacing Block Inserter

As a result, the left side could now be used for the Navigator.

This display of a table of contents is familiar to users from many applications (Apple Pages, Keynote, PowerPoint etc. etc.) and is, as already mentioned, discussed here: https://github.com/WordPress/gutenberg/issues/22113

Drag and Drop blocks from Block Inserter into Navigator Panel

This finally leads to the fact that you can now use Block Inserter and Navigator Panel simultaneously to insert content there.

From my perspective, this would greatly enhance the Navigator Panel and save the "hitting the correct block" in the content area.

Alternatives:

I thought about inserting the FAB halfway into the sidepanel, as described here: https://material.io/components/buttons-floating-action-button#placement However, it turned out that then too often content in the panel would be covered up. Apart from that, this would certainly be interesting to create a closer proximity between sidebar and button.

[ghost]

Hello. I was going to make the same proposal regarding "Merge Block Inserter and Settings Panel". This approach exists in other editor builders from which in my opinion is easier to work with, because as soon as adding a block on the page, my mouse is already above or closer to edit this block on the same sidebar, instead of running the page back and forth with the mouse every single time to add/edit blocks. Also, it is more convenient to be able to have:
A. a fixed Block-Navigation sidebar and a fixed sidebar to add and edit blocks, instead of
B. a fixed sidebar to add blocks, and another sidebar to edit blocks.

I believe however that the location of the add/edit-block-sidebar is better on the left, that is, the opposite of your proposal. It is strange to the eyes your proposal to add blocks from the right side of the screen, because Undo/Redo/... are on the left. Also, other WP pages align hot actions always on the left (as the rest of the web/mac/linux/windows do on their applications, focusing on left sidebars, if only 1 is the case). Considering that the wp-admin-sidebar is now hidden by default and on its place, a left-inserter-sidebar is now a thing inside the editor, the path is open for the community to reconsider the right sidebar, not the left sidebar.

I understand the position of the "Add block" button is neither a problem at the moment, nor a problem to merge sidebars. So I suggest keeping the "Add block" button where currently is. A drastic change on the most important item of the interface, dettaching it from the top toolbar, changing into a floating button positioned on the bottom-right of the editing screen, above blocks, are you sure about that being a good decision?
Also, there is already a "Add block" button below all blocks, in a position similar to your proposal. I enjoy the balance this bottom "Add block" button achieves with the other "Add block" button on the top toolbar.

Oxygen builder came to my mind to illustrate my contribution to your proposal.
On this gif you'll notice:

1. Add-blocks-sidebar opened by default.
2. Add-blocks-sidebar changing into Edit-block-sidebar as soon as the (Heading) block is selected or added on the page.
3. The block navigation is fixed on the right. It can be closed.
   

A block navigation fixed on the right could also be dettached to become a fixed popup from the top toolbar, as it currently is, or a floating Block-Navigation-popup on the middle of the screen, which strikes balance between occupying screen space and being visible immediately. (This is what I understand to be the best case for floating elements on the page).

Block-Navigation sidebar/popup/toolbar example from Elementor builder.
(A lot of power to be unlocked in the block navigator that we haven't yet)

---

While the adding/editing-blocks sidebars can be merged in a smooth transition, the real impending question on this issue is deciding on how to deal with the "Document" tab on the right sidebar.
I have already seen a proposal to create a "Document" popover on the middle of the top toolbar, and other discussion regarding combining the "Document" tab with the sidebar that appears when clicking on the Publish... button.
At the moment, a innocuous transition would be to maintain the "Document" tab on the same position, inside the unified add/edit block sidebar.
Later, the community can continue the discussion on what the "Document" tab may become.

Example:

Clicking on the first button inside the block navigation, "Document", opens up immediately the "Document" tab on the left sidebar. Isn't that great?

[paaljoachim]

@mariohamann This is a very interesting proposal!
Thank you and @marceloaof very much for sharing your thoughts!

This is something we will need to discuss a lot closer!

[paaljoachim]

@mariohamann
I made a prototype in Figma based on your suggestion on adding the block screen on top of the settings sidebar.
https://www.figma.com/proto/TLFEBSS5XFepWkQXoYYZ0x/Interface-experimentations?node-id=1%3A2&scaling=min-zoom

(I moved the inserter button to the top area just to the left of "Switch to Draft" just to have it closer to the right sidebar block screen.)

How did you make your examples, Mario?

[talldan]

@mariohamann Thanks for the very well described issue. I'd recommend also commenting on and adding links to your issue from related issues like #22113.

One issue with the drag and drop approach is that it's not accessible to keyboard-only users like those with impaired vision. It does also seem like a long way to drag an item.

I think there needs to be an option (additionally?) within block navigation itself to add blocks, which is something that has already been explored and needs some refinement:

[paaljoachim]

I went ahead and added another prototype.
https://github.com/WordPress/gutenberg/issues/22113#issuecomment-633014701

[MichaelArestad]

This is an awesome exploration. I think this is one of those things that will take some experimentation to get right. I left a comment on the original issue. In short, I think it might be good to start simple for now. Let's get a panel working and then ideate from there. There are several promising ideas including a floating panel and one that's tied to the right sidebar.

[mariohamann]

How did you make your examples, Mario?

@paaljoachim Excuse me for being late ..: I created them with Apple Keynote because I'm currently not in the Slack design group and therefore don't have access to the Figma files.

@marceloaof Interesting idea to flip the whole thing. Personally I think that the navigator on the left side is more promising as it is more known from other applicatons (think of Google Slides etc. etc.). In fact reading from left to right is currently the approach even in WordPress admin – Admin menu on the left (= navigator and overview – "where am I?") and connected content on the right.

[MichaelArestad]

I created them with Apple Keynote because I'm currently not in the Slack design group and therefore don't have access to the Figma files.

@mariohamann If you join the WordPress.org slack team and send me a DM with your email, I would be happy to send you an invite.