Gutenberg’s imminent arrival creates both excitement and uncertainty in WordPress users. On one hand, its resemblance to distraction-free editors—Medium, for example—is a step forward. On the other hand, its impact on site building is massive. Aside from whether Gutenberg will be compatible across every single WordPress site, we also wonder if it spells the end of page builders or even WordPress consulting. This session is a forum for those questions. We’ll assess Gutenberg’s opportunities and challenges and how we might prepare for it. We’ll especially look at Gutenberg’s content design opportunity and how it enables better content creation through atomized content. By modularizing content into blocks, we have the opportunity to approach content creation from the bottom-up—something that’s more explicit in Gutenberg than in the current WordPress editor. Whatever your views regarding Gutenberg, come to this session for a nuanced look on what it has to offer and prepare for its imminent arrival. Presented at WordCamp Toronto 2018.

1. Gutenberg
and the
Content Design
Opportunity
Jesse Emmanuel Rosario
@jemrosario #wcto18

2. Gutenberg is the elephant in the room.

3. USER-SIDE:
A legitimate fear of having to learn WordPress “ALL OVER again……”

4. DEVELOPER-SIDE:
Gutenberg will “hurt the whole WordPress” system. Bigly.

5. Today, I want to reflect with you
on how I’ve been finding
the Gutenberg experience.

6. “We look at the present
through a rear-view mirror.
We march backwards
into the future.”
Marshall McLuhan,
The Medium is the Massage (1967)

7. 1. Jem’s Gutenberg Experiment
2. Gutenberg, Y U SO SCARY?!?
3. The Content Design Opportunity
4. Conclusion
TODAY’S AGENDA

8. JEM’S GUTENBERG EXPERIMENT:
heydesignthinker.com
1

9. heydesignthinker.com’s WP dashboard as of November 20, 2018
Hey Design Thinker’s Dashboard

10. IMAGE FROM: https://kinsta.com/blog/gutenberg-wordpress-editor/
Gutenberg vs. TinyMCE Editor

11. “In recent years we’ve seen Medium become the
de facto elegant writing experience…
Gutenberg has the potential to allow writing to be
as elegant as Medium or more so, plus deliver
far more flexibility with layouts and content
types. This is an exciting development to be sure.”
GUTENBERG AS MEDIUM
- Matt Cromwell
Plugin Developer, Head of Support and Community Outreach, Impress.org

12. NEW: Content “blocks” (in place of shortcodes, etc.)
IMAGE FROM: https://hollypryce.com/gutenberg-editor/

13. NEW: Content “blocks” (e.g. Paragraph block = basic text)
IMAGE FROM: https://wpwebhost.com/blog/gutenberg-basics/

14. Blocks on top of each other + unique block characteristics
image block
text block
block
settings

15. YAY: Gutenberg autosaves posts! You see your changes IN REAL TIME.
IMAGE FROM: https://github.com/WordPress/gutenberg/issues/5572

16. YAY: Efficient image uploads + UNMISSABLE alt text prompt.

17. YIKES: “Updating failed”
IMAGE FROM: https://github.com/WordPress/gutenberg/issues/7652
This is a documented Gutenberg issue (on GitHub)

18. So if my Gutenberg experience has seemed fairly positive,
then how do we understand the sound and the fury
regarding Gutenberg’s arrival?
#wpdrama

19. GUTENBERG, Y U SO SCARY?!?
SWOT to the Rescue
2

20. “A SWOT analysis is a tried-and-true method
businesses use to identify internal strengths
and weaknesses and external opportunities
and threats.
The assessment is included in any business
or marketing plan worth its salt
because it provides critical information
needed to create a strategic plan for growth.”
Jodie Shaw
Chief Marketing Officer,
The Alternative Board

21. SSTRENGTHS
“Strengths are capabilities
that enable your company
to perform well and must be
leveraged.”
- MaRS Library (Toronto, ON)
IMMEDIACY
• Gutenberg is “true WYSIWYG”
(says Morten Rand-Hendriksen @ WCUS 2017)
• Authoring UX is more bubbled to the surface
(vs. multiple panels and overlays)
• UX fundamentals + accessibility are upheld
(e.g. alt text, colour contrast, etc.) at the
Block Settings sidebar. #noexcuses

22. WWEAKNESSES
“Weaknesses are
characteristics that prevent
your company from performing
well and must be addressed.”
- MaRS Library (Toronto, ON)
APPREHENSION
• More like abject fear, really.

23. …disaster
…stuck
…garbage
…unless you are a masochist
…locked in
YOU HAVE BEEN WARNED.

24. WWEAKNESSES
“Weaknesses are
characteristics that prevent
your company from performing
well and must be addressed.”
- MaRS Library (Toronto, ON)
APPREHENSION
• More like abject fear, really. But of what?
• Fear of the unknown?
Fear of change?
Fear of incompatibility?
Fear of irrelevance?

