1.
Designing With
Gutenberg
Shanta R. Nathwani
Las Lajas WordPress Meetup
August 5, 2020

2.
Agenda
• About Me
• What is Gutenberg and Why?
• Images (galleries, etc.)
• Saving Time
• Coming in 5.5
• Resources

3.
Shanta R. Nathwani
• President & CEO, Namara
Technologies Inc.
• Former Professor of Web
Development and Design at Sheridan
College
• Given more than 40 WordCamp
talks, mostly beginner and Content
Strategy
https://namara.com 3
Twitter: @ShantaDotCa
Web: https://shanta.ca

4.
https://tantienhime.com/t
est/
Go to this website to see my demo as I work.

5.
It Depends
Disclaimer: At the end of the
day, you need to do what
works for you.
Through this presentation, I
hope to show you that for at
least 80% of what you want to
achieve, you can use
Gutenberg.

6.
What is Gutenberg?
Gutenberg is the block editor in WordPress Core
It is primarily used as a page/content builder, not a “website” builder
You can create templates, both for blocks as well as pages/posts.

7.
Questions to be answered
WHY WOULD I WANT TO USE
GUTENBERG?
WHY SHOULD MY CLIENTS CARE IF I
USE GUTENBERG?
SHOULD I RECOMMEND
GUTENBERG TO OTHER DESIGNERS?

8.
As a site owner
• You already have it, so less to install/maintain
• Easy to use

9.
As a client
• No worrying about finding support after hand off from your
professional
• Support and resources abound

10.
As a designer and developer with clients
• Hand off a project that is “WordPress Compliant”
• Widely supported both as a user and as a developer

11.
Why Gutenberg?
• You already have it, without having to install anything else
• Gutenberg is far more likely to be “WordPress Compliant”,
making it less likely to conflict with other plugins, etc.
• It translates well to HTML, making it:
• Faster
• Accessible
• It’s ever expanding! (5.5 is coming on August 11)

12.
Something to keep in mind…
• Styling should be left to the
theme for the most part.
• Gutenberg is meant to be
blocks within it that take
“instruction” from the theme,
such as fonts and colours
• Think of it like the separation
of function and style, themes
and plugins.

13.
We’ll look at others too…
I’m going to cover images in the slides, but can show other options
afterwards…

14.
Images
One of the more common layout problems

15.
Cover Block
• Cover Images can be .gif or video

16.
Media + Text
• Can opt to stack on mobile device
• Can switch between widths (full vs. wide), as well as sides (i.e.,
image on left or right)

17.
Gallery
• More galleries available as
plugins

18.
Save Some Time
• Adding blocks using the keyboard:
• ⌥⌘T Insert a new block before the selected block(s).
• ⌥⌘Y Insert a new block after the selected block(s). 1
• Change where the toolbar shows:
• From the three dots in the right corner on a post/page:
1: Retrieved from https://gutenbergtimes.com/the-secret-manual-hidden-features-wordpress-gutenberg/

19.
Saving Time
• Block Manager (from the three dots)
• Reusable Blocks
• “Gutenberg Templates” (by creating a group of blocks and
adding them all together as a reusable block)
• Have to convert each to a “regular block” after selecting for the current
post, otherwise, previous content is used
• Using “/” to get to your blocks in the editor

20.
Coming in WP 5.5
More reasons to go with Gutenberg

21.
5.5 Releasing on August 11
• Image editing right in the block itself, including:
• option to pre-set image size
• Rotation, crop and zoom
• Image Import from copy/paste, such as from Google Docs or
MS Word
• Block directory: similar to repos for themes and plugins, but can
be accessed and activated right from the editor
• Make.WordPress: https://make.wordpress.org/core/5-5/

22.
Resources
• LinkedIn Learning: https://www.linkedin.com/learning/ (I
recommend Morten Rand-Hendriksen and Joe Casabona for
WordPress)
• https://gutenbergtimes.com/the-secret-manual-hidden-
features-wordpress-gutenberg/
• http://blocks.gutenbergtimes.com/
• Gutenberg Templates, CPT’s and ACF’s:
https://wordpress.tv/2019/07/26/shanta-r-nathwani-
tantienhime-gutenberg-templates-cpts-and-acfs/

23.
Questions?
Please ask!
Slides will be posted after the talk,
and I’ll put the link here:
https://campsite.bio/shanta
Register for my newsletter here:
https://namara.com and receive some
of my freebies for your WordPress
website
https://namara.com 23