Global Styles: Allow saving, importing, exporting, copying from another theme without switching to it

[jasmussen]

In Global Styles > Browse styles, it should be possible to import, export, and save styles. The interface should accommodate all these flows:

1. Allow saving user variations for each bundled style (i.e. customized “dark” variation) (same as Global Styles: Managing style variations #38333)
2. Load style variations from a file
3. Provide access to styles from other themes without switching to them (related to Global Styles: Allow access to style variations from any theme #45452)
4. Provide an implicit warning about losing style customizations (related to Warn that customisations will be lost on style variation switch #45210, Custom colors are lost when styles are changed #48407, Style Variations: Add warning when custom styles will be lost #40561)
5. Allow exporting, deleting styles

The following mockups take a stab at the above, and may in some cases replace them. Here's importing a file:

• Import file exists in ellipsis menu
• Plus exists to create a style from scratch (separate future feature)

Styles from other themes can be surfaced:

• The "Theme styles" section acts as a ToolsPanel, showing by default the active theme styles, letting you toggle on styles from other installed themes.

Saving customizations:

• Activating a style from a theme doesn't automatically save it as a custom style.
• But making any customizations to the style makes it show up under "Custom styles", with a blue dot. If you save using Multi Entity saving, or using the dropdown, the blue dot disappears.
• The ellipsis under custom styles allow saving, deleting, exporting.

As a starting point, styles imported or copied from other themes retain their stylenames from those sources. But in the future, we could explore a create from scratch + rename flow, such as this:

---

Issue updated Nov 3.

Initial proposal

This issue has a great deal of overlap with #38333, but takes a slightly different approach in that it is meant to include a flow for importing and exporting from files. The goal is to use the same interface to accomplish three separate flows:

1. Allow saving user variations for each bundled style (i.e. customized “dark” variation)
2. Load style variations from a file (import)
3. Copy global styles from another theme without switching to that theme (import)
4. Export, to enable items 2 and 3

Incidentally, these flows may also solve #45210, and depending on feedback, we may merge this issue into 38333, or vice versa.

In the first case, a user has picked a style variation that's bundled with a theme, but has made no other customizations to it:

• Chosen style shows as active in the list of bundled theme styles
• An ellipsis menu allows importing, exporting, and saving a style

If customizations are made to a style, or if a style is imported:

• Customized style shows up in "Unsaved styles" section, clearly delineated as separate from the them bundled styles
• Ellipsis menu shows uption to save or delete
• If saved, the style will appear in a new section, called "Custom styles"
• If further customizations are made, the "Unsaved styles" section appears again

This is a first iteration, let me know your thoughts.

[scruffian]

I had a slightly different but connected idea in #45452

[jasmussen]

This issue has been updated and labelled "Needs Dev", as we've settled on a design that could likely work for a first iteration.

[carolinan]

Currently, WP_REST_Global_Styles_Controller is limited to the active theme so it needs to be updated.

I assume that once a style from an installed but not active theme is selected and you save it, the intention is that it gets saved in the active themes global style option in the database.

I also assume that we need both the base theme.json and the style variation from the installed but not active themes.

How do we handle font files that are used in style variations, and are placed in the installed but not active theme?

• It is possible that a style variation can be saved and the theme that has the font files is deleted.
• It is also possible that the read/write permissions are not enough to allow copying the font files from that theme and place them in a wp-content/fonts folder or similar.

[jameskoster]

Yes, I suspect both of those are possible albeit rare occurrences. Perhaps we need to update the font selection control so that it displays an error/warning if the selected font cannot be found?

[carolinan]

Also should this include child themes?
I guess there are 3 options,
ignore child themes,
use a possibly partial style variation,
and fetching all 3: parent theme.json, child theme theme.json, child theme variations.

[ribaricplusplus]

I am planning to take care of Save and Delete for user variations in #46952, covering point 1. from the main issue comment. I will probably not work on the other points but I'm assigning this to myself temporarily because working on import / export in parallel would be unfeasible.

[annezazu]

Thanks so much for jumping into this! Please share as you go where you might need help or reviews.

[unprintedch]

Great work, that is exactly what I was hoping for here #60386.
Is there some PR we can test?

[annezazu]

@scruffian great job getting #63318 merged to create a new public function to expose variations from other themes. Where does that leave us in terms of what's next? I see some performance issues mentioned in the PR reviews btw.

[carolinan]

@youknowriad @jasmussen @ellatrix

Hi
@afercia @SergeyBiryukov and I were wondering if there is any progress on points 2: Load style variations from a file and 5: Allow exporting, deleting styles.

We are wondering how this can be aligned with the proposal in #66950.
-If I have edited global styles, and I switch themes, shouldn't I be able to re-use the changes I made to the global styles,
without a complicated import/export flow?

[youknowriad]

If I have edited global styles, and I switch themes, shouldn't I be able to re-use the changes I made to the global styles,
without a complicated import/export flow?

You should, the issue right now is that the global styles only save the "user modifications" and they get merged on top of the theme provided theme.json file.

Indeed, I'm hoping that we can use the work in #66950 to inform what comes next for both style variations and patterns.

[carolinan]

I am not sure that the combined theme.json and global styles changes would always be the best choice.

I see many users asking to re-use the CSS from the Additional CSS field.