Global Styles: Adapt the canvas (or provide view options) which are better tailored to specific activities

[jameskoster]

The video in https://make.wordpress.org/design/2022/08/10/twenty-twenty-three-default-theme-project-kickoff/ really demonstrates how useful a mosaic view of templates can be when working with certain global styles features:

variations.mp4

Displaying (for example) singular and archive templates gives a much better indication of the overall impact that will occur after switching style variations. Perhaps we can reuse the work in #33770 here?

It would be interesting to explore ways the UI might offer this functionality, and contemplate a curated selection of templates to render.

Such an enhancement could potentially pave the way for other style-centric views, e.g:

• Displaying a single block in isolation when editing the styles for that block.
• Displaying a transient 'document' that contains all text blocks when editing typography settings.

[jameskoster]

Here are a couple of rough mockups exploring potential approaches to this. The first is most iterative, and closest the video above:

styles-i1.mp4

When the Style panel is opened, the template you're editing slides off-screen to reveal a grid of thumbnails; the Front Page, the Posts Page, the Page template and the Single template. As you edit styles, you see the changes reflected across four of the most high-impact templates on your site. In general this works well, but there are a couple of details that have me second-guessing this particular version:

• Is it strange that tools in the top bar disappear when you open the styles panel?
• What happens if you click the gear icon while Styles is open?
• It's not clear how to get back to the template you came from, if it isn't present in the grid.

---

In the next approach, I explored placing a link to access style management in the site editor navigation panel:

styles-i2.mp4

The functionality is the same as before, except this time global styles is given its own dedicated space instead of being an off-shoot of the template editor. The video above also demonstrates how the canvas could adapt when you go to edit a specific block.

I think this version might work a bit better, and could even serve as the default 'page' folks land on when they open the Site Editor. Here they can make dramatic visual changes intuitively via style variations, typography, etc. For a more casual user I suspect this might be more approachable, and lead to a quicker "a-ha moment" than template editing.

It's probably not necessary, but still worth noting that in this concept the styles panel could merge with the drilldown navigation panel to create more space on the canvas:

[jameskoster]

Closing in favor of dedicated issues.