Modèles de blocs WordPress

Depuis l'introduction des modèles de blocs, il y a eu un pic d'intérêt autour des modèles de blocs au sein de l'écosystème WordPress.

L'ajout de modèles de blocs à Gutenberg a été très avantageux pour les utilisateurs de WordPress. En effet, vous pouvez désormais utiliser des conceptions prédéfinies lors de la conception de votre site Web et les modifier selon vos préférences. Cela aide vraiment à gagner du temps, par rapport à la conception des pages de votre site à partir de zéro.

Dans cet article, nous examinerons ce que sont ces modèles de blocs, où les trouver, comment les utiliser, ainsi que comment ils se comparent aux blocs réutilisables.

Table des matières

Que sont les modèles de bloc

Utilisation de motifs de blocs existants

Modèles de blocs vs blocs réutilisables

Comment créer vos propres motifs de bloc

• L'approche manuelle
• Via le répertoire des modèles

Comment créer un plugin de modèles de blocs personnalisés

Annulation de l'enregistrement des modèles de bloc

Annulation de l'enregistrement des catégories de modèles de blocs

Conclusion

Que sont les modèles de bloc

Les modèles de blocs sont une collection de blocs combinés pour créer des mises en page prédéfinies.

Un utilisateur de WordPress qui souhaite par exemple configurer un appel à l'action peut le faire en ajoutant un certain nombre de blocs à sa page, tels que les blocs Titre, Paragraphe et Bouton. Disposer les blocs pour correspondre à votre mise en page de conception préférée peut cependant ne pas être aussi simple, en particulier pour les utilisateurs novices de WordPress. Les modèles de bloc sont utiles dans un tel cas, car les utilisateurs de WordPress peuvent simplement ajouter le modèle de bloc Call To Action. Ils peuvent ensuite modifier les motifs de bloc selon la vue souhaitée.

Utilisation de motifs de blocs existants

WordPress intègre un éditeur de blocs (Gutenberg) qui remplace l'éditeur classique. Dans l'éditeur, vous pouvez facilement ajouter des modèles à vos pages ou publications. Pour commencer, vous devrez d'abord cliquer sur le bloc d'insertion.

En cliquant dessus, accédez à l'onglet Patterns illustré ci-dessous :

Ensuite, cliquez sur le bouton "Explorer"

Sur la fenêtre contextuelle rendue, vous aurez alors un certain nombre de motifs regroupés en fonction de différentes catégories.

Afin d'insérer un modèle dans la page ou la publication, il vous suffira de cliquer dessus et il devrait alors être rendu dans votre page ou votre publication.

Une fois cela fait, vous pouvez ensuite personnaliser davantage le ou les blocs du motif selon vos préférences.

Vous pouvez également trouver plus de modèles dans le répertoire des modèles de blocs de wordpress.org.

Une fois que vous avez trouvé un motif de votre choix, il vous suffira de le copier en cliquant sur le bouton de copie affiché une fois qu'il y a un événement de survol de la souris sur le motif souhaité.

Après avoir accompli cela, vous devrez ensuite coller le modèle dans votre page ou votre publication.

Modèles de blocs vs blocs réutilisables

Un bloc réutilisable est une collection d'un ou plusieurs blocs que vous pouvez utiliser plus tard dans votre article ou votre page.

Selon la définition ci-dessus, les blocs réutilisables semblent assez similaires aux modèles de blocs dans le sens où ils impliquent tous deux l'ajout de blocs prédéfinis dans un article ou une page. Il existe cependant une différence entre ces deux éléments.

En ce qui concerne les blocs réutilisables, ces blocs ne sont pas assez flexibles par rapport aux modèles de blocs. Les blocs réutilisables conservent une seule instance, quelle que soit la page ou la publication dans laquelle ils sont appliqués. Cela signifie que si vous ajoutez un bloc réutilisable sur plusieurs pages et que vous décidez de personnaliser le bloc réutilisable dans l'une des pages, les modifications sont appliquées à toutes les instances du bloc réutilisable, sur toutes les pages.

