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

anatomyofablock.pdf

Tammie Lister
June 11, 2018
480

 anatomyofablock.pdf

Tammie Lister

June 11, 2018
Tweet

Transcript

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

    View full-size slide

  2. Tammie Lister : @karmatosed
    1/1

    View full-size slide

  3. Not a technical talk or workshop
    1/2

    View full-size slide

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

    View full-size slide

  5. Link at the end of resources
    1/4

    View full-size slide

  6. The vision of Gutenberg
    0/2

    View full-size slide

  7. 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 full-size slide

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

    View full-size slide

  9. Design influence of Gutenberg

    View full-size slide

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

    View full-size slide

  11. The language of Gutenberg
    0/3

    View full-size slide

  12. .
    .
    .
    .
    .
    .
    ^
    ^
    x
    .
    .
    .
    ^
    ^
    .
    .
    .
    ^
    ^

    View full-size slide

  13. Action bar
    3/2

    View full-size slide

  14. x
    Getting to Advanced Settings

    View full-size slide

  15. x
    Getting to Advanced Settings

    View full-size slide

  16. Adding a block
    3/4

    View full-size slide

  17. Block library
    3/5

    View full-size slide

  18. More menu (ellipsis)
    3/6

    View full-size slide

  19. Placeholders
    3/7

    View full-size slide

  20. Placeholders can be outlines or have actions

    View full-size slide

  21. Anatomy of blocks
    0/4

    View full-size slide

  22. .
    .
    .
    ^
    ^
    .
    .
    .
    ^
    ^
    .
    .
    .
    ^
    ^

    View full-size slide

  23. Block Toolbar
    4/1

    View full-size slide

  24. The block toolbar can be above the block

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. Settings sidebar
    4/2

    View full-size slide

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

    View full-size slide

  29. Secondary actions: anything else

    View full-size slide

  30. Block transforming
    4/3

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  33. Potential design change to unify transforms

    View full-size slide

  34. Block States
    4/4

    View full-size slide

  35. Unselected: shows when select block and no content

    View full-size slide

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

    View full-size slide

  37. Unselected but contains content: not a placeholder

    View full-size slide

  38. Block examples
    0/5

    View full-size slide

  39. Example: Gallery block
    5/1

    View full-size slide

  40. Placeholder states

    View full-size slide

  41. Unselected filled out state

    View full-size slide

  42. Selected state when filled out

    View full-size slide

  43. Selected state on individual image when filled out

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  47. Settings sidebar shows ‘nice to have’ extras

    View full-size slide

  48. Keep icons simple and signify the block

    View full-size slide

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

    View full-size slide

  50. When unselected show a preview of block

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  54. Direct manipulation
    7/3

    View full-size slide

  55. 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 full-size slide

  56. Everything with blocks is direct manipulation and should be

    View full-size slide

  57. Block styles
    7/4

    View full-size slide

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

    View full-size slide

  59. Editor block styles
    7/5

    View full-size slide

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

    View full-size slide

  61. Beyond blocks
    0/9

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  66. Anatomy of a block
    1/0

    View full-size slide

  67. Thanks for designing Gutenberg
    9/1

    View full-size slide

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

    View full-size slide

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

    View full-size slide