Comment construire des compositions de blocs WordPress

WordPress est un puissant outil de publication en ligne qui permet à chacun de créer et de partager facilement du contenu textuel et/ou multimédia. Mais au-delà, c’est aussi un excellent outil professionnel pour les concepteurs, les spécialistes du marketing et les développeurs, quels que soient leurs antécédents et leurs compétences.

En bref, WordPress peut être votre coéquipier le plus précieux et vous aider à réussir dans de nombreuses professions.

Dans cette optique, nous avons publié sur ce blog une série d’articles pour vous aider à acquérir les compétences nécessaires pour devenir développeur WordPress :

• Comment construire des blocs Gutenberg personnalisés.
• Comment créer des blocs dynamiques pour Gutenberg
• Comment ajouter des boîtes méta et des champs personnalisés aux articles dans Gutenberg ?

Et pour ceux qui préfèrent le contenu vidéo, nous avons également un cours vidéo gratuit : Développement de blocs personnalisés pour Gutenberg.

Et oui, vous pouvez booster vos attentes professionnelles avec des compétences en développement Gutenberg, mais vous n’avez pas forcément besoin d’être développeur pour créer des mises en page avancées sur votre site WordPress.

Les utilisateurs de WordPress peuvent profiter de puissantes fonctionnalités qui leur permettent de créer facilement des mises en page de blocs avancées, sans aucun souci. Dans cet article, nous allons concentrer notre attention sur les compositions de blocs.

Qu’est-ce qu’une composition de bloc ?

Les compositions de blocs sont des groupes de blocs pré-construits que vous pouvez ajouter à votre contenu et personnaliser à l’aide des mêmes outils de conception que ceux disponibles pour les blocs inclus.

Elles ont été introduites pour la première fois avec WordPress 5.5 pour permettre aux administrateurs de sites et aux créateurs de contenu d’inclure des structures complexes prêtes à l’emploi de blocs imbriqués dans leur contenu en seulement quelques clics.

WordPress fournit d’emblée quelques compositions de blocs intégrées parmi lesquelles vous pouvez choisir pour créer votre contenu. En outre, les thèmes basés sur des blocs fournissent généralement d’autres composition de blocs que vous pouvez ajouter à votre contenu directement à partir de l’outil d’insertion de blocs.

Par exemple, le thème par défaut actuel, Twenty Twenty-Three, propose les compositions de blocs suivantes :

• Appel à l’action
• Pied de page par défaut
• 404 masqué
• Commentaires masqués
• Contenu masqué sans résultats
• Méta de l’article

Et vous n’êtes pas limité aux compositions fournies par WordPress ou par votre thème.

Tout d’abord, vous trouverez des tonnes de compositions de blocs prêtes à l’emploi dans le répertoire officiel des compositions de WordPress.

De plus, vous pouvez créer un nombre illimité de compositions personnalisées en utilisant l’API des compositions ou les outils d’édition disponibles dans l’éditeur de blocs. Vous pouvez utiliser les compositions personnalisées en interne sur votre site web, les exporter vers d’autres sites web ou les partager publiquement sur le répertoire des compositions.

Depuis WordPress 6.3, un tout nouveau système de compositions rend le processus de création de comppositions plus flexible et plus simple. Il est maintenant plus clair quel type de mise en page vous construisez et quel effet vos personnalisations ont sur l’ensemble de votre site web.

Vous vous demandez comment fonctionne ce système et comment profiter des nouvelles fonctions d’édition ajoutées à WordPress 6.3 ? Plongeons dans le vif du sujet.

Compositions de blocs pré-construites

Les compositions pré-construites sont des compositions de blocs « non synchronisées », ce qui signifie que les modifications apportées à une composition de bloc n’affecteront que l’instance spécifique que vous êtes en train de modifier et ne seront pas appliquées à toute autre instance que vous auriez pu ajouter à d’autres articles ou pages de votre site web.

