Använda en mall med InnerBlocks i WordPress Block Editor (Gutenberg)

När du skapar ett block i WordPress Block Editor (Gutenberg) kan du skapa ett område som tillåter andra blocktyper att kapslas in i ditt block. Detta gör du med InnerBlockskomponenten.

I våra andra guider har vi tidigare utforskat blockmönster och blockmallar. Den här guiden handlar om att skapa en mall för kapslade block.

Förutsättningar

• Var bekant med att skapa plugins för WordPress Gutenberg

Skapa en Nested Block Plugin

Efter att du har utfört stegen i guiden för att skapa en Gutenberg-plugin, upp till (men inte inklusive) steg 5, bör du ha ramverket på plats för att skapa det kapslade blockplugin-programmet.

Lägg till InnerBlocks till/src/edit.js

Öppna upp /src/edit.jsi din editor och ersätt importen för useBlockPropsmed följande:

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

Detta låter oss använda InnerBlocks-komponenten i vår redigeringsmetod.

Ändra sedan hela redigeringsfunktionen till följande:

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

Detta registrerar InnerBlock

Mata in attributen/src/save.js

Öppna upp /src/save.jsi din editor och ersätt importen för useBlockPropsmed följande:

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

Detta låter oss använda InnerBlocks-komponenten i vår spara-renderingsmetod.

Mata sedan ut innehållet i Innerblocks-komponenten genom att ersätta savefunktionen med följande:

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

Detta matar helt enkelt ut värdet på InnerBlocks till en <div>.

Kompilera plugin

Öppna terminalen, se till att du är i rotkatalogen för ditt plugin och kör följande kommando:

Skriptet kommer att kompileras. Om du har några fel bör terminalen göra dig medveten om vad de är.

Lägga till mallen InnerBlocks

För att göra det enkelt kommer vi att använda exakt samma mall som vi tidigare skapat för blockmönstren och blockmallguiden.

Mallen är mycket lik den vi definierade i vår blockmallguide, men attributen finns i ett objekt istället för en flerdimensionell array.

Ersätt Editfunktionen med följande kod:

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>
    );
}

Detta skapar en mall för det kapslade blocket. Observera att användningen templateLockär inställd på alla. Detta fungerar på samma sätt som malllåset för blockmallen och har följande två alternativ:

• all— förhindrar alla operationer. Det är inte möjligt att infoga nya block, flytta befintliga block eller ta bort block.
• insert— förhindrar att block sätts in eller tas bort, men tillåter att befintliga block flyttas.

Du kan också definiera vilka block som är tillåtna inom de kapslade blocken.

1. Infoga och visa mallen för InnerBlocks

---

Du kan infoga det kapslade blocket på samma sätt som alla andra block, genom att klicka på plusikonen och söka efter Wholesome Plugin.

Infogar mallen för kapslade block

Observera att som tidigare har de kapslade blocken inuti de kapslade blocken inte malllåset tillämpat på dem.

Det finns naturligtvis lösningar för detta, genom att vara kreativ med hur du skapar en kombination av blockmallar och anpassade kapslade block.

Titta på blocket

Efter lite mixtrande med SCSS ser vårt utmatade block ut ungefär så här:

Infogar mallen för kapslade block

Istället för att låsa mallen kan du istället begränsa den genom att ange vilka block du får infoga i den. Byt bara ut Editfunktionen med följande kod:

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>
    );
}

Här utelämnar vi templateLockargumentet och begränsar istället vårt kapslade block till följande block:

• Kolumn (core/column)
• Kolumner (core/columner)
• Grupp (core/group)
• Rubrik (core/heading)
• Stycke (core/paragraph)

Återigen, detta fungerar inte på några kapslade block i mallen.

• Behöver du något mer flexibelt? Testa att registrera ett blockmönster istället
• Behöver du något mer statiskt? Försök att registrera en blockmall