Global Styles: display inline preview on per-block settings

[mtias]

When editing the global settings for a block in the "per block" section of styles, it'd be useful to render a preview at the top of the sidebar panel including the block example and how it's affected by the settings. This is relevant because global styles allows editing blocks that might not be present on the current page being previewed.

It currently looks like this:

Here's what a preview for Paragraph & Image could look like:

• Same 152px height for the top level preview as that of the GS style card
• Uses the example content added for each block, but in cropped or curated (rather than zoomed) ways to show the correct font sizes applied

Upon diving deep into the structure, we can add a small preview button — the eye — to let you see a preview just like they work for style variations:

---

Issue was updated Sep. 28

[jasmussen]

For anyone subscribed, this issue has been updated with design ready for a dev to pick up!

[noisysocks]

I'll plop this on my todo list since it's near to what I've been working on 🙂

[annezazu]

@noisysocks are you still planning to dig in here? Just doing a sweep of the various items on the phase 2 issue and wanted to ensure this was still assigned 💪🏼

[noisysocks]

Yes it's next on my list. Realistically I won't be able to start on it until 21 November. If there's a dev who has more immediate availability feel free to take it from me.

[priethor]

Thanks, @noisysocks ! I'm unassigning the issue for now so that it doesn't appear as taken pm the Phase 2 board; feel free to reassign when you can start on it!

[madhusudhand]

@noisysocks @priethor I have created a very primitive version of the component here #45507 to demo box-shadow in live action. I will extract the code and create a Draft PR here.

[madhusudhand]

While #45719 addresses the Block Preview at Level 1, how shall it behave upon diving deep into the block structure?

Questions to design:

• Is it a pop over on click of 👁️ icon?
• if so, can it be pinned?
  (in scenarios such as box-shadow, having a live preview always visible is important to set right shadow values)

CC: @WordPress/gutenberg-design

[jasmussen]

Good question. In your box-shadow example (fresh designs herer), but also for a recent style variation example in #44417, it's actually useful to have that same top preview present not just on level 1 but on all levels.

Would it be possible to keep this preview on all those sub-levels as a starting point, omit the eye for now, and then we can evaluate how that works and see if we need the eye after all?

[mtias]

Would it be possible to keep this preview on all those sub-levels as a starting point, omit the eye for now, and then we can evaluate how that works and see if we need the eye after all?

Let's get the preview for the top level first merged, then follow up with the sub-levels.