Styles: integrate global styles revisions into the top-level styles panel

[ramonjd]

Enable previewing and applying global styles revisions in the dedicated styles screen in the site editor view menu.

As with the editor, revisions should be able to be loaded for the style book and the currently-previewed template.

The exercise might also require some rewiring of how the editor canvas displays these views, which, currently, involve the complex juggling of states across the site editor: style-book, global-styles-revisions, global-styles-revisions:style-book.

Here's how it could work (taken from the hacky test branch):

Kapture.2024-12-09.at.11.02.47.mp4

Related issues

• Styles: better connect top level dedicated Styles screen with the in editor Styles screen #66719
• Global Styles Ongoing Roadmap #41232

[ramonjd]

When hacking away at #67660 I made the following notes, based on the assumption that a top-level styles revisions panel would follow the same canvas logic as its editor counterpart:

• Site editor view and edit modes need to send the StyleBook component different props, e.g., enableResizing, showCloseButton, showTabs, isSelected.
• The same type of editorCanvasContainerView state comparison that's done for the editor is required for view mode. It's not pretty.
• Following the above point, switching between revisions and styles panels should remember the user's choice of preview.
• If we keep the canvas "clickable", should it open the revisions panel in the editor?
• Does the stylebook/revisions canvas need a close button at all? I don't think so. Maybe it's more accessible to keep it.
• It would be great to centralize this and extract it from the editor completely. It would make maintenance and development easier, but I'm not sure it needs to be a dependency of this issue.