anatomyofablock.pdf

Transcript

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