Utveckla egna Gutenberg-block: Så kommer du igång med @wordpress/create-block

Gutenberg har i grunden förändrat hur webbplatser byggs, struktureras och underhålls i WordPress. För dig som arbetar som webbutvecklare eller levererar skräddarsydda webblösningar innebär skiftet till blockbaserad utveckling fantastiska möjligheter. Tiden då man var tvungen att förlita sig på tunga, externa sidbyggare eller skapa dussintals spretiga tillägg för varje liten funktion är förbi. Idag är rena, skräddarsydda block standarden för moderna webbplatser.

I den här guiden går jag igenom hur du använder det officiella kommandoradsverktyget @wordpress/create-block för att bygga snabba, modulära och framtidssäkra Gutenberg-block från grunden.

Varför skräddarsydda block slår tunga sidbyggare

När du utvecklar webbplatser för kunder uppstår ofta behov av helt unika designelement eller interaktiva modulytor. Den enkla vägen har historiskt varit att installera ett visat sidbyggar-plugin eller ett omfattande blockpaket. Men det medföljer nästan alltid en hög kostnad i form av kod-bloat, obegripliga DOM-strukturer och försämrade laddtider.

Genom att istället skapa ett eget block i Gutenberg för specifika behov får du full kontroll över både HTML-strukturen, skripten och stilmallarna. Du laddar enbart den CSS och JavaScript som faktiskt används på sidan.

Detta tillvägagångssätt skapar också en betydligt tryggare och mer begränsad redigeringsmiljö för kunden. Istället för att kunden av misstag råkar förstöra hela layouten med felaktiga marginaler eller inställningar, erbjuder ett skräddarsytt block tydliga och avgränsade fält för text, bilder och valmöjligheter.

Vill du fördjupa dig i hur man kan utnyttja standardkomponenter i grunden innan man bygger helt egna komponenter kan du läsa vår guide om så gör du snygga layouter utan plugins – bara core-block.

Vad är @wordpress/create-block?

@wordpress/create-block är det officiella CLI-verktyget (Command Line Interface) som utvecklats av WordPress-teamet. Det fungerar på ett liknande sätt som create-react-app, där ett enda terminalkommando sätter upp ett fullt fungerande WordPress-plugin innehållande ett anpassat block.

Verktyget skapar en färdig mappstruktur, installerar alla nödvändiga npm-beroenden och konfigurerar en modern byggmiljö baserad på paketet @wordpress/scripts. Det gör att du direkt kan börja skriva ES6+/JSX-kod och Sass utan att spendera timmar på att manuellt ställa in Webpack, Babel eller ESLint.

Du kan läsa mer om paketets officiella dokumentation och källkod direkt på WordPress Gutenberg GitHub repository.

Fördelar med att använda det officiella verktyget

Förutsättningar och inställning av utvecklingsmiljö

Innan du kör kommandot för att skapa ditt första block i Gutenberg behöver du säkerställa att din lokala utvecklingsmiljö har rätt verktyg installerade.

Krav på datorn:

1. Node.js och npm: Du behöver Node.js (LTS-versionen rekommenderas) installerat på din utvecklingsmaskin.
2. Lokal WordPress-installation: En fungerande lokal webbplats (t.ex. via Local WP, DDEV eller Docker) där du kan aktivera ditt nya plugin.
3. Källkodshanterare/Terminal: En standardterminal (macOS/Linux Terminal, PowerShell eller VS Code Terminal).

Skapa ditt första block

Navigera till mappen för dina tillägg (wp-content/plugins/) i din lokala WordPress-installation via terminalen och kör kommandot:

Bash

npx @wordpress/create-block mitt-forsta-block

När du kör kommandot kommer skriptet automatiskt att hämta den senaste versionen av paketet, skapa mappen mitt-forsta-block, generera alla källfiler och köra npm install för att hämta alla verktyg som krävs.

När processen är färdig navigerar du in i mappen:

Bash

cd mitt-forsta-block

Anatomin i ett genererat block

När du öppnar mappen i din kodeditor (exempelvis VS Code) ser du en välstrukturerad uppsättning filer. Att förstå vad varje fil gör är nyckeln till effektiv utveckling.

Plaintext

