Comment construire des compositions de blocs WordPress

WordPress est un puissant outil de publication en ligne qui permet à quiconque de créer et de partager facilement du contenu textuel et/ou multimédia. Mais au-delà de cela, 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 un grand nombre de professions.

C’est dans cette optique que nous avons publié une série d’articles sur ce blog afin de vous aider à acquérir les compétences nécessaires pour devenir un développeur WordPress :

• Comment construire des blocs Gutenberg personnalisés
• Comment créer des blocs dynamiques pour Gutenberg
• Comment ajouter des Meta Boxes 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 nécessairement besoin d’être un 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és sans aucun problème. Dans cet article, nous allons concentrer notre attention sur les compositions de blocs.

Qu’est-ce qu’une composition modèle de bloc ?

Les compositions blocs sont des groupes de blocs pré-construits que vous pouvez ajouter à votre contenu et personnaliser en utilisant les 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 quelques clics seulement.

Les thèmes de blocs fournissent généralement quelques modèles de blocs que vous pouvez ajouter à votre contenu directement à partir de l’insertion de blocs. Le nouveau thème par défaut fourni avec WordPress 6.7, Twenty Twenty-Five, comprend plus de 70 compositions de blocs.

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

Tout d’abord, vous trouverez des tonnes de compositions de blocs prêtes à l’emploi dans la galerie officielle des compositions  de WordPress.

De plus, vous pouvez créer un nombre illimité de compositions 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 la galerie de compositions.

Depuis WordPress 6.3, un tout nouveau système de compositions rend le processus de création de modèles plus flexible et plus simple. Il est désormais plus facile de savoir quel type de mise en page vous construisez et quel effet vos personnalisations ont sur votre site web.

Il existe deux types principaux de compositions de blocs :

• Compositions de blocs synchronisés
• Compositions de blocs standard (non synchronisés)

La principale différence entre les deux types est que toutes les modifications apportées à une composition synchronisée s’appliquent à toutes les occurrences de la composition sur l’ensemble de votre site web. En revanche, les modifications apportées à une composition de bloc standard n’affectent qu’une instance spécifique de la composition.

Mais il y a bien d’autres choses à dire sur les blocs de compositions. Vous vous demandez comment fonctionne ce système et comment tirer parti des nouvelles fonctionnalités d’édition ajoutées dans les versions les plus récentes de WordPress ? Nous allons nous plonger dans le vif du sujet.

Compositions de blocs pré-construites

Les compositions pré-construits sont des compositions de blocs « non synchronisées », ce qui signifie que les modifications que vous apportez à une composition de bloc n’affecteront que l’instance spécifique que vous êtes en train d’éditer et ne s’appliqueront pas aux autres instances que vous avez 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 pouvez personnaliser sur place, en modifiant les images, le texte, les styles ou en ajoutant/supprimant des éléments.

Une fois que vous avez créé une composition de bloc personnalisé, 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 modèles de blocs prédéfinis à partir de l’onglet Modèles dans l’Inséreur de blocs ou naviguer vers la section d’administration des Modèles dans l’Éditeur de site. Vous pouvez également découvrir de nouveaux modèles dans la Galerie des modèles.

Dans la galerie, vous pouvez choisir une composition, cliquer sur le bouton Copier la composition et le coller directement dans votre contenu.

Vous êtes libre de personnaliser le groupe de blocs inclus dans la composition sans affecter la composition enregistrée ou toute autre instance sur votre site web.

Compositions de blocs synchronisées et non synchronisées

Comme mentionné ci-dessus, 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 à partir de l’éditeur de blocs et de les gérer à partir du 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 non synchronisées

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

À l’inverse, les modifications apportées à une composition de bloc 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 publication personnalisés wp_block, et un champ méta wp_pattern_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 disposition de bloc, de sélectionner les blocs et de cliquer sur l’icône à trois points dans la barre d’outils des blocs. Choisissez ensuite Créer une composition 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 et d’un bouton.

Lorsque vous cliquez sur Créer une composition, vous êtes invité à indiquer le nom et les catégories de votre composition et à décider si elle est synchronisée ou non.

