anatomyofablock.pdf

D36d2c1821af9249b69ff7f5ed60529b?s=47 Tammie Lister
June 11, 2018
120

 anatomyofablock.pdf

D36d2c1821af9249b69ff7f5ed60529b?s=128

Tammie Lister

June 11, 2018
Tweet

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