How to build a Gutenberg block the modern way
Quando usar: You need a custom editor block and don't want to hand-roll outdated ESNext + webpack scaffolding.
Fluxo
-
Describe the blockBuild a Testimonial block: quote text, author name, author photo — edit and save views.✓ Copiado→ block.json + edit.js + save.js scaffolded, @wordpress/scripts build setup
-
Add attributes and controlsAdd an alignment control and a color picker.✓ Copiado→ BlockControls / InspectorControls added correctly
-
Bundle and registerWrite the PHP that registers the block from block.json.✓ Copiado→ register_block_type( __DIR__ . '/build/block.json' )
Resultado: A working modern Gutenberg block with proper packaging.
Armadilhas
- Missing i18n wrappers — Skill reminds Claude to wrap strings with __() and _x()