In this talk I go over my Gutenberg Object Plugin and discuss the need for it. I go over a case study for Aistream which Web Ops and Gutenberg played big roles

1. While you’re waiting.
Go to this link and create a post in Gutenberg.
*
http://bit.ly/hiGutesAdmin
user: wcphx_author
pass: wcorl_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.

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. 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
Compiles you

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