Gutenberg's built-in blocks cover a lot, but sometimes you need something specific. A price calculator, an interactive chart, a custom CTA section with specific fields. That's when you build your own block.
Scaffolding
npx @wordpress/create-block my-block creates a complete plugin structure with everything you need: build script, edit component, save component, block.json, and styles. Takes ten seconds and gives you a working foundation to build on.
Structure
block.json defines the block: name, category, attributes, support for alignment/colors. edit.js is the React component shown in the editor. save.js is what gets saved to the database and rendered on the frontend.
Attributes are the block's data: a title (string), a URL (string), whether something should be shown or not (boolean). They're saved in block comments in the HTML. WordPress handles serialization and deserialization automatically.
Editor experience
WordPress provides ready-made components: TextControl, ToggleControl, ColorPalette, MediaUpload. Use them instead of building your own. They look like the rest of the editor and behave as expected.
InspectorControls gives you a sidebar panel. BlockControls gives a toolbar above the block. Use InspectorControls for settings and BlockControls for quick actions.
Dynamic block
Sometimes you want to render on the server instead of saving HTML. Register the block with a render_callback in PHP. The block only saves attributes; the server renders HTML on each request. Good for content that changes (latest posts, prices, inventory).
Learn one block properly. Then all blocks are variations of the same pattern.