Vous pouvez utiliser des compositions pré-construites pour inclure des mises en page de blocs que vous personnaliserez sur place, en changeant les images, le texte, les styles ou en ajoutant/supprimant des éléments.

Les compositions de blocs sont réutilisables, ce qui signifie qu’une fois que vous avez créé votre composition de bloc personnalisée, vous pouvez l’ajouter n’importe où sur votre site web et la personnaliser en quelques clics à l’aide des commandes intégrées de l’éditeur.

Vous pouvez parcourir et insérer des compositions de blocs pré-construites à partir de l’onglet Compositions de l’Insertion de blocs, naviguer vers la section d’administration des compositions dans l’Éditeur de site, ou le répertoire des compositions via le bouton Explorer toutes les compositions dans l’outil d’insertion de blocs.

Vous trouverez des tonnes de compositions dans l’onglet Compositions de l’insertion de blocs, ou vous pourres explorer la bibliothèque de compositions de blocs directement depuis l’interface de l’éditeur.

Vous pouvez aussi vous rendre sur le site des compositions de blocs, choisir une composition et cliquer sur Copier.

Une fois que vous avez copié une composition, collez-là dans votre contenu et vous avez terminé.

Vous pouvez personnaliser le groupe de blocs inclus dans la composition sans affecter la composition enregistrée ou toute instance supplémentaire de celle-ci sur votre site.

Compositions de blocs personnalisées

Comme nous l’avons mentionné plus haut, avec WordPress 6.3, le système de compositions a été rationalisé et est devenu plus cohérent.

Il est désormais plus facile pour l’utilisateur de créer des compositions personnalisées directement depuis l’éditeur de blocs et de les gérer depuis le tableau de bord de WordPress sans avoir à s’occuper du code.

Vous pouvez maintenant construire :

• Des compositions de blocs synchronisées
• Des compositions de blocs standards

La différence entre ces deux types de modèles est que toutes les modifications apportées à une composition synchronisée seront appliquées à chaque occurrence de ce bloc sur l’ensemble de votre site web.

À l’inverse, les modifications apportées à une composition de bloc standard (non synchronisée) n’affecteront que cette instance spécifique de la composition et ne s’appliqueront pas aux autres instances que vous avez pu ajouter à d’autres articles ou pages de votre site web.

Du point de vue du développeur, les compositions de blocs personnalisées sont enregistrées dans la base de données de WordPress en tant que types de publications personnalisés wp_block, et un champ méta wp_block_sync_status stocke l’état de synchronisation d’une composition.

Grâce au nouveau système de gestion des compositions, vous pouvez désormais créer des compositions de blocs synchronisées et non synchronisées directement à partir de l’éditeur du site ou de l’article. Il vous suffit de concevoir votre composition de blocs, de sélectionner les blocs et de cliquer sur l’icône des trois points dans la barre d’outils des blocs. Choisissez ensuite Créer une composition/un bloc réutilisable dans le menu déroulant.

Dans l’exemple ci-dessous, nous créons une composition synchronisée à partir d’un bloc Groupe, d’un titre, d’un paragraphe, d’un bouton et de quelques espaceurs.

Lorsque vous cliquez sur Créer une composition/un bloc réutilisable, vous êtes invité à donner un nom à votre composition et à décider s’il s’agit d’une composition synchronisée ou non.

Et c’est tout. Votre composition synchronisée est maintenant répertoriée dans la section d’administration des compositions de l’éditeur de site, sous Mes compositions.

Ici, vous pouvez prévisualiser vos compositions et vérifier l’état de la synchronisation des compositions.

Vous pouvez ensuite lancer l’éditeur de compositions et personnaliser votre composition de bloc.

Encore une fois, les modifications apportées aux compositions synchronisées affectent toutes les occurrences de cette compositions sur votre site web. Les modifications apportées aux compositions standard n’affecteront que les instances futures de la composition.

Cela est possible parce que WordPress gère les deux types de compositions différemment. Pour comprendre la différence, créez un nouvel article et ajoutez deux compositions de blocs, l’une synchronisée et l’autre standard. Allez ensuite dans l’éditeur de code et vérifiez le code.

