Style Preview: Navigation block only shows mobile view

[annezazu]

This was found as part of the nineteenth call for testing with the FSE Outreach Program:

When editing the styles for the Navigation block, it shows the mobile version on the preview.

I could replicate with GB 14.9.1 and WordPress 6.1.1 using the TT3 theme. This shows the mobile view regardless of what the navigation block being used is set to. Keep in mind there also could be multiple nav blocks with different options in place too.

cc @madhusudhand as a heads up and @WordPress/gutenberg-design for thoughts on what we should show here. IMO we should show the navigation block more fully rather than the mobile view since the settings available to customize are related to typography and layout (things you need to visually see).

[jameskoster]

I think the behaviour is technically correct because the preview appears in a ~240px iframe and the Navigation block automatically condenses down to hamburger-mode at that size. But I agree, it's not very useful in the context of changing the appearance :)

We probably need some technical feedback here. I'm not sure if the iframe is going to prohibitive in terms of what we can do, or whether we need a unique preview implementation for the Navigation block.

[jasmussen]

First off, it's worth noting that this preview exists because you might be looking at a block that is not inserted in the canvas at that given moment, yet you still need to be able to style it. In that light, the screenshot above can be a bit misleading, since it isn't meant to be a duplicate preview of what you're already seeing on the left, but rather a fallback.

In that light, I think we need select one or the other. Which, to get technical is: we could potentially widen the content-preview to more than the mobile collapsing width (600?) and then crop it using overflow. That would give the "typography" option more context, at least.

However to do this, we'd have to make an edgecase just for this nav block, because we don't want to also make the paragraph block 600px wide and cropped, it should still look like this:

So I guess the technical question is: can we make a preview customization on a per-block basis?