Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
anatomyofablock.pdf
Search
Tammie Lister
June 11, 2018
1
620
anatomyofablock.pdf
Tammie Lister
June 11, 2018
Tweet
Share
More Decks by Tammie Lister
See All by Tammie Lister
Growing the WordPress design system
tammielis
1
940
CSS in the editor
tammielis
0
240
Global styles the story so far
tammielis
1
630
Dropped stitches and tangled yarn - a call to simplify WordPress
tammielis
1
1.1k
Being Brave
tammielis
2
1.5k
Lessons from growing design in the open
tammielis
0
950
Thinking in patterns
tammielis
0
43
Design matters in open source
tammielis
1
600
Opportunity of Open Source
tammielis
0
540
Featured
See All Featured
Building an army of robots
kneath
302
42k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.6k
A Modern Web Designer's Workflow
chriscoyier
692
190k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
RailsConf 2023
tenderlove
29
870
Typedesign – Prime Four
hannesfritz
39
2.4k
Agile that works and the tools we love
rasmusluckow
327
21k
Bash Introduction
62gerente
608
210k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
328
21k
How to Ace a Technical Interview
jacobian
275
23k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
Transcript
Anatomy of a block Gutenberg design patterns Tammie Lister: @karmatosed
Hello 0/1
Tammie Lister : @karmatosed 1/1
Not a technical talk or workshop 1/2
Questions at the end, this is going to be fast…
1/3
Link at the end of resources 1/4
The vision of Gutenberg 0/2
Everything is a block. Text, images, galleries, widgets, shortcodes, and
even chunks of custom HTML, no matter if it’s added by plugins or otherwise. wordpress.org/gutenberg/handbook/reference/design-principles
You should only have to learn how the block works,
and then know how to do everything.
Design influence of Gutenberg
Existing design patterns in Gutenberg material.io/design/components/menus.html#dropdown-menu
The language of Gutenberg 0/3
Screen 3/1
. . . . . . ^ ^ x .
. . ^ ^ . . . ^ ^
None
None
Action bar 3/2
. . . . . . ^ ^ x
. . . . . . ^ ^ x
Sidebar 3/3
x
x Getting to Advanced Settings
x Getting to Advanced Settings
x
x
x
x
x
Adding a block 3/4
None
None
None
None
Block library 3/5
None
None
None
None
Block chip
More menu (ellipsis) 3/6
None
None
Placeholders 3/7
Placeholders can be outlines or have actions
Anatomy of blocks 0/4
. . . ^ ^ . . . ^ ^
. . . ^ ^
Block Toolbar 4/1
The block toolbar can be above the block
The block toolbar can be above the block, or it
can be fixed to toolbar
The block toolbar can be above the block, or it
can be fixed to toolbar
Settings sidebar 4/2
None
Primary actions: things that a block can’t function without
Secondary actions: anything else
Block transforming 4/3
Drop down transform: turns a block into another block
Drop down transform: turns a block into another block
Potential design change to unify transforms
Block States 4/4
Unselected: shows when select block and no content
Selected: after you add content or select a block you
get this state
Unselected but contains content: not a placeholder
Hover state
Block examples 0/5
Example: Gallery block 5/1
Placeholder states
Unselected filled out state
Selected state when filled out
Selected state on individual image when filled out
Toolbar: has all the ‘must have’ actions like editing and
alignment
Ellipsis allows for further actions like advanced settings, converting
For gallery it can only be converted to separate images
Settings sidebar shows ‘nice to have’ extras
Hints 0/6
Keep icons simple and signify the block
Have good placeholder defaults, think of a page made up
When unselected show a preview of block
Every block at a minimum should have a description of
what it is
Thoughts 0/7
Blocks should adapt 7/1 Think what your block feels/looks like
on all devices
Where should blocks live? 7/2 … it depends but likely
plugins
Direct manipulation 7/3
Direct manipulation is an interaction style in which the objects
of interest in the UI are visible and can be acted upon via physical, reversible, incremental actions that receive immediate feedback. www.nngroup.com/articles/direct-manipulation/
Everything with blocks is direct manipulation and should be
Block styles 7/4
Styles : formally variations github.com/WordPress/gutenberg/issues/783
Editor block styles 7/5
Editor styling using Music theme: themeshaper.com/2018/06/04/designing-a-gutenberg-powered-theme-music/ wordpress.org/gutenberg/handbook/extensibility/theme-support/
Beyond blocks 0/9
Potential ideas github.com/WordPress/gutenberg/issues/3330
github.com/WordPress/gutenberg/issues/3330 Readability
github.com/WordPress/gutenberg/issues/1930 Collaborative editing
Commenting : work in progress… github.com/WordPress/gutenberg/issues/3026
Tips
Anatomy of a block 1/0
Thanks for designing Gutenberg 9/1
karmatosed.github.io/talk-gutenberg-anatomyofablock 9/2 goo.gl/forms/GWVVbNtYBnrRjxGg2
Questions? 9/3 @karmatosed on all the things :)