Mallin käyttäminen InnerBlocksilla WordPressin lohkoeditorissa (Gutenberg)

Kun luot lohkon WordPressin lohkoeditorissa (Gutenberg), voit luoda alueen, joka sallii muiden lohkotyyppien sisällyttämisen lohkoosi. Teet tämän InnerBlockskomponentin kanssa.

Muissa oppaissamme olemme aiemmin tutkineet lohkokuvioita ja lohkomalleja. Tässä oppaassa tarkastellaan mallin luomista sisäkkäisille lohkoille.

Edellytykset

• Tutustu WordPress Gutenbergin lisäosien luomiseen

Luo sisäkkäinen lohkolaajennus

Kun olet suorittanut Gutenberg-laajennuksen opetusohjelman vaiheet, vaiheeseen 5 asti (mutta ei mukaan lukien), sinulla pitäisi olla kehys sisäkkäisen lohkolaajennuksen luomiseksi.

Lisää InnerBlocks kohteeseen/src/edit.js

Avaa /src/edit.jseditorissasi ja korvaa tuonti kohteelle useBlockPropsseuraavalla:

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

Tämä antaa meille mahdollisuuden käyttää InnerBlocks-komponenttia muokkaustavassamme.

Muuta sitten koko muokkaustoiminto seuraavaksi:

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

Tämä rekisteröi InnerBlockin

Tulosta attribuutit sisään/src/save.js

Avaa /src/save.jseditorissasi ja korvaa tuonti kohteelle useBlockPropsseuraavalla:

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

Tämä antaa meille mahdollisuuden käyttää InnerBlocks-komponenttia tallennusrenderöintimenetelmässämme.

Tulosta seuraavaksi Innerblocks-komponentin sisältö korvaamalla savefunktio seuraavalla:

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

Tämä yksinkertaisesti tulostaa InnerBlockien arvon <div>.

Pluginin kääntäminen

Avaa pääte, varmista, että olet laajennuksen juurihakemistossa ja suorita seuraava komento:

Käsikirjoitus kootaan. Jos sinulla on virheitä, päätteen pitäisi ilmoittaa sinulle, mitä ne ovat.

InnerBlocks-mallin lisääminen

Jotta asiat olisivat yksinkertaisia, aiomme käyttää täsmälleen samaa mallia, jonka loimme aiemmin lohkomalleille ja lohkomallioppaalle.

Malli on hyvin samanlainen kuin se, jonka määritimme lohkomallioppaassamme, mutta attribuutit ovat objektissa moniulotteisen taulukon sijaan.

Korvaa Editfunktio seuraavalla koodilla:

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

Tämä luo mallin sisäkkäiselle lohkolle. Huomaa, jonka käyttö templateLockon asetettu kaikille. Tämä toimii samalla tavalla kuin lohkomallin mallilukko, ja siinä on seuraavat kaksi vaihtoehtoa:

• all— estää kaikki toiminnot. Ei ole mahdollista lisätä uusia lohkoja, siirtää olemassa olevia lohkoja tai poistaa lohkoja.
• insert— estää lohkojen lisäämisen tai poistamisen, mutta sallii olemassa olevien lohkojen siirtämisen.

Voit myös määrittää, mitkä lohkot ovat sallittuja sisäkkäisten lohkojen sisällä.

1. InnerBlocks-mallin lisääminen ja tarkasteleminen

---

Voit lisätä sisäkkäisen lohkon samalla tavalla kuin minkä tahansa muun lohkon napsauttamalla plus-kuvaketta ja etsimällä Wholesome Plugin.

Sisäkkäisen lohkomallin lisääminen

Huomaa, että kuten aiemmin, sisäkkäisten lohkojen sisällä oleviin sisäkkäisiin lohkoihin ei ole kohdistettu mallilukkoa.

Tähän on tietysti olemassa kiertotapoja, kun luot luovasti lohkomallien ja mukautettujen sisäkkäisten lohkojen yhdistelmän.

Lohkon katselu

Pienen SCSS:n kanssa puuhastelun jälkeen tulostettu lohkomme näyttää hieman tältä:

Sisäkkäisen lohkomallin lisääminen

Sen sijaan, että lukitsisit mallin, voit sen sijaan rajoittaa sitä ilmoittamalla, mitä lohkoja sinulla on lupa lisätä siihen. Korvaa Edittoiminto vain seuraavalla koodilla:

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

Tässä jätämme pois templateLockargumentin ja rajoitamme sen sijaan sisäkkäisen lohkomme seuraaviin lohkoihin:

• Sarake (core/column)
• Sarakkeet (sarakkeet core/column)
• Ryhmä (core/group)
• Otsikko (core/heading)
• Kappale (core/paragraph)

Tämäkään ei toimi mallin sisäkkäisissä lohkoissa.

• Tarvitsetko jotain joustavampaa? Yritä sen sijaan rekisteröidä lohkokuvio
• Tarvitsetko jotain staattisempaa? Yritä rekisteröidä estomalli