Le bloc synchronisé est généré par le code suivant :

<!-- wp:block {"ref":94} /-->

WordPress va chercher l’article avec l’ID 94 pour générer le HTML à afficher à l’écran.

Le bloc standard (non synchronisé) n’est pas identifié par un identifiant. Dans ce cas, l’éditeur de code contient l’ensemble du balisage des blocs qui composent la composition.

Les compositions synchronisées sont particulièrement utiles pour construire des éléments que vous pouvez vouloir inclure sur plusieurs pages de vote site et/ou sur différents sites. Pensez aux appels à l’action, aux bannières promotionnelles, aux tableaux de prix, etc.

Dans l’insertion de blocs, les compositions de blocs personnalisés sont répertoriées dans deux onglets distincts. Les compositions standards sont répertoriées dans l’onglet Composition, dans la catégorie Mes compositions.

Les compositions synchronisés sont répertoriées dans l’onglet Compositions synchronisées (anciennement Blocs réutilisables).

Comme nous l’avons mentionné, WordPress considère les compositions de blocs personnalisées comme des types de publications wp_block et, à ce titre, les stocke dans la table wp_posts.

Une fois que vous avez créé vos compositions, vous pouvez les gérer à partir de l’écran d’administration des Compositions de blocs. Vous pouvez accéder à cette page de plusieurs façons :

• En ajoutant /wp-admin/edit.php?post_type=wp_block à l’URL WordPress de votre site web.
• En cliquant sur le bouton Gérer mes compositions dans l’outil d’insertion de blocs.
• En cliquant sur le bouton Gérer Toutes mes compositions dans l’éditeur de site.

Une fois là, vous pouvez

• Modifier, mettre à la corbeille ou exporter votre composition au format JSON,
• Importer des compositions à partir de JSON,
• Créer de nouvelles compositions.

Toutes les modifications apportées à une composition synchronisée seront appliquées à chaque occurrence de cette composition sur l’ensemble de votre site web, quelle que soit la page d’administration où les modifications ont été apportées.

Parties de modèle

Avant l’ère Gutenberg, les thèmes et les modèles WordPress étaient principalement construits en PHP. De solides connaissances sur les thèmes enfants, la hiérarchie des modèles et les principaux langages de développement frontend étaient des exigences de base pour créer ou personnaliser des modèles. Mais les choses ont changé avec l’introduction des thèmes basés sur des blocs.

Dans les thèmes à base de blocs et les thèmes classiques qui ont opté pour cette fonctionnalité, vous pouvez facilement créer ou personnaliser un modèle ou une partie de modèle dans l’interface de l’éditeur de site. Aucune compétence en matière de développement n’est requise, sauf si, bien sûr, vous décidez de devenir développeur de thème.

Un modèle de bloc est une liste d’éléments de bloc. Le titre du site, le logo et la navigation sont des exemples d’éléments de bloc.

Les parties de modèle sont des sections spécifiques d’une page qui peuvent être visualisées à plusieurs endroits, comme un en-tête et un pied de page, et qui peuvent être affichées sur chaque page de votre site WordPress.

Vous pouvez créer et modifier les parties de modèle via l’interface de l’éditeur de site, où vous pouvez utiliser tous les outils d’édition disponibles pour les blocs.

Mais contrairement aux modèles basés sur des blocs, les parties de modèles sont destinées aux zones du site qui ne changent pas fréquemment.

Différences entre les compositions pré-construites, les compositions personnalisées et les parties de modèle

Pour résumer, voici les principales différences entre les trois :

Compositions de blocs pré-construites

• Les compositions de blocs pré-construites sont des mises en page de blocs prédéfinies que vous pouvez ajouter à votre contenu et personnaliser à l’aide des mêmes outils que les blocs inclus. Les modifications apportées à une composition de bloc n’affecteront que cette seule instance de la composition de bloc.
• Vous pouvez copier et coller des compositions pré-construites à partir du répertoire des compositions.
• Vous pouvez créer de nouvelles compositions et les publier dans le répertoire des compositions.

