This document discusses using Gutenberg to build custom applications. It begins with an overview of Gutenberg and introduces a Gutenberg Object Plugin that structures Gutenberg block data to be accessible via an API. The document then presents a case study of a company that built a headless e-commerce site using WordPress, Gutenberg, GraphQL, and React. It encourages trying out the Gutenberg Object Plugin and code on GitHub to explore using Gutenberg for custom applications.

1. Gutenberg &
Custom Applications
*
* this is not a paid product placement for Pantheon, but it should be - roy@roysivan.com

2. A tale of love, hate, betrayal, and
mighty comeback
And a case study.
*

3. Thank You
For being a friend
*

4. <!— wp:Roy Sivan —>
Senior Software Engineer
The Walt Disney Company
I don’t work at Pantheon, I’m a big fan.
<!— /wp:Roy Sivan —>
^ subtle foreshadowing

5. More about me
• First install of WP was a beta
• Consulting: arcctrl.com
• Find my courses on lynda.com
• Everywhere Important: @royboy789

6. Okay what?
WordPress
Gutenberg
Applications
Headless React
6
WordPress Gutenberg
Application Headless

7. That was the talk I gave! RIGHT HERE AT WCLAX
WORDPRESS AS AN APPLICATION FRAMEWORK
The Year: 2014

9. The Year: 2014

11. FAST FORWARD
How to effectively build apps powered by Gutenberg
Gutenberg & Custom Applications
The Year: 20 TODAY

12. Starting at the beginning
What is a Gutenberg?

13. This is The Gutes
It is coming… when it is ready.
@thegutes - Twitter

14. <data-rant state=“start”>

15. This is well
structured JSON

16. This is
Gutenberg
I bet this data looks
AMAZING
right?

17. NO

18. Hi Roy
But what about the data via REST API?
It must be an array of data, right?

19. nope

20. DB data

21. And thus
You can’t build apps with Gutenberg
Because the data is not structured and
we need to be 100% backwards compatible.

22. THANK YOU
www.arcctrl.com
@royboy789

23. So, what now?

24. Gutenberg Object Plugin
Shameless plug in.
github.com/royboy789/gutenberg-object-plugin/

25. https://dev-gutes-wclax.pantheonsite.io

26. TRY IT OUT
https://dev-gutes-wclax.pantheonsite.io/admin
SECURITY PEOPLE LOOK AWAY

27. TRY IT OUT
https://dev-gutes-wclax.pantheonsite.io/admin
user: WCLAX_Author
pass: gutes_wclax_author123!

28. 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

29. PHP
Returns an array of the blocks and data
get_editor_blocks( $post_id );

30. Case Study
Airstream
a company known for their trailers/campers

31. LatLong - A Digital Agency

32. The Setup
WordPress
WooCommerce
Gutenberg
GraphQL
Headless React
32
WordPress Gutenberg
WooCommerce Headless

34. Why WordPress?

36. Why Headless?

37. Working with Gutenberg

38. Gutenberg & WooCommerce

41. The Power of React

43. Try it yourself!
github.com/royboy789/gutes-object-upstream
https://github.com/royboy789/gutes-object-upstream
CUSTOM UPSTREAM

44. Try it yourself!

45. THANK YOU AGAIN
QUESTIONS?
arcctrl.com
@royboy789 - GitHub & Twitter