Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
crgeary opened this Issue Aug 20, 2018 · 13 comments

Comments

Projects
None yet
7 participants
@crgeary
Copy link
Member

crgeary commented Aug 20, 2018

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.

code

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

This comment has been minimized.

Copy link

ataylorme commented Sep 26, 2018

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

This comment has been minimized.

Copy link

braco commented Oct 15, 2018

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

This comment has been minimized.

Copy link

royboy789 commented Dec 10, 2018

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

@slattery

This comment has been minimized.

Copy link

slattery commented Dec 12, 2018

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

@crgeary

This comment has been minimized.

Copy link
Member Author

crgeary commented Dec 12, 2018

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

This comment has been minimized.

Copy link

royboy789 commented Dec 13, 2018

@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

This comment has been minimized.

Copy link

ataylorme commented Dec 13, 2018

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

This comment has been minimized.

Copy link

royboy789 commented Dec 13, 2018

@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

This comment has been minimized.

Copy link

braco commented Dec 13, 2018

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

This comment has been minimized.

Copy link

braco commented Dec 13, 2018

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

This comment has been minimized.

Copy link

geocine commented Feb 5, 2019

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

This comment has been minimized.

Copy link

gatsbot bot commented Feb 26, 2019

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 gatsbot bot added the stale? label Feb 26, 2019

@gatsbot

This comment has been minimized.

Copy link

gatsbot bot commented Mar 9, 2019

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!

@gatsbot gatsbot bot closed this Mar 9, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.