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.

Transcript

1. GOING…
   GOING…
   GUTENBERG
   

   View Slide

2. WHO
   

   View Slide

3. ME
   

   View Slide

4. ME
   (@CHRISVANPATTEN)
   

   View Slide

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

   View Slide

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

   View Slide

7. TOMODOMO.CO
   

   View Slide

8. THE CLIENT
   

   View Slide

9. NON-PROFIT
   MAGAZINE
   

   View Slide

10. HEALTH/WELLNESS
    

    View Slide

11. FIVE YEARS
    

    View Slide

12. View Slide

13. WHAT
    

    View Slide

14. FULL REBUILD
    

    View Slide

15. GUTENBERG
    

    View Slide

16. View Slide

17. View Slide

18. WHERE
    

    View Slide

19. WHERE
    (WHERE WE STARTED)
    

    View Slide

20. POSTS
    

    View Slide

21. View Slide

22. PAGES
    

    View Slide

23. View Slide

24. MAGAZINE
    

    View Slide

25. View Slide

26. HOMEPAGE
    

    View Slide

27. View Slide

28. BLOCKS
    

    View Slide

29. View Slide

30. WHEN
    

    View Slide

31. JANUARY JUNE
    KICKOFF FINISH BUILD QA & LAUNCH
    

    View Slide

32. View Slide

33. WHY
    

    View Slide

34. View Slide

35. BLOCKS
    

    View Slide

36. BLOCKS
    MAKE
    

    View Slide

37. BLOCKS
    MAKE
    SENSE
    

    View Slide

38. CONTENT-
    STRUCTURE FIT
    

    View Slide

39. 
    (THE WEB IS BUILT ON BLOCKS)
    

    View Slide

40. View Slide

41. HOW
    

    View Slide

42. STEP ONE
    IDENTIFY YOUR BLOCKS
    

    View Slide

43. STEP TWO
    BUILD YOUR BLOCKS
    

    View Slide

44. STEP THREE
    TEAR YOUR HAIR OUT
    

    View Slide

45. STEP THREE
    TEAR YOUR HAIR OUT
    (AKA THE APIs ARE STILL A WORK IN PROGRESS)
    

    View Slide

46. STEP FOUR
    MIGRATE CONTENT
    

    View Slide

47. STEP FOUR (COROLLARY)
    REBUILD CONTENT
    

    View Slide

48. STEP FIVE
    TRAIN, EDUCATE, TEACH
    

    View Slide

49. View Slide

50. WHAT WORKED?
    

    View Slide

51. BLOCKS
    MAKE
    SENSE
    

    View Slide

52. BLOCKS
    MAKE
    DEFINITELY
    

    View Slide

53. CONTENT MIGRATION
    

    View Slide

54. THE CLIENT GETS IT
    

    View Slide

55. THE CLIENT GETS IT
    (MOSTLY)
    

    View Slide

56. View Slide

57. WHAT DIDN’T WORK?
    

    View Slide

58. CONTENT MIGRATION
    

    View Slide

59. REACT
    

    View Slide

60. SHIFTING SANDS
    

    View Slide

61. SHIFTING SANDS
    APIs
    

    View Slide

62. SHIFTING SANDS
    APIs
    USER INTERFACES
    

    View Slide

63. SHIFTING SANDS
    APIs
    USER INTERFACES
    DATA MODELS
    

    View Slide

64. CODE STRUCTURE

    & CODE DUPLICATION
    

    View Slide

65. View Slide

66. TIPS
    

    View Slide

67. INSTALL
    GUTENBERG
    SOMEWHERE
    

    View Slide

68. INSTALL
    GUTENBERG
    SOMEWHERE
    (and use)
    

    View Slide

69. LEARN JAVASCRIPT,
    DEEPLY
    

    View Slide

70. DON’T BE AFRAID TO
    GET IT WRONG
    

    View Slide

71. TEST THOROUGHLY
    

    View Slide

72. TEST THOROUGHLY
    IN MULTIPLE BROWSERS
    

    View Slide

73. TEST THOROUGHLY
    IN MULTIPLE BROWSERS
    ON MULTIPLE OPERATING SYSTEMS
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

77. WATCH THE PROJECT
    

    View Slide

78. View Slide

79. View Slide

80. View Slide

81. View Slide

82. WEEKLY MEETING
    10am ATLANTIC
    WORDPRESS.SLACK.COM
    #CORE-EDITOR
    

    View Slide

83. CONTRIBUTE
    

    View Slide

84. View Slide

85. WOULD WE DO IT
    DIFFERENTLY?
    

    View Slide

86. NO.
    

    View Slide

87. EXCITED
    

    View Slide

88. EXCITED
    (!)
    

    View Slide

89. GUTENBERG

    IS THE FUTURE
    

    View Slide

90. GUTENBERG

    IS THE FUTURE
    GET ON BOARD!
    

    View Slide

91. View Slide