Erstellen von WordPress Custom Blocks mit block.json (WP JSON) im Vereinigten Königreich
16. August 2026
Lernen Sie, benutzerdefinierte WordPress-Blöcke mit block.json zu erstellen. Ein praktischer Leitfaden mit Fokus auf Großbritannien, der Registrierung, React, Barrierefreiheit und Performance im Jahr 2026 behandelt.
Warum block.json das Rückgrat eigener Gutenberg-Blöcke ist
Seit WordPress 5.8 ist block.json der Standard, um benutzerdefinierte Blöcke zu definieren. Diese einzelne JSON-Datei bündelt Metadaten: Blockname, Titel, Attribute, Supports und sogar Editor-Skripte. Für Entwicklerinnen und Entwickler bedeutet das saubereren Code, einfachere Wartung und eine bessere teamübergreifende Zusammenarbeit. Die Verwendung von block.json entspricht modernen WordPress-Praktiken und stellt sicher, dass Ihre benutzerdefinierten Blöcke nahtlos mit zukünftigen Updates funktionieren. Es vereinfacht auch die Internationalisierung, da Sie Textdomains für Deutsch oder andere Sprachen festlegen können. Auch 2026 treibt WordPress das Block-System weiter voran; wer jetzt auf block.json setzt, positioniert seine Projekte für langfristige Stabilität und Skalierbarkeit.
Einrichtung eines benutzerdefinierten Block-Plugins: Eine Schritt-für-Schritt-Anleitung
Erstellen Sie zunächst einen Plugin-Ordner unter wp-content/plugins, z. B. uk-custom-blocks. Legen Sie darin eine Haupt-PHP-Datei mit einem Plugin-Header sowie ein build-Verzeichnis für kompilierte Assets an. Ihre block.json befindet sich im Block-Ordner und definiert den Blocknamen wie „uk/example-block“. Verwenden Sie das offizielle Paket @wordpress/create-block, um das Projekt schnell zu scaffolden; es generiert die korrekte Dateistruktur und den Build-Prozess. Für Entwickler aus Großbritannien: Stellen Sie sicher, dass Ihr Plugin den WordPress-Codierungsstandards entspricht, und fügen Sie eine README mit klaren Installationsanweisungen bei. Dieser Ansatz reduziert die Einrichtungszeit und vermeidet häufige Fallstricke, sodass Sie sich auf die Funktionalität statt auf die Konfiguration konzentrieren können.
Registrieren von Blöcken in PHP: Verwendung von wp_json_file und Metadaten
In PHP registrierst du einen Block, indem du register_block_type() aufrufst und den Pfad zu block.json übergibst. WordPress liest die JSON-Datei und übernimmt das Einbinden der Assets automatisch. Die Funktion referenziert die Skripte und Styles, die in den Eigenschaften 'editorScript' und 'style' deklariert sind. Stelle sicher, dass deine block.json 'apiVersion' (nutze 3 für die neueste Version), 'textdomain' für Übersetzungen und 'supports' für Funktionen wie Ausrichtung und benutzerdefinierte Klassen enthält. Für Websites in Großbritannien denke daran, die 'textdomain' an die Domain deines Plugins anzupassen, damit die Übersetzungsdateien korrekt geladen werden. Dieser metadatenbasierte Ansatz reduziert Boilerplate-Code und sorgt dafür, dass deine Blöcke über verschiedene Projekte hinweg konsistent sind.
Erstellen der Editor-Benutzeroberfläche mit JavaScript und React
Die Editor-Oberfläche eines benutzerdefinierten Blocks wird mit React aufgebaut und von der Block-API von WordPress umschlossen. Ihre Haupt-JS-Datei verwendet `registerBlockType()` oder eine über `block.json` gesteuerte Registrierung mittels `@wordpress/blocks`. Sie definieren die Edit- und Save-Funktionen mit JSX. Für Entwickler im Vereinigten Königreich gilt: Priorisieren Sie Barrierefreiheit im Editor – verwenden Sie fokussierbare Steuerelemente, korrekte ARIA-Labels und Tastaturnavigation. Ziehen Sie außerdem in Betracht, den Block-Inspektor für Einstellungen zu integrieren. Seit 2026 empfiehlt WordPress die Verwendung der Block-Bibliothek und von Komponenten für eine konsistente Benutzererfahrung. Stellen Sie sicher, dass Ihr Code mit `wp-scripts` transpiliert wird, das JSX verarbeitet und nur die benötigten Abhängigkeiten einbindet, um den Admin-Bereich schnell zu halten.
UK-spezifische Überlegungen: Barrierefreiheit, DSGVO und Leistung
Beim Erstellen benutzerdefinierter Blöcke für Kunden in Großbritannien sollten Sie den Equality Act 2010 befolgen, indem Sie sicherstellen, dass Ihre Blöcke für alle Nutzer zugänglich sind. Verwenden Sie semantisches HTML, stellen Sie sicher, dass der Farbkontrast den WCAG-2.2-AA-Standards entspricht, und testen Sie mit Screenreadern. DSGVO-Konformität bedeutet, dass Sie keine Daten von Drittanbietern ohne Einwilligung einbetten dürfen. Wenn Ihr Block einen Iframe lädt (z. B. eine Karte), fügen Sie einen Platzhalter hinzu. Leistung ist entscheidend für die Core Web Vitals – nutzen Sie Lazy Loading für Skripte und binden Sie kleine Assets inline ein. Verwenden Sie außerdem britisches Englisch (‚colour', ‚organisation') in nutzerorientierten Texten. Wenn Sie diese Faktoren berücksichtigen, liefern Sie robuste, konforme und schnelle Websites, die den britischen Markt im Jahr 2026 effektiv bedienen.
FAQ
block.json ist eine JSON-Datei, die Metadaten über einen benutzerdefinierten Gutenberg-Block speichert, darunter Name, Titel, Attribute, Skripte, Stile und Supports. Mit WordPress 5.8 eingeführt, standardisiert sie die Blockregistrierung und ermöglicht WordPress, benötigte Assets automatisch einzubinden. Das erleichtert Wartung und Weitergabe von Blöcken – und ist heute der empfohlene Weg, benutzerdefinierte Blöcke zu erstellen.