Support » Plugin: Gutenberg » How do I add global CSS from a Full-Site Editor plugin?

  • I’m trying to write a FSE sidebar plugin that will end up changing/adding site-wide CSS. I’ve spent nearly two full days trudging through the docs and Gutenberg source trying to track down how the <style> elements in the FSE’s <head> are rendered/updated in real-time.

    I know it’s possible, because I can watch a <style> block change when I adjust Global Styles colors, but I can’t find where the logic lives to emit the CSS. I’d like the CSS my plugin creates to update in real-time, too. Can anyone give me a pointer to where that rendering happens?

    • This topic was modified 1 week, 3 days ago by sdwire.
Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Support David Smith

    (@get_dave)

    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.

    Plugin Author André

    (@oandregal)

    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é

    Thread Starter sdwire

    (@sdwire)

    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.

    Plugin Author André

    (@oandregal)

    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

    Thread Starter sdwire

    (@sdwire)

    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&#8230; 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.

    Thread Starter sdwire

    (@sdwire)

    And https://wordpress.org/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.

Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.