Używanie szablonu z InnerBlocks w edytorze bloków WordPress (Gutenberg)

Podczas tworzenia bloku w Edytorze bloków WordPress (Gutenberg) możesz utworzyć obszar, który umożliwia zagnieżdżanie innych typów bloków w twoim bloku. Robisz to z InnerBlockskomponentem.

W innych naszych przewodnikach badaliśmy wcześniej wzorce blokowe i szablony blokowe. W tym przewodniku omówiono tworzenie szablonu dla bloków zagnieżdżonych.

Warunki wstępne

• Zapoznaj się z tworzeniem wtyczek do WordPress Gutenberg

Utwórz wtyczkę zagnieżdżonego bloku

Po wykonaniu kroków w samouczku tworzenia wtyczki Gutenberg, aż do (ale nie w tym) kroku 5, powinieneś mieć strukturę do tworzenia wtyczki zagnieżdżonej bloku.

Dodaj wewnętrzne bloki do/src/edit.js

Otwórz /src/edit.jsw edytorze i zastąp importowanie useBlockPropsnastępującym:

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

Umożliwi nam to użycie komponentu InnerBlocks w naszej metodzie renderowania edycji.

Następnie zmień całą funkcję Edytuj na następującą:

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

To rejestruje InnerBlock

Wypisz atrybuty w/src/save.js

Otwórz /src/save.jsw edytorze i zastąp importowanie useBlockPropsnastępującym:

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

Umożliwi nam to użycie komponentu InnerBlocks w naszej metodzie zapisywania renderowania.

Następnie wyprowadź zawartość komponentu Innerblocks, zastępując savefunkcję następującą:

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

To po prostu wyprowadza wartość InnerBlocks do <div>.

Kompilacja wtyczki

Otwórz terminal, upewnij się, że jesteś w katalogu głównym swojej wtyczki i uruchom następujące polecenie:

Skrypt się skompiluje. Jeśli masz jakieś błędy, terminal powinien cię poinformować o tym, czym one są.

Dodawanie szablonu InnerBlocks

Aby uprościć sprawę, użyjemy dokładnie tego samego szablonu, który wcześniej stworzyliśmy dla wzorów bloków i przewodnika po szablonach bloków.

Szablon jest bardzo podobny do tego, który zdefiniowaliśmy w naszym przewodniku po szablonach bloków, jednak atrybuty znajdują się w obiekcie, a nie w wielowymiarowej tablicy.

Zastąp Editfunkcję następującym kodem:

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

Tworzy to szablon dla zagnieżdżonego bloku. Zwróć uwagę, że użycie templateLockjest ustawione na all. Działa to tak samo jak blokada szablonu dla szablonu bloku i ma następujące dwie opcje:

• all— zapobiega wszelkim operacjom. Nie można wstawiać nowych bloków, przenosić istniejących ani usuwać bloków.
• insert— zapobiega wstawianiu lub usuwaniu bloków, ale umożliwia przenoszenie istniejących bloków.

Możesz także określić, które bloki są dozwolone w zagnieżdżonych blokach.

1. Wstawianie i przeglądanie szablonu InnerBlocks

---

Zagnieżdżony blok można wstawić w taki sam sposób, jak każdy inny blok, klikając ikonę plusa i wyszukując Wholesome Plugin.

Wstawianie szablonu zagnieżdżonego bloku

Zauważ, że tak jak poprzednio, zagnieżdżone bloki wewnątrz zagnieżdżonych bloków nie mają zastosowanej blokady szablonu.

Istnieją oczywiście rozwiązania tego problemu, będąc kreatywnym w tworzeniu kombinacji szablonów bloków i niestandardowych bloków zagnieżdżonych.

Oglądanie bloku

Po krótkim majstrowaniu przy SCSS, nasz blok wyjściowy wygląda mniej więcej tak:

Wstawianie szablonu zagnieżdżonego bloku

Zamiast blokować szablon, możesz go ograniczyć, określając, które bloki możesz do niego wstawić. Wystarczy zastąpić Editfunkcję następującym kodem:

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

Tutaj pomijamy templateLockargument i zamiast tego ograniczamy nasz zagnieżdżony blok do następujących bloków:

• Kolumna (core/column)
• Kolumny (core/columns)
• Grupa (core/group)
• Nagłówek (core/heading)
• Akapit (core/paragraph)

Ponownie, to nie zadziała na żadnych zagnieżdżonych blokach w szablonie.

• Potrzebujesz czegoś bardziej elastycznego? Spróbuj zamiast tego zarejestrować wzór blokowy
• Potrzebujesz czegoś bardziej statycznego? Spróbuj zarejestrować szablon bloku