$30 off During Our Annual Pro Sale. View Details »

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.

Chris Van Patten

June 16, 2018
Tweet

More Decks by Chris Van Patten

Other Decks in Technology

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