Enregistrer un modèle de bloc dans l’éditeur de blocs WordPress (Gutenberg)

Les modèles de blocs dans l’éditeur de blocs WordPress (Gutenberg) sont une fonctionnalité puissante qui vous permet de créer des mises en page variées avec très peu d’effort.

Vous register_block_patternpouvez très rapidement créer un modèle de bloc pour vous ou vos clients.

Conditions préalables

• Installer WordPress
• Éditeur de codes

Créez votre modèle de bloc

Vous construisez des modèles de blocs à partir des blocs que vous avez enregistrés sur votre site. Il peut s’agir de blocs de base ou de n’importe quel nombre de blocs tiers ou personnalisés.

Commencez par utiliser l’éditeur WordPress pour créer une disposition de bloc. Vous pouvez utiliser les paramètres pour rendre cela aussi complexe ou aussi simple que vous le souhaitez.

Dans cet exemple, nous allons rester simple et créer simplement un motif de bloc qui se structure comme suit :

• Blocage de groupe
  • Titre
  • Paragraphe
  • Colonnes
    • Colonne 1
      • Titre
      • Paragraphe
    • Colonne 2
      • Titre
      • Paragraphe

Une fois que vous avez construit votre modèle de bloc, copiez simplement le code qui a été généré pour vous.

Copiez le code de modèle de bloc

Pour ce faire, accédez aux trois points en haut à droite de l’éditeur (étiquetés Options) et sélectionnez "Éditeur de code". Cela affichera le code HTML derrière le modèle de bloc que vous venez de créer.

Copiez ce code dans votre presse-papiers.

Enregistrez le modèle de bloc

Collez ce code d’éditeur de blocs dans votre éditeur de code. Si vous ne savez pas où, vous pouvez utiliser le functions.phpde votre thème.

Assurez-vous de le passer dans une variable en plaçant des guillemets simples (') autour du texte collé, comme ceci :

$block_pattern_content = '
<div class="wp-block-group"><div class="wp-block-group__inner-container">
<h2>Example Block Pattern</h2>

<p>Lorem ipsum dolor sit amet labore cras venenatis.</p>

<div class="wp-block-columns">
<div class="wp-block-column">
<h3>Sub Heading 1</h3>

<p>Lorem ipsum dolor sit amet id erat aliquet diam ullamcorper tempus massa eleifend vivamus.</p>
</div>

<div class="wp-block-column">
<h3>Sub Heading 2</h3>

<p>Morbi augue cursus quam pulvinar eget volutpat suspendisse dictumst mattis id.</p>
</div>
</div>
</div></div>
';

Vous devrez peut-être échapper les caractères, en fonction de la complexité de votre modèle de bloc.

Ensuite, nous devons passer ceci dans la register_block_patternfonction :

register_block_pattern(
    'wholesomecode/example-block-pattern',
    [
        'categories'    => [
            'text',
        ],
        'content'       => $block_pattern_content,
        'description'   => 'An example block pattern',
        'keywords'      => 'example',
        'title'         => 'Example Block Pattern',
        'viewportWidth' => 800,
    ],
);

Voilà, le motif de bloc est enregistré.

Décompositionregister_block_pattern

• Espace de noms — (wholesomecode/example-block-pattern) est l’espace de noms du modèle de bloc. Assurez-vous que cela est unique à votre modèle de bloc. Si jamais nous avons besoin de désenregistrer le modèle de bloc, c’est la chaîne dont nous aurons besoin.
• Catégories – Il s’agit de la catégorie de modèle de bloc dans laquelle le modèle de bloc apparaîtra lorsque nous insérons notre modèle de bloc. Nous pouvons également ajouter nos propres catégories.
• Contenu — C’est le HTML qui génère le modèle de bloc. Cet exemple utilise la variable que nous avons créée à partir de l’éditeur.
• Description — Une description du modèle de bloc.
• Mots -clés — Mots-clés pouvant être utilisés pour rechercher le modèle de bloc.
• Titre — Le titre du motif de bloc.
• Largeur de la fenêtre — La fenêtre du motif de bloc, utilisée pour la zone d’aperçu.

Insérer le motif de bloc

Pour insérer le motif de bloc, utilisez simplement le signe plus en haut à gauche de l’éditeur et sélectionnez les motifs de bloc.

Sélectionnez la catégorie dans laquelle vous avez enregistré votre motif et il devrait apparaître.

Insertion du motif de bloc

Alternativement, vous pouvez rechercher par les mots-clés que vous avez enregistrés.

Pour enregistrer une catégorie de bloc, utilisez simplement la register_block_pattern_categoryfonction.

register_block_pattern_category(
    'my-client',
    [
        'label' => esc_html__( 'My Client Patterns', 'wholesome-plugin' ),
    ]
);

Ensuite, vous pouvez utiliser la catégorie que vous venez d’enregistrer dans votre code de modèle de bloc, comme ceci :

register_block_pattern(
    'wholesomecode/example-block-pattern',
    [
        'categories'    => [
            'my-client',
        ],
        'content'       => $block_pattern_content,
        'description'   => 'An example block pattern',
        'keywords'      => 'example',
        'title'         => 'Example Block Pattern',
        'viewportWidth' => 800,
    ],
);

Désormais, lorsque vous trouverez votre modèle de bloc, il se trouvera dans votre catégorie personnalisée :

Catégorie de modèle de bloc personnalisé

Vous pouvez maintenant regrouper tous les modèles de blocs personnalisés que vous venez de créer pour votre client en un seul endroit.

• Besoin de quelque chose de plus statique? Essayez plutôt d’enregistrer un modèle de bloc
• Besoin de quelque chose qui s’applique aux blocs enfants ? Essayez d’enregistrer un modèle InnerBlocks