In this series, we build a custom Notice block while learning about WordPress Block APIs and the inner workings of blocks while covering the nuances and practicalities of block development.
In Part 1 of the Building a custom block series, we look at how you can quickly set up a new custom block from scratch using the create-block package provided by WordPress and the anatomy of a block.
In Part 2 of Building a Custom Block, we’ll go through adding block supports and attributes and explore how they work in some more detail.
In Part 3 of Building a Custom Block, we’ll update our Edit component to support child blocks (InnerBlocks) and add our own custom Inspector Controls to toggle the dismiss button.
In Part 4, we’ll make our Notice block actually look and act like a notice. We’ll add some baseline CSS to style the block and then write frontend JavaScript in view.js to handle dismissing the notice when users click that close button we added in Part 3.
In Part 5 of Building a Custom Block, we’ll use the Block Styles API to register different visual styles for our Notice block that represent common notice types: info, success, warning, and error.
In Part 6 of Building a Custom Block, we’ll use the Block Variations API to create preconfigured versions of our Notice block. Instead of inserting a generic notice and then picking a style, users will be able to drop in a ready-to-go “Error Notice” or “Success Notice” directly from the block inserter.
In Part 7 of Building a Custom Block, we’ll add default styles to the inner blocks inside our Notice block while making sure they remain fully customizable in the block editor.
In Part 8 of Building a Custom Block, we’ll restrict which blocks can be inserted inside our Notice block and use template locking to enforce a consistent inner block structure.
In Part 9 of Building a Custom Block, we’ll add a custom controls to the block toolbar so users can toggle the dismissible state or choose a block style directly from the editor canvas.
