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 .

    . . ^ ^ . . . ^ ^
15. None
16. None

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

30. None
31. None
32. None
33. None

34. Block library 3/5

35. None
36. None
37. None
38. None

39. Block chip

40. More menu (ellipsis) 3/6

41. None
42. None

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

52. None

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 :)