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