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).
main branch is the initial block, what we get from
@wordpress/create-block with a little cleanup. The rest are:
initial-block– The sketch of the block, get basic HTML structure and styles in place.
step-1-type– Add the
typeattribute, set an icon and class name based on the selected type
step-2-rich-text– Add the
contentattribute, which is a RichText component for live preview as you edit
step-3-block-supports– Add some configuration to opt-in to some style controls like font size & spacing
step-4-block-controls– Move the type control from the sidebar to the block toolbar
step-5-block-variations– Add block variations for each type, so it’s easier to toggle between them
Links from the slides
- The Gutenberg demo page on WordPress.org (slide 4)
- Switch to code view (slide 5)
@wordpress/create-block (slide 8)
block.json (slide 24)
WordPress components (slide 27)
- Storybook instance with component demos
- Documentation for the provided components
- RichText component (slide 36)
Block Variations (slide 54)
Block Directory (slide 58)