Gutenbergs inbyggda block täcker mycket, men ibland behöver du något specifikt. En priskalkylator, ett interaktivt diagram, en anpassad CTA-sektion med specifika fält. Då bygger du ett eget block.
Scaffolding
npx @wordpress/create-block mitt-block skapar en komplett plugin-struktur med allt du behöver: build-script, edit-komponent, save-komponent, block.json, och styles. Det tar tio sekunder och ger dig en fungerande grund att bygga vidare på.
Struktur
block.json definierar blocket: namn, kategori, attribut, stöd för align/färger. edit.js är React-komponenten som visas i editorn. save.js är det som sparas i databasen och renderas på frontend.
Attribut är blockets data: en titel (string), en URL (string), om något ska visas eller inte (boolean). De sparas i block-kommentarerna i HTML. WordPress hanterar serialisering och deserialisering automatiskt.
Editor-upplevelse
WordPress tillhandahåller färdiga komponenter: TextControl, ToggleControl, ColorPalette, MediaUpload. Använd dem istället för att bygga eget. De ser ut som resten av editorn och beter sig som förväntat.
InspectorControls ger dig en sidebar-panel. BlockControls ger en toolbar ovanför blocket. Använd InspectorControls för inställningar och BlockControls för snabbåtgärder.
Dynamiskt block
Ibland vill du rendera på servern istället för att spara HTML. Registrera blocket med en render_callback i PHP. Blocket sparar bara attribut, servern renderar HTML vid varje request. Bra för innehåll som ändras (senaste inlägg, priser, lager).
Lär dig ett block ordentligt. Sedan är alla block varianter på samma mönster.