25. TTHREATS
“Threats are possible events
or forces beyond your control
that your company must either
plan for or decide how to deal
with.”
- MaRS Library (Toronto, ON)
DISRUPTION and
DISINTERMEDIATION
• There is fear about broken websites,
technical incompatibility, and WP page builders
and consultants going out of business.
• Maybe. But really?

26. OOPPORTUNITIES
“Opportunities are trends,
forces, events, and ideas that
your company can capitalize on
to succeed.”
- MaRS Library (Toronto, ON)
“CONTENT DESIGN”
• Block-driven content creation
for smarter, user-centric content.

27. THE
CONTENT DESIGN
OPPORTUNITY
3

28. M A I N C L A I M
Gutenberg explodes content into content blocks
so we could approach content creation
in a more atomic, modular, and strategic way.

29. A Three-Part
Argument
1. Atomization of content
2. Content modularity
3. “Content Design”

30. 1
Gutenberg atomizes content
into blocks; making it a
distinct content entity/unit.
ATOMIZED
CONTENT
Gutenberg’s founding premise: Block.
Block = content (specifically atomized content).

31. “This tiny thing over here is content.
Not just some blob of code, but content that people interact with on the front end.”

32. A button block in Gutenberg.
IMAGE FROM: https://gogutenberg.com/blocks/button/

33. SO WHAT?
“Atomized content” lets you think of content as a unique entity:
• Definable characteristics.
• Reusable.
• Scalable (i.e. can be added to something bigger).
Content as blocks helps answer: Does the block’s characteristics
provide value to the people who will use the content?

34. 2
Blocks can be moved around
and combined to create a
bigger whole.
MODULARITY
Gutenberg’s blocks = Lego.
IMPLICATIONS: Reuse, move it around,
build a thing out of it (a.k.a. structure)
Lego’s Classic “Windmill” Design (image from lego.com)

35. “Modularity”
“To be modular means you’ve
constructed your components
so they are flexible and can be
reused.”
- Nathan Curtis, Modular Web Design (2010)

36. IMAGE FROM: https://www.mindstreaminteractive.com/blog/2018/why-modular-web-design-is-the-future/
Create
(a block) once.
Reuse
everywhere.

37. Blocks can be reused and moved around in Gutenberg.
…while retaining its specific characteristics on Block Settings.

38. This modularity
sets the stage for
“structured” content.
…in the sense that we can now define a
page/post’s structure more quickly and
efficiently while on Gutenberg.
Example of a CONTENT MODEL
(from Scott Abel and Rahel Anne Bailie’s Language of Content Strategy).

39. 3
Gutenberg makes designing
content explicit through the
Block Settings sidebar.
“CONTENT
DESIGN”
Where the Gutenberg action is (image from kinsta.com)

40. LET ME CALL
OUT MY BIAS
HERE…
I’m bullish about Gutenberg
because it facilitates
content design.

41. ANSWER:
It’s Content Design.
Think about it…
How did people arrive at
this content structure?

42. SARAH RICHARDS
Former Content Design Lead, GOV.UK
Author, Content Design
The Woman Behind the “Content Design” Job Title

43. Content Design is a user-centered approach
to content creation
…and it is much more explicit with Gutenberg.
T L ; D R

44. Remember how blocks
can be moved around
in Gutenberg?
That’s content design.
WHY? Because you get to ask whether
the block’s position in the page really
delivers value to the user you are
designing for (i.e. page priority as an
indicator of value).

45. #trueStory
DESIGNING CONTENT WITH GUTENBERG

46. Each Gutenberg block is a Content Design decision.
How will you harness it?
Which block
should I use?
This is YOU
designing content!

47. So how might these
Gutenberg and Content Design stuff
work in practical terms?

48. SARAH RICHARDS
Former Content Design Lead, GOV.UK
Author, Content Design
The Woman Behind the “Content Design” Job Title

49. User
Needs
Gutenberg
Blocks
Page/Post
Design
The Content Design Opportunity
with Gutenberg…

50. FOR EXAMPLE…
• Do you really need that sentence/image/whatever over there?
• Does the block’s placement communicate something your users will
really benefit from?
• Does your content answer all that your user needs from you?
• Is the content type and structure appropriate for the information your
users are looking for?
• Which block would communicate the message more effectively?

51. CONCLUSION
4

52. is componentized
content creation.

53. User
Needs
Gutenberg
Blocks
Page/Post
Design
The Content Design Opportunity
with Gutenberg…

54. There are too much
Gutenberg unknowns
to say something
sure at this moment…

55. Let Gutenberg help
you do Content Design
so you could create content
in a more efficient and
user-centred manner.
BUT PROMISE ME THIS…

56. THANK YOU!
bit.ly/
@jemrosario
jem@jemrosario.com