How do I add global CSS from a Full-Site Editor plugin?

Hi @sdwire

That sounds like a cool project. I’ve reached out to some of the developers who worked on this feature to see if they can point you in the right direction.

Alternatively you could leave a question on the Core Editor agenda for Wednesday’s chat and it will be discussed during the meeting. That will get your question some attention. If you can attend yourself, so much the better.

Let’s wait and see if we get some input from the developers.

Hi @sdwire

the short answer is that we don’t have an official API for plugins to hook into the system that generates site-wide CSS in the site editor.

I’d like to understand what you want to accomplish, though. Perhaps there’s a way to do it in a way that we support. Would you be able to share the specific use cases you have in mind? I’d appreciate it if you could.

Best,
André

Here’s the high-level. I run a multi-site installation of WordPress, and each sub-site has its own owner and site admin. I want to give site admins as much flexibility as I can in defining the look of their site. But they don’t have access to the filesystem or the network level dashboard, so they can’t just upload their own theme or change theme.json. But they CAN make lots of configuration changes to parts, templates, and global styles using Full-Site Editor. This gives them ALMOST as much flexibility as they currently have with my classic theme.

In my classic theme, I had a customizer panel that let them adjust global CSS so that site admins can control as much of the CSS as they can. I’d like to offer the same in my upcoming Block-based theme, whether that’s as part of the theme itself or as a standalone plugin.

The longer answer is that I also want to let a designer use the Full-Site Editor to customize parts, templates, global styles, and custom CSS and then save the whole collection as a “design” that can then be available for other site admins to select and customize. I can do that now with my classic theme using a custom but primitive full-site editor I had built back in 2014. WordPress’s official Full-Site Editor is a much better experience for my site admins, though. But if I can’t add to the global CSS from a plugin and have it take effect in the Full-Site Editor, then I don’t see how I can offer the same capabilities in my Block theme that I currently offer in my classic theme.

Thanks for sharing, it’s helpful.

In terms of styles, what are the specific things you’d find missing? What are the things that site admins can’t do at the moment with the global styles sidebar in the side editor that they can with your existing setup? Or is it just the ability to output _any_ style, ala “Additional CSS” in the customizer?

I haven’t seen much active work related to sharing designs “across a network”, although the ability to share designs more easily is something we continue to develop, for example:

– global style variations https://github.com/WordPress/gutenberg/pull/35619
– export styles together with templates and parts (essentially packaging your own theme) https://github.com/WordPress/gutenberg/pull/36619

It’s really the ability to output any style. Things like shadows, negative margins for overlaps, z-order, custom value calculations, etc. These are things a graphic designer will want to control in detail for a website but will probably be very low priority to fully support in an end-user’s Global Styles UI.

Oh — and https://github.com/WordPress/gutenberg/pull/35619… I hadn’t seen that one. Thanks for sharing. I’m VERY much interested in that progress and will follow that discussion closely. There’s a LOT in there that mirrors what I’ve been thinking, so I’m glad to see I’m not alone.

And https://www.ads-software.com/plugins/blocks-css/ is a plugin that looks like it might do what I’m looking for. So far, it’s tied to a block and isn’t global, but I may be able to be creative by putting an empty block with custom CSS into a common header template part that’s used in every template until there’s a way to truly save global CSS.

@sdwire I hope you don’t mind but I’m going to close this one out as it looks like the question has been answered.

Many thanks

Well… It turns out that what I thought would help … doesn’t.

I really am looking for the full flexibility of Additional CSS to be reflected in the editor so that site admins (who don’t have access to install new themes or change the file system) can customize CSS and see it reflected in the editor. For example, I want to let them define their own class names for groups, define how child elements of those groups should look using CSS, and then assign those class names using the Advanced panel in the editor.

Unfortunately, anything defined in Advanced CSS doesn’t get applied in the post, page, or site editor, so Admins can’t see how those customized looks are actually going to appear. It’s even to the point that the blocks-css plugin actually *removed* the ability to add custom CSS in the template and template parts editors because they didn’t work.

I’m still eager to see some way for a site admin to create custom CSS for the site and have it apply in the block editors.

@sdwire If you’re still struggling to add custom css now that the customizer is gone, my alternative is adding a custom HTML block at my header template and since the header is used site-wide then the custom css is applied site-wide. It’s not perfect but might help as a work around.

@oandregal For me the lack has been not being able to customize the buttons or links visited state font colors (using wp 6.1.1)

For the record, there are a couple of issues that aim to add this capability to the global styles sidebar:

https://github.com/WordPress/gutenberg/issues/30142
https://github.com/WordPress/gutenberg/issues/44412