Gutenberg in Headless WordPress: WPGraphQL Gutenberg

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: https://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: https://github.com/kellenmace/wpgraph... Headless Block Parser plugin: https://github.com/kellenmace/headles... OTHER LINKS: WPGraphQL Gutenberg plugin: https://github.com/pristas-peter/wp-g... WPGraphQL plugin: https://www.wpgraphql.com/ html-react-parser NPM package: https://www.npmjs.com/package/html-re... DE{CODE} LINKS: Follow all of our content here: https://developers.wpengine.com DE{CODE} Twitter:   / wpedecode