Et c’est tout. Votre composition synchronisée est désormais 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 bloc de compositions.

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

Ceci est possible parce que WordPress gère les deux types de compositions différemment. Pour comprendre la différence, créez une copie non synchronisée de votre composition personnalisée, puis créez un nouvel article ou une nouvelle page et ajoutez les deux compositions. Une fois cela fait, allez dans l’éditeur de code et vérifiez le code.

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

Cela signifie que WordPress va chercher l’article avec l’ID 512 pour générer le HTML à afficher à l’écran.

Le deuxième bloc n’est pas identifié par un identifiant. L’éditeur de code contient l’ensemble des balises qui composent la composition.

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

Comme nous l’avons mentionné, WordPress considère les compositions de blocs personnalisées comme des types de publication wp_block et, en tant que tels, 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. 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 Explorer toutes les compositions dans l’insertion de blocs.
• En cliquant sur le bouton Mes compositions dans l’éditeur de site.

Dans l’écran Compositions, vous pouvez

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

Dans l’éditeur de site, vous pouvez également dupliquer et renommer vos compositions.

Remplacements de compositions synchronisées

Introduit avec WordPress 6.6, le remplacement de compositions synchronisées est un troisième type de pattern qui tire parti de l’API Block Bindings pour obtenir les caractéristiques des deux types de compositions.

Les surcharges de compositions synchronisées vous permettent de construire des compositions de blocs qui conservent la même structure partout sur votre site web et qui changent en synchronisation avec les personnalisations apportées à la structure et au style de la composition dans l’éditeur de site. En cela, les remplacements de compositions sont similaires aux compositions synchronisées.

Cependant, les dérogations sont également similaires aux compositions non synchronisées car vous pouvez modifier le contenu de blocs spécifiques inclus dans la composition sans affecter les autres instances de la même composition sur le site.

Les substitutions de compositions sont donc des compositions synchronisées avec des éléments individuels non synchronisés.

Voyons maintenant comment créer une surcharge de composition.

Étape 1 : Allez dans Compositions et dupliquez l’une des compositions existantes, comme la composition Pricing, 2 colonnes du thème par défaut Twenty Twenty-Five. Ajoutez un nom et définissez la copie comme étant une composition synchronisée.

Étape 2 : Ouvrez Mes compositions et trouvez votre nouveau composition synchronisée. Ouvrez-la et sélectionnez l’un des blocs que vous devez remplacer, comme le bloc Heading.

Allez dans la colonne latérale des réglages des blocs et descendez jusqu’à la section Avancé. Vous y trouverez Activer les remplacements.

Lorsque vous cliquez sur le bouton, vous êtes invité à ajouter un nom pour la dérogation.

Étape 3 : répétez le même processus pour chaque bloc que vous souhaitez remplacer. Lorsque vous avez terminé, créez un nouvel article ou une nouvelle page et incluez votre composition personnalisée.

Étape 4 : Dans l’éditeur d’articles, modifiez le contenu des blocs à remplacer, enregistrez l’article et vérifiez le résultat sur le site.

Vous avez peut-être remarqué que lorsque vous modifiez une instance d’une composition de remplacement dans l’éditeur d’articles, la colonne latérale des réglages du bloc affiche les champs qui peuvent être modifiés. Dans l’exemple ci-dessus, nous avons rendu l’en-tête et certains paragraphes modifiables.

Vous pouvez ajouter n’importe quel nombre de substitutions de compositions n’importe où sur votre site web, et chaque instance affichera la même structure d’origine, mais sera prête pour votre personnalisation.

Ouvrez maintenant votre composition dans l’éditeur de site et passez à l’éditeur de code. Le code doit ressembler à ce qui suit :

<!-- wp:heading 
{
	"textAlign":"center",
	"metadata":{
		"name":"Heading",
		"bindings":{
			"__default":{
				"source":"core/pattern-overrides"
			}
		}
	},
	"align":"wide"
} 
-->
<h2 class="wp-block-heading alignwide has-text-align-center">Pricing</h2>
<!-- /wp:heading -->

