Site Editor: Offer more granular information in multi-entity saving flow

[annezazu]

Description

If you make changes to global styles and go to save changes, you are only presented with an overarching "save all" for Global Styles changes rather than granular options based on various changes. This is feedback as part of the second call for testing with the FSE Outreach Program. It's unclear to me if this is a bug or a feature request but I'm going to default to filing it as a bug.

Step-by-step reproduction instructions

1. Use a block based theme and the latest version of Gutenberg to setup the FSE experience.
2. Go to "Site Editor (beta)"
3. Make a few changes to global styles (at least 2)
4. Select Update Design and see that you're only presented with the option to mass save all changes

Expected behaviour

I expected to see more granular saving options.

Actual behaviour

There's only the option to "Save All".

Screenshots or screen recording (optional)

global.styles.saving.mov

WordPress information

• WordPress version: 5.6.2
• Gutenberg version: 10.0.2
• Are all plugins except Gutenberg deactivated? Yes
• Are you using a default theme (e.g. Twenty Twenty-One)? TT1 blocks

[oandregal]

Added this to the backlog #29591 I default to see this as a feature request, as saving all changes is how's designed to work at the moment.

[annezazu]

This came up in the eleventh call for testing for the FSE Outreach Program with @paaljoachim expressing a desire to see more details around what exactly was being saved for Global Styles.

[critterverse]

Hey all, I took a pass on a design that offers more granular saving options for Global Styles. This idea was mentioned in the 6.0 Product Walkthough today in regards to style variations, and has been identified as an area with room for improvement in #38333.

This is what we have currently in the Saving panel, with a single checkbox in the Global Styles subpanel for "Custom Styles:"

First, I looked at adding more granular options to the Global Styles panel using a nested checkbox system similar to the one used in the block locking modal. This would allow users to select all Color or all Typography updates at once for example, or make more granular selections like saving everything but the Background color. It would be nice to show swatches alongside the color-related items:

One challenge is figuring out how an expanded Global Styles subpanel can work alongside other subpanels (Site, Template Part, etc) because it can get overwhelming to see so many checkboxes. I looked at breaking the Saving panel down into multiple steps when relevant but it makes saving feel like a longer, more tedious process:

Another option could be to introduce more typographic hierarchy into the Saving panel by making the section titles larger. This would make the saving panel easier to scan at a glance:

Would love to hear what others are thinking! Figma file

[annezazu]

Along the same lines of the above exploration, I wanted to include an idea from Ed Beck that was shared in the FSE Outreach Program's slack channel. . TLDR: what if style variations could be less "all or nothing" and instead split out into a few areas that users could pick and choose from? This would shift the decision point from picking and choosing while Saving to when you are switching between the variations themselves. Sharing here as food for thought for future iterations:

Right now a style is all or nothing, and Twenty Twenty Two is an example where the custom styles can be wildly different. My suggestion would be to allow theme developers to break custom styles into 3 areas, the same three areas used in other places in the FSE: Typography, Color, and Layout. That way a user could quickly go in and play with some different fonts, but keep their spacing and color pallette. Or any other variation of those three. My example for this is always GoDaddy’s theme Go, which is typically in the top 15 WordPress.org Free Themes. They do it from the customizer, but its very intuitive to split it out just a little bit.

Screen.Recording.2022-05-26.at.9.11.48.AM.mov

[creativecoder]

A small, but quick improvement would be to add a description to the Global Styles section in the save panel, which doesn't have one like other sections do.

[annezazu]

Noting some progress of sorts in this direction with more information upon saving: #57470 It doesn't offer granular save option but it at least lists what's changing 🌟

[annezazu]

Noting that in general, we could improve the information we provide when saving, particularly when saving in the frame rather than when in the canvas:

This applies to not just Style changes but changes to the template. Going to update this title to be a bit more all encompassing around getting the level of details right in the saving experience.