En ce qui concerne les modèles de blocs, une fois que vous ajoutez un modèle de bloc à plusieurs pages et que vous effectuez certaines personnalisations sur le modèle de bloc dans une page spécifique, les personnalisations ne sont pas appliquées aux modèles de bloc sur le reste des pages. Les instances de Block Pattern sont donc différentes.

Contrairement aux blocs réutilisables, les modèles de blocs peuvent également être enregistrés dans votre thème ou votre code de plugin.

Les modèles de blocs sont idéaux si vous souhaitez utiliser une mise en page particulière qui sera appliquée à un certain nombre de pages ou de publications, à partir desquelles ils pourront ensuite les personnaliser sur les pages ou les publications individuelles, pour correspondre au contexte des pages ou des publications respectives.

Les blocs réutilisables, en revanche, sont idéaux pour les scénarios dans lesquels vous souhaitez dupliquer et utiliser le contenu exact sur vos pages. Cela pourrait être par exemple dans les bannières publicitaires.

Comment créer vos propres motifs de bloc

Il existe différentes manières de créer vos propres motifs de bloc. Dans cet article, nous aborderons deux de ces méthodes qui sont :

• L'approche manuelle
• Via le répertoire des modèles

L'approche manuelle

Dans cette approche, nous devrons d'abord créer la collection de blocs dans une page ou une publication, puis l'enregistrer en tant que modèle.

Création d'une collection de blocs

Afin de configurer votre collection de blocs, vous devrez effectuer les opérations suivantes :

i) Créez d'abord une nouvelle page ou un nouveau message

ii) Ajoutez les blocs souhaités qui doivent former le motif ou la mise en page dans le message ou la page. Dans notre cas ici, nous ajouterons un bloc média et texte ainsi qu'un bloc de boutons et un peu de style.

Vous trouverez ci-dessous un exemple d'affichage des blocs :

Enregistrement d'un motif de bloc

Afin d'enregistrer la collection de blocs en tant que modèle de bloc, vous devrez effectuer les opérations suivantes :

i) Dans la page ou la publication où vous avez la collection de blocs, passez à l'éditeur de code :

ii) Copiez tous les codes rendus et collez-les dans l'éditeur de texte de votre choix, tel que le Bloc-notes ou Sublime Text :

iii) Ensuite, ajoutez le code ci-dessous au fichier functions.php dans votre thème enfant :

 function reg_block_patterns() { register_block_pattern( 'my-plugin/media-text-pattern', array( 'title' => __( 'Media and Text custom Pattern', 'my-event-pattern'), 'description' => _x( 'This pattern contains a media text block and button you can use for an event banner', 'event pattern' ), 'categories' => array( 'featured' ), 'content' => 'Fill in your copied code here' ) ); } add_action( 'init', 'reg_block_patterns' );

Vous devrez remplacer le contenu "Remplissez votre code copié ici" par le code copié dans (ii) ci-dessus.

Vous trouverez ci-dessous un exemple du code final de notre côté :

 function reg_block_patterns() { register_block_pattern( 'my-plugin/media-text-pattern', array( 'title' => __( 'Media and Text custom Pattern', 'my-event-pattern'), 'description' => _x( 'This pattern contains a media text block and button you can use for an event banner', 'event pattern' ), 'categories' => array( 'featured' ), 'content' => '<!-- wp:media-text {"mediaId":1219,"mediaLink":"http://localhost:10004/photo-of-people-standing-on-top-of-mountain-near-grasses-733162-jpg-2/","mediaType":"image","mediaSizeSlug":"full","imageFill":true,"backgroundColor":"very-dark-gray","textColor":"very-light-gray"} --> <div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill has-very-light-gray-color has-very-dark-gray-background-color has-text-color has-background"><figure class="wp-block-media-text__media"><img src="http://localhost:10004/wp-content/uploads/2020/04/photo-of-people-standing-on-top-of-mountain-near-grasses-733162.jpg" alt="" class="wp-image-1219 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","textColor":"very-light-gray","fontSize":"small"} --> <p class="has-very-light-gray-color has-text-color has-small-font-size">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <!-- /wp:paragraph --> <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"space-between"}} --> <div class="wp-block-buttons"><!-- wp:button {"gradient":"vivid-cyan-blue-to-vivid-purple","width":100} --> <div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-vivid-cyan-blue-to-vivid-purple-gradient-background has-background" href="#">View Activity</a></div> <!-- /wp:button --></div> <!-- /wp:buttons --></div></div> <!-- /wp:media-text -->' ) ); } add_action( 'init', 'reg_block_patterns' );