<!-- wp:paragraph 
{
	"align":"center",
	"metadata":{
		"name":"Subtitle",
		"bindings":{
			"__default":{
				"source":"core/pattern-overrides"
			}
		}
	}
} 
-->
<p class="has-text-align-center">Cancel or pause anytime.</p>
<!-- /wp:paragraph -->

Dans le délimiteur de bloc, vous remarquerez la propriété metadata.bindings. Celle-ci rend les blocs Titre et Paragraphe modifiables. La propriété __default indique à WordPress de connecter tous les attributs pris en charge à une source spécifique, à savoir "core/pattern-overrides".

Maintenant, dans l’éditeur d’articles, passez à l’éditeur de code. Le code doit être similaire à ce qui suit :

<!-- wp:block 
{
	"ref":518,
	"content":{
		"Heading":{
			"content":"Choose your plan"
		},
		"Subtitle":{
			"content":"Try our services with no risk thanks to our 30-day guarantee"
		},
		"Plan 1 title":{
			"content":"Starter"
		},
		"Plan 2 title":{
			"content":"Business"
		}
	}
} 
/-->

Ici, vous verrez une référence à la composition de bloc et un ensemble de propriétés pour chaque bloc défini comme modifiable.

Notez que, comme les remplacements de compositions sont une implémentation de l’API Block Bindings, vous ne pouvez remplacer que les blocs pris en charge. À l’heure où nous écrivons ces lignes, les substitutions de composition prennent en charge les blocs d’en-tête, de paragraphe, d’image et de bouton.

Parties de la composition

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

Dans les thèmes en bloc et les thèmes classiques qui ont opté pour cette fonctionnalité, vous pouvez facilement créer ou personnaliser une composition ou une partie de composition dans l’interface de l’éditeur de site. Aucune compétence en matière de développement n’est requise, à moins, bien sûr, que vous ne décidiez de devenir développeur de thèmes.

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 composition 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 web WordPress.

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

Cependant, contrairement aux compositions de blocs, les parties de modèles sont destinées à des zones du site qui ne changent pas fréquemment.

Différences entre les compositions et les parties de modèle

Pour résumer, voici les principales différences entre ces trois types de modèles :

Compositions de blocs pré-construites

• Les compositions de blocs prédéfinies sont des dispositions 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 instance unique de la composition de bloc.
• Vous pouvez copier et coller des compositions prédéfinies à partir du répertoire des compositions.
• Vous pouvez créer de nouvelles compositions et les publier dans le répertoire 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 web.
• 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 du 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 manière récurrente sur plusieurs pages de votre site web WordPress.
• Vous pouvez créer et modifier les parties de composition dans l’interface de l’éditeur de site.
• Les parties de compositions sont destinées à des 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 modèles. Il est désormais plus facile de créer des compositions de blocs synchronisées ou non synchronisées sans quitter l’interface de l’éditeur. Vous pouvez également importer et exporter des compositions personnalisées en quelques clics depuis votre tableau de bord WordPress.

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

En plus des compositions de blocs, WordPress 5.5 a introduit une nouvelle API permettant aux développeurs de « créer des blocs de contenu préconçus qui peuvent être facilement insérés dans les articles, les pages, les types d’articles personnalisés et les modèles » La nouvelle API propose les fonctions register_block_pattern et register_block_pattern_category pour enregistrer des compositions de blocs et des catégories de modèles.

À partir de WordPress 6.0, vous pouvez également enregistrer des blocs de contenu dans 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 « Compositions ».

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 par des développeurs non avancés.

Si vous optez 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électionnez ou enregistrez une catégorie de composition

Tout d’abord, choisissez une catégorie pour votre composition. Avec les dernières versions de WordPress, de nouvelles catégories de compositions ont été ajoutées et certaines catégories existantes ont été modifiées.

Pour obtenir la liste de toutes les catégories enregistrées, ouvrez l’éditeur Post et collez le code suivant dans la console du navigateur :

wp.data.select('core').getBlockPatternCategories()

Dans WordPress 6.7 avec le thème Twenty Twenty-Five actif, vous obtiendrez la liste suivante de catégories de compositions :

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 composition enregistrée, l’étape suivante consiste à enregistrer la composition de bloc ellei-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 a composition.

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

