Custom CSS: Additional CSS is lost after browsing different style variations regardless of whether it's saved

[hagege]

Description

Any unsaved CSS rules are completely lost under Additional CSS if I have selected another variation via the Browse styles option and then switch back to the previous layout, which already contained additional CSS.

Step-by-step reproduction instructions

1. Browse styles (for example pilgrim with addtional CSS)
2. Choose a variation to change the look of the site (for example Default without addtional CSS)
3. Back to Layout Pilgrim (nothing saved yet)
4. Additional CSS is empty - no css rules

It would be good to as a minimum at least prompt users that their unsaved custom CSS changes will be lost if they switch variations and give the option to save before switching.

Screenshots, screen recording, code snippet

https://haurand.com/wp-content/uploads/2023/01/issue_additional_css.gif

Environment info

WordPress 6.1.1 and Gutenberg 15.0.1

Please confirm that you have searched ex

isting issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[glendaviesnz]

This actually applies to all global style settings, eg. in the default style variation for 2023 theme if you set custom colors for the heading block under global styles, and then switch to a different style variation, the custom heading colors are not copied across.

I think the intention is that you can apply your own customisations to each of the style variations independent of the others, and Additional CSS is just another global style attribute so behaves in the same way.

I wasn't involved at all in the setup of the style variations though, so not sure about the background as to why it is structured this way.

[hagege]

thanks for info

[carolinan]

But should they be lost when you switch back? I mean that is different from not being copied over to the second variation.

[hagege]

I definitely did not save any settings in between, I just changed the browse style. In my opinion this should only happen (logically) if I save the state (Custom).
Possibly I create another video today for clarification, if that should help.

[glendaviesnz]

But should they be lost when you switch back? I mean that is different from not being copied over to the second variation.

The issue will be with (nothing saved yet) - if nothing else it should probably warn you that your unsaved changes are going to be lost if you switch variations and give you the option to save them.

I will update the description to be a bit more explicit about this - @hagege feel free to edit again if I have missed your intent with the changes I make.

[hagege]

Here's a new video that might make this nevertheless very strange thing clearer:

[annezazu]

Noting that this happens regardless of save status. I've updated the title of the issue to better reflect both.

[hagege]

Here is another video that may further clarify the issue:

[richtabor]

Yea browsing different variations shouldn't remove custom CSS; seems a bug.

Perhaps saving a variation shouldn't remove the CSS as well. Maybe it should be toggled off, but not necessarily deleted.

[hagege]

Sorry to ask again, but is there any news on this?

[annezazu]

No further update! There's this PR that was stalled due to broader concerns around how user global style changes are saved. I agree with the thought on that PR thread and will leave a comment as much:

I think we could take a similar approach here so instead of a checkbox we just prompt if we detect CSS changes "Do you want to bring your CSS changes over to the new variation?"

[hagege]

Great idea - thanks for answer.