Designing your first Gutenberg block

A presentation at JavaScript for WordPress by Mel Choyce

Designing your first Gutenberg block

Designing your first Gutenberg block

Composing

Composing

Building

Building

You don’t need to be a designer ✌

You don’t need to be a designer ✌

The anatomy of a block

The anatomy of a block

Block icons

Block icons

Content area

Content area

Choose smart defaults

Choose smart defaults

Toolbar

Toolbar

Sidebar

Sidebar

Be careful adding settings

Be careful adding settings

More settings = more problems

More settings = more problems

Designing your block

Designing your block

Scoping the block

Scoping the block

MVB(lock)

MVB(lock)

Basic blocks

Basic blocks

Dietary Notes

Dietary Notes

Columns

Columns

Block styles

Block styles

Refining the settings

Refining the settings

Setup state

Setup state

Toolbar

Toolbar

Sidebar

Sidebar

Usability testing and iteration

Usability testing and iteration

Run at least 3 tests

Run at least 3 tests

Sift through your findings

Sift through your findings

🚢 Ship it

🚢 Ship it

Sometimes the hardest part of a new project is just getting started. In this new Gutenberg-powered world, what does it mean to design a block? Where do I put my shortcode attributes? What’s this toolbar? Mel will show you examples of blocks she designed and go over the basic anatomy of a Gutenberg block. You’ll learn how a block is structured, where to put your settings, and user experience tips to ensure your users or customers are set up for success. No prior design experience is required, and developers are encouraged to attend!

Buzz and feedback

Here’s what was said about this presentation on Twitter.