Utilisation d’un modèle avec InnerBlocks dans l’éditeur de blocs WordPress (Gutenberg)
Lorsque vous créez un bloc dans l’éditeur de blocs WordPress (Gutenberg), vous pouvez créer une zone qui permet d’imbriquer d’autres types de blocs dans votre bloc. Vous faites cela avec le InnerBlockscomposant.
Dans nos autres guides, nous avons précédemment exploré les modèles de blocs et les modèles de blocs. Ce guide examine la création d’un modèle pour les blocs imbriqués.
Conditions préalables
- Se familiariser avec la création de plugins pour WordPress Gutenberg
Créer un plugin de bloc imbriqué
Après avoir suivi les étapes du didacticiel de création d’un plugin Gutenberg, jusqu’à (mais non compris) l’étape 5, vous devriez avoir le cadre en place pour créer le plugin de bloc imbriqué.
Ajouter des blocs internes à/src/edit.js
Ouvrez /src/edit.jsdans votre éditeur et remplacez l’importation pour useBlockPropspar ce qui suit :
import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
Cela nous permettra d’utiliser le composant InnerBlocks dans notre méthode de rendu d’édition.
Modifiez ensuite toute la fonction d’édition comme suit :
export default function Edit() {
return (<div { ...useBlockProps() }>
<InnerBlocks/>
</div>
);
}
Ceci enregistre l’InnerBlock
Sortez les attributs dans/src/save.js
Ouvrez /src/save.jsdans votre éditeur et remplacez l’importation pour useBlockPropspar ce qui suit :
import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
Cela nous permettra d’utiliser le composant InnerBlocks dans notre méthode de rendu de sauvegarde.
Générez ensuite le contenu du composant Innerblocks en remplaçant la savefonction par ce qui suit :
export default function save() {
return (<div { ...useBlockProps.save() }>
<InnerBlocks.Content />
</div>
);
}
Cela génère simplement la valeur des InnerBlocks dans un fichier <div>.
Compilation du plugin
Ouvrez le terminal, assurez-vous d’être dans le répertoire racine de votre plugin et lancez la commande suivante :
Le script compilera. Si vous avez des erreurs, le terminal devrait vous en informer.
Ajout du modèle InnerBlocks
Pour garder les choses simples, nous allons utiliser exactement le même modèle que nous avons créé précédemment pour les modèles de blocs et le guide des modèles de blocs .
Le modèle est très similaire à celui que nous avons défini dans notre guide de modèle de bloc, mais les attributs sont dans un objet au lieu d’un tableau multidimensionnel.
Remplacez la Editfonction par le code suivant :
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>
);
}
Cela crée un modèle pour le bloc imbriqué. Notez templateLockdont l’utilisation est définie sur tous. Cela se comporte de la même manière que le verrou de modèle pour le modèle de bloc et a les deux options suivantes :
all— empêche toutes les opérations. Il n’est pas possible d’insérer de nouveaux blocs, de déplacer des blocs existants ou de supprimer des blocs.insert— empêche l’insertion ou la suppression de blocs, mais permet de déplacer des blocs existants.
Vous pouvez également définir quels blocs sont autorisés dans les blocs imbriqués.
- Insertion et affichage du modèle InnerBlocks
Vous pouvez insérer le bloc imbriqué de la même manière que n’importe quel autre bloc, en cliquant sur l’icône plus et en recherchant Wholesome Plugin.
Insertion du modèle de bloc imbriqué
Notez que comme précédemment, les blocs imbriqués à l’intérieur des blocs imbriqués ne sont pas dotés du verrou de modèle.
Il existe bien sûr des solutions de contournement pour cela, en étant créatif avec la façon dont vous créez une combinaison de modèles de blocs et de blocs imbriqués personnalisés.
Affichage du bloc
Après un peu de bricolage avec le SCSS, notre bloc sorti ressemble un peu à ceci :
Insertion du modèle de bloc imbriqué
Au lieu de verrouiller le modèle, vous pouvez le restreindre en indiquant les blocs que vous êtes autorisé à y insérer. Remplacez simplement la Editfonction par le code suivant :
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>
);
}
Ici, nous omettons l’ templateLockargument et restreignons notre bloc imbriqué aux blocs suivants :
- Colonne (
core/column) - Colonnes (
core/columns) - Groupe (
core/group) - Titre (
core/heading) - Paragraphe (
core/paragraph)
Encore une fois, cela ne fonctionnera sur aucun bloc imbriqué dans le modèle.
- Besoin de quelque chose de plus flexible? Essayez d’enregistrer un modèle de bloc à la place
- Besoin de quelque chose de plus statique? Essayez d’enregistrer un modèle de bloc