anatomyofablock.pdf

Transcript

1. Anatomy of a block
   Gutenberg design patterns Tammie Lister: @karmatosed
   

   View Slide

2. Hello
   0/1
   

   View Slide

3. Tammie Lister : @karmatosed
   1/1
   

   View Slide

4. Not a technical talk or workshop
   1/2
   

   View Slide

5. Questions at the end, this is going to be fast…
   1/3
   

   View Slide

6. Link at the end of resources
   1/4
   

   View Slide

7. The vision of Gutenberg
   0/2
   

   View Slide

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
   

   View Slide

9. You should only have to learn how the block works,
   and then know how to do everything.
   

   View Slide

10. Design influence of Gutenberg
    

    View Slide

11. Existing design patterns in Gutenberg
    material.io/design/components/menus.html#dropdown-menu
    

    View Slide

12. The language of Gutenberg
    0/3
    

    View Slide

13. Screen
    3/1
    

    View Slide

14. .
    .
    .
    .
    .
    .
    ^
    ^
    x
    .
    .
    .
    ^
    ^
    .
    .
    .
    ^
    ^
    

    View Slide

15. View Slide

16. View Slide

17. Action bar
    3/2
    

    View Slide

18. .
    .
    .
    .
    .
    .
    ^
    ^
    x
    

    View Slide

19. .
    .
    .
    .
    .
    .
    ^
    ^
    x
    

    View Slide

20. Sidebar
    3/3
    

    View Slide

21. x
    

    View Slide

22. x
    Getting to Advanced Settings
    

    View Slide

23. x
    Getting to Advanced Settings
    

    View Slide

24. x
    

    View Slide

25. x
    

    View Slide

26. x
    

    View Slide

27. x
    

    View Slide

28. x
    

    View Slide

29. Adding a block
    3/4
    

    View Slide

30. View Slide

31. View Slide

32. View Slide

33. View Slide

34. Block library
    3/5
    

    View Slide

35. View Slide

36. View Slide

37. View Slide

38. View Slide

39. Block chip
    

    View Slide

40. More menu (ellipsis)
    3/6
    

    View Slide

41. View Slide

42. View Slide

43. Placeholders
    3/7
    

    View Slide

44. Placeholders can be outlines or have actions
    

    View Slide

45. Anatomy of blocks
    0/4
    

    View Slide

46. .
    .
    .
    ^
    ^
    .
    .
    .
    ^
    ^
    .
    .
    .
    ^
    ^
    

    View Slide

47. Block Toolbar
    4/1
    

    View Slide

48. The block toolbar can be above the block
    

    View Slide

49. The block toolbar can be above the block, or it can be fixed to toolbar
    

    View Slide

50. The block toolbar can be above the block, or it can be fixed to toolbar
    

    View Slide

51. Settings sidebar
    4/2
    

    View Slide

52. View Slide

53. Primary actions: things that a block can’t function without
    

    View Slide

54. Secondary actions: anything else
    

    View Slide

55. Block transforming
    4/3
    

    View Slide

56. Drop down transform: turns a block into another block
    

    View Slide

57. Drop down transform: turns a block into another block
    

    View Slide

58. Potential design change to unify transforms
    

    View Slide

59. Block States
    4/4
    

    View Slide

60. Unselected: shows when select block and no content
    

    View Slide

61. Selected: after you add content or select a block you get this state
    

    View Slide

62. Unselected but contains content: not a placeholder
    

    View Slide

63. Hover state
    

    View Slide

64. Block examples
    0/5
    

    View Slide

65. Example: Gallery block
    5/1
    

    View Slide

66. Placeholder states
    

    View Slide

67. Unselected filled out state
    

    View Slide

68. Selected state when filled out
    

    View Slide

69. Selected state on individual image when filled out
    

    View Slide

70. Toolbar: has all the ‘must have’ actions like editing and alignment
    

    View Slide

71. Ellipsis allows for further actions like advanced settings, converting
    

    View Slide

72. For gallery it can only be converted to separate images
    

    View Slide

73. Settings sidebar shows ‘nice to have’ extras
    

    View Slide

74. Hints
    0/6
    

    View Slide

75. Keep icons simple and signify the block
    

    View Slide

76. Have good placeholder defaults, think of a page made up
    

    View Slide

77. When unselected show a preview of block
    

    View Slide

78. Every block at a minimum should have a description of what it is
    

    View Slide

79. Thoughts
    0/7
    

    View Slide

80. Blocks should adapt
    7/1
    Think what your block feels/looks like on all devices
    

    View Slide

81. Where should blocks live?
    7/2
    … it depends but likely plugins
    

    View Slide

82. Direct manipulation
    7/3
    

    View Slide

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/
    

    View Slide

84. Everything with blocks is direct manipulation and should be
    

    View Slide

85. Block styles
    7/4
    

    View Slide

86. Styles : formally variations
    github.com/WordPress/gutenberg/issues/783
    

    View Slide

87. Editor block styles
    7/5
    

    View Slide

88. Editor styling using Music theme: themeshaper.com/2018/06/04/designing-a-gutenberg-powered-theme-music/
    wordpress.org/gutenberg/handbook/extensibility/theme-support/
    

    View Slide

89. Beyond blocks
    0/9
    

    View Slide

90. Potential ideas
    github.com/WordPress/gutenberg/issues/3330
    

    View Slide

91. github.com/WordPress/gutenberg/issues/3330
    Readability
    

    View Slide

92. github.com/WordPress/gutenberg/issues/1930
    Collaborative editing
    

    View Slide

93. Commenting : work in progress…
    github.com/WordPress/gutenberg/issues/3026
    

    View Slide

94. Tips
    

    View Slide

95. Anatomy of a block
    1/0
    

    View Slide

96. Thanks for designing Gutenberg
    9/1
    

    View Slide

97. karmatosed.github.io/talk-gutenberg-anatomyofablock
    9/2
    goo.gl/forms/GWVVbNtYBnrRjxGg2
    

    View Slide

98. Questions?
    9/3
    @karmatosed on all the things :)
    

    View Slide