Going… Going… Gutenberg

 Going… Going… Gutenberg

The WordPress community is abuzz about Gutenberg. But what does it take to use it on a production website? And what if that website is a leading lifestyle magazine with tens of thousands of subscribers and readers? In this talk, you’ll learn why and how we built one of the first major Gutenberg-powered websites. You’ll get to hear about the hiccups and bumps we hit along the way, the surprising pieces that worked better than expected, and lessons for your own Gutenberg integration.

38bc9be7f4f140d1f719c1faeed29a6c?s=128

Chris Van Patten

June 16, 2018
Tweet

Transcript

  1. GOING… GOING… GUTENBERG

  2. WHO

  3. ME

  4. ME (@CHRISVANPATTEN)

  5. ME (@CHRISVANPATTEN) (DEVELOPER… SORT OF)

  6. ME (@CHRISVANPATTEN) (DEVELOPER… SORT OF) (AGENCY CEO… SORT OF)

  7. TOMODOMO.CO

  8. THE CLIENT

  9. NON-PROFIT MAGAZINE

  10. HEALTH/WELLNESS

  11. FIVE YEARS

  12. None
  13. WHAT

  14. FULL REBUILD

  15. GUTENBERG

  16. None
  17. None
  18. WHERE

  19. WHERE (WHERE WE STARTED)

  20. POSTS

  21. None
  22. PAGES

  23. None
  24. MAGAZINE

  25. None
  26. HOMEPAGE

  27. None
  28. BLOCKS

  29. None
  30. WHEN

  31. JANUARY JUNE KICKOFF FINISH BUILD QA & LAUNCH

  32. None
  33. WHY

  34. None
  35. BLOCKS

  36. BLOCKS MAKE

  37. BLOCKS MAKE SENSE

  38. CONTENT- STRUCTURE FIT

  39. <DIV> (THE WEB IS BUILT ON BLOCKS)

  40. None
  41. HOW

  42. STEP ONE IDENTIFY YOUR BLOCKS

  43. STEP TWO BUILD YOUR BLOCKS

  44. STEP THREE TEAR YOUR HAIR OUT

  45. STEP THREE TEAR YOUR HAIR OUT (AKA THE APIs ARE

    STILL A WORK IN PROGRESS)
  46. STEP FOUR MIGRATE CONTENT

  47. STEP FOUR (COROLLARY) REBUILD CONTENT

  48. STEP FIVE TRAIN, EDUCATE, TEACH

  49. None
  50. WHAT WORKED?

  51. BLOCKS MAKE SENSE

  52. BLOCKS MAKE DEFINITELY

  53. CONTENT MIGRATION

  54. THE CLIENT GETS IT

  55. THE CLIENT GETS IT (MOSTLY)

  56. None
  57. WHAT DIDN’T WORK?

  58. CONTENT MIGRATION

  59. REACT

  60. SHIFTING SANDS

  61. SHIFTING SANDS APIs

  62. SHIFTING SANDS APIs USER INTERFACES

  63. SHIFTING SANDS APIs USER INTERFACES DATA MODELS

  64. CODE STRUCTURE
 & CODE DUPLICATION

  65. None
  66. TIPS

  67. INSTALL GUTENBERG SOMEWHERE

  68. INSTALL GUTENBERG SOMEWHERE (and use)

  69. LEARN JAVASCRIPT, DEEPLY

  70. DON’T BE AFRAID TO GET IT WRONG

  71. TEST THOROUGHLY

  72. TEST THOROUGHLY IN MULTIPLE BROWSERS

  73. TEST THOROUGHLY IN MULTIPLE BROWSERS ON MULTIPLE OPERATING SYSTEMS

  74. TEST THOROUGHLY IN MULTIPLE BROWSERS ON MULTIPLE OPERATING SYSTEMS ON

    MULTIPLE COMPUTERS
  75. TEST THOROUGHLY IN MULTIPLE BROWSERS ON MULTIPLE OPERATING SYSTEMS ON

    MULTIPLE COMPUTERS WITH YOUR CLIENT
  76. TEST THOROUGHLY IN MULTIPLE BROWSERS ON MULTIPLE OPERATING SYSTEMS ON

    MULTIPLE COMPUTERS WITH YOUR CLIENT
  77. WATCH THE PROJECT

  78. None
  79. None
  80. None
  81. None
  82. WEEKLY MEETING 10am ATLANTIC WORDPRESS.SLACK.COM #CORE-EDITOR

  83. CONTRIBUTE

  84. None
  85. WOULD WE DO IT DIFFERENTLY?

  86. NO.

  87. EXCITED

  88. EXCITED (!)

  89. GUTENBERG
 IS THE FUTURE

  90. GUTENBERG
 IS THE FUTURE GET ON BOARD!

  91. None