Malli kasutamine koos InnerBlocksiga WordPressi plokiredaktoris (Gutenberg)

Kui loote WordPressi plokiredaktoris (Gutenberg) ploki, saate luua ala, mis võimaldab teie ploki sisse pesastada teisi plokitüüpe. Teete seda InnerBlockskomponendiga.

Teistes juhendites uurisime varem plokkide mustreid ja plokimalle. Selles juhendis käsitletakse pesastatud plokkide malli loomist.

Eeldused

• Olge tuttav WordPressi Gutenbergi pistikprogrammide loomisega

Looge pesastatud ploki pistikprogramm

Pärast seda, kui olete Gutenbergi pistikprogrammi loomise õpetuse etapid läbi viinud (kuid mitte kaasa arvatud) 5 sammuni, peaks teil olema pesastatud plokkplugina loomiseks raamistik.

Lisage InnerBlocks/src/edit.js

Avage /src/edit.jsoma redaktoris ja asendage import useBlockPropsjärgmisega:

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

See võimaldab meil kasutada redigeerimisrenderdusmeetodis komponenti InnerBlocks.

Seejärel muutke kogu redigeerimisfunktsioon järgmiselt:

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

See registreerib InnerBlocki

Väljutage atribuudid/src/save.js

Avage /src/save.jsoma redaktoris ja asendage import useBlockPropsjärgmisega:

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

See võimaldab meil kasutada meie salvestamisrenderdusmeetodis komponenti InnerBlocks.

Järgmisena väljastage komponendi Innerblocks sisu, asendades savefunktsiooni järgmisega:

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

See lihtsalt väljastab InnerBlockide väärtuse <div>.

Plugina kompileerimine

Avage terminal, veenduge, et olete oma pistikprogrammi juurkataloogis ja käivitage järgmine käsk:

Skript kompileeritakse. Kui teil on vigu, peaks terminal teid teavitama, mis need on.

InnerBlocksi malli lisamine

Asjade lihtsuse huvides kasutame täpselt sama malli, mille lõime eelnevalt plokkide mustrite ja plokimalli juhendi jaoks.

Mall on väga sarnane plokimallide juhendis määratletule, kuid atribuudid on mitmemõõtmelise massiivi asemel objektis.

Asendage Editfunktsioon järgmise koodiga:

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

See loob pesastatud ploki malli. Pange tähele, mille kasutamine templateLockon määratud kõigile. See käitub samamoodi nagu plokimalli malli lukk ja sellel on kaks järgmist valikut.

• all— takistab kõiki toiminguid. Uusi plokke pole võimalik sisestada, olemasolevaid plokke teisaldada ega plokke kustutada.
• insert— takistab plokkide sisestamist või eemaldamist, kuid võimaldab olemasolevaid plokke liigutada.

Samuti saate määrata, millised plokid on pesastatud plokkides lubatud.

1. InnerBlocksi malli sisestamine ja vaatamine

---

Saate sisestada pesastatud ploki samamoodi nagu mis tahes muud plokki, klõpsates plussikooni ja otsides Wholesome Plugin.

Pesastatud ploki malli sisestamine

Pange tähele, et nagu varemgi, ei ole pesastatud plokkide sees olevatele pesastatud plokkidele mallilukku rakendatud.

Loomulikult on selle jaoks lahendusi, olles loominguline plokimallide ja kohandatud pesastatud plokkide kombinatsiooni loomisel.

Bloki vaatamine

Pärast pisut SCSS-iga nuputamist näeb meie väljundplokk välja umbes selline:

Pesastatud ploki malli sisestamine

Malli lukustamise asemel võite selle asemel piirata, märkides, milliseid plokke teil on lubatud sellesse sisestada. Lihtsalt asendage Editfunktsioon järgmise koodiga:

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

Siin jätame templateLockargumendi välja ja piirame selle asemel oma pesastatud plokki järgmiste plokkidega:

• Veerg (core/column)
• Veerud (veerud core/column)
• Rühm (core/group)
• Pealkiri (core/heading)
• Lõige (core/paragraph)

Jällegi, see ei tööta malli ühegi pesastatud plokiga.

• Kas vajate midagi paindlikumat? Proovige selle asemel registreerida blokeerimismuster
• Kas vajate midagi staatilisemat? Proovige registreerida blokeerimismall