Styles panel: Show global styles, and style book by default, in site view

[jasmussen]

Global styles allows you to change the visual appearane of your whole website. It is also the visual interface to the singular theme.json file for a block theme.

For the moment, global styles uses the sidebar API to make it live as a sidebar panel in the edit view of the site editor. Historically this has been useful to iterate the interface and make progress on the engine itself. Fundamentally, however, the site editor edits individual templates or pages, making it a local interface rather than a global interface. Further, the contextual global styles sidebar panel (click a block to change the global styles for that block) is easily confused with the contextual local block inspector. You might have the global styles sidebar open, click a paragraph wanting to change the font size, and click "Typography".

A solution to that can be to move the global styles out from the edit view, and into the site view. Mockup:

In this view, the Style book can be the default view for the site editor, loaded in the frame on the right. The frame in this case, is not interactive, it's a visual preview of the styles that are chosen in the interactive panel.

This mockup relies on, and integrates design iterations to the Style book as tracked in #53431. In that issue, a curated "Overview" section of the style book is created to show the most important aspects of your website visual identity; color, typography, heading level sizes, etc.

• If you click Typography, the frame preview updates to show an exploded view of all type styles of the site.
• If you click Colors, the frame preview updates to show just a map of the color swatches.
• If you drill into the block section, each individual block, perhaps even patterns that leverage this block, can be shown. This will, for example, be useful should we move in the direction of showing pseudo states as well, in this exploded view (see Standardized way to modify interactive states (:hover, :focus .etc) for blocks #38277 (comment))

For the moment, the visual mockup above assumes a 1:1 transplant of the existing global styles sidebar into site view. See more explorations in Figma, here and here. One of those explorations can be seen here, and can be part of a future evolution of this work:

styles.mp4

Related: #53483.