I struggled with understanding the WordPress Interactivity API until I actually built something with it. I build a dark mode toggle block that made the whole thing click for me. I’ll show you how to build one and how using semantic colors makes dark-mode styling a breeze.
In this post I’ll walk you through how to style blocks using the Site Editor’s Global Styles interface, how to use “Additional CSS” for more advanced customizations (like hover states and targeting descendant elements), and how to persist everything back to your theme files using Create Block Theme.
Learn how to build a reusable post selector for the WordPress block editor using ComboboxControl and TanStack Query, complete with lazy-loaded pagination for sites with thousands of posts.
In this final post of the series, we implement the Notice block in the site editor using template parts and modern WordPress theme features.
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.
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 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 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 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.
