Quando crei un blocco nell’editor blocchi di WordPress (Gutenberg) puoi creare un’area che consente di annidare altri tipi di blocchi all’interno del tuo blocco. Lo fai con il InnerBlockscomponente.
Nelle nostre altre guide abbiamo precedentemente esplorato modelli di blocchi e modelli di blocchi. Questa guida esamina la creazione di un modello per i blocchi nidificati.
Prerequisiti
- Familiarizzare con la creazione di plugin per WordPress Gutenberg
Crea un plug-in di blocchi nidificati
Dopo aver eseguito i passaggi nell’esercitazione sulla creazione di un plug-in Gutenberg, fino al passaggio 5 (ma non incluso), dovresti avere il framework in atto per creare il plug-in del blocco nidificato.
Aggiungi InnerBlocks a/src/edit.js
Apri /src/edit.jsnel tuo editor e sostituisci l’importazione per useBlockPropscon quanto segue:
import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
Questo ci consentirà di utilizzare il componente InnerBlocks nel nostro metodo di rendering di modifica.
Quindi cambia l’intera funzione Modifica come segue:
export default function Edit() {
return (<div { ...useBlockProps() }>
<InnerBlocks/>
</div>
);
}
Questo registra l’InnerBlock
Emetti gli attributi in/src/save.js
Apri /src/save.jsnel tuo editor e sostituisci l’importazione per useBlockPropscon quanto segue:
import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
Questo ci consentirà di utilizzare il componente InnerBlocks nel nostro metodo di salvataggio del rendering.
Quindi emetti il contenuto del componente Innerblocks sostituendo la savefunzione con la seguente:
export default function save() {
return (<div { ...useBlockProps.save() }>
<InnerBlocks.Content />
</div>
);
}
Questo semplicemente restituisce il valore di InnerBlocks in un file <div>.
Compilazione del plugin
Apri il terminale, assicurati di essere nella directory principale del tuo plugin ed esegui il seguente comando:
Lo script verrà compilato. In caso di errori, il terminale dovrebbe informarti di cosa sono.
Aggiunta del modello InnerBlocks
Per semplificare le cose, utilizzeremo lo stesso identico modello che abbiamo creato in precedenza per i modelli di blocco e la guida del modello di blocco .
Il modello è molto simile a quello che abbiamo definito nella nostra guida ai modelli di blocco, tuttavia gli attributi si trovano in un oggetto anziché in un array multidimensionale.
Sostituisci la Editfunzione con il seguente codice:
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>
);
}
Questo crea un modello per il blocco nidificato. Nota il templateLockcui utilizzo è impostato su tutti. Questo si comporta come il blocco del modello per il modello di blocco e ha le due opzioni seguenti:
all— impedisce tutte le operazioni. Non è possibile inserire nuovi blocchi, spostare blocchi esistenti o eliminare blocchi.insert— impedisce l’inserimento o la rimozione di blocchi, ma consente di spostare i blocchi esistenti.
È inoltre possibile definire quali blocchi sono consentiti all’interno dei blocchi nidificati.
- Inserimento e visualizzazione del modello InnerBlocks
Puoi inserire il blocco nidificato allo stesso modo di qualsiasi altro blocco, facendo clic sull’icona più e cercando Wholesome Plugin.
Inserimento del modello di blocco annidato
Si noti che, come in precedenza, ai blocchi nidificati all’interno dei blocchi nidificati non è applicato il blocco del modello.
Ovviamente ci sono soluzioni alternative per questo, essendo creativo nel modo in cui crei una combinazione di modelli di blocchi e blocchi nidificati personalizzati.
Visualizzazione del blocco
Dopo un po’ di armeggiare con l’SCSS, il nostro blocco emesso ha un aspetto simile a questo:
Inserimento del modello di blocco annidato
Invece di bloccare il modello, puoi invece limitarlo affermando quali blocchi puoi inserirvi. Sostituisci semplicemente la Editfunzione con il seguente codice:
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>
);
}
Qui omettiamo l’ templateLockargomento e restringiamo invece il nostro blocco nidificato ai seguenti blocchi:
- Colonna (
core/column) - Colonne (
core/columns) - Gruppo (
core/group) - Intestazione (
core/heading) - Paragrafo (
core/paragraph)
Ancora una volta, questo non funzionerà su nessun blocco nidificato all’interno del modello.
- Hai bisogno di qualcosa di più flessibile? Prova invece a registrare un pattern di blocco
- Hai bisogno di qualcosa di più statico? Prova a registrare un modello di blocco