Designing your first Gutenberg block

Composing

Building

You don’t need to be a designer ✌

The anatomy of a block

Block icons

Content area

Choose smart defaults

Toolbar

Sidebar

Be careful adding settings

More settings = more problems

Designing your block

Scoping the block

MVB(lock)

Basic blocks

Dietary Notes

Columns

Block styles

Refining the settings

Setup state

Toolbar

Sidebar

Usability testing and iteration

Run at least 3 tests

Sift through your findings