Une fois cela fait, vous pouvez alors visiter votre page ou publier et en naviguant vers la section des modèles, vous aurez une vue du nouveau modèle dans la section "En vedette", comme illustré ci-dessous :

Enregistrement d'une catégorie de motifs

WordPress fournit certaines catégories de modèles par défaut que vous pouvez utiliser lors de l'enregistrement de modèles. Ceux-ci incluent : Boutons, Colonnes, Galerie, En-têtes, Texte, Requête et En vedette.

Lors de l'enregistrement de modèles de blocs, une meilleure approche consisterait à enregistrer des modèles dans des catégories personnalisées. Pour ce faire, vous devrez d'abord enregistrer une catégorie de motifs.

Afin d'enregistrer une catégorie de motifs, vous devrez ajouter le code suivant dans le fichier functions.php de votre thème enfant.

 function register_category_pattern() { register_block_pattern_category( 'custom', array( 'label' => __( 'Custom', 'my-plugin' ) ) ); } add_action( 'init', 'register_category_pattern' );

Vous pouvez modifier le libellé de la catégorie selon vos préférences. Dans l'exemple de code ci-dessus, nous utilisons le libellé de catégorie "Personnalisé".

Pour que la catégorie de modèle personnalisé s'affiche sur votre page ou publication, vous devez l'associer à un modèle. Dans notre cas ici, nous allons modifier le code d'enregistrement du modèle d'origine pour tenir compte de cette catégorie de modèle. Pour ce faire, recherchez cette ligne de code :

 'categories' => array( 'featured' ),

Vous devrez ensuite modifier la catégorie en place, qui est "présentée" en "personnalisée", afin que le code se lise maintenant comme suit :

 'categories' => array( 'custom' ),

Le code final pour enregistrer le modèle et la catégorie de modèle dans notre cas se lirait comme suit :

 function reg_block_patterns() { register_block_pattern( 'my-plugin/media-text-pattern', array( 'title' => __( 'Media and Text custom Pattern', 'my-event-pattern'), 'description' => _x( 'This pattern contains a media text block and button you can use for an event banner', 'event pattern' ), 'categories' => array( 'custom' ), 'content' => '<!-- wp:media-text {"mediaId":1219,"mediaLink":"http://localhost:10004/photo-of-people-standing-on-top-of-mountain-near-grasses-733162-jpg-2/","mediaType":"image","mediaSizeSlug":"full","imageFill":true,"backgroundColor":"very-dark-gray","textColor":"very-light-gray"} --> <div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill has-very-light-gray-color has-very-dark-gray-background-color has-text-color has-background"><figure class="wp-block-media-text__media"><img src="http://localhost:10004/wp-content/uploads/2020/04/photo-of-people-standing-on-top-of-mountain-near-grasses-733162.jpg" alt="" class="wp-image-1219 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","textColor":"very-light-gray","fontSize":"small"} --> <p class="has-very-light-gray-color has-text-color has-small-font-size">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <!-- /wp:paragraph --> <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"space-between"}} --> <div class="wp-block-buttons"><!-- wp:button {"gradient":"vivid-cyan-blue-to-vivid-purple","width":100} --> <div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-vivid-cyan-blue-to-vivid-purple-gradient-background has-background" href="#">View Activity</a></div> <!-- /wp:button --></div> <!-- /wp:buttons --></div></div> <!-- /wp:media-text -->' ) ); } add_action( 'init', 'reg_block_patterns' ); function register_pattern_categories() { register_block_pattern_category( 'custom', array( 'label' => __( 'Custom', 'my-plugin' ) ) ); } add_action( 'init', 'register_pattern_categories' );

