À l’ère de Gutenberg, le processus de conception n’est pas strictement lié aux thèmes WordPress. Hors de la boîte, le CMS fournit aux utilisateurs tous les outils de conception nécessaires pour construire une grande mise en page de site et le thème vise à être quelque chose qui ajoute encore plus d’outils de construction et de conception.
Les modèles de blocs sont une fonctionnalité qui débloque encore plus de pouvoirs dans la construction de sites. Selon le manuel de l’éditeur de blocs:
Un modèle de bloc est défini comme une liste d’éléments de bloc. Ces blocs peuvent avoir des attributs prédéfinis, un contenu fictif et être statiques ou dynamiques. Les modèles de blocs permettent de spécifier un état initial par défaut pour une session d’édition.
En d’autres termes, les modèles de blocs sont des collections pré-construites de blocs utilisées pour définir un état par défaut de façon dynamique sur le client.
👉 Les modèles de blocs sont différents des fichiers de modèle.
Les fichiers de modèles sont des fichiers PHP tels que index.php, page.php et single.php, et fonctionnent de la même manière avec les thèmes classiques et les thèmes basés sur des blocs, selon la hiérarchie des modèles de WordPress. Dans les thèmes classiques, ces fichiers sont écrits en PHP et en HTML. Dans les thèmes basés sur des blocs, ils sont entièrement constitués de blocs.
👉 Les modèles de blocs sont différents des compositions de blocs.
Les compositions de blocs doivent être ajoutées manuellement à vos pages alors que les modèles de blocs fournissent automatiquement la mise en page initiale et les valeurs par défaut lorsque vous ou les membres de votre équipe créez un nouvel article.
Vous pouvez également lier des modèles de blocs spécifiques à vos types de publications personnalisés et verrouiller certains blocs ou fonctionnalités pour forcer les utilisateurs à utiliser vos valeurs par défaut ou prévenir les erreurs.
Vous avez plusieurs façons de créer des modèles de blocs. Vous pouvez utiliser l’API des blocs pour déclarer un tableau de types de blocs via PHP, ou vous pouvez créer un type de bloc personnalisé à l’aide du composant InnerBlocks.
Allons-y !
Comment créer un modèle de bloc en PHP
Si vous êtes un développeur de la vieille école, vous pouvez définir un modèle de bloc personnalisé à l’aide d’une extension ou du fichier functions.php de votre thème. Si vous décidez d’utiliser une extension, lancez votre éditeur de code préféré, créez un nouveau fichier PHP et ajoutez le code suivant :
<?php
/*
* Plugin Name: My Block Templates
* Plugin URI: https://example.com/
* Description: An example plugin
* Version: 1.0
* Requires at least: 5.5
* Requires PHP: 8.0
* Author: Your name
* Author URI: https://author.example.com/
* License: GPL v2 or later
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
* Update URI: https://example.com/my-plugin/
*/
function myplugin_register_my_block_template() {
$post_type_object = get_post_type_object( 'post' );
$post_type_object->template = array(
array( 'core/image' ),
array( 'core/heading' ),
array( 'core/paragraph' )
);
}
add_action( 'init', 'myplugin_register_my_block_template' );Dans le code ci-dessus, get_post_type_object récupérez un type de publication par son nom.
Sauvegardez votre fichier dans le dossier wp-content/plugins, naviguez vers l’écran Extensions dans votre tableau de bord WordPress, et activez l’extension My Block Templates.
Désormais, lorsque vous créerez un nouvel article, l’éditeur lancera automatiquement votre modèle de bloc avec un bloc d’image, un titre et un paragraphe.
Vous pouvez également ajouter un tableau de réglages pour chaque bloc et aussi créer des structures imbriquées de blocs. La fonction suivante construit un modèle de bloc plus avancé avec des blocs et des réglages internes :
function myplugin_register_my_block_template() {
$block_template = array(
array( 'core/image' ),
array( 'core/heading', array(
'placeholder' => 'Add H2...',
'level' => 2
) ),
array( 'core/paragraph', array(
'placeholder' => 'Add paragraph...'
) ),
array( 'core/columns',
array(),
array(
array( 'core/column',
array(),
array(
array( 'core/image' )
)
),
array( 'core/column',
array(),
array(
array( 'core/heading', array(
'placeholder' => 'Add H3...',
'level' => 3
) ),
array( 'core/paragraph', array(
'placeholder' => 'Add paragraph...'
) )
)
)
)
)
);
$post_type_object = get_post_type_object( 'post' );
$post_type_object->template = $block_template;
}
add_action( 'init', 'myplugin_register_my_block_template' );Vous pouvez voir le résultat du code ci-dessus dans l’image suivante :
Jusqu’à présent, nous n’avons utilisé que des blocs de base. Mais vous pouvez aussi inclure des blocs personnalisés ou des compositions de blocs dans vos modèles de blocs, comme le montre l’exemple suivant :
function myplugin_register_my_block_template() {
$post_type_object = get_post_type_object( 'page' );
$post_type_object->template = array(
array( 'core/pattern', array(
'slug' => 'my-plugin/my-block-pattern'
) )
);
}
add_action( 'init', 'myplugin_register_my_block_template' );Il n’y a pas beaucoup de différence dans le cas où vous décidiez de créer un modèle de bloc par défaut pour un type de publication personnalisé déjà enregistré. Il vous suffit de remplacer le type de publication de get_post_type_object par le nom de votre type de publication personnalisé, comme le montre l’exemple suivant :
<?php
function myplugin_register_my_block_template() {
$post_type_object = get_post_type_object( 'book' );
$post_type_object->template = array(
array( 'core/image' ),
array( 'core/heading' ),
array( 'core/paragraph' )
);
}
add_action( 'init', 'myplugin_register_my_block_template' );Maintenant que vous savez comment créer des modèles de blocs, nous pouvons aller de l’avant et explorer d’autres cas d’utilisation. Plongeons un peu plus profondément.
Modèles de blocs avec les types d’articles personnalisés
Comme nous l’avons mentionné précédemment, tu peux attacher un modèle de bloc à un type de publication personnalisé. Vous pouvez le faire après que votre type de publication personnalisé a déjà été enregistré, mais vous préférerez peut-être définir un modèle de bloc lors de l’enregistrement du type de publication personnalisé.
Dans ce cas, vous pouvez utiliser les arguments template et template_lock de la fonction register_post_type :
function myplugin_register_book_post_type() {
$args = array(
'label' => esc_html__( 'Books' ),
'labels' => array(
'name' => esc_html__( 'Books' ),
'singular_name' => esc_html__( 'Book' ),
),
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'show_in_rest' => true,
'rest_namespace' => 'wp/v2',
'has_archive' => true,
'show_in_menu' => true,
'show_in_nav_menus' => true,
'supports' => array( 'title', 'editor', 'thumbnail' ),
'template' => array(
array( 'core/paragraph', array(
'placeholder' => 'Add paragraph...'
) ),
array( 'core/columns',
array(),
array(
array( 'core/column',
array(),
array(
array( 'core/image' )
)
),
array( 'core/column',
array(),
array(
array( 'core/heading', array(
'placeholder' => 'Add H3...',
'level' => 3
) ),
array( 'core/paragraph', array(
'placeholder' => 'Add paragraph...'
) )
)
)
)
)
)
);
register_post_type( 'book', $args );
}
add_action( 'init', 'myplugin_register_book_post_type' );Et c’est tout. L’image ci-dessous montre le modèle de bloc dans l’interface de l’éditeur pour un type de publication personnalisé Book.
Lorsque vous aurez terminé la mise en page, vous voudrez peut-être jouer avec les réglages des blocs pour affiner le comportement et l’apparence de votre modèle de bloc.
Affiner le modèle de bloc avec les attributs de bloc
Nous avons défini un modèle de bloc comme une liste de blocs. Chaque élément de la liste doit être un tableau contenant le nom du bloc et un tableau d’attributs facultatifs. Avec les tableaux imbriqués, vous pouvez ajouter un troisième tableau pour les blocs enfants.
Un modèle avec un bloc Colonnes peut être représenté comme ci-dessous :
$template = array( 'core/columns',
// attributes
array(),
// nested blocks
array(
array( 'core/column' ),
array( 'core/column' )
)
);Comme mentionné ci-dessus, le deuxième tableau de la liste est un tableau facultatif d’attributs de blocs. Ces attributs vous permettent de personnaliser l’apparence de votre modèle afin que vous ou vos utilisateurs puissiez vous concentrer sur le contenu de l’article sans vous soucier de la mise en page et de la conception.
Pour commencer, vous pouvez utiliser l’éditeur de blocs pour créer une structure de blocs que vous pourrez utiliser comme référence pour votre modèle.
Ajoutez vos blocs, personnalisez la mise en page et les styles, puis passez à l’éditeur de code et trouvez les délimiteurs de blocs.
Les délimiteurs de blocs stockent les réglages et les styles des blocs dans des paires clé/valeur. Vous pouvez simplement copier et coller les clés et les valeurs du bloc pour remplir votre tableau d’attributs :
$template = array( 'core/columns',
array(
'verticalAlignment' => 'center',
'align' => 'wide',
'style' => array(
'border' => array(
'width' => '2px',
'radius' => array(
'topLeft' => '12px',
'topRight' => '12px',
'bottomLeft' => '12px',
'bottomRight' => '12px'
)
)
),
'backgroundColor' => 'tertiary'
),
array(
array( 'core/column' ),
array( 'core/column' )
)
);Répétez le processus pour chaque bloc du modèle et vous aurez terminé.
$template = array(
array( 'core/paragraph', array(
'placeholder' => 'Add paragraph...'
) ),
array( 'core/columns',
array(
'verticalAlignment' => 'center',
'align' => 'wide',
'style' => array(
'border' => array(
'width' => '2px',
'radius' => array(
'topLeft' => '12px',
'topRight' => '12px',
'bottomLeft' => '12px',
'bottomRight' => '12px'
)
)
),
'backgroundColor' => 'tertiary',
'lock' => array(
'remove' => true,
'move' => true
)
),
array(
array( 'core/column',
array( 'verticalAlignment' => 'center' ),
array(
array( 'core/image',
array(
'style' => array( 'border' => array( 'radius' => '8px' ) )
)
)
)
),
array( 'core/column',
array( 'verticalAlignment' => 'center' ),
array(
array( 'core/heading', array(
'placeholder' => 'Add H3...',
'level' => 3
) ),
array( 'core/paragraph', array(
'placeholder' => 'Add paragraph...'
) )
)
)
)
)
);Verrouillage des blocs
Vous pouvez verrouiller des blocs spécifiques ou tous les blocs inclus dans votre modèle en utilisant la propriété template_lock de la page $post_type_object.
Le verrouillage des modèles peut être très utile lorsque vous avez un blog à plusieurs auteurs et que vous voulez empêcher tous les utilisateurs ou certains d’entre eux de modifier la mise en page de votre modèle de bloc.
Dans l’exemple suivant, nous verrouillons tous les blocs du modèle de bloc :
function myplugin_register_my_block_template() {
$post_type_object = get_post_type_object( 'post' );
$post_type_object->template = array(
array( 'core/image' ),
array( 'core/heading' ),
array( 'core/paragraph' )
);
$post_type_object->template_lock = 'all';
}
add_action( 'init', 'myplugin_register_my_block_template' );Les blocs verrouillés affichent une icône de verrouillage dans la barre d’outils des blocs et dans la vue en liste :
Les utilisateurs peuvent déverrouiller les blocs à partir du menu Options disponible dans la barre d’outils des blocs.
Lorsque vous cliquez sur Déverrouiller, une fenêtre modale vous permet d’activer/désactiver le mouvement, d’empêcher la suppression, ou les deux :
template_lock peut prendre l’une des valeurs suivantes:
all– Empêche les utilisateurs d’ajouter de nouveaux blocs, de déplacer et de supprimer des blocs existants.insert– Empêche les utilisateurs d’ajouter de nouveaux blocs et de supprimer des blocs existants.contentOnly– Les utilisateurs ne peuvent modifier que le contenu des blocs inclus dans le modèle. Remarque :contentOnlyne peut être utilisé qu’au niveau du modèle et doit être géré par le code. (Voir aussi Verrouillage des API).
Si vous voulez verrouiller des blocs spécifiques, vous pouvez utiliser l’attribut lock sur chaque bloc :
function myplugin_register_my_block_template() {
$post_type_object = get_post_type_object( 'post' );
$post_type_object->template = array(
array( 'core/image' ),
array( 'core/heading' ),
array( 'core/paragraph', array(
'lock' => array(
'remove' => true,
'move' => true
)
) )
);
}
add_action( 'init', 'myplugin_register_my_block_template' );L’attribut lock peut prendre l’une des valeurs suivantes:
remove: Empêche les utilisateurs de supprimer un bloc.move: Empêche les utilisateurs de déplacer un bloc.
Vous pouvez également utiliser lock en conjonction avec template_lock pour affiner le comportement des blocs inclus dans votre modèle de bloc. Dans l’exemple suivant, nous verrouillons tous les blocs à l’exception de l’en-tête :
function myplugin_register_my_block_template() {
$post_type_object = get_post_type_object( 'post' );
$post_type_object->template = array(
array( 'core/image' ),
array( 'core/heading', array(
'lock' => array(
'remove' => false,
'move' => false
)
) ),
array( 'core/paragraph' )
);
$post_type_object->template_lock = 'all';
}
add_action( 'init', 'myplugin_register_my_block_template' );L’image ci-dessous montre le modèle de bloc avec les blocs verrouillés et déverrouillés :
Les développeurs de blocs peuvent également utiliser l’attribut lock dans la définition du bloc au niveau attributes (voir également Verrouillage individuel des blocs).
Empêcher les utilisateurs de déverrouiller les blocs
Si vous avez testé le code abordé jusqu’ici dans l’article, vous avez peut-être réalisé que vous pouvez déverrouiller les blocs inclus dans votre modèle (ou tout autre bloc) depuis l’interface de l’éditeur. Par défaut, tous les utilisateurs ayant accès à l’édition peuvent verrouiller ou déverrouiller les blocs, et ce faisant, ils contournent les réglages de votre modèle.
Vous pouvez contrôler si les blocs peuvent être verrouillés ou déverrouillés à l’aide du filtre block_editor_settings_all.
Le filtre enverra tout réglage à l’éditeur initialisé, ce qui signifie que tout réglage de l’éditeur utilisé pour configurer l’éditeur lors de l’initialisation peut être filtré par une extension WordPress PHP avant d’être envoyé.
La fonction de rappel que tu utiliseras avec ce filtre prend deux paramètres :
$settings: Un tableau de réglages de l’éditeur.$context: Une instance de la classeWP_Block_Editor_Context, un objet qui contient des informations sur l’éditeur de blocs en cours de rendu.
Ce que vous devez faire, c’est filtrer $settings['canLockBlocks'] en lui attribuant la valeur true ou false, comme le montre l’exemple suivant :
add_filter( 'block_editor_settings_all',
function( $settings, $context ) {
if ( $context->post && 'book' === $context->post->post_type ) {
$settings['canLockBlocks'] = false;
}
return $settings;
}, 10, 2
);Vous pouvez exclure des rôles d’utilisateurs spécifiques du verrouillage/déverrouillage des blocs en effectuant une vérification conditionnelle des capacités de l’utilisateur actuel.
Dans l’exemple suivant, nous vérifions si l’utilisateur actuel peut modifier les publications des autres (en d’autres termes, si le rôle de l’utilisateur actuel est Éditeur ou supérieur) :
add_filter( 'block_editor_settings_all',
function( $settings, $context ) {
if ( $context->post && 'book' === $context->post->post_type ) {
$settings['canLockBlocks'] = current_user_can( 'edit_others_posts' );
}
return $settings;
}, 10, 2
);Les images suivantes comparent l’état initial de l’éditeur pour un administrateur et un auteur. Premièrement, admin :
Maintenant, l’auteur :
Et vous pouvez vérifier n’importe quelle condition sur l’utilisateur actuel. Dans l’exemple suivant, nous empêchons un utilisateur spécifique de verrouiller/déverrouiller des blocs :
add_filter( 'block_editor_settings_all',
function( $settings, $context ) {
$user = wp_get_current_user();
if ( in_array( $user->user_email, [ '[email protected]' ], true ) ) {
$settings['canLockBlocks'] = false;
}
return $settings;
}, 10, 2
);Vous pouvez combiner plus de conditions pour avoir un contrôle granulaire sur qui est autorisé à verrouiller/déverrouiller des blocs dans votre modèle et qui ne l’est pas. C’est l’un des aspects de ce que l’on appelle l’expérience curative.
Mais attendez. Avez-vous essayé de modifier le contenu de votre article à l’aide de l’éditeur de code ? Eh bien, vous serez peut-être surpris de voir que les utilisateurs qui ne sont pas autorisés à déverrouiller les blocs à partir de l’interface utilisateur peuvent quand même modifier le contenu à partir de l’éditeur de code.
Désactivation de l’éditeur de code pour des rôles d’utilisateur spécifiques
Par défaut, tous les utilisateurs qui peuvent modifier le contenu peuvent accéder à l’éditeur de code. Cela pourrait passer outre vos réglages de verrouillage et certains utilisateurs pourraient ruiner ou supprimer la mise en page de votre modèle.
Vous pouvez aussi utiliser block_editor_settings_all pour filtrer le paramètre codeEditingEnabled pour empêcher certains rôles d’utilisateurs d’accéder à l’éditeur de code. Voici le code :
add_filter( 'block_editor_settings_all',
function( $settings, $context ) {
if ( $context->post && 'book' === $context->post->post_type ) {
$settings['canLockBlocks'] = current_user_can( 'edit_others_posts' );
$settings['codeEditingEnabled'] = current_user_can( 'edit_others_posts' );
}
return $settings;
}, 10, 2
);Avec ce code en place, les utilisateurs qui n’ont pas la capacité edit_others_posts ne seront pas autorisés à accéder à l’éditeur de code. L’image ci-dessous montre la barre d’outils Options pour un auteur.
Voilà ce que vous devez savoir pour construire des modèles de blocs via PHP. Maintenant, si vous êtes un développeur de blocs Gutenberg et que vous aimez travailler avec JavaScript, vous préférerez peut-être opter pour une approche différente.
Comment construire un modèle à l’aide de JavaScript
L’ajout d’un modèle de bloc à un article fonctionne différemment si vous décidez d’opter pour JavaScript. Vous pouvez toujours construire un modèle, mais vous devez créer un bloc personnalisé et utiliser le composant InnerBlocks, comme indiqué dans notre guide de développement des blocs Gutenberg.
InnerBlocks exporte une paire de composants qui peuvent être utilisés dans les implémentations de blocs pour permettre un contenu de bloc imbriqué. – Source : InnerBlocks
Comment ça marche ?
Vous pouvez utiliser InnerBlocks dans vos blocs personnalisés de la même manière que n’importe quel autre composant de Gutenberg.
Vous devez d’abord l’inclure à partir d’un paquet avec d’autres dépendances :
import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';Ensuite, vous définirez les propriétés de InnerBlocks. Dans l’exemple suivant, nous allons déclarer une constante TEMPLATE que nous utiliserons ensuite pour définir la valeur de la propriété template de l’élément InnerBlocks:
const TEMPLATE = [
[ 'core/paragraph', { 'placeholder': 'Add paragraph...' } ],
[ 'core/columns', { verticalAlignment: 'center' },
[
[
'core/column',
{ templateLock: 'all' },
[
[ 'core/image' ]
]
],
[
'core/column',
{ templateLock: 'all' },
[
[
'core/heading',
{'placeholder': 'Add H3...', 'level': 3}
],
[
'core/paragraph',
{'placeholder': 'Add paragraph...'}
]
],
]
]
]
];
registerBlockType( metadata.name, {
title: 'My Template',
category: 'widgets',
edit: ( props ) => {
return(
<div>
<InnerBlocks
template={ TEMPLATE }
templateLock="insert"
/>
</div>
)
},
save() {
const blockProps = useBlockProps.save();
return(
<div { ...blockProps }>
<InnerBlocks.Content />
</div>
)
}
} );Ce code est assez simple. Vous devriez remarquer que nous avons utilisé l’attribut templateLock deux fois, d’abord au niveau du bloc, puis à l’intérieur de l’élément InnerBlocks. Pour obtenir la liste complète des attributs disponibles, consultez la référenceInnerBlocks et le manuel de l’éditeur de blocs.
Essayez maintenant.
Tout d’abord, créez une installation locale de WordPress en utilisant DevKinsta ou tout autre environnement de développement local.
Ensuite, lancez votre outil de ligne de commande, naviguez jusqu’à votre dossier plugins et exécutez la commande suivante :
npx @wordpress/create-block template-blockVous pouvez changer le nom du bloc pour ce que vous voulez. Si vous préférez contrôler tous les aspects de votre bloc de démarrage, il vous suffit de suivre les instructions fournies dans notre guide définitif sur le développement des blocs.
Une fois l’installation terminée, exécutez les commandes suivantes :
cd template-block
npm startLancez votre tableau de bord d’administration WordPress et naviguez jusqu’à l’écran Extensions. Trouvez et activez votre extenbsion Template Block.
Dans votre éditeur de code préféré, ouvrez le fichier index.js que vous trouverez dans le dossier src. Copiez et collez le code ci-dessus, enregistrez votre index.js, et de retour dans le tableau de bord de WordPress, créez un nouvel article ou une nouvelle page.
Ouvrez l’outil d’insertion de blocs et descendez jusqu’à la section Widgets. Vous devriez y trouver votre bloc personnalisé.
Ajoutez-le à l’article, personnalisez le contenu et enregistrez l’article.
Si vous passez à l’éditeur de code, vous verrez le balisage suivant :
<!-- wp:create-block/template-block -->
<div class="wp-block-create-block-template-block"><!-- wp:paragraph {"placeholder":"Add paragraph..."} -->
<p></p>
<!-- /wp:paragraph -->
<!-- wp:columns {"verticalAlignment":"center"} -->
<div class="wp-block-columns are-vertically-aligned-center"><!-- wp:column {"templateLock":"all"} -->
<div class="wp-block-column"><!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column {"templateLock":"all"} -->
<div class="wp-block-column"><!-- wp:heading {"level":3,"placeholder":"Add H3..."} -->
<h3 class="wp-block-heading"></h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"placeholder":"Add paragraph..."} -->
<p></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:create-block/template-block -->Prévisualisez maintenant le résultat dans votre navigateur préféré. Si l’apparence de votre bloc doit être améliorée, vous pouvez simplement modifier les styles dans votre fichier style.scss.
Une fois que vous êtes satisfait de vos personnalisations, arrêtez le processus et lancez npm run build. Tous les fichiers de votre projet seront compressés et disponibles pour la production dans le nouveau dossier build.
C’est simple et puissant, n’est-ce pas ?
Vous pouvez maintenant créer des modèles avancés de blocs que vous pourrez inclure dans votre contenu en quelques clics.
Résumé
L’ajout d’un modèle de bloc à tes types d’e publication personnalisés ou d’articles peut considérablement accélérer et améliorer l’expérience de création et d’édition sur votre site WordPress. Les modèles de blocs sont particulièrement utiles sur les sites multi-utilisateurs, où plusieurs utilisateurs sont autorisés à créer du contenu et où vous avez besoin qu’ils respectent le même format.
Cela vous permet également de créer des mises en page uniformes sans avoir à ajouter manuellement un modèle de bloc à chaque fois que vous créez un nouvel article. Pensez à un site d’avis ou de recettes, où chaque page doit respecter la même structure.
En combinant les connaissances que vous aurez acquises sur la création de blocs personnalisés statiques ou dynamiques, de compositions de blocs, vous serez en mesure de toujours identifier la solution la plus efficace et la plus performante pour construire n’importe quel type de site WordPress.
À vous de jouer maintenant. Avez-vous déjà exploré les modèles de blocs ? Pour quel cas d’utilisation les trouvez-vous les plus adaptés ? Partagez votre expérience dans les commentaires ci-dessous.
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.
Laisser un commentaire