This is a proof of concept web app, completely editable in WordPress using the block editor. I think it’s more fun to do it first. (Please let me know if these don’t work, they’re version 0.1. Saving them will save to your browser only.)

Fill in the blanks then click “your poem” to see your creation.

Finished? Maybe try another one (I am pushing down the image of how this works so you don’t see it before finishing the first one. 😁)

Fill in the blanks (again)

What are these?

Each of those tiny interactive forms are built in WordPress using the block editor. The block for the first looks like this:

The “how do you make WP block editor blocks interactive in Gatsby” issue was something I had already solved with the show/hide buttons on the code blocks and extending that process worked as I had hoped, phew.

A super high level view:

1. There is a filter on the WP GraphQL endpoint which leaves this block in its content:raw state (ie with the block editor html markup which contains all the block data still there)
2. GraphQL picks up the WordPress content with these blocks unrendered, still in their raw state with block editor html comments intact
3. Before the React elements are processed in the build, the theme pulls out the content and creates a JSON array containing each component to use and its data.
4. This array is then used to create the React elements with their content for the post.
5. Gatsby carries on with the elements created in step 3 as normal.

I have a feeling I might be able to combine steps 2 and 3 but I can’t be bothered atm.

The main difficulty from a technical perspective continues to be getting a handle on how useEffect works in Gatsby but this is a lack of practice and experience rather than anything else!

I’ll blog all of this more thoroughly later, this post is mainly to have it run on a public site and debug any issues. 😊😊😊