[gatsby-source-wordpress] Idea/Discussion - Gutenberg blocks to transform page content

[crgeary]

Summary

WordPress in the near future is expected to have a new editor called Gutenberg. It's a block based editor, to replace the standard WYSIWYG editor. This editor is for page content, but may in the future extend to the header, footer & sidebars.

These blocks can converted to JSON, and then added into the WP API. This is currently not supported natively as part of Gutenberg, but it's on the roadmap to be included. Here's an example of the block JSON that COULD be generated from a pages content.

In theory, you can read this data, transform it in a similar way to how the remark transformers work, and then compile it into content. Each block has a "name" to identify the block type. You can use this to detect image block, and convert them to Gatsby Image components.

Motivation

This should, in theory, make these issues #6799 #3733 much more possible, and you could essentially map a Gutenberg block, 1 to 1, with a Gatsby/React component.

--

What do you think?

[ataylorme]

I think it is worth noting that the new WordPress editor is written on top of React. This is intriguing to me due to the possibility of using the same React component to power the content editing experience in the new WordPress editor and the front-end build in Gatsby. Crafting items like a hero image, testimonial, etc. once and using them in both a WordPress back-end and a Gatsby front-end would be ideal!

[braco]

Chatting about this here, just FYI:
zackify/gutenblock#13

Looks like someone is working on a plugin in the interim:
WordPress/gutenberg#4763 (comment)
https://github.com/royboy789/gutenberg-object-plugin

[royboy789]

Hi @ataylorme .. any updates to this? I'd love to take Gutenberg + Gatsby Themes and turn it into something awesome

[slattery]

+1 curious for an update too. Having gatsby access the Gutenberg blocks for rendering would be amazing.

[crgeary]

I haven't done much Gatsby in the last few months, so have been a bit out of touch with what's currently available.

There is a plugin for WordPress that will add Gutenberg data to the REST API. This might be of use to some of you. I haven't used it myself.

https://github.com/royboy789/gutenberg-object-plugin

[royboy789]

@crgeary thanks for linking to my plugin.

I was talking with the lead of WPGraphQL and Gutenberg as it is right now, isn't really GraphQL -able, because of its lack of reliable schema. So it has to be done via REST. Last time playing with Gatsby, I could not get it working with REST, so will need to try again... does anyone have a good starter repo for this? GatsbyJS + WordPress REST?

[ataylorme]

One issue I ran into that is a blocker for a lot of what I want to do is that not all registered block attributes are exposed once the block is saved. Instead, some attributes are only accessible while in the editor.

For example, the default code snippet block has an attribute content that contains the actual code entered by the user. That attribute is not accessible outside of the editor. When the post is saved the content attribute is not stored in the HTML comment JSON.

See this discussion.

Rendering the code block on the front-end (e.g. with Gatsby) will be difficult without access to the content attribute. The resulting raw HTML is exposed but filtering through that for each block is not something I would want to do.

[royboy789]

@ataylorme - https://github.com/royboy789/gutenberg-object-plugin - stores every attribute that makes it to save. I'll test with the code snippet block.

[braco]

edit: Oops, meant render_callback, which pushes rendering to PHP – nevermind

@royboy789: I had to abandon what you were doing because it leaves a mix of unrendered content, and sometimes Wordpress is the source of truth when a user has been editing HTML, or a complex structure like nested tables + columns exists, or there's no React equivalent, etc. The final solution is going to need to be a mix of block+attributes and prerendered HTML, IMO.

What I ended up doing is pretty horrible, but it lets Wordpress render most of the components, and with a select few it parses the HTML and re-renders them on the front end:

https://gist.github.com/braco/3d916a2cff8e62b046128ef042038c1c

This will take the rendered body from Wordpress and look for <SpecialTags /> and feed those back into React. There are lots of ways to improve it obviously, but it works.

[braco]

PS it'd be great if someone had time to take

https://github.com/postlight/headless-wp-starter

and Gatsbify it – though I haven't had a chance to evaluate it, it's very popular and is probably a good start

[geocine]

What I ended up doing is pretty horrible, but it lets Wordpress render most of the components, and with a select few it parses the HTML and re-renders them on the front end:

https://gist.github.com/braco/3d916a2cff8e62b046128ef042038c1c

@braco I am trying to accomplish the same but with existing block types, do you have a full working repository of your solution? I am unsure what these are:

import ModuleName from 'mymodules/ModuleName' // what is this module?

and where are you using wordpress_plugin.js exactly?

[gatsbot]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!

[ThatGuySam]

@braco Here's a package I've been using with moderate success https://github.com/u12206050/react-gutenberg

It's a few prebuilt components and you can add custom components with Lazy Blocks

[braco]

@ThatGuySam will check it out, thanks

[insaurabh]

Is there any way by which we can get the CSS of custom Gutenberg modules on Gatsby?

[ThatGuySam]

@insaurabh

1. You could encode all the CSS into JSON, but that's pretty hacky
2. You could have the Block styles in the same repo as Gatsby so you can just reference it from both sides
3. You could try using CSS variables + JSON to expose style values you set for your blocks to your Gatsby CSS
4. A combination of 2 and 3

[insaurabh]

Thanks, @ThatGuySam for your suggestions. Suggestion # 2 seems safer.