This document summarizes Roy Sivan's talk on using Gutenberg to build web applications. It discusses how Gutenberg data is not initially structured in a way that lends itself to building apps. However, Roy introduces the Gutenberg Object Plugin which adds Gutenberg data to WordPress REST API endpoints, allowing the data to be accessed. The document then presents a case study of how a company used WordPress, Gutenberg, and a headless React frontend to build their new website.

1. While you’re waiting.
Go to this link and create a post in Gutenberg.
*
http://bit.ly/hiGutesAdmin
user: wcphx_author
pass: wcphx_isAMAZING123!
* ask me more about Pantheon, I don’t even work there - @royboy789

2. Build Web Applications with
Gutenberg
*
* ask me more about Pantheon, I don’t even work there - @royboy789

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

4. Thank You
For being a friend
@royboy789
*

5. <!— wp:Roy Sivan —>
Senior Software Engineer
The Walt Disney Company
No, I seriously don’t work at Pantheon.
But you can!
https://pantheon.io/careers
<!— /wp:Roy Sivan —>
^ subtle foreshadowing

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

7. Okay what?
WordPress
Gutenberg
Web Applications
Headless
7
WordPress Gutenberg
Application Headless

8. That was the talk I gave! At WCLAX.. my first talk EVER
WORDPRESS AS AN APPLICATION FRAMEWORK
The Year: 2014

10. The Year: 2014

12. FAST FORWARD
Build Web Applications with Gutenberg
The Year: 20 TODAY

13. Starting at the beginning
It is here…. finally.
@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?
Hold onto your socks, I’m about to go full geek.
Did anyone get a pair of Pantheon socks?
They are SUPER soft.

24. This is the mighty comeback
I know you feel defeated after I just led you on
for a few minutes…
ready?

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

26. http://bit.ly/hiGutes

28. RESTability is key
Add Gutenberg data
to regular API
endpoint return
/wp/v2/posts
/wp/v2/posts/:id
/wp/v2/pages
/wp/v2/pages/:id
Allows you to get
only the Gutenberg
data
/gutes-db/v1/:id
/wp/v2/posts/:id/blocks
/wp/v2/posts/:id/block/:bid
/wp/v2/pages/:id/blocks
/wp/v2/pages/:id/block/:bid

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

30. TRY IT OUT
http://bit.ly/hiGutesAdmin
user: wcphx_author
pass: wcphx_isAMAZING123!

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

32. LatLong - A Digital Agency

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

35. Why WordPress?

37. Why Headless?

38. Working with Gutenberg

39. Gutenberg & WooCommerce

42. The Power of React
Compiles you

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

45. Try it yourself!

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