Eigene WordPress-Blöcke mit InnerBlocks strukturieren
Wiederkehrende Inhaltsbausteine brauchen eine erkennbare Grundstruktur und Raum für individuelle Inhalte. InnerBlocks verbindet beides in eigenen WordPress-Blöcken: Vorgegebene Elemente stehen beim Einfügen bereit und bleiben im Gutenberg-Editor direkt bearbeitbar.
Ein eigener WordPress-Block kann mehrere Inhalte zu einem wiederkehrenden Baustein zusammenfassen. Hinweise, Kontaktbereiche oder Projektkacheln erhalten dadurch einen gemeinsamen Rahmen. InnerBlocks fügt darin die vertrauten Gutenberg-Blöcke ein und verbindet Struktur mit redaktioneller Pflege.
Eine Startstruktur im Block bereitstellen
Eine Info-Box beginnt beispielsweise mit einer Überschrift und bietet darunter Platz für einen kurzen Hinweis. Beim Einfügen steht diese Struktur bereits bereit. Die Redaktion bearbeitet die enthaltenen Blöcke direkt an der Stelle, an der sie im Beitrag erscheinen.
import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
const TEMPLATE = [
[ 'core/heading', { level: 2, placeholder: 'Titel der Info-Box' } ],
[ 'core/paragraph', { placeholder: 'Kurzer Hinweis' } ],
];
export default function Edit() {
return (
<div { ...useBlockProps() }>
<InnerBlocks template={ TEMPLATE } />
</div>
);
}Das Template wird beim ersten Einfügen des Blocks verwendet. Danach stehen Überschrift und Text als eigenständige Kindblöcke für die weitere Bearbeitung zur Verfügung.
Die Auswahl innerhalb des Blocks bestimmen
Für wiederkehrende Inhaltsstrukturen lässt sich festlegen, welche Blöcke innerhalb des Rahmens verfügbar sind. Bei einer statischen Auswahl gehört diese Vorgabe in die block.json.
{
"apiVersion": 3,
"name": "ulrich-digital/info-box",
"title": "Info-Box",
"category": "design",
"allowedBlocks": [
"core/heading",
"core/paragraph",
"core/buttons"
]
}Die Info-Box stellt damit Überschrift, Absatz und Button als vorgesehene Bausteine bereit. Der Inhalt bleibt übersichtlich, während die Redaktion die Standardwerkzeuge von WordPress für Texte und Verknüpfungen nutzt.
Aufbau für die Redaktion absichern
Die Startstruktur kann mit templateLock an den jeweiligen Baustein angepasst werden. Der Wert insert erhält die eingefügten Elemente und ermöglicht ihre Umordnung. Mit all bleibt die vorgegebene Abfolge vollständig bestehen.
<InnerBlocks
template={ TEMPLATE }
templateLock="insert"
/>So erhält jeder Block den Bearbeitungsrahmen, der zu seiner Aufgabe passt: von einer frei erweiterbaren Inhaltseinheit bis zu einer fest definierten Struktur.
Ergebnis
Wiederkehrende Inhalte mit klarer Struktur pflegen
InnerBlocks verbindet vorgegebene Inhaltselemente mit der vertrauten Bearbeitung im Gutenberg-Editor. Eigene Blöcke schaffen dadurch eine verständliche Grundlage für wiederkehrende redaktionelle Bausteine.
Mit Struktur starten
Beim Einfügen stehen Überschrift, Text und weitere vorgesehene Elemente bereits bereit.
Auswahl einordnen
Erlaubte Kindblöcke halten die Bearbeitung innerhalb des Bausteins übersichtlich.
Inhalte weiterbearbeiten
Die Redaktion pflegt alle eingefügten Elemente direkt im Zusammenhang des Beitrags.