More UI space needed for certain block inspector controls

[dgwyer]

The block inspector is fine to edit simple block settings but it's a little restricting for more complicated blocks.

I'm developing a block to allow users to enter grid data in a via a custom JS library such as Handsontable.

The problem is that this can't really be added to the block inspector panel as there is just not enough space to comfortably edit data. I'm sure there are many other use-cases where it's desirable to have more space to edit certain block settings.

One solution could be to have a button in the block inspector, or on the block itself that opens a (modal?) dialog that allows you more room to maneuver. Obviously this needs extra consideration for mobile devices where you don't have a lot of editing space to begin with!

[carlhancock]

The narrowness of the inspector sidebar is going to pose issues for the plugin ecosystem. Without a doubt Blocks are going to provide all kinds of features and functionality which means more settings.

The core blocks are all pretty basic. More feature rich Blocks are going to have more feature rich settings to go with it. They may have to use a modal window like the media related blocks do. Or they may have to do a full screen takeover which is one of the UI conventions that exists within Gutenberg.

With that in mind the Gutenberg team may want to provide a recommended UI convention for this situation so that plugins can try and do things in a consistent manner.

[karmatosed]

@dgwyer when you say there isn't enough space in the settings panel. What are you trying to do? It would help to have some context as that's a big side panel and it's hard to think why you wouldn't have space there. I really want to understand what you are trying to do and then can answer better. Perhaps what you are trying to do needs to follow more extending Gutenberg in other ways.

@carlhancock as a pattern, you should follow:

• Block toolbar: only add direct manipulation settings. Usually this would include bold/italic or alignment - generally nothing more.
• More menu (ellipsis by block): settings link and conversion - these are standard per block type.
• Settings: everything else.

Where you can add more and have more 'native' integration is with extending:

#3330 (comment)

[jasmussen]

While we are still honing and polishing, and more adjustments will no doubt be made, as it stands (and as Tammie notes), the Settings sidebar is meant just for settings, and the block itself should ideally work on its own without you ever having to adjust any of those settings.

In this case, it sounds like there will be a lot of data entry. Is there any reason this can't happen in the block itself?

So, instead of the block always being a preview of the contents and data entry happening via the sidebar, an ideal Gutenblock would work like this:

• An unselected block shows a preview of the block
• A selected block can surface more fields, like fields for inputting data
• Sidebar could hold advanced settings and other one-time configuration of the block

Here's a mockup of a PayPal block. Unselected it shows a preview:

When selected, it surfaces additional configuration fields:

[carlhancock]

@jasmussen That is a good example. So we have the following...

• This UI convention of being able to have additional settings when a block is selected.
• The advanced settings sidebar panel.
• Custom sidebar panels (and the pinning feature related to that which has been discussed previously)
• Full screen takeover with the top bar being replaced with a return to editor navigation (I can't remember where I saw this example but I believe it was in a Github ticket or blog post by you or @karmatosed).

That provides a bunch of different options that plugins will be able to leverage based on the needs of the plugin itself.

That being said, I still think that some things related to settings like the labels that are used for the settings cog in the block overflow icon menu should be customizable via code. My comment here elaborates on the reasons why: #4390 (comment)

[dgwyer]

@carlhancock This is a good overview of the various ways settings could be exposed for blocks.

Full screen takeover should definitely be one of these choices. Here is an example of this by "Human Made": https://youtu.be/16r54yI4-Jw?t=15

[karmatosed]

With all the options outlined and extensibility, it seems like right now for version one there are likely enough options. I am as a result going to close this issue. Closing doesn’t mean we can’t reopen, we can easily.