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.

Embracing Gutenberg | WordCamp Rochester 2018


Published on

You might've heard a thing or two about Gutenberg, the new default editor for WordPress. Like many longtime WordPress users I was hesitant, if not reluctant, to start using it. But guess what? It's not bad! In fact, it's pretty great. In this session we're going to look at Gutenberg from a practical point of view: how it changes our day-to-day work with WordPress, and how it opens up a new way of thinking about content on the web.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Embracing Gutenberg | WordCamp Rochester 2018

  1. 1. EMBRACING GUTENBERG WordCamp Rochester 2018
  2. 2. Hi! I’m Andy.
  3. 3. GUTENBERG Currently a plugin New default editor in WordPress 5.0
  4. 4. A new way to think about content No more walls of text and code. Now we’re building with blocks.
  5. 5. Not everyone is happy with Gutenberg. It’s divisive, to put it lightly.
  6. 6. Project Management “It’s fair to say that the first phase of Gutenberg development has been disastrous from a project management point of view. The lack of process around its development has caused fractures in the community.” John Blackbourn WordPress Core Developer Release Lead, WordPress 4.1
  7. 7. Contributor Learning Curve “It’s been an exclusionary process from the beginning – requiring people to learn new tools, new ways of working with WordPress, and new languages just to have the opportunity to be involved.” Joe Dolson WordPress Core Contributor, Theme Review Team, Plugin Developer
  8. 8. Lack of Accessibility “The overall user experience is terribly complicated for users with accessibility needs at the point the new editor is barely usable for them.” Andrea Fercia WordPress Core Team, WordPress Accessibility Team
  9. 9. …but I digress. 
  10. 10. CHANGE Change is scary.
  11. 11. The biggest interface change in 10 years We haven’t had an overhaul like this since December 2008.
  12. 12. WordPress Dashboard Dashboards in WordPress 2.6 to WordPress 2.7 December 2008 (via
  13. 13. WordPress Editor Editor in WordPress 1.0 to WordPress 4.9 November 2017 (via
  14. 14. The new editor in 5.0
  15. 15. Have clients? You’ll need to train them again.
  16. 16. Selling WordPress plugins or themes? Your support costs will go up.
  17. 17. Managing sites? Your processes need adjustment.
  18. 18. Helpful plugins Classic Editor Gutenberg Ramp Together = Gradually add Gutenberg to your sites
  19. 19. Prep now! Ease into WordPress 5.0 Start preparing for the transition Documentation + Training
  20. 20. ??? You might be wondering…
  21. 21. Why bother? “If it’s not broke, why fix it?”
  22. 22. Gutenberg is a good thing. It’s where WordPress needs to go.
  23. 23. 50% of small businesses don’t have a website. Source: CNBC/SurveyMonkey
  24. 24. “WordPress is easy to use!” (That’s what we tell them.)
  25. 25. It really isn’t. (Sorry.)
  26. 26. How do you use this…
  27. 27. …to build this?
  28. 28. We have plenty of stopgaps. Shortcodes Custom fields Widgets Page builders
  29. 29. WYSIWYG in WP WordPress can do much better.
  30. 30. In Mullenweg’s own words… “WordPress’s growth is impressive (28.5% and counting) but it’s not limitless — at least not in its current state. We have challenges (user frustrations with publishing and customizing, competition from site builders like Squarespace and Wix) and opportunities (the 157 million small businesses without sites, aka the next big market we should be serving). It’s time for WordPress’ next big thing, the thing that helps us deal with our challenges and opportunities. The thing that changes the world.” – Matt Mullenweg, August 2017 “We called it Gutenberg for a reason”
  31. 31. Easy DIY with WP It’s the next step for the platform.
  32. 32. Bring on the blocks! Blocks for text, images, video, forms, maps, custom fields. All the goodies that were once shortcodes or metaboxes or widgets.
  33. 33. Blocks everywhere.
  34. 34. Heard of these things? • Atomic Design Systems • Standardized Components • Design Patterns • Style Guides Web designers & developers already work with this stuff. It’s our turn.
  35. 35. Example: Cards in Google’s Material Design Source:
  36. 36. Your task: Start thinking with blocks Here’s a little exercise…
  37. 37. Templating Exercise 1. Get a bunch of sticky notes or index cards. 2. Arrange your blank notes or cards vertically in a single column. 3. Each note/card represents a block. Give each one a label (e.g. “featured image” or “email signup”). 4. Add, remove, and rearrange your blocks until you’re happy with the structure. 5. Take a picture of it. Congrats! You’ve just created a template.
  38. 38. Implementing Templates • Create post and page templates using blocks with placeholder content. • Use the Duplicate Post plugin to clone those posts, then replace placeholder content.
  39. 39. What’s the TL;DR? Three things…
  40. 40. TL;DR The upsides: 1. WYSIWYG in WordPress core 2. Just enough flexibility 3. Blocks enable easier templating
  41. 41. TL;DR The challenges: 1. Project management 2. Hurdles for contributing 3. Accessibility
  42. 42. Thank you! Feedback: @andymci on Twitter Notes: