Developer Mode for the block editor

[Saoming]

What problem does this address?

Gutenberg hides a lot of block settings to make it easier for the user. However, this is sometimes difficult for developers because searching for a particular UI seems like hide and seek.

Is it possible to have “developers mode” where all the UI is no longer hidden and we know all the settings for the blocks in plain view?

This also helps muscle memory and makes it easier to develop. In Divi and Elementor for example, the settings for spacing and typography are always located in the same place.

What is your proposed solution?

The idea is to show a toggle button to show all the settings in a plain view

[tomdevisser]

If you go to Options > Preferences, you can toggle the "Always open list view". This might solve 50% of your problem. We could probably add a toggle to also always have the right Inspector Controls sidebar open, but I don't think it's really necessary. The "hide and seek" part doesn't require you to search for long, cause the block settings are always either in the toolbar which is visible by default, or in the Inspector Controls sidebar.

Edit: If you are still confused about where to find settings, you might find this page on Block Design a useful resource.

[mrfoxtalbot]

+1 to this idea.

I would like to be able to have a setting that would make all block options and styles visible/active by default.

[tellthemachines]

The issue here is not with the whole sidebar being open or closed as much as with the tools panels for each block not displaying all settings by default, and displaying different settings per block, e.g.:

Paragraph displays only the size control in its Typography panel:

But Quote displays both size and appearance:

Plus there are a lot of other controls that are hidden in a dropdown:

As I understand it, developer mode would allow all controls to be visible for all blocks at all times.

[ravishanker]

This is not even about developer mode or designer mode. How good would it be if the interface were to be familiar like well known tools people already use; Keynote, PowerPoint, Sketch, Figma, Canva. Entire product is reliant on getting this experience right e.g. Webflow

[mtias]

This was meant to be handled through global styles, not a separate mode — being able to toggle what tools should be defaults across the site. Features that are toggled on in global styles should then always be visible by default.

[dikafei]

+1 for some kind of developer mode.

As a writer I love Gutenberg. It makes content creation speedy and logical. It hides complexity to just the thing I need to write.

However, as a developer, my biggest problem with Gutenberg is how it is really difficult to train muscle memory with it. In Divi, Elementor, and Webflow, elements are located in the same place. Some properties such as typography, background, and spacing are ALWAYS in the same place that you can access them blindfolded.

With Gutenberg, you need intimate knowledge of each block to achieve even this kind of low-level mastery.

(Not to mention that now almost every page builder and every SAAS use the same kind of UI for the builder. Which is the floating window, photoshop inspired UI so people are more used to that. But that is another discussion for another time probably.)

[tellthemachines]

This was meant to be handled through global styles, not a separate mode — being able to toggle what tools should be defaults across the site. Features that are toggled on in global styles should then always be visible by default.

If it's part of global styles, won't it be theme-specific? The main use case for this seems to be when building themes and setting up websites, so it would probably make more sense as a general UI setting.

[DevWael]

+1 👍