Disentangling Gutenberg Block CSS For Headless

  • cabezi

    (@cabezi)


    2 years, 9 months ago

    So I’ve been using WordPress as a headless CMS fairly effectively until this point. The main problem is always getting the CSS for a given post since its a mix of inline styles and css files. Now with the 6.3 release I’m seeing a new section of dynamically generated inline CSS which I can’t figure out how to untangle:

    <style id='core-block-supports-inline-css'>.wp-container-3.wp-container-3{grid-template-columns:repeat(3, minmax(0, 1fr));}</style>

    My question: How to get the CSS generated and placed in the style tag with id of ‘core-block-supports-inline-css’ so I can ship it over to the front end?

Viewing 1 replies (of 1 total)
  • Moderator jordesign

    (@jordesign)

    2 years, 8 months ago

    Hey @cabezi this is potentially a bit of a complex issue – and to be honest I can only make some general suggestions…

    • In case it helps, it seems the core-block-supports-inline-css style tag is generated by the duotone block supports: link.
    •  I can also recommend looking into frameworks for specialized Headless WordPress Apps that have already figured out how to deal with the intricacies of the API in the front end.
      Frameworks like https://frontity.org/ or https://faustjs.org/ would be a good place to start.
Viewing 1 replies (of 1 total)

The topic ‘Disentangling Gutenberg Block CSS For Headless’ is closed to new replies.

Tags