Template part editor: adjust height to contents

[mtias]

Let's ensure the height of the canvas is reasonable and adjusted to the contents.

cc @jameskoster

[kevin940726]

I'm not sure what the best solution would be. If you think of the canvas as a screen, then I think it actually makes sense to make it stretched to the full screen. The preview options in the header also make more sense this way.

Technically speaking, the height of the canvas is determined by the content inside. We could auto-stretch the height once the content is loaded. However, users can also add more items to the content. Should the added contents auto-stretch the height as well or available behind a scrollbar?

I guess a possible solution for this is to leverage #35249 and make the height adjustable as well. We'll still have to add some fixed padding in the "Desktop" preview, but I don't think we need to make the height adjusted to the contents by default. Preview options also continue to work as expected. Does it sound like a good enough solution?

[jameskoster]

If you think of the canvas as a screen, then I think it actually makes sense to make it stretched to the full screen.

That makes sense in the context of a document, but when you're editing a template part like a header in isolation it feels a bit flaky. In this case the canvas is not a screen, in the sense that a visitor would never view the header on its own. Therefore the canvas should "hug" the contents vertically in order to effectively communicate the height of the isolated part.

[kevin940726]

Then what should we do with the preview options? If the focus mode is not a screen, then I think those preview options like "Desktop", "Tablet", and "Mobile" no longer makes sense? Should we hide them altogether in the focus mode?

[jameskoster]

I think the main value in those previews is the width rather than the height. But perhaps we could try something like this:

[kevin940726]

That's an interesting idea! I guess I should start doing some POC and experiments? Is there any precedent of that transparent background anywhere?

[jameskoster]

Not in Gutenberg, but it is fairly common in design software.

Another option would be to use a border, kind of like Figma:

But this might make it seem like the entire canvas is the header, which obviously it is not.

A POC sounds like a good starting point :)

[shaunandrews]

I think the device-specific preview menu doesn't really make sense in the context of editing a template part in isolation; There's no way (currently) to know the intended width of a template part, and its not always defined but the width of the viewport or device. Instead, the width of a template part depends on its parent container. This could be the root of a document, but it could also be a very narrow column like a sidebar.

When working on the pattern directory I designed a viewport width menu, along with drag handles for quickly resizing the viewport.

This menu worked hand-in-hand with the drag handles. The height of the viewport is defined by the blocks within the template part, and the drag handle's should reposition as needed to stay centered to this viewport height. I don't see any need to force some arbitrary height, unless that is a min-height.