Verwenden einer Vorlage mit InnerBlocks im WordPress-Blockeditor (Gutenberg)

Wenn Sie einen Block im WordPress-Blockeditor (Gutenberg) erstellen, können Sie einen Bereich erstellen, in dem andere Blocktypen in Ihrem Block verschachtelt werden können. Das machst du mit der InnerBlocksKomponente.

In unseren anderen Leitfäden haben wir zuvor Blockmuster und Blockvorlagen untersucht. Diese Anleitung behandelt das Erstellen einer Vorlage für verschachtelte Blöcke.

Voraussetzungen

• Machen Sie sich mit der Erstellung von Plugins für WordPress Gutenberg vertraut

Erstellen Sie ein Plug-in für verschachtelte Blöcke

Nachdem Sie die Schritte im Tutorial zum Erstellen eines Gutenberg-Plugins bis (aber nicht einschließlich) Schritt 5 ausgeführt haben, sollten Sie das Framework zum Erstellen des verschachtelten Block-Plugins eingerichtet haben.

Fügen Sie InnerBlocks hinzu/src/edit.js

Öffnen /src/edit.jsSie in Ihrem Editor und ersetzen Sie den Import für useBlockPropsdurch Folgendes:

import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';

Dadurch können wir die InnerBlocks-Komponente in unserer Edit-Render-Methode verwenden.

Ändern Sie dann die gesamte Edit-Funktion wie folgt:

export default function Edit() {
    return (<div { ...useBlockProps() }>
            <InnerBlocks/>
        </div>
    );
}

Dadurch wird der InnerBlock registriert

Geben Sie die Attribute aus in/src/save.js

Öffnen /src/save.jsSie in Ihrem Editor und ersetzen Sie den Import für useBlockPropsdurch Folgendes:

import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';

Dadurch können wir die InnerBlocks-Komponente in unserer Save-Render-Methode verwenden.

Geben Sie als Nächstes den Inhalt der Innerblocks-Komponente aus, indem Sie die saveFunktion durch Folgendes ersetzen:

export default function save() {
    return (<div { ...useBlockProps.save() }>
            <InnerBlocks.Content />
        </div>
    );
}

Dies gibt einfach den Wert der InnerBlocks in eine <div>.

Kompilieren des Plugins

Öffnen Sie das Terminal, vergewissern Sie sich, dass Sie sich im Stammverzeichnis Ihres Plugins befinden, und führen Sie den folgenden Befehl aus:

Das Skript wird kompiliert. Wenn Sie irgendwelche Fehler haben, sollte das Terminal Sie darüber informieren.

Hinzufügen der InnerBlocks-Vorlage

Um die Dinge einfach zu halten, verwenden wir genau dieselbe Vorlage, die wir zuvor für die Blockmuster und den Blockvorlagenleitfaden erstellt haben .

Die Vorlage ist derjenigen sehr ähnlich, die wir in unserem Blockvorlagen-Leitfaden definiert haben, jedoch befinden sich die Attribute in einem Objekt und nicht in einem mehrdimensionalen Array.

Ersetzen Sie die EditFunktion durch den folgenden Code:

export default function Edit() {
    return (<div { ...useBlockProps() }>
            <InnerBlocks
                template={ [
                    [ 'core/heading', { level: 2, content: 'Example Nested Block Template' } ],
                    [ 'core/paragraph', { content: 'Lorem ipsum dolor sit amet labore cras venenatis.' } ],
                    [ 'core/columns', {},
                        [
                            [ 'core/column', {}, [
                                    [ 'core/heading', { level: 3, content: 'Sub Heading 1' } ],
                                    [ 'core/paragraph', { content: 'Lorem ipsum dolor sit amet id erat aliquet diam ullamcorper tempus massa eleifend vivamus.' } ],
                                ]
                            ],
                            [ 'core/column', {}, [
                                    [ 'core/heading', { level: 3, content: 'Sub Heading 2' } ],
                                    [ 'core/paragraph', { content: 'Morbi augue cursus quam pulvinar eget volutpat suspendisse dictumst mattis id.' } ],
                                ]
                            ],
                        ]
                    ],
                ] }
                templateLock="all"
            />
        </div>
    );
}

