Discussion: Global styles for non FSE themes

[carolinan]

Currently, the global styles experimental-theme.json affect themes that has no other support for full site editing, and it affects themes when full site editing is not enabled.

The styles added affects all areas of a theme, not only the content. Is this intentional?

The global style controls are planned to be placed in a panel in the site editor, and would only be available when full site editing is enabled.
Will themes that are not full site editing themes, but want to take advantage of the presets and block styles, have access to the controls?

[scruffian]

I think this would be useful. I am looking at updating old themes to be more Gutenberg friendly, which involves adding a lot of add_theme_supports in functions.php. As experimental-theme.json becomes more powerful, this would give more control over global styles for these older themes. It would also make it easier manage than editing functions.php.

[aristath]

This would be extremely useful...
Technically they are completely separate implementations so they should be available for non-FSE themes too. The only limitation right now is that they are indeed added to the site-editor.
The problem is that I can't think of a suitable place to add them outside the site-editor...
Any suggestions?

[oandregal]

I only came across this today. It discusses a few different things, so I'll try to comment on them separately.

When every part is enabled: core, theme, user

Complementing what I said here. This is how it works right now with the plugin active:

1. Core. This is the core functionality, it works for any theme. The presets for font size, colors, and gradients are enqueued as CSS variables as an inline stylesheet called global-styles-inline.
2. Theme-provided styles. These styles are processed and included in the global-styles-inline stylesheet if the theme provides an experimental-theme.json.
3. User-provided styles. These styles are processed and enqueued for any theme that supports theme.json.

How users can tweak the styles

#24250 proposes to do this via edit-site, which requires the FSE experiment being enabled and the theme to have some templates. This is not a requirement for Global Styles and we may add it to other places, if it makes sense.

Also worth noting is that we're starting to explore deeper integration between templates and global styles (site block) to allow to style things contextually. Things like: set the background color of a paragraph within a sidebar differently from the background color of a paragraph in post content.

The scope of styles

The styles added affects all areas of a theme, not only the content. Is this intentional?

Could you expand on this?

[carolinan]

The scope of styles

The styles added affects all areas of a theme, not only the content. Is this intentional?

Could you expand on this?

For a full site editing theme, there is no limitation, the styles affects all blocks and that is expected because everything is a block and everything can be edited, both with global styles and individually.

For a PHP based theme, should global styles affect the entire site (as it does now), or only the blocks inside the sites content areas, where the user can work with blocks?

In a PHP based theme, I could use a columns block so that I don't have to create my own responsive, 3 column footer. And then the global styles will help the user style that area, without me having to code several custom customizer options for colors. That is the big win.

But I might also have a heading above my blog post list, that is not a block, and I might not want that heading to be affected by global styles for headings.

[carolinan]

I am closing this because I believe it is working as intended. If there are any new findings when people start creating more universal themes we can continue discussions here or in a new issue.