• title (obligatoire) : Un titre lisible par l’homme pour la composition.
• content (obligatoire) : Un titre lisible par l’homme pour la composition : 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 lesquels le modèle 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. Mettez la valeur à false pour cacher la composition. Par défaut, toutes les composition apparaissent dans l’insertion de blocs.
• source (facultatif) : Une chaîne qui identifie la source de la composition. Passez la chaîne plugin si vous enregistrez la composition à partir d’une extension. Pour un thème, passez la chaîne theme.

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'		=> '<p>My awesome block pattern</p>'
			) 
		);
	}
	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 avez la possibilité de définir une valeur différente pour postTypes afin de le rendre accessible à différents types de publications. Par exemple, si vous avez un type de publication product et que vous souhaitez limiter la disponibilité du modèle à ce type spécifique, il vous suffit d’écrire :

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

Créez un nouvel article (ou un type de publication personnalisé), ouvrez l’insertion de blocs et cliquez sur le libellé Compositions. Vous devriez trouver une nouvelle catégorie de composition avec votre modèle de bloc personnalisé. N’hésitez pas à jouer avec les propriétés des blocs pour les personnaliser.

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 souhaitiez créer une composition de bloc comprenant un titre, une image, un paragraphe et un bouton.

Dans l’éditeur, créez 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 uploads, 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 pouvez également inclure un tableau 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 est d’ajouter un tableau de types de blocs :

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

Ainsi, la composition de bloc apparaîtra dans les suggestions lorsqu’un utilisateur recherchera l’un des blocs spécifiés.

La propriété postTypes vous permet de rendre la composition de bloc uniquement disponible pour certains types de publication. Par exemple, vous pouvez faire en sorte que la composition ne soit visible que 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éer 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 désormais 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 de bloc. 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 en les incluant 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. Créez ensuite 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 allez ajouter le contenu à votre composition de bloc. Vous pouvez utiliser les mêmes balises que dans l’exemple précédent, mais vous devez d’abord les modifier quelque 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 modifications.

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 entendu, vous devez d’abord placer l’image placeholder.jpg dans le dossier /assets/images de votre thème. L’instruction suivante génère le texte que vous souhaitez traduire.

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

Enregistrez 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.

Suppression du support, désenregistrement et masquage des compositions de blocs

Dans certains cas, vous pouvez souhaiter effectuer des actions spéciales sur les compositions de blocs. Par exemple, vous pouvez remplacer une composition de bloc principal par une composition de bloc de votre choix ou désenregistrer une catégorie sous certaines conditions. Voici les opérations que vous pouvez effectuer.

1. Suppression de 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 principaux et fournir leur propre ensemble de compositions. Pour supprimer la prise en charge des blocs de base, vous pouvez utiliser la fonctionremove_theme_support de la manière suivante :

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 composition de bloc unique

Vous pouvez également annuler l’enregistrement d’une composition de bloc spécifique si vous souhaitez fournir une alternative personnalisée ou si vous ne souhaitez pas qu’elle soit utilisé avec votre thème.

L’API Patterns fournit la fonctionunregister_block_pattern à cet effet :

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

Si vous pouvez également annuler l’enregistrement d’une composition de bloc principal, vous utiliserez la fonction suivante :

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 compositions en insérant la fonction unregister_block_pattern_category au 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' );

Créez et partagez des compositions de blocs avec le créateur de compositions

Vous pouvez également 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 accéder au Pattern Creator à partir du répertoire Pattern.

Une fois dans ce répertoire, cliquez sur Créer une nouvelle composition. Cela lancera une version spécifique de la composition de l’éditeur de blocs que vous pouvez utiliser pour créer vos compositions de blocs.

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

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

Vous pouvez ensuite retourner dans le répertoire Compositions et sélectionner Mes compositions. Vous y trouverez toutes vos compositions dans trois onglets : 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 soumettre 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 constituer un excellent investissement pour votre carrière en tant que spécialiste du marketing, concepteur de sites web ou éditeur. Et maintenant, c’est à vous de jouer.

Avez-vous déjà 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.