[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