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.

Building Headless Applications with WordPress & Gutenberg

715 views

Published on

how to build custom, headless web applications with Gutenberg, with a case study.

Published in: Technology
  • Login to see the comments

Building Headless Applications with WordPress & Gutenberg

  1. 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. 2. Build Web Applications with Gutenberg * * ask me more about Pantheon, I don’t even work there - @royboy789
  3. 3. A tale of love, hate, betrayal, and mighty comeback And a case study. *
  4. 4. Thank You For being a friend @royboy789 *
  5. 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. 6. More about me • First install of WP was a beta • Consulting: arcctrl.com • Find my courses on lynda.com • Everywhere Important: @royboy789
  7. 7. Okay what? WordPress Gutenberg Web Applications Headless 7 WordPress Gutenberg Application Headless
  8. 8. That was the talk I gave! At WCLAX.. my first talk EVER WORDPRESS AS AN APPLICATION FRAMEWORK The Year: 2014
  9. 9. The Year: 2014
  10. 10. FAST FORWARD Build Web Applications with Gutenberg The Year: 20 TODAY
  11. 11. Starting at the beginning It is here…. finally. @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? Hold onto your socks, I’m about to go full geek. Did anyone get a pair of Pantheon socks? They are SUPER soft.
  22. 22. This is the mighty comeback I know you feel defeated after I just led you on for a few minutes… ready?
  23. 23. Gutenberg Object Plugin Shameless plug in. github.com/royboy789/gutenberg-object-plugin/
  24. 24. http://bit.ly/hiGutes
  25. 25. 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
  26. 26. PHP Returns an array of the blocks and data get_editor_blocks( $post_id );
  27. 27. TRY IT OUT http://bit.ly/hiGutesAdmin 
 user: wcphx_author
 pass: wcphx_isAMAZING123!
  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 33 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 Compiles you
  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

×