mitt-forsta-block/
├── build/                  # Kompilerade filer för produktion (genereras automatiskt)
├── src/                    # Källkod för utveckling
│   ├── block.json          # Blockets metadata och konfiguration
│   ├── index.js            # Registrering av blocket i JS
│   ├── edit.js             # Komponenten som visas i Gutenberg-redigeraren
│   ├── save.js             # Komponenten som renderar sparad HTML till frontend
│   ├── editor.scss         # Stilmallar som enbart gäller i redigeraren
│   └── style.scss          # Stilmallar som gäller både i redigeraren och på frontend
├── mitt-forsta-block.php   # Huvudfilen för WordPress-pluginet
└── package.json            # npm-konfiguration och skript

Metadata med block.json

Hjärtat i ett modernt Gutenberg-block är filen block.json. Det är här du definierar blockets namn, titel, ikon, kategori, sökord och vilka skriptfiler som ska laddas.

Ett typiskt exempel på block.json ser ut så här:

JSON

{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "create-block/mitt-forsta-block",
	"version": "0.1.0",
	"title": "Mitt Första Block",
	"category": "widgets",
	"icon": "smiley",
	"description": "Ett anpassat Gutenberg-block skapat med official CLI.",
	"example": {},
	"supports": {
		"html": false,
		"color": {
			"background": true,
			"text": true
		},
		"spacing": {
			"margin": true,
			"padding": true
		}
	},
	"textdomain": "mitt-forsta-block",
	"editorScript": "file:./index.js",
	"editorStyle": "file:./index.css",
	"style": "file:./style-index.css"
}

Genom att använda supports-egenskapen kan du aktivera inbyggda kontrollpaneler i WordPress (som färgval, marginaler och typografi) utan att behöva skriva en enda rad egen React-kod för dessa kontroller.

Vill du veta mer om hur du hanterar prestanda och laddningsordning för stilmallar i blockteman kan du läsa min fördjupning i CSS i blockteman: hur WordPress laddar styles bakom kulisserna.

Utvecklingsflödet: Skriva kod och kompilera

När du utvecklar ditt block använder du två primära npm-skript som tillhandahålls av @wordpress/scripts.

Starta utvecklingsläget

Kör följande kommando i blockets mapp:

Bash

npm start

Detta startar en watchers-process i terminalen. Varje gång du sparar ändringar i filerna under src/-mappen kommer koden automatiskt att kompileras om till build/-mappen i realtid. Du behöver bara uppdatera webbläsarsidan i WordPress-redigeraren för att se dina ändringar.

Bygga för produktion

När du är färdig med utvecklingen och ska skicka koden till en produktionsmiljö kör du:

Bash

npm run build

Detta kommando minifierar koden, optimerar tillgångar, tar bort eventuell debugging-kod och säkerställer att ditt tillägg laddar blixtsnabbt.

Mini-scenario 1: ”Kustbygdens Bygg” skapar ett anpassat projektkort

Låt oss titta på hur ett konkret utvecklingsprojekt kan se ut i praktiken för ett litet eller medelstort företag.

Entreprenadbolaget Kustbygdens Bygg ville visa upp sina genomförda byggprojekt på sin webbplats. Tidigare använde de en kombination av bildblock, rubriker och flera kolumnblock för varje projekt. Det ledde ofta till att layouten blev osynkroniserad på mobila enheter och att bilderna fick olika storlekar.

Lösningen: Utvecklaren skapade ett skräddarsytt block i Gutenberg kallat kustbygden/projekt-kort.

1. Definierade attribut: I block.json sattes attribut för titel, kundnamn, byggår och bildUrl.
2. Skapade redigerargränssnitt (edit.js): Med hjälp av RichText och MediaUpload-komponenterna från @wordpress/block-editor byggdes en ren och låst mall där redaktören snabbt fyller i uppgifterna.
3. Styrde frontend-stilmallarna (style.scss): Stilmallarna utformades för att per automatik skapa ett tillgängligt och responstivt gränssnitt med perfekt typografi.

Resultatet: Redaktörerna sparar nu timmar vid varje ny publicering, och webbplatsens prestanda förbättrades avsevärt eftersom ingen överflödig HTML-kod genereras.

Redigera gränssnittet: edit.js vs save.js

En av de viktigaste principerna när du bygger ett block i Gutenberg är att förstå skillnaden mellan koden som körs i redigeraren (edit.js) och koden som genererar den slutliga HTML-strukturen för besökarna (save.js).

edit.js– Redaktörens upplevelse

edit.js styr hur blocket ser ut och fungerar när en användare jobbar i WordPress adminpanel. Här använder du WordPress React-komponenter för att skapa textfält, knappar och kontrollpaneler.

Exempel på en enkel edit.js:

JavaScript

