Gutenberg in Headless WordPress: WPGraphQL Gutenberg
Вставка
- Опубліковано 30 лип 2024
- Let's explore how to to render individual Gutenberg blocks as React/Vue/Svelte components in your frontend app using the WPGraphQL Gutenberg plugin.
Presenter: Kellen Mace - / kellenmace
A blog post on this topic is also available:
developers.wpengine.com/blog/...
CONTENTS:
00:00 - Intro
00:35 - Purpose of the WPGraphQL Gutenberg Plugin
01:08 - How WPGraphQL Gutenberg Works
02:53 - Setting Up WPGraphQL Gutenberg
03:35 - Example WPGraphQL Gutenberg Query
05:00 - Query for & Render Blocks
08:16 - Fix Internal Link URLs
10:10 - Render HTML & Convert Anchor Tags to Link Components
13:28 - Other Uses for an HTML Parser
13:39 - GraphQL Queries & Fragements
16:23 - Trade-off: Control vs. Ease of Implementation
19:01 - Outro
CODE REPOS:
Next.js app: github.com/kellenmace/wpgraph...
Headless Block Parser plugin: github.com/kellenmace/headles...
OTHER LINKS:
WPGraphQL Gutenberg plugin: github.com/pristas-peter/wp-g...
WPGraphQL plugin: www.wpgraphql.com/
html-react-parser NPM package: www.npmjs.com/package/html-re...
DE{CODE} LINKS:
Follow all of our content here: developers.wpengine.com
DE{CODE} Twitter: / wpedecode
What questions do you have about using the WPGraphQL Gutenberg plugin to query for and render individual Gutenberg blocks as React/Vue/Svelte components? Let us know!
Since these plugins are not hosted on the wordpress site itself, how safe and maintainable are these plugins for the future? Since I assume these need to be updated manually on every different website.
Hey @@arnesneyers2076 👋 What do you mean? The WPGraphQL and WPGraphQL Gutenberg plugins mentioned in this video should be be hosted on the WordPress backend site. So when updates to them are released, you can read the change log to confirm there are no breaking changes (or update your codebase if there are), then update the plugin like you would when updating any other WordPress plugin. I hope that's helpful. Thanks for watching! 👍
How does this work with custom blocks and ACF? Tried setting it up with GraphQL Gutenberg and GraphQL Gutenberg ACF plugins but not getting anything back in the GraphQL schema.
Great video. It was just what I was looking for. I’m used to work with Gutenberg Block Patterns and I was looking to find a way to implement them in a headless wp application. Your video just gave me the input I needed to do what I want. Thank you 🙏🏻🙌🏻
You're welcome! Thanks for checking it out! 😊
Great video, thanks!
Sure thing! Thanks for watching! 👍
What's up! That approach is amazing. And breaking graphql queries into fragments is just so clear.
I'm using graphql-request npm package. I should give apollo a try.
Thanks for the video!
Great video! Thanks for the awesome content!
Glad you enjoyed it!
Thanks for this thorough introduction. This is the route I want to go with in my current project. It looks a lot like an implementation I have worked with where we used Magnolia as headless CMS. Currently I am however fighting a bit with the various WP GraphQL plugins. I tend to get the error: NO SCHEMA AVAILABLE in the QraphQL IDE.
Great video! Do you know any library similar to "html-react-parser" but for Nuxt? Or just for any library? Thanks!
Is there already a library of core block components in React?
Hi, Im creating a headless wp site using gatsby, but this is the first time and I have some questions about how can I upload my wp site to a host and my gatsby site to a host as well, because how can I redirect the pages when Im using the wp menus? Also what can you recommend to publish mi site? Sorry for my english, greetings from Nicaragua
I have a web site hosted just like the set up you are describing. I have WP installed on a sub-folder in the server, and after building Gatsby project, zipped up public folder contents and uploaded to hosting server root folder and unzipped them there. Now site is up and running fine. My only gripe is that, I have to do a build every time I have to publish a blog post as this is a static site hosted on a traditional shared hosting server. If you are willing to host Gatsby site on CDN like Gatsby Cloud/Vercel/Cloudflare/Netlify etc, the build part is automated, so when you publish new posts, builds and deployment happen automatically, saving you a lot of time and frustration. Hope this information helps you or anyone looking for this setup.
If i am right we should recreate each block type as a component to get the exact visual effect right ?
Yes, with this approach you would need to have a component in your frontend app for each type of Gutenberg block. Be sure to check out the first video in this series to see an alternative approach of rendering the post content as HTML, as well. Thanks for watching!
This is no longer maintained if I am right.
WPGraphQL Gutenberg is still an active project. The latest commit as of the date of this comment was on Nov. 21, 2021, so about a month ago.