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
570
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
820
CSS in the editor
tammielis
0
200
Global styles the story so far
tammielis
1
570
Dropped stitches and tangled yarn - a call to simplify WordPress
tammielis
1
950
Being Brave
tammielis
2
1.4k
Lessons from growing design in the open
tammielis
0
830
Thinking in patterns
tammielis
0
43
Design matters in open source
tammielis
1
530
Opportunity of Open Source
tammielis
0
490
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
48
13k
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
105
6.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
26
1.6k
Building a Modern Day E-commerce SEO Strategy
aleyda
25
6.7k
The Cost Of JavaScript in 2023
addyosmani
31
4.7k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.9k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
RailsConf 2023
tenderlove
16
720
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
The Mythical Team-Month
searls
217
43k
Docker and Python
trallard
37
2.9k
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 :)