ryelle codes

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:

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

Links from the slides

Introduction

• The Gutenberg demo page on WordPress.org (slide 4)
• Switch to code view (slide 5)

@wordpress/create-block (slide 8)

• Creating a block tutorial
• create-block package reference

block.json (slide 24)

• Metadata in block.json
• Block supports in block.json (slide 43)
• Full documentation for all supports

WordPress components (slide 27)

• Storybook instance with component demos
• Documentation for the provided components
• RichText component (slide 36)

Block Variations (slide 54)

• Documentation for variations
• Variation example from post-navigation-link block

Block Directory (slide 58)

• Browse block plugins on WordPress.org
• Use the block plugin checker
• Submit a plugin to WordPress.org