{"id":72560,"date":"2023-09-04T15:30:02","date_gmt":"2023-09-04T14:30:02","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=72560&preview=true&preview_id=72560"},"modified":"2023-09-11T13:51:51","modified_gmt":"2023-09-11T12:51:51","slug":"modeles-blocs-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/modeles-blocs-wordpress\/","title":{"rendered":"Comment cr\u00e9er des mod\u00e8les de blocs WordPress"},"content":{"rendered":"

\u00c0 l’\u00e8re de Gutenberg<\/a>, le processus de conception n’est pas strictement li\u00e9 aux th\u00e8mes WordPress<\/a>. Hors de la bo\u00eete, le CMS fournit aux utilisateurs tous les outils de conception n\u00e9cessaires pour construire une grande mise en page de site et le th\u00e8me vise \u00e0 \u00eatre quelque chose qui ajoute encore plus d’outils de construction et de conception.<\/p>\n

Les mod\u00e8les de blocs sont une fonctionnalit\u00e9 qui d\u00e9bloque encore plus de pouvoirs dans la construction de sites. Selon le manuel de l’\u00e9diteur de blocs<\/a>:<\/p>\n

Un mod\u00e8le de bloc est d\u00e9fini comme une liste d’\u00e9l\u00e9ments de bloc. Ces blocs peuvent avoir des attributs pr\u00e9d\u00e9finis, un contenu fictif et \u00eatre statiques ou dynamiques. Les mod\u00e8les de blocs permettent de sp\u00e9cifier un \u00e9tat initial par d\u00e9faut pour une session d’\u00e9dition.<\/em><\/p><\/blockquote>\n

En d’autres termes, les mod\u00e8les de blocs sont des collections pr\u00e9-construites de blocs utilis\u00e9es pour d\u00e9finir un \u00e9tat par d\u00e9faut de fa\u00e7on dynamique sur le client.<\/p>\n

\ud83d\udc49 Les mod\u00e8les de blocs sont diff\u00e9rents des fichiers de mod\u00e8le.<\/strong><\/p>\n

Les fichiers de mod\u00e8les sont des fichiers PHP tels que index.php<\/strong>, page.php<\/strong> et single.php<\/strong>, et fonctionnent de la m\u00eame mani\u00e8re avec les th\u00e8mes classiques et les th\u00e8mes bas\u00e9s sur des blocs, selon la hi\u00e9rarchie des mod\u00e8les de WordPress<\/a>. Dans les th\u00e8mes classiques, ces fichiers sont \u00e9crits en PHP et en HTML. Dans les th\u00e8mes bas\u00e9s sur des blocs, ils sont enti\u00e8rement constitu\u00e9s de blocs.<\/p>\n

\ud83d\udc49 Les mod\u00e8les de blocs sont diff\u00e9rents des compositions de blocs.<\/strong><\/p>\n

Les compositions de blocs<\/a> doivent \u00eatre ajout\u00e9es manuellement \u00e0 vos pages alors que les mod\u00e8les de blocs fournissent automatiquement la mise en page initiale et les valeurs par d\u00e9faut lorsque vous ou les membres de votre \u00e9quipe cr\u00e9ez un nouvel article.<\/p>\n

Vous pouvez \u00e9galement lier des mod\u00e8les de blocs sp\u00e9cifiques \u00e0 vos types de publications personnalis\u00e9s et verrouiller certains blocs ou fonctionnalit\u00e9s pour forcer les utilisateurs \u00e0 utiliser vos valeurs par d\u00e9faut ou pr\u00e9venir les erreurs.<\/p>\n

Vous avez plusieurs fa\u00e7ons de cr\u00e9er des mod\u00e8les de blocs. Vous pouvez utiliser l’API des blocs<\/a> pour d\u00e9clarer un tableau de types de blocs via PHP, ou vous pouvez cr\u00e9er un type de bloc personnalis\u00e9 \u00e0 l’aide du composant InnerBlocks<\/code>.<\/p>\n

Allons-y !<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Comment cr\u00e9er un mod\u00e8le de bloc en PHP<\/h2>\n

Si vous \u00eates un d\u00e9veloppeur de la vieille \u00e9cole, vous pouvez d\u00e9finir un mod\u00e8le de bloc personnalis\u00e9 \u00e0 l’aide d’une extension ou du fichier functions.php<\/a> de votre th\u00e8me. Si vous d\u00e9cidez d’utiliser une extension, lancez votre \u00e9diteur de code<\/a> pr\u00e9f\u00e9r\u00e9, cr\u00e9ez un nouveau fichier PHP et ajoutez le code suivant :<\/p>\n

<?php\n\/*\n * Plugin Name:       My Block Templates\n * Plugin URI:        https:\/\/example.com\/\n * Description:       An example plugin\n * Version:           1.0\n * Requires at least: 5.5\n * Requires PHP:      8.0\n * Author:            Your name\n * Author URI:        https:\/\/author.example.com\/\n * License:           GPL v2 or later\n * License URI:       https:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n * Update URI:        https:\/\/example.com\/my-plugin\/\n *\/\n\nfunction myplugin_register_my_block_template() {\n\t$post_type_object = get_post_type_object( 'post' );\n\t$post_type_object->template = array(\n\t\tarray( 'core\/image' ),\n\t\tarray( 'core\/heading' ),\n\t\tarray( 'core\/paragraph' )\n\t);\n}\nadd_action( 'init', 'myplugin_register_my_block_template' );<\/code><\/pre>\n
Dans le code ci-dessus, get_post_type_object<\/code><\/a> r\u00e9cup\u00e9rez un type de publication par son nom.<\/p>\n
Sauvegardez votre fichier dans le dossier wp-content\/plugins<\/strong>, naviguez vers l’\u00e9cran Extensions dans votre tableau de bord WordPress<\/a>, et activez l’extension My Block Templates<\/strong>.<\/p>\n
D\u00e9sormais, lorsque vous cr\u00e9erez un nouvel article, l’\u00e9diteur lancera automatiquement votre mod\u00e8le de bloc avec un bloc d’image, un titre et un paragraphe.<\/p>\n
\"Un
Un mod\u00e8le de bloc automatiquement charg\u00e9 dans l’\u00e9diteur d’articles<\/figcaption><\/figure>\n
Vous pouvez \u00e9galement ajouter un tableau de r\u00e9glages pour chaque bloc et aussi cr\u00e9er des structures imbriqu\u00e9es de blocs. La fonction suivante construit un mod\u00e8le de bloc plus avanc\u00e9 avec des blocs et des r\u00e9glages internes :<\/p>\n
function myplugin_register_my_block_template() {\n\n\t$block_template = array(\n\t\tarray( 'core\/image' ),\n\t\tarray( 'core\/heading', array(\n\t\t\t'placeholder'\t=> 'Add H2...',\n\t\t\t'level'\t\t\t=> 2\n\t\t) ),\n\t\tarray( 'core\/paragraph', array(\n\t\t\t'placeholder'\t=> 'Add paragraph...'\n\t\t\t\n\t\t) ),\n\t\tarray( 'core\/columns', \n\t\t\tarray(), \n\t\t\tarray( \n\t\t\t\tarray( 'core\/column',\n\t\t\t\t\tarray(),\n\t\t\t\t\tarray(\n\t\t\t\t\t\tarray( 'core\/image' )\n\t\t\t\t\t)\n\t\t\t\t), \n\t\t\t\tarray( 'core\/column',\n\t\t\t\t\tarray(),\n\t\t\t\t\tarray(\n\t\t\t\t\t\tarray( 'core\/heading', array(\n\t\t\t\t\t\t\t'placeholder'\t=> 'Add H3...',\n\t\t\t\t\t\t\t'level'\t\t\t=> 3\n\t\t\t\t\t\t) ),\n\t\t\t\t\t\tarray( 'core\/paragraph', array(\n\t\t\t\t\t\t\t'placeholder'\t=> 'Add paragraph...'\n\t\t\t\t\t\t) )\n\t\t\t\t\t) \n\t\t\t\t)\n\t\t\t) \n\t\t)\n\t);\n\t$post_type_object = get_post_type_object( 'post' );\n\t$post_type_object->template = $block_template;\n}\nadd_action( 'init', 'myplugin_register_my_block_template' );<\/code><\/pre>\n
Vous pouvez voir le r\u00e9sultat du code ci-dessus dans l’image suivante :<\/p>\n
\"Un
Un mod\u00e8le de bloc plus avanc\u00e9<\/figcaption><\/figure>\n
Jusqu’\u00e0 pr\u00e9sent, nous n’avons utilis\u00e9 que des blocs de base. Mais vous pouvez aussi inclure des blocs personnalis\u00e9s<\/a> ou des compositions de blocs<\/a> dans vos mod\u00e8les de blocs, comme le montre l’exemple suivant :<\/p>\n
function myplugin_register_my_block_template() {\n\t$post_type_object = get_post_type_object( 'page' );\n\t$post_type_object->template = array(\n\t\tarray( 'core\/pattern', array(\n\t\t\t'slug' => 'my-plugin\/my-block-pattern'\n\t\t) ) \n\t);\n}\nadd_action( 'init', 'myplugin_register_my_block_template' );<\/code><\/pre>\n
Il n’y a pas beaucoup de diff\u00e9rence dans le cas o\u00f9 vous d\u00e9cidiez de cr\u00e9er un mod\u00e8le de bloc par d\u00e9faut pour un type de publication personnalis\u00e9 d\u00e9j\u00e0 enregistr\u00e9. Il vous suffit de remplacer le type de publication de get_post_type_object<\/code> par le nom de votre type de publication personnalis\u00e9, comme le montre l’exemple suivant :<\/p>\n
<?php\nfunction myplugin_register_my_block_template() {\n\t$post_type_object = get_post_type_object( 'book' );\n\t$post_type_object->template = array(\n\t\tarray( 'core\/image' ),\n\t\tarray( 'core\/heading' ),\n\t\tarray( 'core\/paragraph' )\n\t);\n}\nadd_action( 'init', 'myplugin_register_my_block_template' );<\/code><\/pre>\n
Maintenant que vous savez comment cr\u00e9er des mod\u00e8les de blocs, nous pouvons aller de l’avant et explorer d’autres cas d’utilisation. Plongeons un peu plus profond\u00e9ment.<\/p>\n
<\/div><\/kinsta-auto-toc>\n
Mod\u00e8les de blocs avec les types d’articles personnalis\u00e9s<\/h3>\n
Comme nous l’avons mentionn\u00e9 pr\u00e9c\u00e9demment, tu peux attacher un mod\u00e8le de bloc \u00e0 un type de publication personnalis\u00e9. Vous pouvez le faire apr\u00e8s que votre type de publication personnalis\u00e9 a d\u00e9j\u00e0 \u00e9t\u00e9 enregistr\u00e9, mais vous pr\u00e9f\u00e9rerez peut-\u00eatre d\u00e9finir un mod\u00e8le de bloc lors de l’enregistrement du type de publication personnalis\u00e9<\/a>.<\/p>\n
Dans ce cas, vous pouvez utiliser les arguments template<\/code> et template_lock<\/code> de la fonction register_post_type<\/code><\/a> :<\/p>\n
function myplugin_register_book_post_type() {\n\t$args = array(\n\t\t'label' => esc_html__( 'Books' ),\n\t\t'labels' => array(\n\t\t\t'name' => esc_html__( 'Books' ),\n\t\t\t'singular_name' => esc_html__( 'Book' ),\n\t\t),\n\t\t'public' => true,\n\t\t'publicly_queryable' => true,\n\t\t'show_ui' => true,\n\t\t'show_in_rest' => true,\n\t\t'rest_namespace' => 'wp\/v2',\n\t\t'has_archive' => true,\n\t\t'show_in_menu' => true,\n\t\t'show_in_nav_menus' => true,\n\t\t'supports' => array( 'title', 'editor', 'thumbnail' ),\n\t\t'template' => array(\n\t\t\tarray( 'core\/paragraph', array(\n\t\t\t\t'placeholder'\t=> 'Add paragraph...'\n\t\t\t) ),\n\t\t\tarray( 'core\/columns', \n\t\t\t\tarray(), \n\t\t\t\tarray( \n\t\t\t\t\tarray( 'core\/column',\n\t\t\t\t\t\tarray(),\n\t\t\t\t\t\tarray(\n\t\t\t\t\t\t\tarray( 'core\/image' )\n\t\t\t\t\t\t)\n\t\t\t\t\t), \n\t\t\t\t\tarray( 'core\/column',\n\t\t\t\t\t\tarray(),\n\t\t\t\t\t\tarray(\n\t\t\t\t\t\t\tarray( 'core\/heading', array(\n\t\t\t\t\t\t\t\t'placeholder'\t=> 'Add H3...',\n\t\t\t\t\t\t\t\t'level'\t\t\t=> 3\n\t\t\t\t\t\t\t) ),\n\t\t\t\t\t\t\tarray( 'core\/paragraph', array(\n\t\t\t\t\t\t\t\t'placeholder'\t=> 'Add paragraph...'\n\t\t\t\t\t\t\t) )\n\t\t\t\t\t\t) \n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t)\n\t\t)\n\t);\n\tregister_post_type( 'book', $args );\n}\nadd_action( 'init', 'myplugin_register_book_post_type' );<\/code><\/pre>\n
Et c’est tout. L’image ci-dessous montre le mod\u00e8le de bloc dans l’interface de l’\u00e9diteur pour un type de publication personnalis\u00e9 Book.<\/p>\n
\"Un
Un mod\u00e8le de bloc pour un type de publication personnalis\u00e9<\/figcaption><\/figure>\n
Lorsque vous aurez termin\u00e9 la mise en page, vous voudrez peut-\u00eatre jouer avec les r\u00e9glages des blocs pour affiner le comportement et l’apparence de votre mod\u00e8le de bloc.<\/p>\n
Affiner le mod\u00e8le de bloc avec les attributs de bloc<\/h3>\n
Nous avons d\u00e9fini un mod\u00e8le de bloc comme une liste de blocs. Chaque \u00e9l\u00e9ment de la liste doit \u00eatre un tableau contenant le nom du bloc et un tableau d’attributs facultatifs. Avec les tableaux imbriqu\u00e9s, vous pouvez ajouter un troisi\u00e8me tableau pour les blocs enfants.<\/p>\n
Un mod\u00e8le avec un bloc Colonnes peut \u00eatre repr\u00e9sent\u00e9 comme ci-dessous :<\/p>\n
$template = array( 'core\/columns', \n\t\/\/ attributes\n\tarray(), \n\t\/\/ nested blocks\n\tarray(\n\t\tarray( 'core\/column' ),\n\t\tarray( 'core\/column' ) \n\t) \n);<\/code><\/pre>\n
Comme mentionn\u00e9 ci-dessus, le deuxi\u00e8me tableau de la liste est un tableau facultatif d’attributs de blocs. Ces attributs vous permettent de personnaliser l’apparence de votre mod\u00e8le 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.<\/p>\n
Pour commencer, vous pouvez utiliser l’\u00e9diteur de blocs pour cr\u00e9er une structure de blocs que vous pourrez utiliser comme r\u00e9f\u00e9rence pour votre mod\u00e8le.<\/p>\n
\"Une
Une mise en page de bloc dans l’\u00e9diteur de blocs<\/figcaption><\/figure>\n
Ajoutez vos blocs, personnalisez la mise en page et les styles, puis passez \u00e0 l’\u00e9diteur de code et trouvez les d\u00e9limiteurs de blocs.<\/p>\n
\"Le
Le d\u00e9limiteur de bloc d’un bloc Colonnes<\/figcaption><\/figure>\n
Les d\u00e9limiteurs de blocs stockent les r\u00e9glages et les styles des blocs dans des paires cl\u00e9\/valeur. Vous pouvez simplement copier et coller les cl\u00e9s et les valeurs du bloc pour remplir votre tableau d’attributs :<\/p>\n
$template = array( 'core\/columns', \n\tarray(\n\t\t'verticalAlignment'\t=> 'center',\n\t\t'align'\t\t\t\t=> 'wide',\n\t\t'style'\t\t\t\t=> array( \n\t\t\t'border'\t=> array(\n\t\t\t\t'width'\t=> '2px',\n\t\t\t\t'radius'\t=> array(\n\t\t\t\t\t'topLeft'\t\t=> '12px', \n\t\t\t\t\t'topRight'\t\t=> '12px', \n\t\t\t\t\t'bottomLeft'\t=> '12px', \n\t\t\t\t\t'bottomRight'\t=> '12px'\n\t\t\t\t)\n\t\t\t)\n\t\t),\n\t\t'backgroundColor' => 'tertiary'\n\t),\n\tarray(\n\t\tarray( 'core\/column' ),\n\t\tarray( 'core\/column' ) \n\t) \n);<\/code><\/pre>\n
R\u00e9p\u00e9tez le processus pour chaque bloc du mod\u00e8le et vous aurez termin\u00e9.<\/p>\n
$template = array(\n\tarray( 'core\/paragraph', array(\n\t\t'placeholder'\t=> 'Add paragraph...'\n\t) ),\n\tarray( 'core\/columns', \n\t\tarray(\n\t\t\t'verticalAlignment'\t=> 'center',\n\t\t\t'align'\t\t\t\t=> 'wide',\n\t\t\t'style'\t\t\t\t=> array( \n\t\t\t\t'border'\t=> array(\n\t\t\t\t\t'width'\t\t=> '2px',\n\t\t\t\t\t'radius'\t=> array(\n\t\t\t\t\t\t'topLeft'\t\t=> '12px', \n\t\t\t\t\t\t'topRight'\t\t=> '12px', \n\t\t\t\t\t\t'bottomLeft'\t=> '12px', \n\t\t\t\t\t\t'bottomRight'\t=> '12px'\n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t),\n\t\t\t'backgroundColor' => 'tertiary',\n\t\t\t'lock' => array(\n\t\t\t\t'remove'\t=> true,\n\t\t\t\t'move'\t\t=> true\n\t\t\t)\n\t\t), \n\t\tarray( \n\t\t\tarray( 'core\/column',\n\t\t\t\tarray( 'verticalAlignment'\t=> 'center' ),\n\t\t\t\tarray(\n\t\t\t\t\tarray( 'core\/image', \n\t\t\t\t\t\tarray(\n\t\t\t\t\t\t\t'style'\t=> array( 'border' => array( 'radius' => '8px' ) ) \n\t\t\t\t\t\t) \n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t), \n\t\t\tarray( 'core\/column',\n\t\t\t\tarray( 'verticalAlignment'\t=> 'center' ),\n\t\t\t\tarray(\n\t\t\t\t\tarray( 'core\/heading', array(\n\t\t\t\t\t\t'placeholder'\t=> 'Add H3...',\n\t\t\t\t\t\t'level'\t\t\t=> 3\n\t\t\t\t\t) ),\n\t\t\t\t\tarray( 'core\/paragraph', array(\n\t\t\t\t\t\t'placeholder'\t=> 'Add paragraph...'\n\t\t\t\t\t) )\n\t\t\t\t) \n\t\t\t)\n\t\t)\n\t)\n);<\/code><\/pre>\n
Verrouillage des blocs<\/h3>\n
Vous pouvez verrouiller des blocs sp\u00e9cifiques ou tous les blocs inclus dans votre mod\u00e8le en utilisant la propri\u00e9t\u00e9 template_lock<\/code> de la page $post_type_object<\/code>.<\/p>\n
Le verrouillage des mod\u00e8les peut \u00eatre tr\u00e8s utile lorsque vous avez un blog \u00e0 plusieurs auteurs et que vous voulez emp\u00eacher tous les utilisateurs ou certains d’entre eux de modifier la mise en page de votre mod\u00e8le de bloc.<\/p>\n
Dans l’exemple suivant, nous verrouillons tous les blocs du mod\u00e8le de bloc :<\/p>\n
function myplugin_register_my_block_template() {\n\t$post_type_object = get_post_type_object( 'post' );\n\t$post_type_object->template = array(\n\t\tarray( 'core\/image' ),\n\t\tarray( 'core\/heading' ),\n\t\tarray( 'core\/paragraph' )\n\t);\n\t$post_type_object->template_lock = 'all';\n}\nadd_action( 'init', 'myplugin_register_my_block_template' );<\/code><\/pre>\n
Les blocs verrouill\u00e9s affichent une ic\u00f4ne de verrouillage dans la barre d’outils des blocs et dans la vue en liste :<\/p>\n
\"Un
Un bloc d’en-t\u00eate verrouill\u00e9<\/figcaption><\/figure>\n
Les utilisateurs peuvent d\u00e9verrouiller les blocs \u00e0 partir du menu Options disponible dans la barre d’outils des blocs.<\/p>\n
\"D\u00e9verrouiller
D\u00e9verrouiller un bloc<\/figcaption><\/figure>\n
Lorsque vous cliquez sur D\u00e9verrouiller<\/strong>, une fen\u00eatre modale vous permet d’activer\/d\u00e9sactiver le mouvement, d’emp\u00eacher la suppression, ou les deux :<\/p>\n
\"Options
Options de verrouillage<\/figcaption><\/figure>\n
template_lock<\/code> peut prendre l’une des valeurs suivantes<\/a>:<\/p>\n