Dadurch wird eine Vorlage für den verschachtelten Block erstellt. Beachten Sie, dass die Verwendung templateLockauf all eingestellt ist. Diese verhält sich genauso wie die Vorlagensperre für die Blockvorlage und hat die folgenden zwei Möglichkeiten:

• all— verhindert alle Operationen. Es ist nicht möglich, neue Blöcke einzufügen, vorhandene Blöcke zu verschieben oder Blöcke zu löschen.
• insert— verhindert das Einfügen oder Entfernen von Blöcken, erlaubt aber das Verschieben vorhandener Blöcke.

Sie können auch festlegen, welche Blöcke innerhalb der verschachtelten Blöcke erlaubt sind.

1. Einfügen und Anzeigen der InnerBlocks-Vorlage

---

Sie können den verschachtelten Block wie jeden anderen Block einfügen, indem Sie auf das Plus-Symbol klicken und nach suchen Wholesome Plugin.

Einfügen der verschachtelten Blockvorlage

Beachten Sie, dass auf die verschachtelten Blöcke innerhalb der verschachtelten Blöcke wie zuvor keine Vorlagensperre angewendet wird.

Es gibt natürlich Problemumgehungen dafür, indem Sie kreativ sind, wie Sie eine Kombination aus Blockvorlagen und benutzerdefinierten verschachtelten Blöcken erstellen.

Anzeigen des Blocks

Nach ein wenig Basteln mit dem SCSS sieht unser ausgegebener Block in etwa so aus:

Einfügen der verschachtelten Blockvorlage

Anstatt die Vorlage zu sperren, könnten Sie sie stattdessen einschränken, indem Sie angeben, welche Blöcke Sie darin einfügen dürfen. Ersetzen Sie die EditFunktion einfach durch den folgenden Code:

export default function Edit() {
    return (<div { ...useBlockProps() }>
            <InnerBlocks
                template={ [
                    [ 'core/heading', { level: 2, content: 'Example Nested Block Template' } ],
                    [ 'core/paragraph', { content: 'Lorem ipsum dolor sit amet labore cras venenatis.' } ],
                    [ 'core/columns', {},
                        [
                            [ 'core/column', {}, [
                                    [ 'core/heading', { level: 3, content: 'Sub Heading 1' } ],
                                    [ 'core/paragraph', { content: 'Lorem ipsum dolor sit amet id erat aliquet diam ullamcorper tempus massa eleifend vivamus.' } ],
                                ]
                            ],
                            [ 'core/column', {}, [
                                    [ 'core/heading', { level: 3, content: 'Sub Heading 2' } ],
                                    [ 'core/paragraph', { content: 'Morbi augue cursus quam pulvinar eget volutpat suspendisse dictumst mattis id.' } ],
                                ]
                            ],
                        ]
                    ],
                ] }
                allowedBlocks={ [
                    'core/column',
                    'core/columns',
                    'core/heading',
                    'core/paragraph',
                ] }
            />
        </div>
    );
}

Hier lassen wir das templateLockArgument weg und beschränken stattdessen unseren verschachtelten Block auf die folgenden Blöcke:

• Spalte (core/column)
• Spalten (core/columne)
• Gruppe (core/group)
• Überschrift (core/heading)
• Absatz (core/paragraph)

Auch dies funktioniert nicht bei verschachtelten Blöcken innerhalb der Vorlage.

• Brauchen Sie etwas Flexibleres? Versuchen Sie stattdessen, ein Blockmuster zu registrieren
• Brauchen Sie etwas statischeres? Versuchen Sie , eine Blockvorlage zu registrieren