Une fois que vous accédez maintenant à votre page ou à votre publication et que vous essayez d'y ajouter un modèle, le modèle sera rendu dans notre nouvelle catégorie "Personnalisé" comme indiqué ci-dessous :

Via le répertoire des modèles

Dans le cas où vous souhaitez créer un modèle accessible à tous dans l'écosystème WordPress, vous pouvez désormais y parvenir à partir du répertoire des modèles.

Lors de l'accès au répertoire des modèles, vous devrez effectuer les opérations suivantes :

i) Connectez-vous au répertoire des modèles.

ii) Cliquez sur le lien "Créer un nouveau motif".

iii) Sur l'écran suivant, ajoutez le titre de votre modèle et commencez à ajouter les blocs souhaités. Vous devez ajouter au moins un minimum de trois blocs.

iv) Une fois l'ajout de bloc terminé, vous pouvez ensuite enregistrer le motif en tant que brouillon.

v) Ensuite, vérifiez que votre modèle n'enfreint pas les directives décrites ici : Directives relatives aux modèles. Si tout va bien, vous pouvez soumettre le modèle.

Vous pouvez voir les modèles que vous avez mis en place en cliquant sur le lien "mes modèles" illustré ici :

Les modèles rendus dans la section "mes modèles" sont ceux qui sont des brouillons, des modèles que vous avez soumis et des modèles en attente de révision.

vi) Vous pouvez ensuite copier le nouveau bloc et le coller sur votre page ou publication.

Comment créer un plugin de modèles de blocs personnalisés

Au lieu d'avoir le code pour enregistrer votre modèle et votre catégorie dans votre fichier functions.php, vous pouvez choisir d'avoir un plugin personnalisé qui peut être utilisé pour ajouter des modèles et des catégories de modèles. Pour ce faire, vous devrez effectuer les opérations suivantes :

i) Accédez aux fichiers de votre site Web via votre panneau d'hébergement ou alternativement via FTP à l'aide d'un logiciel FTP tel que Filezilla

ii) Accédez au chemin du répertoire wp-content > plugins

iii) Dans le répertoire des plugins, créez un dossier nommé « custom-patterns »

iv) Dans le dossier, créez un fichier nommé custom-patterns.php

v) Ajoutez le commentaire d'en-tête suivant dans le fichier :

 <?php /** * Plugin Name: Custom Patterns * Description: Adds a custom block pattern and category * Version: 1.1.0 * Requires at least: 6.0 * Requires PHP: 7.4 * Author: John Chris * License: GPL v2 or later * Text Domain: custom-patterns */

Vous pouvez personnaliser le commentaire d'en-tête ci-dessus pour qu'il corresponde au nom de plug-in souhaité.

