headless WordPress with react - styles in back and front-end Gutenberg

Question

I want to build a headless WordPress + React website.

I managed to do the "non-gutenberg" stuff (header, footer etc.) and it works all fine.

My problem is the posts content. I can get its html styled in the JSON. If i write the styles in react then it looks ok in frontend.

But where should I put my css for gutenberg, so that it will work in the Gutenberg editor in backend and in the frontend as well?

My json example:

"content": {
"rendered": "\n<p class=\"has-text-color has-accent-color\">Some Random lorem ipsum in a paragraph</p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img src=\"http://bw.dev.local/wp-content/uploads/2020/05/Toronto.jpg\" alt=\"\" class=\"wp-image-13\" srcset=\"http://bw.dev.local/wp-content/uploads/2020/05/Toronto-1024x288.jpg 1024w, http://bw.dev.local/wp-content/uploads/2020/05/Toronto-300x84.jpg 300w, http://bw.dev.local/wp-content/uploads/2020/05/Toronto-768x216.jpg 768w, http://bw.dev.local/wp-content/uploads/2020/05/Toronto-1536x432.jpg 1536w, http://bw.dev.local/wp-content/uploads/2020/05/Toronto-1200x338.jpg 1200w, http://bw.dev.local/wp-content/uploads/2020/05/Toronto.jpg 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" /></figure>\n",
"protected": false
},

So I am sending the has-text-color, has-accent-color etc classes with JSON, but I dont want to write the css twice in front and back

is there any solution that one css works for both?

Answer 1

The workflow (or workaround?) I have in mind at the moment is this:

1. Develop blocks according to the official specification, which generates a front-end stylesheet for blocks as part of the normal flow
2. Pull that stylesheet in my React app*
3. In the React app, fetch the WP content via the REST API (but expose the Gutenberg blocks first, see https://gist.github.com/brisa-pedronetto/15aa9c7a855eccf78c717a2491372074)
4. Re-create the Gutenberg blocks as React Components (maybe there' a package out there that does this well already?)
5. Use the Gutenberg block names as classNames in React (since these names are used as classes in Gutenberg in the first place)

So basically a block could be saved as something like:

<div class="wp-block-myblocks-foo">Foo</div>

And in the React side it would be similar to this:

export default function Foo({ fooContent }) => (
  <div 
    className="wp-block-myblocks-foo"
    dangerouslySetInnerHTML={{__html: fooContent}}>
  </div>
)

While the stylesheet would look like:

.wp-block-myblocks-foo {
  color: tomato;
}

* Perhaps that front-end stylesheet could be uploaded to a CDN in the process of being generated (or built) to further decouple from WP?

Maybe this solution is more suitable for a SSR app since you need to pull an external stylesheet.

Anyway, hope this can reach more people thinking about solutions to this arrangement!