Upgrade to Pro — share decks privately, control downloads, hide ads and more …

anatomyofablock.pdf

Tammie Lister
June 11, 2018
330

 anatomyofablock.pdf

Tammie Lister

June 11, 2018
Tweet

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