Slide 1
Slide 1 text
Anatomy of a block
Gutenberg design patterns Tammie Lister: @karmatosed
Slide 2
Slide 2 text
Hello
0/1
Slide 3
Slide 3 text
Tammie Lister : @karmatosed
1/1
Slide 4
Slide 4 text
Not a technical talk or workshop
1/2
Slide 5
Slide 5 text
Questions at the end, this is going to be fast…
1/3
Slide 6
Slide 6 text
Link at the end of resources
1/4
Slide 7
Slide 7 text
The vision of Gutenberg
0/2
Slide 8
Slide 8 text
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
Slide 9
Slide 9 text
You should only have to learn how the block works,
and then know how to do everything.
Slide 10
Slide 10 text
Design influence of Gutenberg
Slide 11
Slide 11 text
Existing design patterns in Gutenberg
material.io/design/components/menus.html#dropdown-menu
Slide 12
Slide 12 text
The language of Gutenberg
0/3
Slide 13
Slide 13 text
Screen
3/1
Slide 14
Slide 14 text
.
.
.
.
.
.
^
^
x
.
.
.
^
^
.
.
.
^
^
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
Action bar
3/2
Slide 18
Slide 18 text
.
.
.
.
.
.
^
^
x
Slide 19
Slide 19 text
.
.
.
.
.
.
^
^
x
Slide 20
Slide 20 text
Sidebar
3/3
Slide 21
Slide 21 text
x
Slide 22
Slide 22 text
x
Getting to Advanced Settings
Slide 23
Slide 23 text
x
Getting to Advanced Settings
Slide 24
Slide 24 text
x
Slide 25
Slide 25 text
x
Slide 26
Slide 26 text
x
Slide 27
Slide 27 text
x
Slide 28
Slide 28 text
x
Slide 29
Slide 29 text
Adding a block
3/4
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
Block library
3/5
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
Block chip
Slide 40
Slide 40 text
More menu (ellipsis)
3/6
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
Placeholders
3/7
Slide 44
Slide 44 text
Placeholders can be outlines or have actions
Slide 45
Slide 45 text
Anatomy of blocks
0/4
Slide 46
Slide 46 text
.
.
.
^
^
.
.
.
^
^
.
.
.
^
^
Slide 47
Slide 47 text
Block Toolbar
4/1
Slide 48
Slide 48 text
The block toolbar can be above the block
Slide 49
Slide 49 text
The block toolbar can be above the block, or it can be fixed to toolbar
Slide 50
Slide 50 text
The block toolbar can be above the block, or it can be fixed to toolbar
Slide 51
Slide 51 text
Settings sidebar
4/2
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
Primary actions: things that a block can’t function without
Slide 54
Slide 54 text
Secondary actions: anything else
Slide 55
Slide 55 text
Block transforming
4/3
Slide 56
Slide 56 text
Drop down transform: turns a block into another block
Slide 57
Slide 57 text
Drop down transform: turns a block into another block
Slide 58
Slide 58 text
Potential design change to unify transforms
Slide 59
Slide 59 text
Block States
4/4
Slide 60
Slide 60 text
Unselected: shows when select block and no content
Slide 61
Slide 61 text
Selected: after you add content or select a block you get this state
Slide 62
Slide 62 text
Unselected but contains content: not a placeholder
Slide 63
Slide 63 text
Hover state
Slide 64
Slide 64 text
Block examples
0/5
Slide 65
Slide 65 text
Example: Gallery block
5/1
Slide 66
Slide 66 text
Placeholder states
Slide 67
Slide 67 text
Unselected filled out state
Slide 68
Slide 68 text
Selected state when filled out
Slide 69
Slide 69 text
Selected state on individual image when filled out
Slide 70
Slide 70 text
Toolbar: has all the ‘must have’ actions like editing and alignment
Slide 71
Slide 71 text
Ellipsis allows for further actions like advanced settings, converting
Slide 72
Slide 72 text
For gallery it can only be converted to separate images
Slide 73
Slide 73 text
Settings sidebar shows ‘nice to have’ extras
Slide 74
Slide 74 text
Hints
0/6
Slide 75
Slide 75 text
Keep icons simple and signify the block
Slide 76
Slide 76 text
Have good placeholder defaults, think of a page made up
Slide 77
Slide 77 text
When unselected show a preview of block
Slide 78
Slide 78 text
Every block at a minimum should have a description of what it is
Slide 79
Slide 79 text
Thoughts
0/7
Slide 80
Slide 80 text
Blocks should adapt
7/1
Think what your block feels/looks like on all devices
Slide 81
Slide 81 text
Where should blocks live?
7/2
… it depends but likely plugins
Slide 82
Slide 82 text
Direct manipulation
7/3
Slide 83
Slide 83 text
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/
Slide 84
Slide 84 text
Everything with blocks is direct manipulation and should be
Slide 85
Slide 85 text
Block styles
7/4
Slide 86
Slide 86 text
Styles : formally variations
github.com/WordPress/gutenberg/issues/783
Slide 87
Slide 87 text
Editor block styles
7/5
Slide 88
Slide 88 text
Editor styling using Music theme: themeshaper.com/2018/06/04/designing-a-gutenberg-powered-theme-music/
wordpress.org/gutenberg/handbook/extensibility/theme-support/
Slide 89
Slide 89 text
Beyond blocks
0/9
Slide 90
Slide 90 text
Potential ideas
github.com/WordPress/gutenberg/issues/3330
Slide 91
Slide 91 text
github.com/WordPress/gutenberg/issues/3330
Readability
Slide 92
Slide 92 text
github.com/WordPress/gutenberg/issues/1930
Collaborative editing
Slide 93
Slide 93 text
Commenting : work in progress…
github.com/WordPress/gutenberg/issues/3026
Slide 94
Slide 94 text
Tips
Slide 95
Slide 95 text
Anatomy of a block
1/0
Slide 96
Slide 96 text
Thanks for designing Gutenberg
9/1
Slide 97
Slide 97 text
karmatosed.github.io/talk-gutenberg-anatomyofablock
9/2
goo.gl/forms/GWVVbNtYBnrRjxGg2
Slide 98
Slide 98 text
Questions?
9/3
@karmatosed on all the things :)