import { __ } from '@wordpress/i18n';
import { useBlockProps, RichText } from '@wordpress/block-editor';
import './editor.scss';
export default function Edit({ attributes, setAttributes }) {
	const blockProps = useBlockProps();
	return (
		<div { ...blockProps }>
			<RichText
				tagName="h3"
				value={ attributes.content }
				onChange={ ( newContent ) => setAttributes( { content: newContent } ) }
				placeholder={ __( 'Skriv din rubrik här...', 'mitt-forsta-block' ) }
			/>
		</div>
	);
}

save.js – Frontend-utskrift

save.js ansvarar för vad som faktiskt sparas i databasen och vad besökaren ser på den färdiga webbsidan.

Exempel på motsvarande save.js:

JavaScript

import { useBlockProps, RichText } from '@wordpress/block-editor';
export default function save({ attributes }) {
	const blockProps = useBlockProps.save();
	return (
		<div { ...blockProps }>
			<RichText.Content tagName="h3" value={ attributes.content } />
		</div>
	);
}

Om du vill bygga block där innehållet uppdateras dynamiskt i realtid (t.ex. hämtar de senaste inläggen eller visar live-data från ett API) kan det vara bättre att göra blocket dynamiskt via PHP. Lär dig hur det fungerar i vår guide om att skapa dynamiska Gutenberg-block med PHP (render_callback).

Mini-scenario 2: ”Nordisk Designstudio” skapar ett interaktivt citatblock

Webbtypsnitt, citat och visuella utropstecken är vanliga inslag på moderna företagssajter. Designstudion Nordisk Designstudio behövde ett citatblock med en inbyggd författarbild, citattext och yrkestitel, där hela layouten per automatik anpassades efter kundens varumärkesfärger.

Lösningen: Genom att använda @wordpress/create-block skapade de ett anpassat block med InspectorControls.

1. Inspektörspanel: De lade till val i sidopanelen (Sidebar) där redaktören kan välja citatets stil och layout.
2. Tillgänglighet (a11y): De säkerställde att rätt HTML-element (<blockquote> och <cite>) användes samt att färgkontrasterna uppfyllde tillgänglighetskraven (WCAG).
3. Container-frågor: Genom att använda moderna CSS-tekniker ser citatblocket lika bra ut i en smal sidokolumn som i ett fullbreddsavsnitt.

Vill du veta mer om hur du hanterar CSS-layout för block på ett smidigt sätt bör du spana in vår artikel om varför CSS @container queries är ljusår bättre än @media queries för Gutenberg-block.

Mini-scenario 3: E-handelsföretaget ”Gröna Hem” bygger ett produktframhävningsblock

E-handlare som kör WooCommerce behöver ofta lyfta fram utvalda kampanjprodukter i sina blogginlägg eller på landningssidor. Företaget Gröna Hem upplevde att standardblocken för e-handel saknade flexibilitet gällande deras unika kampanjbanners.

Lösningen: Utveckling av ett dynamiskt framhävningsblock.

1. Integration mot WooCommerce: Istället för att hårdkoda produktdata använde utvecklaren ett dynamiskt block som hämtar pris och lagerstatus i realtid via PHP.
2. Kundanpassade kontroller: Redaktören behöver bara skriva in produktens SKU eller ID i blockinställningarna i Gutenberg.
3. Framtidssäkrad kod: Genom att hålla koden modulariserad kan teamet enkelt uppdatera designen på alla kampanjytor samtidigt utan att behöva redigera hundratals inlägg manuellt.

Detta visar styrkan i att förstå när koden ska ligga på klientsidan (JavaScript) och när den bör renderas på servern (PHP). För en djupare förståelse för hur du skräddarsyr lösningar utan onödig kodtunga kan du läsa vidare i så skräddarsyr du Gutenberg block för kunder (utan överbyggnad).

Bästa praxis för utveckling av block i Gutenberg

För att dina block ska hålla hög kvalitet, vara säkra och fungera felfritt över tid bör du följa dessa tre grundläggande principer:

Slutsats och nästa steg

Att lära sig skapa ett skräddarsytt block i Gutenberg med hjälp av @wordpress/create-block är en av de mest värdefulla investeringarna du kan göra som WordPress-utvecklare idag. Det ger dig full kontroll över kodkvaliteten, garanterar maximal prestanda och ger dina kunder ett skräddarsytt, lättanvänt verktyg för att hantera sitt innehåll.

Genom att använda det officiella CLI-verktyget slipper du dessutom tidskrävande och komplicerade konfigurationssteg och kan direkt fokusera på det viktigaste – att skapa fantastiska digitala upplevelser.