Compositions de blocs personnalisées

• Les compositions de blocs personnalisées sont des groupes de blocs synchronisés ou non synchronisés que vous pouvez utiliser sur n’importe quel article ou page de votre site.
• Les compositions de blocs personnalisées sont stockées dans la table wp_posts en tant que type de publication wp_block.
• Vous pouvez importer et exporter des compositions de blocs personnalisées depuis et vers d’autres sites web.

Parties de modèle

• Les parties de modèle sont des zones spécifiques d’une page qui peuvent être affichées à plusieurs endroits, notamment dans l’en-tête, le pied de page et la colonne latérale, de façon récurrente sur plusieurs pages de votre site WordPress.
• Vous pouvez créer et modifier les parties de modèle par le biais de l’interface de l’éditeur de site.
• Les parties de modèle sont destinées aux zones du site qui ne changent pas fréquemment.

Comment créer des compositions de blocs pour les thèmes et les plugins ?

Comme nous l’avons mentionné précédemment, WordPress 6.3 a introduit un nouveau système de gestion des compositions de blocs. Il est désormais plus facile de créer des compositions de blocs synchronisées ou non sans quitter l’interface de l’éditeur. Et vous pouvez aussi importer et exporter des compositions personnalisés en quelques clics depuis votre tableau de bord WordPress.

Mais WordPress propose également d’autres moyens de créer des compositions de blocs pour les développeurs de thèmes et d’extensions.

Parallèlement à la fonctionnalité des compositions de blocs, WordPress 5.5 a introduit une nouvelle API pour les développeurs afin de « créer des blocs de contenu pré-conçus qui peuvent être facilement insérés dans les articles, les pages, les types de publication personnalisés et les modèles ». La nouvelle API propose les fonctions register_block_pattern et register_block_pattern_category pour enregistrer les compositions de blocs et les catégories de compositions.

À partir de WordPress 6.0, vous pouvez également enregistrer des compositions de blocs avec un fichier PHP.

Ainsi, à l’heure où nous écrivons ces lignes, vous avez deux façons de créer une composition de bloc.

• En utilisant la fonction d’aide register_block_pattern,
• En ajoutant un fichier PHP à votre thème dans un dossier de composition.

Créer une composition de bloc avec un plugin

La première méthode est principalement destinée aux développeurs WordPress, mais elle est suffisamment simple pour être utilisée également par des développeurs non avancés.

Si vous décidez d’opter pour la première méthode, vous pouvez créer une composition de bloc en utilisant les deux nouvelles fonctions register_block_pattern et register_block_pattern_category dans le fichier PHP d’une extension ou dans le fichier functions.php de votre thème.

Sélectionner ou enregistrer une catégorie de composition

Tout d’abord, choisissez une catégorie pour votre composition. Avec WordPress 6.2, de nouvelles catégories de compositions ont été ajoutées et certaines catégories existantes ont été modifiées. Au moment où nous écrivons ces lignes, vous pouvez utiliser les catégories intégrées suivantes :

• Mises en avant (featured)
• Articles (posts)
• Texte (text)
• Galerie (gallery)
• Appel à l’action (call-to-action)
• Bannières (banner)
• En-têtes (header)
• Pieds de page (footer)
• Équipe (team)
• Témoignages (testimonials)
• Services (services)
• Portfolio (portfolio)
• Médias (media)

Si votre composition de bloc n’entre dans aucune des catégories par défaut, vous pouvez également enregistrer une nouvelle catégorie à l’aide de la fonctionregister_block_pattern_category.

Cette fonction accepte deux arguments :

• $category_name: Le nom de la catégorie de la composition, y compris l’espace de noms.
• $category_properties: Un tableau de propriétés de la catégorie.

Un exemple vous aidera à mieux comprendre comment enregistrer une nouvelle catégorie de composition :

