{"id":79656,"date":"2025-04-02T13:32:56","date_gmt":"2025-04-02T12:32:56","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=79656&#038;preview=true&#038;preview_id=79656"},"modified":"2025-04-16T11:59:28","modified_gmt":"2025-04-16T10:59:28","slug":"etendre-blocs-coeur-wp","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/etendre-blocs-coeur-wp\/","title":{"rendered":"Comment \u00e9tendre les blocs de base de WordPress avec l&rsquo;API Blocks"},"content":{"rendered":"<p>En 2018, WordPress a introduit l&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/\">\u00e9diteur Gutenberg<\/a> avec la <a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-0\/\">version 5.0<\/a>, apportant une nouvelle fa\u00e7on de construire des pages et des articles \u00e0 l&rsquo;aide de \u00ab blocs \u00bb. Au d\u00e9but, ces blocs \u00e9taient assez basiques, mais au fil des ans, <a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-6-6\/#other-improvements-to-the-block-editor\">ils ont \u00e9volu\u00e9<\/a> pour offrir plus de flexibilit\u00e9 et une meilleure exp\u00e9rience d&rsquo;\u00e9dition.<\/p>\n<p>Pourtant, il arrive qu&rsquo;un bloc ne fasse pas tout \u00e0 fait ce dont vous avez besoin. Vous voulez peut-\u00eatre supprimer certaines fonctions, en ajouter de nouvelles, appliquer un style sp\u00e9cifique par d\u00e9faut ou rendre certains r\u00e9glages plus faciles d&rsquo;acc\u00e8s. Dans ce cas, la <a href=\"https:\/\/kinsta.com\/fr\/blog\/blocs-gutenberg\/\">cr\u00e9ation d&rsquo;un bloc personnalis\u00e9<\/a> \u00e0 partir de z\u00e9ro peut sembler une option, mais &#8211; soyons honn\u00eates &#8211; c&rsquo;est exag\u00e9r\u00e9 pour de petites modifications. Ne serait-il pas plus simple de modifier des blocs qui existent d\u00e9j\u00e0 ?<\/p>\n<p>C&rsquo;est l\u00e0 que l&rsquo;<a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/\" target=\"_blank\" rel=\"noopener noreferrer\">API des blocs<\/a> entre en jeu. Cet article explique comment \u00e9tendre les blocs de base de WordPress \u00e0 l&rsquo;aide de l&rsquo;API des blocs, en fournissant des exemples pratiques qui peuvent \u00eatre utilis\u00e9s dans des projets r\u00e9els.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Comprendre l&rsquo;API des blocs WordPress<\/h2>\n<p>L&rsquo;API des blocs WordPress est la base de l&rsquo;\u00e9diteur de blocs, permettant aux <a href=\"https:\/\/kinsta.com\/fr\/blog\/types-de-developpeurs\/\">d\u00e9veloppeurs<\/a> de cr\u00e9er, de modifier et d&rsquo;\u00e9tendre les blocs. L&rsquo;API propose diff\u00e9rentes fa\u00e7ons d&rsquo;interagir avec les blocs. Vous pouvez :<\/p>\n<ul>\n<li><strong>Modifier les r\u00e9glages des blocs<\/strong> &#8211; Changer les attributs, les valeurs par d\u00e9faut et les comportements des blocs.<\/li>\n<li><strong>Ajouter ou supprimer des supports de bloc<\/strong> &#8211; Activer ou d\u00e9sactiver des caract\u00e9ristiques telles que la typographie, les couleurs et l&rsquo;espacement.<\/li>\n<li><strong>Injecter des contr\u00f4les personnalis\u00e9s<\/strong> &#8211; Ajouter de nouvelles options \u00e0 l&rsquo;int\u00e9rieur du panneau des r\u00e9glages du bloc.<\/li>\n<li><strong>Cr\u00e9er des variations de blocs<\/strong> &#8211; Cr\u00e9er des versions pr\u00e9configur\u00e9es de blocs existants pour acc\u00e9l\u00e9rer la cr\u00e9ation de contenu.<\/li>\n<\/ul>\n<p>Chaque bloc dans WordPress, qu&rsquo;il s&rsquo;agisse d&rsquo;un <a href=\"https:\/\/wordpress.org\/documentation\/article\/Paragraph-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">paragraphe<\/a>, d&rsquo;une <a href=\"https:\/\/wordpress.org\/documentation\/article\/image-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">image<\/a> ou d&rsquo;un <a href=\"https:\/\/wordpress.org\/documentation\/article\/button-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">bouton<\/a>, est d\u00e9fini par un ensemble d&rsquo;attributs et de r\u00e9glages stock\u00e9s dans un fichier <code>block.json<\/code>. Ce fichier contient des <a href=\"https:\/\/kinsta.com\/fr\/blog\/ajouter-boite-meta-champ-personnalise-wordpress\/\">m\u00e9tadonn\u00e9es<\/a> sur le bloc, notamment son nom, sa cat\u00e9gorie, ses attributs par d\u00e9faut et les fonctionnalit\u00e9s qu&rsquo;il prend en charge.<\/p>\n<p>WordPress vous permet de modifier ces valeurs \u00e0 l&rsquo;aide de <a href=\"https:\/\/kinsta.com\/php\/\">PHP<\/a> ou de <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-javascript\/\">JavaScript<\/a>, mais cet article explique comment utiliser les <a href=\"https:\/\/learn.wordpress.org\/lesson\/filter-hooks\/\" target=\"_blank\" rel=\"noopener noreferrer\">crochets de filtrage<\/a> de l&rsquo;API des blocs. Cela permet de s&rsquo;assurer que tes modifications sont enregistr\u00e9es sur le serveur sans qu&rsquo;il soit n\u00e9cessaire de <a href=\"https:\/\/kinsta.com\/fr\/blog\/wp-enqueue-scripts\/\">mettre en file d&rsquo;attente des<\/a> fichiers JavaScript suppl\u00e9mentaires.<\/p>\n<p>Par exemple, si vous voulez activer ou d\u00e9sactiver certaines fonctions d&rsquo;un bloc, la meilleure fa\u00e7on de le faire est d&rsquo;utiliser le <a href=\"https:\/\/kinsta.com\/fr\/blog\/hooks-wordpress\/#hooks-vs-actions-vs-filters\">filtre<\/a> <code>register_block_type_args<\/code> en PHP. Cette m\u00e9thode vous permet d&rsquo;ajuster les r\u00e9glages du bloc de fa\u00e7on dynamique sans modifier directement le fichier <code>block.json<\/code>.<\/p>\n<h2>Modifier les supports des blocs<\/h2>\n<p>Les blocs WordPress sont livr\u00e9s avec des supports pr\u00e9d\u00e9finis, qui contr\u00f4lent les options de l&rsquo;\u00e9diteur. Certains blocs, comme le <a href=\"https:\/\/wordpress.org\/documentation\/article\/image-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">bloc Image<\/a> (<code>core\/image<\/code>), ont des <a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-6-3\/#enhanced-duotone-filter\">filtres duotone<\/a> activ\u00e9s par d\u00e9faut, ce qui permet aux utilisateurs d&rsquo;appliquer des superpositions de couleurs.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/02\/image-block-duotone.png\" alt=\"Bloc Image WordPress avec filtre Duotone.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Bloc Image WordPress avec filtre Duotone.<\/figcaption><\/figure>\n<p>Cependant, le <a href=\"https:\/\/wordpress.org\/documentation\/article\/media-text-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">bloc M\u00e9dia &#038; Texte<\/a> (<code>core\/media-text<\/code>) ne prend pas en charge le duotone d&#8217;embl\u00e9e, m\u00eame s&rsquo;il permet aux utilisateurs d&rsquo;ins\u00e9rer une image. Cela signifie que si vous pouvez appliquer un filtre duotone \u00e0 un bloc Image autonome, vous ne pouvez pas faire de m\u00eame lorsqu&rsquo;une image est plac\u00e9e \u00e0 l&rsquo;int\u00e9rieur d&rsquo;un bloc M\u00e9dia &#038; Texte.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/02\/media-text-block.png\" alt=\"Bloc M\u00e9dia &#038; Texte sans support Duotone.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Bloc M\u00e9dia &#038; Texte sans support Duotone.<\/figcaption><\/figure>\n<p>\u00c9tant donn\u00e9 que le bloc M\u00e9dia et texte peut contenir une image, il est logique d&rsquo;activer les filtres duotone. Nous pouvons le faire en modifiant son tableau <code>supports<\/code> et en sp\u00e9cifiant le s\u00e9lecteur CSS correct pour que le filtre s&rsquo;applique correctement. Nous pouvons l&rsquo;activer en utilisant le filtre <code>register_block_type_args<\/code> en PHP.<\/p>\n<p>Ajoutez le code suivant au fichier <code>functions.php<\/code> de votre th\u00e8me :<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p>Si vous ajoutez ceci au fichier <code>functions.php<\/code> de votre th\u00e8me, il est pr\u00e9f\u00e9rable de le faire dans un <strong>th\u00e8me enfant<\/strong> pour \u00e9viter de perdre vos modifications lors des mises \u00e0 jour du th\u00e8me.<\/p>\n<p>Sinon, si vous \u00eates un <strong>utilisateur de Kinsta<\/strong>, nous vous recommandons de tester ceci dans un <strong>environnement de staging<\/strong> avant de l&rsquo;appliquer \u00e0 votre site en direct. Cela permet de s&rsquo;assurer que tout fonctionne correctement sans affecter la production.<\/p>\n<\/aside>\n\n<pre><code class=\"language-php\">function enable_duotone_for_media_text_block($args, $block_type) {\n\t\n\t\/\/ Only modify the Media & Text block\n\tif ( 'core\/media-text' === $block_type ) {\n\t\t$args['supports'] ??= [];\n\t\t$args['supports']['filter'] ??= [];\n\t\t$args['supports']['filter']['duotone'] = true;\n\n\t\t$args['selectors'] ??= [];\n\t\t$args['selectors']['filter'] ??= [];\n\t\t$args['selectors']['filter']['duotone'] = '.wp-block-media-text .wp-block-media-text__media';\n\t}\n\n\treturn $args;\n}\nadd_filter('register_block_type_args', 'enable_duotone_for_media_text_block', 10, 2);<\/code><\/pre>\n<p>Le code ci-dessus active le filtre duotone \u00e0 l&rsquo;int\u00e9rieur du tableau <code>supports<\/code> et d\u00e9finit le s\u00e9lecteur CSS correct pour appliquer l&rsquo;effet duotone aux images \u00e0 l&rsquo;int\u00e9rieur du bloc M\u00e9dia &#038; Texte. La fonction <code>add_filter()<\/code> utilise <code>10<\/code> comme priorit\u00e9 (lorsque le filtre s&rsquo;ex\u00e9cute) et <code>2<\/code> pour sp\u00e9cifier le nombre d&rsquo;arguments pass\u00e9s (<code>$args<\/code>, <code>$block_type<\/code>).<\/p>\n<p>Lorsque vous enregistrez le fichier et que vous le rechargez, vous devriez voir les contr\u00f4les <strong>Duotone<\/strong> disponibles dans la section <strong>Filtres<\/strong>.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/02\/duotone-added-media-text.png\" alt=\"Filtre Duotone activ\u00e9.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Filtre Duotone activ\u00e9.<\/figcaption><\/figure>\n<p>L&rsquo;activation du duotone pour le bloc M\u00e9dia &#038; Texte \u00e0 l&rsquo;aide de <code>register_block_type_args<\/code> est un moyen efficace de modifier le comportement du bloc de mani\u00e8re dynamique. Cependant, WordPress propose une autre m\u00e9thode pour modifier les r\u00e9glages des blocs : <strong>remplacer les m\u00e9tadonn\u00e9es des blocs<\/strong> \u00e0 l&rsquo;aide de <code>block_type_metadata<\/code>.<\/p>\n<p>Les deux approches vous permettent de personnaliser les blocs, mais elles fonctionnent \u00e0 des \u00e9tapes diff\u00e9rentes du processus d&rsquo;enregistrement des blocs.<\/p>\n<p>Par exemple, disons que nous voulons ajuster le <a href=\"https:\/\/wordpress.org\/documentation\/article\/Paragraph-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">bloc Paragraphe<\/a> (<code>core\/paragraph<\/code>) pour qu&rsquo;il ne prenne en charge que les ajustements de marge et qu&rsquo;il d\u00e9sactive le remplissage. Une fa\u00e7on d&rsquo;y parvenir est d&rsquo;utiliser <code>register_block_type_args<\/code>:<\/p>\n<pre><code class=\"language-php\">function modify_paragraph_spacing_args($args, $block_type) {\n    if ($block_type === 'core\/paragraph') {\n        $args['supports']['spacing'] = [\n            'margin' =&gt; true,\n            'padding' =&gt; false\n        ];\n    }\n    return $args;\n}\nadd_filter('register_block_type_args', 'modify_paragraph_spacing_args', 10, 2);<\/code><\/pre>\n<p>Cette m\u00e9thode fonctionne bien dans la plupart des cas, mais comme elle modifie le bloc apr\u00e8s qu&rsquo;il a d\u00e9j\u00e0 \u00e9t\u00e9 enregistr\u00e9, elle peut parfois \u00eatre remplac\u00e9e par d&rsquo;autres <a href=\"https:\/\/kinsta.com\/fr\/blog\/plugin-wordpress\/\">extensions<\/a> ou <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-ce-qu-un-theme-wordpress\/\">th\u00e8mes<\/a> qui modifient le m\u00eame bloc plus tard dans le processus.<\/p>\n<p>Une approche plus structur\u00e9e dans ce cas pourrait consister \u00e0 remplacer les m\u00e9tadonn\u00e9es du bloc directement en utilisant <code>block_type_metadata<\/code>:<\/p>\n<pre><code class=\"language-php\">function mytheme_modify_paragraph_spacing($metadata) {\n    if ($metadata['name'] === 'core\/paragraph') {\n        $metadata['supports']['spacing'] = [\n            'margin' =&gt; true,\n            'padding' =&gt; false\n        ];\n    }\n    return $metadata;\n}\nadd_filter('block_type_metadata', 'mytheme_modify_paragraph_spacing');<\/code><\/pre>\n<p>Aucune des deux approches n&rsquo;est intrins\u00e8quement meilleure que l&rsquo;autre &#8211; cela d\u00e9pend simplement du moment o\u00f9 vous voulez modifier le bloc et de la persistance du changement.<\/p>\n<h2>Enregistrement des styles de blocs<\/h2>\n<p>De nombreux blocs WordPress sont dot\u00e9s de styles pr\u00e9d\u00e9finis que les utilisateurs peuvent s\u00e9lectionner dans l&rsquo;\u00e9diteur. Un bon exemple est le <a href=\"https:\/\/wordpress.org\/documentation\/article\/image-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">bloc Image<\/a> (<code>core\/image<\/code>), qui inclut un style <strong>Arrondi<\/strong> par d\u00e9faut. Cependant, les coins arrondis par d\u00e9faut sont souvent trop extr\u00eames, ce qui fait que l&rsquo;image ressemble plus \u00e0 un ovale qu&rsquo;\u00e0 un \u00e9l\u00e9ment bien stylis\u00e9.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/02\/image-block-rounded.png\" alt=\"Style arrondi par d\u00e9faut.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Style arrondi par d\u00e9faut.<\/figcaption><\/figure>\n<p>Au lieu d&rsquo;ajuster manuellement l&rsquo;arrondi de la bordure pour chaque image, une meilleure approche consiste \u00e0 personnaliser le style arrondi afin qu&rsquo;il applique un arrondi plus raffin\u00e9 &#8211; peut-\u00eatre en ajoutant une <a href=\"https:\/\/kinsta.com\/fr\/blog\/contour-texte-css\/\">ombre<\/a> subtile pour un look moderne. De cette fa\u00e7on, les utilisateurs peuvent simplement cliquer sur un bouton pour appliquer un style bien con\u00e7u sans avoir besoin de modifier manuellement les r\u00e9glages \u00e0 chaque fois.<\/p>\n<p>Prenons le style <strong>Arrondi<\/strong> du bloc Image et personnalisons-le pour que les coins soient l\u00e9g\u00e8rement arrondis au lieu d&rsquo;\u00eatre excessivement courb\u00e9s, et qu&rsquo;une ombre subtile soit ajout\u00e9e pour un aspect plus soign\u00e9.<\/p>\n<p>Comme l&rsquo;\u00e9diteur de blocs permet d&rsquo;enregistrer et de d\u00e9senregistrer les styles de blocs, nous pouvons supprimer le style <strong>Arrondi<\/strong> par d\u00e9faut et le remplacer par une version personnalis\u00e9e.<\/p>\n<p>Voici comment proc\u00e9der :<\/p>\n<pre><code class=\"language-php\">function modify_image_block_rounded_style() {\n    \/\/ Remove the default \"Rounded\" style\n    unregister_block_style( 'core\/image', 'rounded' );\n\n    \/\/ Register a new \"Rounded\" style with custom CSS\n    register_block_style(\n        'core\/image',\n        array(\n            'name'         =&gt; 'rounded',\n            'label'        =&gt; __( 'Rounded', 'your-text-domain' ),\n            'inline_style' =&gt; '\n                .wp-block-image.is-style-rounded img {\n                    border-radius: 20px; \/* Adjust this value *\/\n                    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); \/* Optional shadow *\/\n                }\n            ',\n        )\n    );\n}\nadd_action( 'init', 'modify_image_block_rounded_style' );<\/code><\/pre>\n<p>Le code remplace le style trop arrondi par d\u00e9faut par une version raffin\u00e9e qui applique <code>border-radius: 20px;<\/code> pour des coins plus doux et <code>box-shadow<\/code> pour une \u00e9l\u00e9vation subtile.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/02\/adjust-rounded-img-block.png\" alt=\"Style arrondi raffin\u00e9.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Style arrondi raffin\u00e9.<\/figcaption><\/figure>\n<h3>Utilisation d&rsquo;un fichier CSS externe au lieu de styles en ligne<\/h3>\n<p>Si le <a href=\"https:\/\/kinsta.com\/fr\/blog\/meilleurs-pratiques-css\/#2-inline-css-vs-external-css-vs-internal-css\">style en ligne<\/a> fonctionne bien pour les styles simples, il n&rsquo;est pas id\u00e9al pour la maintenabilit\u00e9. Une meilleure approche consiste \u00e0 d\u00e9finir les styles dans un fichier CSS externe et \u00e0 le mettre en file d&rsquo;attente.<\/p>\n<p>Pour cela, cr\u00e9ez un nouveau fichier CSS, par exemple <code>custom-block-styles.css<\/code>, et ajoutez-y ceci :<\/p>\n<pre><code class=\"language-css\">\/* Custom Rounded Image Block Style *\/\n.wp-block-image.is-style-rounded img {\n    border-radius: 20px; \/* Adjusted rounded corners *\/\n    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); \/* Subtle shadow *\/\n}<\/code><\/pre>\n<p>Ensuite, vous mettez en file d&rsquo;attente le fichier CSS dans <code>functions.php<\/code>:<\/p>\n<pre><code class=\"language-php\">function enqueue_custom_block_styles() {\n    wp_enqueue_style(\n        'custom-block-styles',\n        get_template_directory_uri() . '\/css\/custom-block-styles.css',\n        array(),\n        '1.0'\n    );\n}\nadd_action('wp_enqueue_scripts', 'enqueue_custom_block_styles');\nadd_action('enqueue_block_editor_assets', 'enqueue_custom_block_styles');<\/code><\/pre>\n<p>Maintenant, au lieu d&rsquo;utiliser le style inline, vous pouvez enregistrer le style sans int\u00e9grer le <a href=\"https:\/\/kinsta.com\/fr\/blog\/meilleurs-pratiques-css\/\">CSS<\/a> directement dans PHP :<\/p>\n<pre><code class=\"language-php\">register_block_style(\n    'core\/image',\n    array(\n        'name'  =&gt; 'rounded',\n        'label' =&gt; __( 'Rounded', 'your-text-domain' ),\n        'style_handle' =&gt; 'custom-block-styles'\n    )\n);<\/code><\/pre>\n<p>De cette fa\u00e7on, vous pouvez modifier les styles sans toucher \u00e0 PHP.<\/p>\n<h2>Enregistrer des variations de blocs<\/h2>\n<p>Les <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-variations\/\" target=\"_blank\" rel=\"noopener noreferrer\">variations de bloc<\/a> vous permettent de cr\u00e9er des versions pr\u00e9d\u00e9finies d&rsquo;un bloc avec des r\u00e9glages personnalis\u00e9s, ce qui permet aux utilisateurs d&rsquo;appliquer plus facilement des conceptions coh\u00e9rentes en un seul clic. Au lieu de modifier manuellement les r\u00e9glages d&rsquo;un bloc \u00e0 chaque fois, une variation vous permet d&rsquo;ins\u00e9rer un bloc auquel les bons attributs, styles ou configurations sont d\u00e9j\u00e0 appliqu\u00e9s.<\/p>\n<p>Certains blocs de base de WordPress fonctionnent en fait de cette fa\u00e7on. Le <a href=\"https:\/\/wordpress.org\/documentation\/article\/embed-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">bloc Embed<\/a> n&rsquo;est pas un bloc unique &#8211; c&rsquo;est un ensemble de variations pour diff\u00e9rentes plateformes comme <a href=\"https:\/\/wordpress.org\/documentation\/article\/youtube-embed\/\" target=\"_blank\" rel=\"noopener noreferrer\">YouTube<\/a>, <a href=\"https:\/\/wordpress.org\/documentation\/article\/Twitter-embed\/\" target=\"_blank\" rel=\"noopener noreferrer\">Twitter<\/a> et <a href=\"https:\/\/wordpress.org\/documentation\/article\/Spotify-embed\/\" target=\"_blank\" rel=\"noopener noreferrer\">Spotify<\/a>. Le <a href=\"https:\/\/wordpress.org\/documentation\/article\/Row-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">bloc Row<\/a> et le <a href=\"https:\/\/wordpress.org\/documentation\/article\/stack-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">bloc Stack<\/a> sont \u00e9galement des variantes du <a href=\"https:\/\/wordpress.org\/documentation\/article\/group-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">bloc Group<\/a>, chacune avec des r\u00e9glages de mise en page diff\u00e9rents.<\/p>\n<p>Cette approche permet de conserver une certaine modularit\u00e9, ce qui permet \u00e0 WordPress de proposer des exp\u00e9riences personnalis\u00e9es tout en utilisant une structure sous-jacente commune.<\/p>\n<h3>Cr\u00e9ation d&rsquo;une variante T\u00e9moignage du bloc Citation<\/h3>\n<p>Bien que WordPress ne dispose pas d&rsquo;un bloc d\u00e9di\u00e9 aux t\u00e9moignages, le <a href=\"https:\/\/wordpress.org\/documentation\/article\/quote-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">bloc Citation<\/a> (<code>core\/quote<\/code>) peut \u00eatre adapt\u00e9 \u00e0 cet effet. Au lieu de demander aux utilisateurs d&rsquo;ajouter manuellement une image, d&rsquo;aligner le texte et de tout mettre en forme, nous pouvons d\u00e9finir une variante T\u00e9moignage du bloc Citation.<\/p>\n<p>Cette variante comprend automatiquement un bloc Image, un bloc Citation et deux blocs Paragraphe pour le nom et l&rsquo;entreprise de la personne. Cela permet de s&rsquo;assurer que chaque t\u00e9moignage suit le m\u00eame format structur\u00e9 sans n\u00e9cessiter d&rsquo;ajustements suppl\u00e9mentaires.<\/p>\n<p>Pour enregistrer une variation de bloc dans WordPress, nous utilisons <code>registerBlockVariation()<\/code> en JavaScript. Comme les variations de bloc sont g\u00e9r\u00e9es c\u00f4t\u00e9 client, nous devons mettre en file d&rsquo;attente un fichier JavaScript qui enregistre notre variation de t\u00e9moignage personnalis\u00e9e.<\/p>\n<p>Pour mettre cela en \u0153uvre, cr\u00e9ez un fichier JavaScript (comme <code>custom-block-variations.js<\/code>) qui d\u00e9finit la variation T\u00e9moignage du bloc Citation. Vous pouvez cr\u00e9er ce fichier dans le r\u00e9pertoire <code>assets\/js\/<\/code> de votre th\u00e8me et ajouter le code suivant :<\/p>\n<pre><code class=\"language-js\">wp.domReady(() =&gt; {\n    wp.blocks.registerBlockVariation(\n        'core\/quote',\n        {\n            name: 'testimonial',\n            title: 'Testimonial',\n            description: 'A variation of the Quote block for testimonials.',\n            category: 'text',\n            attributes: {\n                className: 'is-style-testimonial',\n            },\n            innerBlocks: [\n                ['core\/image', { align: 'center', width: 100, height: 100 }],\n                ['core\/quote'],\n                ['core\/paragraph', { placeholder: 'Name', align: 'center', fontSize: 'medium', className: 'testimonial-name' }],\n                ['core\/paragraph', { placeholder: 'Company \/ Role', align: 'center', fontSize: 'small', className: 'testimonial-company' }]\n            ],\n            scope: ['inserter'],\n        }\n    );\n\n    \/\/ Inject inline styles for the editor preview\n    const style = document.createElement('style');\n    style.innerHTML = `\n        .wp-block-quote.is-style-testimonial {\n            background-color: #f9f9f9;\n            padding: 24px;\n            border: none !important;\n            border-radius: 8px;\n            text-align: center;\n            font-size: 1.2em;\n            font-style: normal;\n            color: #333;\n            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n        }\n\n        .wp-block-quote.is-style-testimonial p {\n            margin-bottom: 12px;\n            font-size: 1.1em;\n        }\n\n        .wp-block-quote.is-style-testimonial cite {\n            font-weight: bold;\n            display: block;\n            margin-top: 10px;\n            color: #0073aa;\n        }\n\n        .wp-block-quote.is-style-testimonial .wp-block-image {\n            display: flex;\n            justify-content: center;\n            margin: 0 auto 12px;\n        }\n\n        .wp-block-quote.is-style-testimonial .wp-block-image img {\n            width: 100px;\n            height: 100px;\n            object-fit: cover;\n            border-radius: 12px;\n        }\n\n        .wp-block-quote.is-style-testimonial .testimonial-name {\n            font-weight: bold;\n            font-size: 1.2em;\n            margin-top: 12px;\n            color: #222;\n        }\n\n        .wp-block-quote.is-style-testimonial .testimonial-company {\n            font-size: 0.9em;\n            color: #555;\n        }\n    `;\n    document.head.appendChild(style);\n});<\/code><\/pre>\n<p>Dans le code ci-dessus, <code>registerBlockVariation()<\/code> d\u00e9finissez la variante T\u00e9moignage du bloc Citation, en pr\u00e9chargeant un bloc Image, un bloc Citation et deux blocs Paragraphe pour le nom et l&rsquo;entreprise de la personne. Le bloc Image est centr\u00e9 \u00e0 100&#215;100 pixels pour des images de profil uniformes, tandis que le bloc Citation reste inchang\u00e9 en tant que texte de t\u00e9moignage.<\/p>\n<p>Une classe personnalis\u00e9e (<code>is-style-testimonial<\/code>) est appliqu\u00e9e pour le style, donnant au bloc un arri\u00e8re-plan clair, une ombre subtile et un texte centr\u00e9. La bordure gauche par d\u00e9faut est supprim\u00e9e et l&rsquo;image conserve son rapport hauteur\/largeur avec des coins l\u00e9g\u00e8rement arrondis pour un aspect soign\u00e9.<\/p>\n<p>Ensuite, comme le fichier JavaScript doit \u00eatre charg\u00e9 dans l&rsquo;\u00e9diteur de blocs, nous devons le mettre en file d&rsquo;attente \u00e0 l&rsquo;adresse <code>functions.php<\/code>.<\/p>\n<pre><code class=\"language-php\">function enqueue_custom_block_variations() {\n    wp_enqueue_script(\n        'custom-block-variations',\n        get_template_directory_uri() . '\/assets\/js\/custom-block-variations.js',\n        array( 'wp-blocks', 'wp-dom-ready', 'wp-edit-post' ),\n        filemtime( get_template_directory() . '\/assets\/js\/custom-block-variations.js' ),\n        true\n    );\n}\nadd_action( 'enqueue_block_editor_assets', 'enqueue_custom_block_variations' );<\/code><\/pre>\n<p>Cela permet de s&rsquo;assurer que la variation du bloc T\u00e9moignage appara\u00eet dans l&rsquo;\u00e9diteur de blocs.<\/p>\n<p>Alors que le code JavaScript garantit que le bloc appara\u00eet correctement dans l&rsquo;\u00e9diteur, nous devons \u00e9galement appliquer les styles sur l&rsquo;interface publique pour que les t\u00e9moignages s&rsquo;affichent correctement lorsqu&rsquo;ils sont publi\u00e9s. Ajoutez le code suivant \u00e0 <code>functions.php<\/code>:<\/p>\n<pre><code class=\"language-php\">function register_testimonial_block_style() {\n    register_block_style(\n        'core\/quote',\n        array(\n            'name'  =&gt; 'testimonial',\n            'label' =&gt; __( 'Testimonial', 'your-text-domain' ),\n            'inline_style' =&gt; '\n                .wp-block-quote.is-style-testimonial {\n                    background-color: #f9f9f9;\n                    padding: 24px;\n                    border: none !important;\n                    border-radius: 8px;\n                    text-align: center;\n                    font-size: 1.2em;\n                    font-style: normal;\n                    color: #333;\n                    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);\n                    display: flex;\n                    flex-direction: column;\n                    align-items: center;\n                }\n\n                .wp-block-quote.is-style-testimonial .wp-block-image img {\n                    width: 100px;\n                    height: 100px;\n                    object-fit: cover;\n                    border-radius: 12px;\n                }\n\n                .wp-block-quote.is-style-testimonial .testimonial-name {\n                    font-weight: bold;\n                    font-size: 1.2em;\n                    margin-top: 12px;\n                    color: #222;\n                }\n\n                .wp-block-quote.is-style-testimonial .testimonial-company {\n                    font-size: 0.9em;\n                    color: #555;\n                }\n            ',\n        )\n    );\n}\nadd_action( 'init', 'register_testimonial_block_style' );<\/code><\/pre>\n<p>D\u00e9sormais, chaque fois qu&rsquo;un utilisateur ins\u00e8re un bloc de t\u00e9moignage, il inclut d\u00e9j\u00e0 les champs <strong>image<\/strong>, <strong>citation<\/strong>, <strong>nom<\/strong> et <strong>entreprise<\/strong>, tous pr\u00e9format\u00e9s et stylis\u00e9s correctement. Cela \u00e9limine le besoin d&rsquo;ajustements manuels et garantit que chaque t\u00e9moignage suit la m\u00eame structure propre et professionnelle.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/02\/testimonial-block.png\" alt=\"Variation du bloc T\u00e9moignage.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Variation du bloc T\u00e9moignage.<\/figcaption><\/figure>\n<p>Au lieu de forcer les utilisateurs \u00e0 construire des t\u00e9moignages \u00e0 partir de z\u00e9ro, cette variation de bloc fournit un flux de travail rationalis\u00e9 qui am\u00e9liore la cr\u00e9ation de contenu tout en maintenant la coh\u00e9rence de la conception du site.<\/p>\n<h2>Cas d&rsquo;utilisation avanc\u00e9 : Combiner les API Supports et Styles pour cr\u00e9er des boutons de marque<\/h2>\n<p>Maintenant que vous savez ce que chaque API peut faire et comment elle fonctionne, pourquoi ne pas pousser les choses un peu plus loin ? Au lieu d&rsquo;utiliser l&rsquo;API Supports ou l&rsquo;API Styles s\u00e9par\u00e9ment, nous pouvons les utiliser ensemble pour r\u00e9soudre un seul probl\u00e8me : maintenir la coh\u00e9rence de la conception tout en donnant aux utilisateurs un moyen structur\u00e9 d&rsquo;appliquer les bons styles.<\/p>\n<p>Consid\u00e9rons un sc\u00e9nario du monde r\u00e9el. Une entreprise souhaite que tous les boutons de son site respectent des directives strictes en mati\u00e8re de marque. Elle ne veut pas que les utilisateurs choisissent des couleurs au hasard, modifient le remplissage ou appliquent une typographie bizarre. Cependant, elle veut de la flexibilit\u00e9 &#8211; les utilisateurs doivent donc pouvoir choisir entre deux styles de boutons pr\u00e9-approuv\u00e9s :<\/p>\n<ol start=\"1\">\n<li><strong>Bouton principal<\/strong> &#8211; Le principal bouton d&rsquo;appel \u00e0 l&rsquo;action, avec un arri\u00e8re-plan solide et un style audacieux.<\/li>\n<li><strong>Bouton<\/strong> <strong>secondaire<\/strong> &#8211; Un bouton plus subtil, avec un contour, g\u00e9n\u00e9ralement utilis\u00e9 pour des actions secondaires.<\/li>\n<\/ol>\n<p>Pour y parvenir, nous devons :<\/p>\n<ul>\n<li>Utiliser l&rsquo;API Styles pour d\u00e9finir les deux styles de boutons.<\/li>\n<li>Utiliser l&rsquo;API Supports pour supprimer les r\u00e9glages inutiles, afin de s&rsquo;assurer que les utilisateurs ne remplacent pas manuellement l&rsquo;image de marque en modifiant les couleurs, l&rsquo;espacement ou la typographie.<\/li>\n<\/ul>\n<p>En combinant les deux API, nous permettons des choix structur\u00e9s tout en emp\u00eachant les utilisateurs de casser le syst\u00e8me de conception.<\/p>\n<h3>\u00c9tape 1 : D\u00e9finir des styles de boutons personnalis\u00e9s<\/h3>\n<p>Commencez par ajouter le code suivant au fichier <code>functions.php<\/code>:<\/p>\n<pre><code class=\"language-php\">function register_custom_button_styles() {\n    register_block_style(\n        'core\/button',\n        array(\n            'name'  =&gt; 'primary-button',\n            'label' =&gt; __( 'Primary Button', 'your-text-domain' ),\n            'inline_style' =&gt; '\n                .wp-block-button.is-style-primary-button .wp-block-button__link {\n                    background-color: #4D4D4D;\n                    color: #ffffff;\n                    padding: 12px 24px;\n                    border-radius: 4px;\n                    font-size: 1em;\n                    font-weight: 500;\n                    text-transform: none;\n                    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);\n                }\n            ',\n        )\n    );\n\n    register_block_style(\n        'core\/button',\n        array(\n            'name'  =&gt; 'secondary-button',\n            'label' =&gt; __( 'Secondary Button', 'your-text-domain' ),\n            'inline_style' =&gt; '\n                .wp-block-button.is-style-secondary-button .wp-block-button__link {\n                    background-color: transparent;\n                    color: #4D4D4D;\n                    padding: 12px 24px;\n                    border: 1px solid #4D4D4D;\n                    border-radius: 4px;\n                    font-size: 1em;\n                    font-weight: 500;\n                    text-transform: none;\n                    box-shadow: none;\n                }\n            ',\n        )\n    );\n}\nadd_action( 'init', 'register_custom_button_styles' );<\/code><\/pre>\n<p>D\u00e9sormais, lorsque les utilisateurs ins\u00e8rent un bloc Bouton, ils voient <strong>Bouton principal<\/strong> et <strong>Bouton secondaire<\/strong> comme choix de style.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/02\/custom-button-styles.png\" alt=\"Styles de boutons personnalis\u00e9s.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Styles de boutons personnalis\u00e9s.<\/figcaption><\/figure>\n<p>Le bouton principal a un arri\u00e8re-plan gris fonc\u00e9 uni, tandis que le bouton secondaire a un arri\u00e8re-plan transparent avec une bordure. Les deux boutons ont un rembourrage, un rayon de bordure et un style de police coh\u00e9rents, ce qui garantit une apparence professionnelle sur l&rsquo;ensemble du site.<\/p>\n<h3>\u00c9tape 2 : Restreindre la personnalisation des boutons<\/h3>\n<p>Bien que les styles des boutons soient maintenant pr\u00e9d\u00e9finis, les utilisateurs peuvent toujours les remplacer manuellement en utilisant les param\u00e8tres de l&rsquo;\u00e9diteur de blocs de WordPress. S&rsquo;ils modifient les couleurs, le remplissage ou la <a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-typographie-theme-json\/\">typographie<\/a>, les boutons risquent de ne plus correspondre aux directives de la marque.<\/p>\n<p>Nous pouvons utiliser l&rsquo;API Supports pour d\u00e9sactiver ces options de personnalisation, emp\u00eachant ainsi les utilisateurs d&rsquo;apporter des modifications involontaires. Ajoute ceci \u00e0 <code>functions.php<\/code>:<\/p>\n<pre><code class=\"language-php\">function restrict_button_customization($args, $block_type) {\n    if ($block_type === 'core\/button') {\n        \/\/ Disable specific color settings (text, background, link)\n        $args['supports']['color'] = [\n            'text'       =&gt; false, \n            'background' =&gt; false, \n            'link'       =&gt; false,  \n        ];\n\n        \/\/ Disable typography settings (font size, font weight, line height)\n        $args['supports']['typography'] = false;\n\n        \/\/ Disable spacing settings (padding, margin)\n        $args['supports']['spacing'] = false;\n\n    }\n    return $args;\n}\nadd_filter('register_block_type_args', 'restrict_button_customization', 10, 2);<\/code><\/pre>\n<p>Avec ceci en place :<\/p>\n<ul>\n<li>Les utilisateurs ne peuvent pas changer la couleur des boutons, donc tous les boutons doivent adh\u00e9rer \u00e0 la palette de couleurs de la marque.<\/li>\n<li>Les contr\u00f4les de typographie sont supprim\u00e9s, ce qui permet de conserver un formatage de texte coh\u00e9rent.<\/li>\n<li>Les ajustements d&rsquo;espacement sont d\u00e9sactiv\u00e9s, ce qui emp\u00eache les utilisateurs de modifier le rembourrage et les marges.<\/li>\n<\/ul>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/02\/new-primary-button.png\" alt=\"Bouton Stylis\u00e9 Primaire.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Bouton Stylis\u00e9 Primaire.<\/figcaption><\/figure>\n<p>Maintenant, au lieu de laisser les utilisateurs cr\u00e9er un m\u00e9lange al\u00e9atoire de styles de boutons, ils choisiront simplement entre les styles primaire et secondaire, ce qui permettra de conserver une conception professionnelle et structur\u00e9e.<\/p>\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>Nous n&rsquo;avons fait qu&rsquo;effleurer la surface de ce qui est possible avec la personnalisation des blocs WordPress. WordPress fournit une vaste collection d&rsquo;API qui facilitent l&rsquo;extension et la personnalisation des blocs, ce qui permet aux d\u00e9veloppeurs d&rsquo;adapter l&rsquo;exp\u00e9rience de l&rsquo;\u00e9diteur tout en gardant les choses structur\u00e9es et conviviales.<\/p>\n<p>Si vous voulez vraiment ma\u00eetriser la personnalisation des blocs, il y a encore beaucoup de choses \u00e0 explorer. Consultez la <a href=\"https:\/\/developer.wordpress.org\/\">documentation officielle destin\u00e9e aux d\u00e9veloppeurs de WordPress<\/a>, assistez aux <a href=\"https:\/\/kinsta.com\/fr\/blog\/guide-wordcamps\/\">WordCamps et aux meetups<\/a>, et continuez d&rsquo;apprendre gr\u00e2ce \u00e0 d&rsquo;excellentes ressources telles que le <a href=\"https:\/\/kinsta.com\/fr\/blog\/\">blog Kinsta<\/a>, o\u00f9 nous d\u00e9composons r\u00e9guli\u00e8rement des concepts avanc\u00e9s de WordPress.<\/p>\n<p>Bien s\u00fbr, le fait d&rsquo;avoir un fournisseur d&rsquo;h\u00e9bergement solide permet d&rsquo;exp\u00e9rimenter ces changements sans effort. Que vous tesitez de nouvelles modifications de blocs ou que vous g\u00e9riez un site \u00e0 fort trafic, un h\u00e9bergement fiable garantit des performances fluides et une \u00e9volutivit\u00e9 facile. Chez Kinsta, nous avons construit notre plateforme pour g\u00e9rer exactement cela. En fait, nous avons r\u00e9cemment \u00e9t\u00e9 <a href=\"https:\/\/kinsta.com\/fr\/blog\/g2-awards\/\">class\u00e9s premiers en mati\u00e8re d&rsquo;h\u00e9bergement WordPress par G2<\/a>, gr\u00e2ce \u00e0 <a href=\"https:\/\/www.g2.com\/products\/kinsta\/reviews\">plus de 930 \u00e9valuations de clients<\/a>.<\/p>\n<p>Cela en dit long : Vous pouvez <a href=\"https:\/\/kinsta.com\/fr\/tarifs\/\">nous faire confiance pour alimenter ton exp\u00e9rience WordPress<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En 2018, WordPress a introduit l&rsquo;\u00e9diteur Gutenberg avec la version 5.0, apportant une nouvelle fa\u00e7on de construire des pages et des articles \u00e0 l&rsquo;aide de \u00ab &#8230;<\/p>\n","protected":false},"author":287,"featured_media":79657,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1028],"class_list":["post-79656","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-developpement-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Comment \u00e9tendre les blocs du c\u0153ur de WordPress avec l&#039;API de blocs<\/title>\n<meta name=\"description\" content=\"Apprenez \u00e0 \u00e9tendre facilement les blocs du c\u0153ur de WordPress en utilisant l&#039;API de blocs pour personnaliser les r\u00e9glages, styliser et ajouter des fonctionnalit\u00e9s.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/fr\/blog\/etendre-blocs-coeur-wp\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comment \u00e9tendre les blocs de base de WordPress avec l&#039;API Blocks\" \/>\n<meta property=\"og:description\" content=\"Apprenez \u00e0 \u00e9tendre facilement les blocs du c\u0153ur de WordPress en utilisant l&#039;API de blocs pour personnaliser les r\u00e9glages, styliser et ajouter des fonctionnalit\u00e9s.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/etendre-blocs-coeur-wp\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-04-02T12:32:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-16T10:59:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1470\" \/>\n\t<meta property=\"og:image:height\" content=\"735\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Apprenez \u00e0 \u00e9tendre facilement les blocs du c\u0153ur de WordPress en utilisant l&#039;API de blocs pour personnaliser les r\u00e9glages, styliser et ajouter des fonctionnalit\u00e9s.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"18 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/etendre-blocs-coeur-wp\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/etendre-blocs-coeur-wp\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Comment \u00e9tendre les blocs de base de WordPress avec l&rsquo;API Blocks\",\"datePublished\":\"2025-04-02T12:32:56+00:00\",\"dateModified\":\"2025-04-16T10:59:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/etendre-blocs-coeur-wp\/\"},\"wordCount\":2933,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/etendre-blocs-coeur-wp\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png\",\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/etendre-blocs-coeur-wp\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/etendre-blocs-coeur-wp\/\",\"name\":\"Comment \u00e9tendre les blocs du c\u0153ur de WordPress avec l'API de blocs\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/etendre-blocs-coeur-wp\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/etendre-blocs-coeur-wp\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png\",\"datePublished\":\"2025-04-02T12:32:56+00:00\",\"dateModified\":\"2025-04-16T10:59:28+00:00\",\"description\":\"Apprenez \u00e0 \u00e9tendre facilement les blocs du c\u0153ur de WordPress en utilisant l'API de blocs pour personnaliser les r\u00e9glages, styliser et ajouter des fonctionnalit\u00e9s.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/etendre-blocs-coeur-wp\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/etendre-blocs-coeur-wp\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/etendre-blocs-coeur-wp\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/etendre-blocs-coeur-wp\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"D\u00e9veloppement WordPress\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/developpement-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Comment \u00e9tendre les blocs de base de WordPress avec l&#8217;API Blocks\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/fr\/#website\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Comment \u00e9tendre les blocs du c\u0153ur de WordPress avec l'API de blocs","description":"Apprenez \u00e0 \u00e9tendre facilement les blocs du c\u0153ur de WordPress en utilisant l'API de blocs pour personnaliser les r\u00e9glages, styliser et ajouter des fonctionnalit\u00e9s.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/fr\/blog\/etendre-blocs-coeur-wp\/","og_locale":"fr_FR","og_type":"article","og_title":"Comment \u00e9tendre les blocs de base de WordPress avec l'API Blocks","og_description":"Apprenez \u00e0 \u00e9tendre facilement les blocs du c\u0153ur de WordPress en utilisant l'API de blocs pour personnaliser les r\u00e9glages, styliser et ajouter des fonctionnalit\u00e9s.","og_url":"https:\/\/kinsta.com\/fr\/blog\/etendre-blocs-coeur-wp\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2025-04-02T12:32:56+00:00","article_modified_time":"2025-04-16T10:59:28+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png","type":"image\/png"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Apprenez \u00e0 \u00e9tendre facilement les blocs du c\u0153ur de WordPress en utilisant l'API de blocs pour personnaliser les r\u00e9glages, styliser et ajouter des fonctionnalit\u00e9s.","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png","twitter_creator":"@olawanle_joel","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Joel Olawanle","Dur\u00e9e de lecture estim\u00e9e":"18 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/etendre-blocs-coeur-wp\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/etendre-blocs-coeur-wp\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Comment \u00e9tendre les blocs de base de WordPress avec l&rsquo;API Blocks","datePublished":"2025-04-02T12:32:56+00:00","dateModified":"2025-04-16T10:59:28+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/etendre-blocs-coeur-wp\/"},"wordCount":2933,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/etendre-blocs-coeur-wp\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png","inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/etendre-blocs-coeur-wp\/","url":"https:\/\/kinsta.com\/fr\/blog\/etendre-blocs-coeur-wp\/","name":"Comment \u00e9tendre les blocs du c\u0153ur de WordPress avec l'API de blocs","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/etendre-blocs-coeur-wp\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/etendre-blocs-coeur-wp\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png","datePublished":"2025-04-02T12:32:56+00:00","dateModified":"2025-04-16T10:59:28+00:00","description":"Apprenez \u00e0 \u00e9tendre facilement les blocs du c\u0153ur de WordPress en utilisant l'API de blocs pour personnaliser les r\u00e9glages, styliser et ajouter des fonctionnalit\u00e9s.","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/etendre-blocs-coeur-wp\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/etendre-blocs-coeur-wp\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/etendre-blocs-coeur-wp\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/etendre-blocs-coeur-wp\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"D\u00e9veloppement WordPress","item":"https:\/\/kinsta.com\/fr\/sujets\/developpement-wordpress\/"},{"@type":"ListItem","position":3,"name":"Comment \u00e9tendre les blocs de base de WordPress avec l&#8217;API Blocks"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/fr\/#website","url":"https:\/\/kinsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinsta.com\/fr\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/79656","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=79656"}],"version-history":[{"count":7,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/79656\/revisions"}],"predecessor-version":[{"id":79749,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/79656\/revisions\/79749"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/79656\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/79656\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/79656\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/79656\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/79656\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/79656\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/79656\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/79656\/translations\/es"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/79656\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/79657"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=79656"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=79656"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=79656"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}