vi) Sous le commentaire d'en-tête, ajoutez votre code pour enregistrer le modèle et la catégorie. Dans notre cas ici, nous utiliserons le code que nous avions créé précédemment pour enregistrer notre modèle et notre catégorie personnalisée. Le code final sera donc :

 <?php /** * Plugin Name: Custom Patterns * Description: Adds a custom block pattern and category * Version: 1.1.0 * Requires at least: 6.0 * Requires PHP: 7.4 * Author: John Chris * License: GPL v2 or later * Text Domain: custom-patterns */ function reg_block_patterns() { register_block_pattern( 'my-plugin/media-text-pattern', array( 'title' => __( 'Media and Text custom Pattern', 'my-event-pattern'), 'description' => _x( 'This pattern contains a media text block and button you can use for an event banner', 'event pattern' ), 'categories' => array( 'custom' ), 'content' => '<!-- wp:media-text {"mediaId":1219,"mediaLink":"http://localhost:10004/photo-of-people-standing-on-top-of-mountain-near-grasses-733162-jpg-2/","mediaType":"image","mediaSizeSlug":"full","imageFill":true,"backgroundColor":"very-dark-gray","textColor":"very-light-gray"} --> <div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill has-very-light-gray-color has-very-dark-gray-background-color has-text-color has-background"><figure class="wp-block-media-text__media"><img src="http://localhost:10004/wp-content/uploads/2020/04/photo-of-people-standing-on-top-of-mountain-near-grasses-733162.jpg" alt="" class="wp-image-1219 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","textColor":"very-light-gray","fontSize":"small"} --> <p class="has-very-light-gray-color has-text-color has-small-font-size">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <!-- /wp:paragraph --> <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"space-between"}} --> <div class="wp-block-buttons"><!-- wp:button {"gradient":"vivid-cyan-blue-to-vivid-purple","width":100} --> <div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-vivid-cyan-blue-to-vivid-purple-gradient-background has-background" href="#">View Activity</a></div> <!-- /wp:button --></div> <!-- /wp:buttons --></div></div> <!-- /wp:media-text -->' ) ); } add_action( 'init', 'reg_block_patterns' ); function register_pattern_categories() { register_block_pattern_category( 'custom', array( 'label' => __( 'Custom', 'my-plugin' ) ) ); } add_action( 'init', 'register_pattern_categories' );

vii) Dans votre liste de plugins dans le tableau de bord, vous devriez maintenant avoir une vue du plugin à partir de la liste des plugins. Cliquez sur le lien d'activation à côté du nom du plugin afin d'activer le plugin

viii) Une fois activé, vous devriez maintenant avoir une vue du modèle de bloc et de la catégorie personnalisée dans l'éditeur de blocs comme indiqué ci-dessous :

Annulation de l'enregistrement des modèles de bloc

Il est possible de supprimer des motifs de blocs que vous enregistrez. Si par exemple vous souhaitez supprimer le modèle de bloc « my-plugin/media-text-pattern » que nous avions précédemment enregistré, vous devrez ajouter le code suivant dans le fichier functions.php du thème enfant :

 function deregister_my_pattern() { unregister_block_pattern( 'my-plugin/media-text-pattern' ); } add_action( 'init', 'deregister_my_pattern' );

Dans le code ci-dessus, vous devrez remplacer "my-plugin/media-text-pattern" par le nom du pattern que vous avez enregistré.

Annulation de l'enregistrement des catégories de modèles de bloc

Si vous souhaitez uniquement désinscrire une catégorie de pattern et conserver le pattern lui-même, vous devrez ajouter le code suivant dans le fichier functions.php du thème enfant :

 function deregister_pattern_category() { unregister_block_pattern_category( 'custom'); } add_action( 'init', 'deregister_pattern_category');

Le code ci-dessus désenregistre la catégorie "personnalisée" que nous avions précédemment ajoutée. Vous devrez remplacer "personnalisé" par la catégorie que vous aviez enregistrée.

Conclusion

Dans cet article, nous avons examiné ce que sont les modèles de blocs, comment les utiliser, ainsi que l'enregistrement et le désenregistrement des modèles de blocs et des catégories. Les modèles de blocs sont essentiels lors de la conception de votre site Web avec l'éditeur de blocs. Ils facilitent la conception de pages et de publications dynamiques sur votre site Web avec peu d'effort.

Nous espérons que cet article fournira des informations pertinentes sur la façon d'utiliser les modèles de blocs sur votre site Web. Si vous avez des questions ou des commentaires, n'hésitez pas à faire une soumission dans la section des commentaires ci-dessous.