if ( function_exists( 'register_block_pattern_category' ) ) {
	function my_plugin_register_pattern_category() {
		register_block_pattern_category( 
			'my-pattern-category', 
			array(
				'label' => __( 'My Pattern Category', 'my-plugin-text-domain' ),
				'description' => __( 'Simple call to action with a header, an image, a paragraph, and a button.' ),
			)
		);
	}
	add_action( 'init', 'my_plugin_register_pattern_category' );
}

Enregistrer une composition de bloc

Une fois la catégorie de compositions enregistrée, l’étape suivante consiste à enregistrer la composition de bloc elle-même. Vous enregistrerez la composition de bloc à l’aide de la fonction d’aideregister_block_pattern en procédant comme suit :

function my_plugin_register_block_pattern() {
	register_block_pattern( 'prefix/pattern-name', $props );
}
add_action( 'init', 'my_plugin_register_block_pattern' );

Cette fonction prend deux arguments :

• $pattern_name: Un nom lisible par une machine sous la forme de namespace/pattern-name.
• $pattern_properties: Un tableau de propriétés pour la composition.

Voici une liste des propriétés de composition actuellement disponibles :

• title (obligatoire) : Un titre lisible par l’homme pour la composition.
• content (obligatoire) : Le balisage HTML de la composition.
• description: Un texte décrivant la composition dans l’outil d’insertion. Une description est facultative mais recommandée car elle aide les utilisateurs à trouver la composition.
• categories: Un tableau d’une ou plusieurs catégories de compositions enregistrées. Vous devez enregistrer une catégorie avant de pouvoir l’utiliser ici (voir la section précédente).
• keywords: Un tableau de mots-clés qui aident les utilisateurs à trouver la composition.
• viewportWidth: Un nombre entier spécifiant la largeur de la composition dans l’aperçu.
• blockTypes: Un tableau facultatif de types de blocs qui seront utilisés avec la composition.
• postTypes: Un tableau de types de publications qui seront autorisés à utiliser la composition.
• templateTypes: Un tableau des types de compositions pour lesquelles la composition a un sens (disponible depuis WordPress 6.2).
• inserter: Un booléen pour déterminer si la composition doit être visible dans l’insertion de blocs. Fixe la valeur à false pour masquer la composition. Par défaut, toutes les compositions apparaissent dans l’insertion de blocs.

Voici un exemple d’utilisation de register_block_pattern:

if ( function_exists( 'register_block_pattern' ) ) {
	function my_plugin_register_block_pattern() {
		register_block_pattern( 
			'my-plugin/my-block-pattern', 
			array(
				'title'			=> _x( 'My awesome pattern', 'Block pattern title', 'my-plugin-text-domain' ),
				'categories'	=> array( 'my-pattern-category' ),
				'postTypes'		=> array( 'post' ),
				'content'		=> '<!-- wp:paragraph --><p>My awesome block pattern</p><!-- /wp:paragraph -->'
			) 
		);
	}
	add_action( 'init', 'my_plugin_register_block_pattern' );
}

Dans ce code, nous avons utilisé la propriété postTypes pour limiter la disponibilité de la composition aux articles de blog ordinaires. Cependant, vous pouvez définir une valeur différente pour postTypes afin de le rendre accessible à différents types de publication. Par exemple, si vous avez un type de publication product et que vous souhaitez limiter la disponibilité de la composition à ce type spécifique, il vous suffit d’écrire :

'postTypes' => array( 'product' ),

Maintenant, créez un nouvel article (ou un type de publication personnalisé), ouvrez l’insertion de blocs et cliquez sur l’étiquette Compositions. Vous devriez trouver une nouvelle catégorie de composition (Mes catégories de compositions) avec votre composition de bloc personnalisée. N’hésitez pas à jouer avec les propriétés des compositions pour personnaliser vos compositions de blocs.

Maintenant, plongeons un peu plus profondément et essayons de construire un modèle de bloc du monde réel.

Un exemple concret de composition de bloc

