The new WordPress editor (Gutenberg) is how all new content is to be created on WordPress. However with the way the data is stored, is that really the best way to power an application? I will walk through the drawbacks for how Gutenberg stores data, and how to easily change that to more easily power custom headless (and not) web applications.

• Presentation abstract
• Talk by Roy Sivan
• On Twitter: @royboy789
• On GitHub: royboy789
• arcctrl.com

GitHub - royboy789/gutenberg-object-plugin: Saves Gutenberg data as an object / array and allows you to access it via REST API

Access via API

Add Gutenberg data to regular API endpoint return

• /wp/v2/posts
• /wp/v2/posts/:id

Allows you to get only the Gutenberg Data

• /gutes-db/v1/:id

To use with ACF flex content plugin has

• get_editor_blocks( $post_id ); Returns an array of the blocks as data

Sample app for Airstream

• Why WordPress? content team familiar with it. (not a strong reason for me, but what can you do?)
• Why headless?
  • Fast, no WordPress overhead
  • Separation of concerns
  • Ease of connectivity to multiple APIs
• Working with Gutenberg
  • Fun!
  • Best moving target as they push updates and change code. It is in beta!
  • Created custom blocks. Turned off all core default blocks, except paragraph block
  • Gutenberg and WooCommerce don’t work together. They play together like Tom and Jerry.
  • Only WooProducts, orders and payments, but rest of store uses React. WooProducts had hook to remove Gutenberg, but developers can add hook to put it back in.

The Power of React

• React components is agnostic of where they live. Can be on front end power headless front end and also power Gutenberg

Demo on Pantheon

• github.com/royboy789/gutes-object-upstream
• Create free account on pantheon , set upstream to install gutes-object-upstream

What is a GraphQL layer? lets you have queries that are specific to the data you need to pull. Title and permalink for example.

Gatsby may be another tool like GraphQL but initial attempt didn’t work.

Look at Zac Gordon’s tutorial for creating Gutenberg blocks