The Building Blocks of Building Blocks

Learn how to create your own custom block! I presented this talk on June 25th, 2022 at WordCamp Montclair.

Example Block Plugin

I’ve published the block we walk through in the session, so you can download it and run it yourself to see how it works. There are some setup instructions in the readme.

This plugin has 5 branches, for each step in my presentation (for folks who attended, we skipped over step 4).

The main branch is the initial block, what we get from @wordpress/create-block with a little cleanup. The rest are:

  1. initial-block – The sketch of the block, get basic HTML structure and styles in place.
  2. step-1-type – Add the type attribute, set an icon and class name based on the selected type
  3. step-2-rich-text – Add the content attribute, which is a RichText component for live preview as you edit
  4. step-3-block-supports – Add some configuration to opt-in to some style controls like font size & spacing
  5. step-4-block-controls – Move the type control from the sidebar to the block toolbar
  6. step-5-block-variations – Add block variations for each type, so it’s easier to toggle between them

Links from the slides


@wordpress/create-block (slide 8)

block.json (slide 24)

WordPress components (slide 27)

Block Variations (slide 54)

Block Directory (slide 58)