Supposons que vous vouliez créer une composition de bloc comprenant un titre, une image, un paragraphe et un bouton.

Dans l’éditeur, créeez la mise en page de votre composition de bloc, puis passez à l’éditeur de code et copiez les balises.

Dans notre exemple, nous avons le code suivant :

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"240px"} -->
<div class="wp-block-column" style="flex-basis:240px"><!-- wp:image {"id":25,"sizeSlug":"full","linkDestination":"none","style":{"border":{"radius":{"topLeft":"16px"}}}} -->
<figure class="wp-block-image size-full has-custom-border"><img src="http://wordpress-block-patterns.local/wp-content/uploads/2023/05/placeholder.jpg" alt="" class="wp-image-25" style="border-top-left-radius:16px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"color":{"text":"#5831f6"}}} -->
<h4 class="wp-block-heading has-text-color" style="color:#5831f6">Your New Home for Modern Web Apps and Sites</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Kinsta is a Cloud Platform designed to help companies and dev teams ship and manage their web projects faster and more efficiently.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:buttons {"layout":{"type":"flex"}} -->
<div class="wp-block-buttons"><!-- wp:button {"textAlign":"center","textColor":"base","width":100,"style":{"color":{"background":"#5831f6"},"typography":{"fontSize":"1.36rem"},"border":{"radius":{"topLeft":"0px","topRight":"0px","bottomLeft":"16px","bottomRight":"16px"}}},"fontFamily":"inter"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size has-inter-font-family" style="font-size:1.36rem"><a class="wp-block-button__link has-base-color has-text-color has-background has-text-align-center wp-element-button" style="border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:16px;border-bottom-right-radius:16px;background-color:#5831f6"><strong>View Plans</strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

Vous pouvez maintenant optimiser ce code. Si vous enregistrez la composition de bloc avec une extension, vous devez modifier l’URL de l’image comme suit :

esc_url( plugin_dir_url( __FILE__ ) . 'images/placeholder.jpg' )

De cette façon, WordPress ne cherchera pas l’image dans les téléversements, mais dans le dossier images de votre extension.

Vous pouvez ensuite utiliser la propriété viewportWidth pour fournir un meilleur aperçu de la composition dans l’insertion de blocs :

'viewportWidth' => 800,

.

Vous pouve aussi inclure un ensemble de mots-clés pour aider les utilisateurs à trouver votre composition de bloc :

'keywords' => array( 'cta', 'demo', 'kinsta' ),

Une autre option pour aider les utilisateurs à trouver le bloc dans les recherches consiste à ajouter un tableau de types de blocs :

'blockTypes' => array( 'core/button' ),

De cette façon, lacomposition de bloc apparaîtra dans les suggestions lorsqu’un utilisateur recherchera l’un des blocs spécifiés.

La propriété postTypes permet de rendre la composition de bloc uniquement disponible pour des types de publication spécifiques. Par exemple, vous pouvez rendre la composition visible uniquement pour le type de publication product:

'postTypes' => array( 'product' ),

Enfin, vous pouvez ajouter une classe CSS à l’enveloppe de votre composition de bloc.

Pour cela, vous devez créer un nouveau groupe avec l’attribut className:

<!-- wp:group {"className":"my-css-class","layout":{"type":"constrained"}} -->
<div class="wp-block-group my-css-class">
	<!-- Your blocks -->
</div>
<!-- /wp:group -->

Notez que vous devez ajouter le même nom de classe à l’élément suivant div.

Pour en savoir plus sur les compositions de blocs et obtenir d’autres exemples de code, consultez également les compositions de blocs dans le manuel des thèmes de WordPress.org.

Création d’une composition de bloc avec un fichier

Comme mentionné ci-dessus, WordPress 6.0 a introduit une nouvelle façon plus facile d’ajouter des compositions de blocs à vos thèmes WordPress. Vous pouvez maintenant enregistrer implicitement des compositions de blocs en les déclarant comme des fichiers PHP dans un dossier /patterns à la racine de votre thème.

Disons que vous voulez enregistrer implicitement la même composition de bloc construite dans la section précédente dans votre thème basé sur des blocs. Dans cet exemple, nous utiliserons le thème Twenty Twenty-Three.

Vous pouvez définir les mêmes réglages qu’avec la méthode précédente mais les inclure dans un commentaire dans l’en-tête du fichier. De plus, au lieu d’utiliser des noms de réglages en camelCase, vous séparerez les mots par un espace, et au lieu de tableaux, vous utiliserez des éléments de liste séparés par des virgules.

Tout d’abord, désactivez l’extension que vous avez utilisé pour enregistrer la composition dans l’exemple précédent. Ensuite, créez un nouveau fichier my-block-pattern.php et incluez l’en-tête suivant :

<?php
/**
 * Title: My awesome pattern
 * Slug: twentytwentythree/my-block-pattern
 * Post Types: post
 * Categories: featured, banner
 * Viewport Width: 800
 * Keywords: Call to action, Kinsta
 * Block Types: core/buttons
 */
?>

Ensuite, vous ajouterez le contenu à votre composition de bloc. Vous pouvez utiliser le même balisage que dans notre exemple précédent, mais d’abord, vous devrez le modifier un peu :

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"240px"} -->
<div class="wp-block-column" style="flex-basis:240px"><!-- wp:image {"id":25,"sizeSlug":"full","linkDestination":"none","style":{"border":{"radius":{"topLeft":"16px"}}}} -->
<figure class="wp-block-image size-full has-custom-border"><img src="<?php echo esc_url( get_theme_file_uri( 'assets/images/placeholder.jpg' ) ); ?>" alt="" class="wp-image-25" style="border-top-left-radius:16px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"color":{"text":"#5831f6"}}} -->
<h4 class="wp-block-heading has-text-color" style="color:#5831f6">Your New Home for Modern Web Apps and Sites</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Kinsta is a Cloud Platform designed to help companies and dev teams ship and manage their web projects faster and more efficiently.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:buttons {"layout":{"type":"flex"}} -->
<div class="wp-block-buttons"><!-- wp:button {"textAlign":"center","textColor":"base","width":100,"style":{"color":{"background":"#5831f6"},"typography":{"fontSize":"1.36rem"},"border":{"radius":{"topLeft":"0px","topRight":"0px","bottomLeft":"16px","bottomRight":"16px"}}},"fontFamily":"inter"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size has-inter-font-family" style="font-size:1.36rem"><a class="wp-block-button__link has-base-color has-text-color has-background has-text-align-center wp-element-button" style="border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:16px;border-bottom-right-radius:16px;background-color:#5831f6"><strong><?php echo __( 'View plans', 'text-domain' ); ?></strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

Le balisage est essentiellement inchangé par rapport à l’exemple précédent. Nous n’avons apporté que deux changements.

L’URL de l’image de remplacement est maintenant générée par la fonctionget_theme_file_uri :

<?php echo esc_url( get_theme_file_uri( 'assets/images/placeholder.jpg' ) ); ?>

Bien sûr, vous devez d’abord avoir placé l’image placeholder.jpg dans le dossier /assets/images de votre thème.

L’instruction suivante génère le texte que vous voulez traduire.

<?php echo __( 'View plans', 'text-domain' ); ?>

Sauvegardez maintenant votre fichier et créez un nouvel article. Votre composition de bloc devrait apparaître dans les catégories Mises en avant et Bannières.

Supprimer la prise en charge, annuler l’enregistrement et masquer les compositions de blocs

Dans certains scénarios, vous pouvez vouloir effectuer des actions spéciales sur les compositions de blocs. Par exemple, vous pouvez vouloir remplacer une composition de bloc principale par une composition de bloc qui vous est propre ou dé-senregistrer une catégorie sous certaines conditions. Voici les opérations que vous pouvez effectuer.

1. Supprimer la prise en charge de tous les blocs de base

Tout d’abord, les développeurs de thèmes peuvent supprimer la prise en charge des compositions de blocs de base et fournir leur propre ensemble de composition. Pour supprimer la prise en charge des compositions de base, vous pouvez utiliser la fonctionremove_theme_support de cette façon :

remove_theme_support( 'core-block-patterns' );

Il est recommandé d’attacher la fonction remove_theme_support au crochetafter_setup_theme .

2. Annuler l’enregistrement d’une seule composition de bloc

Vous pouvez également annuler l’enregistrement d’une composition de bloc spécifique au cas où vous voudriez fournir une alternative personnalisée ou que vous ne vouliez pas qu’elle soit utilisée avec votre thème.

L’API Patterns fournit la fonctionunregister_block_pattern pour cela :

function my_theme_unregister_block_pattern() {
	unregister_block_pattern( 'namespace/block-pattern-name' );
}
add_action( 'init', 'my_theme_unregister_block_pattern' );

Dans le cas où vous pouvez aussi désenregistrer une composition de bloc central, vous utiliserez ce qui suit :

function my_theme_unregister_block_pattern() {
	unregister_block_pattern( 'core/query-offset-posts' );
}
add_action( 'init', 'my_theme_unregister_block_pattern' );

Vous utiliserez unregister_block_pattern avec le crochet init.

3. Annuler l’enregistrement d’une catégorie de composition de bloc

Vous pouvez également annuler l’enregistrement d’une catégorie de composition, en insérant la fonction unregister_block_pattern_category dans le crochet init:

function my_theme_unregister_block_pattern_categories() {
	unregister_block_pattern_category( 'pattern-category-name' );
}
add_action( 'init', 'my_theme_unregister_block_pattern_categories' );

Construire et partager des compositions de blocs avec le créateur de compositions

Vous pouvez aussi créer vos compositions et les partager avec la communauté grâce à un outil en ligne gratuit : The Pattern Creator.

Si vous avez un compte WordPress.org, vous pouvez au Pattern Creator à partir du répertoire des compositions.

Une fois sur place, cliquez sur Créer une nouvelle composition. Cela lancera une version de l’éditeur de blocs spécifique aux compositions, que vous pourrez utiliser pour créer vos compositions de blocs.

Vous pouvez aussi utiliser des images gratuites hébergées par la bibliothèque Openverse.

Une fois que vous êtes satisfait de vos modifications, vous pouvez enregistrer le brouillon ou envoyer la composition pour révision.

Vous pouvez ensuite retourner dans le répertoire Compositions et sélectionner Mes compositions. Là, vous trouverez toutes vos compositions dans trois onglets en conséquence : Tous, Brouillons et En attente de révision.

Lorsque vous avez terminé vos modifications, vous pouvez partager votre composition avec la communauté. Cliquez sur le bouton Envoyer dans le coin supérieur droit de l’éditeur pour envoyer la composition à la révision (assurez-vous de suivre les directives relatives aux compositions avant d’envoyer votre composition).

Résumé

WordPress a eu 20 ans et les statistiques nous indiquent qu’il est toujours le CMS le plus utilisé au monde, avec une part de marché de 63,3 % en mai 2023.

Ces chiffres prouvent que WordPress est un excellent outil de publication utilisé par des milliers de professionnels, de développeurs et de simples blogueurs dans le monde entier.

Consacrer du temps et des ressources à l’acquisition de nouvelles compétences en matière de développement WordPress et à l’apprentissage de fonctionnalités avancées telles que les blocs personnalisés et les compositions de blocs pourrait être un excellent investissement pour votre carrière de marketeur, de concepteur de sites web ou d’éditeur.

Et maintenant, à vous de jouer. Avez-vous créé des compositions de blocs ? En avez-vous partagé avec la communauté ? Nous serions ravis de voir vos créations. Laissez un commentaire avec un lien ou vos réflexions sur les compositions de blocs.

Carlo Daniele Kinsta

Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.

• Site Web
• Twitter