Visualise box model properties on the canvas

[jameskoster]

Spacing controls in the Dimensions panel are an exciting enhancement.

But one problem I've stumbled upon is that things can feel a little disorienting when working with more complex layouts consisting of multiple nested blocks – each with their own unique spacing configurations. Think Columns with nested Groups etc.

Additionally, labels like 'padding', and units like 'px', 'em', 'vh' etc are fairly technical in nature, and the average user may not be familiar with them or have any understanding around how they manifest on the page. When we inevitably add more properties (like margin) into the mix, this issue is compounded.

Visual hints like those found in web browser dev tools can help smooth out any disorientation. They can also help educate newer users about how the box model functions, and how different units operate / interact.

Is this something we should add to the Editor?

My initial thought was to reveal hints while mousing over / interacting with the individual controls. But after prototyping I realised it felt a bit fragile. Not to mention the limitations of hover detection on touch devices.

In order to facilitate more intentional usage a better approach might be a dedicated option in the settings. Here's an example using the Columns block:

https://user-images.githubusercontent.com/846565/132710020-1511e597-8808-464e-8c1f-2793ae11f9f9.mp4

To be clear: I think you would only see the hints for the selected block. I used green and orange for padding and margin respectively as they are most familiar to me, but obviously the colors are a small detail that can be easily adjusted.

I don't know if this option would be more suited to the dimensions panel itself, or if it should live in the editor settings. I suppose that may come down to a question of whether the toggle would be applied globally, or locally on a per-block basis.

[karmatosed]

Is this something we should add to the Editor?

Honestly, I am unsure. I do think visually seeing spacing is something should but the piece that I am unsure about is representing it in the editor. For example, I really like how Figma does this:

There is of course the faithful representation that feels almost industry-standard too now where you see the inside and spacing around it. I sort of like that over our numbers with no context for location.

I don't know if this option would be more suited to the dimensions panel itself, or if it should live in the editor settings. I suppose that may come down to a question of whether the toggle would be applied globally, or locally on a per-block basis.

Assuming I understand correctly what you are proposing here and it's putting in the panel - then I think starting by looking the panel tools is sensible. There is room to explore there and it feels as I've pointed out the space that seems easier to agree on.

[jameskoster]

Closing in favor of https://github.com/WordPress/gutenberg/issues/33221

[jameskoster]

I've spent some time working on a new theme this week and this issue raised its head again, so I'm going to re-open :)

I do still believe it should be optional, but oftentimes I find it would be useful to see padding/margin on the canvas rather than having to dig through design tools.

IE this:

Would become something like this:

Where the blue area denotes padding, and the yellow area denotes margin.

It's easy to imagine these visualisations persisting upon selection too, so that you can manipulate the values on-canvas.