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