Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Gutenberg & Custom Applications powered by WordPress

268 views

Published on

In this talk I'll go over the current issues with building a headless application with Gutenberg, and how we solved it for a big project. Cast study included.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Gutenberg & Custom Applications powered by WordPress

  1. 1. Gutenberg & Custom Applications * * this is not a paid product placement for Pantheon, but it should be - roy@roysivan.com
  2. 2. A tale of love, hate, betrayal, and mighty comeback And a case study. *
  3. 3. Thank You For being a friend *
  4. 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. 5. More about me • First install of WP was a beta • Consulting: arcctrl.com • Find my courses on lynda.com • Everywhere Important: @royboy789
  6. 6. Okay what? WordPress Gutenberg Applications Headless React 6 WordPress Gutenberg Application Headless
  7. 7. That was the talk I gave! RIGHT HERE AT WCLAX WORDPRESS AS AN APPLICATION FRAMEWORK The Year: 2014
  8. 8. The Year: 2014
  9. 9. FAST FORWARD How to effectively build apps powered by Gutenberg Gutenberg & Custom Applications The Year: 20 TODAY
  10. 10. Starting at the beginning What is a Gutenberg?
  11. 11. This is The Gutes It is coming… when it is ready. @thegutes - Twitter
  12. 12. <data-rant state=“start”>
  13. 13. This is well structured JSON
  14. 14. This is Gutenberg I bet this data looks AMAZING right?
  15. 15. NO
  16. 16. Hi Roy But what about the data via REST API? It must be an array of data, right?
  17. 17. nope
  18. 18. DB data
  19. 19. And thus You can’t build apps with Gutenberg Because the data is not structured and we need to be 100% backwards compatible.
  20. 20. THANK YOU www.arcctrl.com @royboy789
  21. 21. So, what now?
  22. 22. Gutenberg Object Plugin Shameless plug in. github.com/royboy789/gutenberg-object-plugin/
  23. 23. https://dev-gutes-wclax.pantheonsite.io
  24. 24. TRY IT OUT https://dev-gutes-wclax.pantheonsite.io/admin 
 SECURITY PEOPLE LOOK AWAY
  25. 25. TRY IT OUT https://dev-gutes-wclax.pantheonsite.io/admin 
 user: WCLAX_Author
 pass: gutes_wclax_author123!
  26. 26. 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
  27. 27. PHP Returns an array of the blocks and data get_editor_blocks( $post_id );
  28. 28. Case Study Airstream a company known for their trailers/campers
  29. 29. LatLong - A Digital Agency
  30. 30. The Setup WordPress WooCommerce Gutenberg GraphQL Headless React 32 WordPress Gutenberg WooCommerce Headless
  31. 31. Why WordPress?
  32. 32. Why Headless?
  33. 33. Working with Gutenberg
  34. 34. Gutenberg & WooCommerce
  35. 35. The Power of React
  36. 36. Try it yourself! github.com/royboy789/gutes-object-upstream https://github.com/royboy789/gutes-object-upstream CUSTOM UPSTREAM
  37. 37. Try it yourself!
  38. 38. THANK YOU AGAIN
 
 QUESTIONS? arcctrl.com 
 @royboy789 - GitHub & Twitter

×