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.

1. EMBRACING
GUTENBERG
WordCamp Rochester 2018

2. Hi! I’m Andy.
www.andymci.com

3. GUTENBERG
Currently a plugin
New default editor in WordPress 5.0

5. A new way to think
about content
No more walls of text and code.
Now we’re building with blocks.

6. Not everyone is happy
with Gutenberg.
It’s divisive, to put it lightly.

7. 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

8. 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

9. 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

10. …but I digress.


11. CHANGE
Change is scary.

12. The biggest
interface change
in 10 years
We haven’t had an overhaul like this
since December 2008.

13. WordPress Dashboard
Dashboards in WordPress 2.6 to WordPress 2.7
December 2008 (via CodeInWP.com)

14. WordPress Editor
Editor in WordPress 1.0 to WordPress 4.9
November 2017 (via CodeInWP.com)

15. The new editor in 5.0

16. Have clients?
You’ll need to train them again.

17. Selling WordPress
plugins or themes?
Your support costs will go up.

18. Managing sites?
Your processes need adjustment.

19. Helpful plugins
Classic Editor Gutenberg Ramp
Together = Gradually add Gutenberg to your sites

20. Prep now!
Ease into WordPress 5.0
Start preparing for the transition
Documentation + Training

21. ???
You might be wondering…

22. Why bother?
“If it’s not broke, why fix it?”

23. Gutenberg is a
good thing.
It’s where WordPress needs to go.

24. 50%
of small
businesses don’t
have a website.
Source: CNBC/SurveyMonkey

25. “WordPress is
easy to use!”
(That’s what we tell them.)

26. It really isn’t.
(Sorry.)

27. How do you
use this…

28. …to build
this?

29. We have plenty
of stopgaps.
Shortcodes
Custom fields
Widgets
Page builders

30. WYSIWYG in WP
WordPress can do much better.

31. 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”

32. Easy DIY with WP
It’s the next step for the platform.

33. Bring on the blocks!
Blocks for text, images, video,
forms, maps, custom fields. All the
goodies that were once shortcodes or
metaboxes or widgets.

34. Blocks everywhere.

35. 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.

36. Example:
Cards in Google’s Material Design
Source: https://material.io/design/components/cards.html

37. Your task:
Start thinking
with blocks
Here’s a little exercise…

38. 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.

39. 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.
wordpress.org/plugins/duplicate-post

40. What’s the
TL;DR?
Three things…

41. TL;DR
The upsides:
1. WYSIWYG in WordPress core
2. Just enough flexibility
3. Blocks enable easier templating

42. TL;DR
The challenges:
1. Project management
2. Hurdles for contributing
3. Accessibility

43. Thank you!
Feedback: @andymci on Twitter
Notes: andymci.com/wcroc18