{"id":80462,"date":"2025-08-07T09:03:23","date_gmt":"2025-08-07T08:03:23","guid":{"rendered":"https:\/\/kinqsta.com\/fr\/?p=80462&#038;preview=true&#038;preview_id=80462"},"modified":"2025-08-08T10:24:04","modified_gmt":"2025-08-08T09:24:04","slug":"variations-style-bloc-gutenberg","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/fr\/blog\/variations-style-bloc-gutenberg\/","title":{"rendered":"Comment hacker les blocs de Gutenberg avec les variations de style et les variations de bloc."},"content":{"rendered":"<p>Gutenberg a \u00e9volu\u00e9 pour devenir un \u00e9diteur puissant et hautement personnalisable. Au-del\u00e0 de ses robustes <a href=\"https:\/\/kinqsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/\">fonctionnalit\u00e9s pr\u00eates \u00e0 l&#8217;emploi<\/a>, les d\u00e9veloppeurs WordPress peuvent d\u00e9sormais tirer parti d&rsquo;un riche ensemble d&rsquo;API pour int\u00e9grer facilement des fonctionnalit\u00e9s personnalis\u00e9es \u00e0 leurs sites web. Cette extensibilit\u00e9 permet un degr\u00e9 remarquable de d\u00e9veloppement sur mesure, permettant aux d\u00e9veloppeurs de cr\u00e9er des exp\u00e9riences en ligne hautement personnalis\u00e9es et riches en fonctionnalit\u00e9s.<\/p>\n<p>Cet article explore deux fonctions de d\u00e9veloppement WordPress moins connues mais puissantes : <strong>Les variations de style<\/strong> (\u00e9galement connues sous le nom de styles de blocs) et les <strong>variations de blocs<\/strong>.<\/p>\n<p>Bien que leur utilit\u00e9 puisse sembler obscure au premier abord, vous serez surpris de voir \u00e0 quel point elles sont utiles et comment un petit investissement de temps vous permettra de les int\u00e9grer \u00e0 votre flux de travail de fa\u00e7on transparente.<\/p>\n<p>Vous comprendrez concr\u00e8tement ce qu&rsquo;elles sont et comment les utiliser gr\u00e2ce \u00e0 un projet concret. Vous pouvez mettre en \u0153uvre ce projet sur votre site WordPress en copiant et collant simplement le code de ce tutoriel et en y ajoutant \u00e9ventuellement des personnalisations.<\/p>\n<p>Avant de nous plonger dans le projet, passons rapidement en revue les pr\u00e9requis :<\/p>\n<ul>\n<li><strong>Environnement de d\u00e9veloppement local de WordPress :<\/strong> Bien que n&rsquo;importe lequel suffise, nous recommandons vivement <a href=\"https:\/\/kinqsta.com\/fr\/devkinsta\/\">DevKinsta<\/a>, la suite de d\u00e9veloppement local de Kinsta. Elle est facile \u00e0 utiliser et offre de nombreux r\u00e9glages et <a href=\"https:\/\/kinqsta.com\/fr\/blog\/adminer\/\">outils<\/a> pour lancer et g\u00e9rer rapidement un site WordPress local.<\/li>\n<li><strong>Node.js et npm :<\/strong> Ces \u00e9l\u00e9ments sont essentiels, car l&rsquo;\u00e9diteur de blocs est construit sur React et n\u00e9cessite un processus de construction.<\/li>\n<li><strong>Comp\u00e9tences de base en d\u00e9veloppement frontend :<\/strong> Il sera b\u00e9n\u00e9fique d&rsquo;avoir une compr\u00e9hension de base de Node.js, JavaScript (avec React), PHP et CSS.<\/li>\n<\/ul>\n<p>Bien que ce projet ne soit pas excessivement complexe, soiyez pr\u00eat \u00e0 \u00e9crire un peu de code. Le <a href=\"https:\/\/github.com\/carlodaniele\/image-hacker\" target=\"_blank\" rel=\"noopener noreferrer\">code complet<\/a> est \u00e9galement disponible sur GitHub.<\/p>\n<p>Commen\u00e7ons !<br \/>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>Styles de blocs et variations de blocs<\/h2>\n<p>Les <strong>styles de blocs<\/strong> et les <strong>variations de blocs<\/strong> sont deux fonctions puissantes de WordPress pour les d\u00e9veloppeurs. Bien que leurs noms semblent assez similaires, ils diff\u00e8rent en termes d&rsquo;objectif et d&rsquo;utilisation.<\/p>\n<p>Les <strong>styles de bloc<\/strong>, \u00e9galement connus sous le nom de variations de style, sont des ensembles de styles CSS pr\u00e9d\u00e9finis qui vous permettent de modifier l&rsquo;apparence d&rsquo;un bloc en un seul clic. Apr\u00e8s avoir enregistr\u00e9 un style de bloc, un bouton appara\u00eet dans la colonne lat\u00e9rale du bloc pour attribuer un ensemble de styles pr\u00e9d\u00e9finis au bloc. Vous pouvez activer et d\u00e9sactiver les styles et pr\u00e9visualiser le bloc dans l&rsquo;\u00e9diteur en temps r\u00e9el.<\/p>\n<figure id=\"attachment_196255\" aria-describedby=\"caption-attachment-196255\" style=\"width: 1698px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196255 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2025\/06\/image-block-default-style-variations.jpg\" alt=\"Le bloc principal Image a deux variations de style par d\u00e9faut.\" width=\"1698\" height=\"1092\"><figcaption id=\"caption-attachment-196255\" class=\"wp-caption-text\">Le bloc principal Image a deux variations de style par d\u00e9faut.<\/figcaption><\/figure>\n<p><strong>Les variations de style ne modifient pas les attributs du bloc. Elles modifient uniquement l&rsquo;apparence d&rsquo;un bloc en attribuant une classe CSS \u00e0 l&rsquo;\u00e9l\u00e9ment enveloppant du bloc.<\/strong><\/p>\n<p>Les variations de bloc sont un outil plus puissant car elles vous permettent de cr\u00e9er une version pr\u00e9configur\u00e9e d&rsquo;un bloc avec des attributs et des blocs internes. Elles apparaissent \u00e9galement dans l&rsquo;insertion de blocs de l&rsquo;\u00e9diteur. Essentiellement, une variation de bloc appara\u00eet \u00e0 l&rsquo;utilisateur comme s&rsquo;il s&rsquo;agissait d&rsquo;un bloc autonome, compl\u00e8tement ind\u00e9pendant du bloc sur lequel il est construit.<\/p>\n<p><strong>Les variations de bloc permettent de personnaliser l&rsquo;apparence, les r\u00e9glages initiaux et la structure d&rsquo;un bloc.<\/strong><\/p>\n<p>Avec tout cela \u00e0 l&rsquo;esprit, utilisons ces outils pour faire passer les blocs Gutenberg au niveau sup\u00e9rieur !<\/p>\n<h2>Un effet polaro\u00efd anim\u00e9 sur un bloc Image de base<\/h2>\n<p>Maintenant, plongeons dans notre projet ! Nous allons \u00e9tendre le bloc Image de base avec une extension Gutenberg pour :<\/p>\n<ul>\n<li><strong>Mettre en \u0153uvre une variation de style Polaro\u00efd :<\/strong> Les utilisateurs peuvent appliquer un charmant effet polaro\u00efd \u00e0 leurs images en un seul clic depuis la colonne lat\u00e9rale des r\u00e9glages du bloc.<\/li>\n<li><strong>Ajouter une animation de survol :<\/strong> Nous allons am\u00e9liorer les images de style polaro\u00efd avec une subtile animation de survol.<\/li>\n<li><strong>Cr\u00e9er une variante de bloc \u00ab Animated Polaroid \u00bb :<\/strong> Cela permettra aux utilisateurs d&rsquo;ins\u00e9rer rapidement des images polaro\u00efd pr\u00e9configur\u00e9es avec un effet de survol directement \u00e0 partir de l&rsquo;outil d&rsquo;insertion de blocs.<\/li>\n<\/ul>\n<p>\u00cates-vous pr\u00eat ? Configurons notre extension !<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"-1\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<figure id=\"attachment_196838\" aria-describedby=\"caption-attachment-196838\" style=\"width: 1953px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196838 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2025\/07\/front-end-animation.jpg\" alt=\"Un effet d'animation sur un bloc Image\" width=\"1953\" height=\"1248\"><figcaption id=\"caption-attachment-196838\" class=\"wp-caption-text\">Un effet d&rsquo;animation sur un bloc Image<\/figcaption><\/figure>\n<h3>Configuration de l&rsquo;environnement<\/h3>\n<p>Avant de commencer, nous devons mettre en place un environnement de d\u00e9veloppement WordPress avec Node.js. Nous supposons que vous avez d\u00e9j\u00e0 install\u00e9 votre environnement de d\u00e9veloppement WordPress local et les derni\u00e8res versions de <a href=\"https:\/\/kinqsta.com\/fr\/blog\/comment-installer-node-js\/\">Node.js<\/a> et de <a href=\"https:\/\/kinqsta.com\/fr\/blog\/qu-est-npm\/\">npm<\/a>. Si vous avez besoin d&rsquo;aide, consultez notre tutoriel sur <a href=\"https:\/\/kinqsta.com\/fr\/blog\/plugin-gutenberg\/#how-to-create-a-block-editor-plugin-without-creating-a-custom-block\">la construction d&rsquo;une extension Gutenberg pour ajouter des fonctionnalit\u00e9s \u00e0 l&rsquo;\u00e9diteur de blocs<\/a>.<\/p>\n<h4>\u00c9tape 1 &#8211; Cr\u00e9er la structure de base du plugin.<\/h4>\n<p>Pour ce tutoriel, nous nommerons notre extension <strong>Image Hacker<\/strong>.<\/p>\n<p>Naviguez dans votre r\u00e9pertoire <code>plugins<\/code> et cr\u00e9ez un nouveau dossier <code>image-hacker<\/code>. Dans ce dossier, cr\u00e9ez un nouveau fichier <code>image-hacker.php<\/code> (le fichier principal de votre extension) et un sous-dossier <code>src<\/code>, dans lequel vous allez construire les fonctionnalit\u00e9s de l&rsquo;extension.<\/p>\n<p>Voici la structure de base de votre extension :<\/p>\n<pre><code>\/wp-content\/plugins\/\n\u2514\u2500\u2500 \/image-hacker\/\n\t\u251c\u2500\u2500 image-hacker.php\n\t\u2514\u2500\u2500 \/src\/<\/code><\/pre>\n<h4>\u00c9tape 2 &#8211; Cr\u00e9er le code PHP<\/h4>\n<p>Ensuite, vous devez vous assurer que WordPress reconna\u00eet votre extension. Pour cela, ajoutez le code suivant \u00e0 <code>image-hacker.php<\/code>:<\/p>\n<pre><code class=\"language-php\">&lt;?php\n\/**\n * Plugin Name: Image Hacker\n * Description: Adds new features to the core Image block\n * Version:     1.0.0\n * Author:      Your Name\n * License:     GPL-2.0-or-later\n * License URI: https:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n * Text Domain: image-hacker\n *\/\n\nif ( ! defined( 'ABSPATH' ) ) {\n\texit; \/\/ Exit if accessed directly.\n}<\/code><\/pre>\n<h4>\u00c9tape 3 &#8211; Initialiser npm et installer les d\u00e9pendances<\/h4>\n<p>Ouvrez votre de ligne de commande pr\u00e9f\u00e9r\u00e9 et naviguez jusqu&rsquo;au r\u00e9pertoire de votre extension. Une fois l\u00e0, ex\u00e9cutez la commande suivante :<\/p>\n<pre><code class=\"language-bash\">npm init -y<\/code><\/pre>\n<p>Cette commande initialise un nouveau fichier <code>package.json<\/code>, qui inclut les d\u00e9pendances et les scripts de votre projet.<\/p>\n<p>Ensuite, vous devez installer les scripts WordPress et les outils de construction tels que webpack et Babel :<\/p>\n<pre><code class=\"language-bash\">npm install @wordpress\/plugins @wordpress\/scripts --save-dev<\/code><\/pre>\n<p>Cette commande ajoute un dossier <code>node_modules<\/code> avec des d\u00e9pendances de n\u0153uds et un fichier <code>package-lock.json<\/code>. L&rsquo;image ci-dessous montre la structure actuelle de votre projet dans <a href=\"https:\/\/kinqsta.com\/fr\/blog\/vscode-extensions\/\">Visual Studio Code<\/a>:<\/p>\n<figure id=\"attachment_196256\" aria-describedby=\"caption-attachment-196256\" style=\"width: 1880px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196256 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2025\/06\/gutenberg-plugin-basic-structure.jpg\" alt=\"Une extension Gutenberg dans Visual Studio Code\" width=\"1880\" height=\"759\"><figcaption id=\"caption-attachment-196256\" class=\"wp-caption-text\">Une extension Gutenberg dans Visual Studio Code<\/figcaption><\/figure>\n<p>Ensuite, ouvrez votre <code>package.json<\/code> et mettez \u00e0 jour la propri\u00e9t\u00e9 <code>scripts<\/code> comme suit :<\/p>\n<pre><code class=\"language-json\">{\n\t\"name\": \"image-hacker\",\n\t\"version\": \"1.0.0\",\n\t\"main\": \"index.js\",\n\t\"scripts\": {\n\t\t\"build\": \"wp-scripts build\",\n\t\t\"start\": \"wp-scripts start\"\n\t},\n\t\"keywords\": [],\n\t\"author\": \"\",\n\t\"license\": \"ISC\",\n\t\"description\": \"\",\n\t\"devDependencies\": {\n\t\t\"@wordpress\/plugins\": \"^7.25.0\",\n\t\t\"@wordpress\/scripts\": \"^30.18.0\"\n\t}\n}<\/code><\/pre>\n<p>Notez que les versions de <code>devDependencies<\/code> peuvent diff\u00e9rer de ce qui pr\u00e9c\u00e8de et d\u00e9pendent des versions r\u00e9elles install\u00e9es dans votre environnement.<\/p>\n<h4>\u00c9tape 4 &#8211; Cr\u00e9er les fichiers sources de votre plugin<\/h4>\n<p>L&rsquo;\u00e9tape suivante consiste \u00e0 cr\u00e9er les fichiers sources de l&rsquo;extension. Naviguez jusqu&rsquo;au dossier <code>src<\/code> et ajoutez les fichiers suivants :<\/p>\n<ul>\n<li><code>index.js<\/code><\/li>\n<li><code>style.scss<\/code><\/li>\n<li><code>editor.scss<\/code><\/li>\n<\/ul>\n<p>La structure de l&rsquo;extension devrait maintenant ressembler \u00e0 ceci :<\/p>\n<pre><code>\/wp-content\/plugins\/\n\u2514\u2500\u2500 \/image-hacker\/\n\t\u251c\u2500\u2500 \/node-modules\/\n\t\u251c\u2500\u2500 image-hacker.php\n\t\u251c\u2500\u2500 package.json\n\t\u251c\u2500\u2500 package-lock.json\n\t\u2514\u2500\u2500 \/src\/\n\t\t\u251c\u2500\u2500 index.js\n\t\t\u251c\u2500\u2500 style.scss\n\t\t\u2514\u2500\u2500 editor.scss<\/code><\/pre>\n<p>Ouvrez maintenant votre panneau d&rsquo;administration WordPress et naviguez jusqu&rsquo;\u00e0 l&rsquo;\u00e9cran <strong>Extensions<\/strong> Trouvez l&rsquo;extension <strong>Image Hacker<\/strong> et activez-la.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Le fichier <code>editor.scss<\/code> est le fichier dans lequel vous allez d\u00e9clarer les styles de blocs pour l&rsquo;\u00e9diteur uniquement, tandis que le fichier <code>style.scss<\/code> contient les styles de blocs pour l&rsquo;\u00e9diteur et le frontend. Nous n&rsquo;utiliserons pas le fichier <code>editor.scss<\/code> dans ce projet.<\/p>\n<\/aside>\n\n<h4>\u00c9tape 5 &#8211; Inclure les ressources dans le fichier de votre plugin<\/h4>\n<p>Ensuite, vous devez inclure les ressources de l&rsquo;extension dans le fichier principal de l&rsquo;extension. Ajoutez ce qui suit \u00e0 <code>image-hacker.php<\/code>:<\/p>\n<pre><code class=\"language-php\">\/**\n * Enqueue block editor assets.\n *\/\nfunction image_hacker_enqueue_editor_assets() {\n\t$asset_file = include( plugin_dir_path( __FILE__ ) . 'build\/index.asset.php');\n\n\t\/\/ Enqueue the script with our modifications\n\twp_enqueue_script(\n\t\t'image-hacker-script',\n\t\tplugins_url( 'build\/index.js', __FILE__ ),\n\t\tarray( 'wp-plugins', 'wp-edit-post' ),\n\t\tfilemtime( plugin_dir_path( __FILE__ ) . 'build\/index.js' )\n\t);\n\n\t\/\/ Enqueue the editor-only styles\n\twp_enqueue_style(\n\t\t'image-hacker-editor-style',\n\t\tplugins_url( 'build\/editor.css', __FILE__ ),\n\t\t[],\n\t\tfilemtime( plugin_dir_path( __FILE__ ) . 'build\/editor.css' )\n\t);\n}\nadd_action( 'enqueue_block_editor_assets', 'image_hacker_enqueue_editor_assets' );\n\n\/**\n * Enqueue frontend and editor assets.\n *\/\nfunction image_hacker_enqueue_assets() {\n\t$asset_file = include( plugin_dir_path( __FILE__ ) . 'build\/index.asset.php');\n\n\t\/\/ Enqueue styles for both frontend and editor\n\twp_enqueue_style(\n\t\t'image-hacker-style',\n\t\tplugins_url( 'build\/style-index.css', __FILE__ ),\n\t\t[],\n\t\tfilemtime( plugin_dir_path( __FILE__ ) . 'build\/style-index.css' )\n\t);\n}\nadd_action( 'enqueue_block_assets', 'image_hacker_enqueue_assets' );<\/code><\/pre>\n<p>Voici ce que fait ce code :<\/p>\n<ul>\n<li>Le crochet d&rsquo;action <code>enqueue_block_editor_assets<\/code> met en file d&rsquo;attente le script <code>index.js<\/code> et le fichier <code>editor.css<\/code>.<\/li>\n<li>Le crochet d&rsquo;action <code>enqueue_block_assets<\/code> appelle le fichier <code>style.css<\/code>.<\/li>\n<\/ul>\n<p>Notez que ce code inclut les ressources <code>.js<\/code> et <code>.css<\/code> situ\u00e9s dans le dossier <code>\/build\/<\/code> de votre extension. Cela signifie que, pour le faire fonctionner, vous devez ex\u00e9cuter la commande build dans votre outil de ligne de commande :<\/p>\n<pre><code class=\"language-bash\">npm run build<\/code><\/pre>\n<p>Notez \u00e9galement que lorsque vous importez un fichier appel\u00e9 <code>style.scss<\/code> dans <code>index.js<\/code>, le fichier CSS compil\u00e9 ne s&rsquo;appellera pas <code>style.css<\/code> mais plut\u00f4t <code>style-index.css<\/code>.<\/p>\n<h3>Enregistrer le style de bloc<\/h3>\n<p>Vous avez termin\u00e9 la configuration de votre environnement de d\u00e9veloppement. Vous pouvez maintenant passer \u00e0 la partie la plus excitante du projet et enregistrer votre variation de style de bloc.<\/p>\n<p>Il existe <a href=\"https:\/\/developer.wordpress.org\/themes\/features\/block-style-variations\/\" target=\"_blank\" rel=\"noopener noreferrer\">plusieurs fa\u00e7ons d&rsquo;enregistrer les styles de blocs<\/a>, et celle que vous choisissez d\u00e9pend de vos objectifs et de vos pr\u00e9f\u00e9rences personnelles. Nous allons suivre l&rsquo;approche JS dans le cadre de la construction d&rsquo;une extension Gutenberg. Ouvrez votre fichier <code>\/src\/index.js<\/code> et collez le code suivant :<\/p>\n<pre><code class=\"language-javascript\">\/\/ Import the function to register block styles.\nimport { registerBlockStyle } from '@wordpress\/blocks';\n\n\/\/ Import the function to run code only when the DOM is ready.\nimport domReady from '@wordpress\/dom-ready';\n\n\/\/ This line tells the build process to include and compile our SCSS file.\nimport '.\/style.scss';\n\n\/**\n * Use domReady to run code only when the DOM is ready.\n *\/\ndomReady(() =&gt; {\n\t\/\/ Register our new style variation for the core image block.\n\tregisterBlockStyle('core\/image', {\n\t\tname: 'polaroid',\n\t\tlabel: 'Polaroid',\n\t});\n});<\/code><\/pre>\n<p><code>registerBlockStyle<\/code> with <code>domReady<\/code> garantit que la variation de style n&rsquo;est enregistr\u00e9e que lorsque le DOM est enti\u00e8rement charg\u00e9. Voir aussi la <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-styles\/\" target=\"_blank\" rel=\"noopener noreferrer\">documentation<\/a> <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-dom-ready\/\" target=\"_blank\" rel=\"noopener noreferrer\">officielle<\/a>.<\/p>\n<p>Lorsque le style <code>Polaroid<\/code> est s\u00e9lectionn\u00e9, WordPress ajoute automatiquement la classe <code>.is-style-polaroid<\/code> \u00e0 l&rsquo;enveloppe du bloc.<\/p>\n<p>L&rsquo;\u00e9tape suivante consiste \u00e0 fournir le CSS pour votre variation de style. Ouvrez votre <code>\/src\/style.scss<\/code> et ajoutez le code suivant :<\/p>\n<pre><code class=\"language-css\">.wp-block-image.is-style-polaroid {\n\tpadding: 15px 15px 70px 15px;\n\tbackground-color: white;\n\tbox-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\n\tmax-width: 360px;\n\ttransform: rotate(-3deg);\n\ttransition: transform 0.3s ease-in-out;\n\n\tfigure { \n\t\tmargin: 0 !important; \n\t}\n\t\n\timg { \n\t\tdisplay: block; \n\t\twidth: 100%; \n\t\theight: auto; \n\t}\n\t\n\tfigcaption {\n    \tposition: absolute; \n    \tbottom: 15px; \n    \tleft: 0; \n    \tright: 0;\n    \ttext-align: center; \n    \tfont-family: 'Permanent Marker', cursive;\n    \tcolor: #333; \n    \tfont-size: 18px;\n\t}\n}<\/code><\/pre>\n<p>Enregistrez votre code, ex\u00e9cute <code>npm run build<\/code>, et allez sur votre tableau de bord WordPress. Cr\u00e9ez un nouvel article ou une nouvelle page et ajoutez une image. Une fois l&rsquo;image s\u00e9lectionn\u00e9e, cliquez sur le libell\u00e9 <strong>Styles<\/strong> dans la colonne lat\u00e9rale du bloc et s\u00e9lectionnez <strong>Polaroid<\/strong>.<\/p>\n<figure id=\"attachment_196692\" aria-describedby=\"caption-attachment-196692\" style=\"width: 1988px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196692 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2025\/06\/style-variation.jpg\" alt=\"Une nouvelle variaton de style pour le bloc Image\" width=\"1988\" height=\"1186\"><figcaption id=\"caption-attachment-196692\" class=\"wp-caption-text\">Une nouvelle variaton de style pour le bloc Image<\/figcaption><\/figure>\n<p>Ajoutez une l\u00e9gende, enregistrez la publication et v\u00e9rifiez le r\u00e9sultat sur l&rsquo;interface publique. Vous devriez voir une image de style polaro\u00efd avec une belle l\u00e9gende en italique.<\/p>\n<figure id=\"attachment_196903\" aria-describedby=\"caption-attachment-196903\" style=\"width: 1952px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196903 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2025\/07\/is-style-polaroid.jpg\" alt=\"L'\u00e9l\u00e9ment figure avec la classe is_style_polaroid\" width=\"1952\" height=\"1296\"><figcaption id=\"caption-attachment-196903\" class=\"wp-caption-text\">L&rsquo;\u00e9l\u00e9ment figure avec la classe is_style_polaroid<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>En raison de la grande sp\u00e9cificit\u00e9 des s\u00e9lecteurs, certaines propri\u00e9t\u00e9s (par exemple, <code>max-width<\/code>) peuvent ne pas \u00eatre appliqu\u00e9es dans l&rsquo;\u00e9diteur. Si vous avez besoin qu&rsquo;elles soient appliqu\u00e9es dans l&rsquo;\u00e9diteur, vous pouvez ajouter les styles appropri\u00e9s au fichier <code>editor.scss<\/code>.<\/p>\n<\/aside>\n\n<h3>Construire la logique<\/h3>\n<p>L&rsquo;\u00e9tape suivante consiste \u00e0 construire la logique pour animer l&rsquo;image. Nous allons cr\u00e9er une animation simple en utilisant la propri\u00e9t\u00e9 CSS <code>transform<\/code>. Pour commencer, ajoutez le bloc suivant \u00e0 votre fichier <code>src\/style.scss<\/code> :<\/p>\n<pre><code class=\"language-css\">.wp-block-image.is-style-polaroid.has-image-animation:hover {\n\ttransform: rotate(0deg) scale(1.05);\n}<\/code><\/pre>\n<p>Ce code garantit que l&rsquo;effet de survol n&rsquo;est appliqu\u00e9 que si le bloc est une image Polaroid et qu&rsquo;une classe <code>has-image-animation<\/code> est appliqu\u00e9e \u00e0 partir de la bascule de la barre d&rsquo;outils.<\/p>\n<p>Maintenant, vous avez besoin d&rsquo;une logique pour ajouter la classe CSS au conteneur de l&rsquo;image, qui est un \u00e9l\u00e9ment <code>figure<\/code>. Pour cela, vous avez besoin de quelques filtres et fonctions de rappel.<\/p>\n<p>Tout d&rsquo;abord, ajoutez la ligne suivante \u00e0 votre fichier <code>src\/index.js<\/code> :<\/p>\n<pre><code class=\"language-javascript\">import { addFilter } from '@wordpress\/hooks';<\/code><\/pre>\n<h4>\u00c9tape 1. Ajouter un nouvel attribut au bloc Image<\/h4>\n<p>Vous allez utiliser <code>addFilter<\/code> pour manipuler le bloc principal Image. Tout d&rsquo;abord, vous ajoutez un nouvel attribut <code>imageAnimation<\/code> au bloc Image :<\/p>\n<pre><code class=\"language-javascript\">function addImageAnimationAttribute( settings, name ) {\n\tif ( name !== 'core\/image' ) {\n\t\treturn settings;\n\t}\n\tsettings.attributes = {\n\t\t...settings.attributes,\n\t\timageAnimation: {\n\t\t\ttype: 'boolean',\n\t\t\tdefault: false,\n\t\t},\n\t};\n\treturn settings;\n}\n\naddFilter(\n\t'blocks.registerBlockType',\n\t'image-hacker\/add-image-animation-attribute',\n\taddImageAnimationAttribute\n);<\/code><\/pre>\n<p>La fonction de rappel <code>addImageAnimationAttribute<\/code> prend deux arguments :<\/p>\n<ul>\n<li><code>settings<\/code> &#8211; Un tableau des attributs actuels du bloc.<\/li>\n<li><code>name<\/code> &#8211; Sp\u00e9cifie le nom du bloc dont vous voulez modifier les attributs.<\/li>\n<\/ul>\n<p>La fonction renvoie ensuite le tableau d&rsquo;attributs mis \u00e0 jour.<\/p>\n<h4>\u00c9tape 2. Ajouter une commande \u00e0 bascule au bloc Image<\/h4>\n<p>Ensuite, vous devrez ajouter un contr\u00f4le \u00e0 la barre d&rsquo;outils du bloc Image pour activer l&rsquo;animation.<\/p>\n<p>Tout d&rsquo;abord, ajoutez les <code>import<\/code>s suivants au fichier <code>index.js<\/code> :<\/p>\n<pre><code class=\"language-javascript\">import { createHigherOrderComponent } from '@wordpress\/compose';\nimport { Fragment } from '@wordpress\/element';\nimport { BlockControls } from '@wordpress\/block-editor';\nimport { ToolbarGroup, ToolbarButton } from '@wordpress\/components';\nimport { __ } from '@wordpress\/i18n';<\/code><\/pre>\n<p>Puis ajoutez le code suivant \u00e0 la fin du fichier :<\/p>\n<pre><code class=\"language-javascript\">const withPolaroidControls = createHigherOrderComponent((BlockEdit) =&gt; {\n\treturn (props) =&gt; {\n\t\tif (props.name !== 'core\/image') {\n\t\t\treturn &lt;BlockEdit {...props} \/&gt;;\n\t\t}\n\n\t\tconst { attributes, setAttributes, isSelected } = props;\n\t\tconst { imageAnimation, className, lightbox } = attributes;\n\n\t\treturn (\n\t\t\t&lt;Fragment&gt;\n\t\t\t\t&lt;BlockEdit {...props} \/&gt;\n\n\t\t\t\t&lt;BlockControls&gt;\n\t\t\t\t\t&lt;ToolbarGroup&gt;\n\t\t\t\t\t\t&lt;ToolbarButton\n\t\t\t\t\t\t\ticon=\"format-image\"\n\t\t\t\t\t\t\tlabel={__('Toggle Animation', 'image-hacker')}\n\t\t\t\t\t\t\tisActive={imageAnimation}\n\t\t\t\t\t\t\tonClick={() =&gt;\n\t\t\t\t\t\t\t\tsetAttributes({ imageAnimation: !imageAnimation })\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t&lt;\/ToolbarGroup&gt;\n\t\t\t\t&lt;\/BlockControls&gt;\n\t\t\t&lt;\/Fragment&gt;\n\t\t);\n\t};\n}, 'withPolaroidControls');\n\naddFilter(\n\t'editor.BlockEdit',\n\t'image-hacker\/with-polaroid-controls',\n\twithPolaroidControls\n);<\/code><\/pre>\n<p>Voici ce que fait ce code :<\/p>\n<ul>\n<li>La fonction <code>createHigherOrderComponent<\/code> <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-compose\/#createhigherordercomponent\" target=\"_blank\" rel=\"noopener noreferrer\">cr\u00e9e un composant d&rsquo;ordre sup\u00e9rieur<\/a> (Higher-Order Component ou HOC) qui enveloppe <code>BlockEdit<\/code>, qui est le composant principal responsable de l&rsquo;affichage des blocs dans l&rsquo;\u00e9diteur.<\/li>\n<li>Le HOC intercepte le composant et v\u00e9rifie s&rsquo;il s&rsquo;agit d&rsquo;un bloc Image. Cela permet de s&rsquo;assurer que toutes tes modifications ne s&rsquo;appliquent qu&rsquo;au bloc Image.<\/li>\n<li>Nous utilisons l&rsquo;affectation de d\u00e9structuration pour extraire les propri\u00e9t\u00e9s et attributs n\u00e9cessaires des objets <code>props<\/code> et <code>attributes<\/code>.<\/li>\n<li>Nous utilisons <a href=\"https:\/\/developer.wordpress.org\/block-editor\/getting-started\/fundamentals\/block-in-the-editor\/\" target=\"_blank\" rel=\"noopener noreferrer\"><code>BlockControls<\/code><\/a>, <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/toolbar-group\/\" target=\"_blank\" rel=\"noopener noreferrer\"><code>ToolbarGroup<\/code><\/a>, et <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/toolbar-button\/\" target=\"_blank\" rel=\"noopener noreferrer\"><code>ToolbarButton<\/code><\/a> pour ajouter un bouton <strong>Basculer l&rsquo;animation<\/strong> \u00e0 la barre d&rsquo;outils du bloc.<\/li>\n<li><code>isActive<\/code> d\u00e9finit l&rsquo;\u00e9tat par d\u00e9faut de <code>imageAnimation<\/code><\/li>\n<li><code>onClick<\/code> fait basculer la valeur de <code>imageAnimation<\/code>.<\/li>\n<\/ul>\n<figure id=\"attachment_196750\" aria-describedby=\"caption-attachment-196750\" style=\"width: 1668px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196750 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2025\/07\/custom-block-toolbar-button.jpg\" alt=\"Un bouton personnalis\u00e9 a \u00e9t\u00e9 ajout\u00e9 \u00e0 la barre d'outils du bloc.\" width=\"1668\" height=\"588\"><figcaption id=\"caption-attachment-196750\" class=\"wp-caption-text\">Un bouton personnalis\u00e9 a \u00e9t\u00e9 ajout\u00e9 \u00e0 la barre d&rsquo;outils du bloc.<\/figcaption><\/figure>\n<p>Tu as maintenant un attribut et un bouton. Cependant, si tu cliques sur le bouton, rien ne se passe.<\/p>\n<h4>\u00c9tape 3. Ajouter la classe CSS \u00e0 l&rsquo;\u00e9l\u00e9ment enveloppant<\/h4>\n<p>L&rsquo;\u00e9tape suivante consiste \u00e0 appliquer la classe <code>has-image-animation<\/code> \u00e0 l&rsquo;\u00e9l\u00e9ment <code>figure<\/code> qui enveloppe l&rsquo;image. Pour cela, vous avez besoin d&rsquo;un filtre qui vous permette d&rsquo;attribuer la classe CSS \u00e0 l&rsquo;image dans le frontend.<\/p>\n<p>Ajoutez le code suivant au fichier <code>index.js<\/code> :<\/p>\n<pre><code class=\"language-javascript\">function addAnimationFrontendClass(extraProps, blockType, attributes) {\n\tif (blockType.name === 'core\/image' && attributes.imageAnimation) {\n\t\textraProps.className = `${extraProps.className || ''} has-image-animation`;\n\t}\n\treturn extraProps;\n}\n\naddFilter(\n\t'blocks.getSaveContent.extraProps',\n\t'image-hacker\/add-animation-frontend-class',\n\taddAnimationFrontendClass\n);<\/code><\/pre>\n<p>Ce code ajoute dynamiquement la classe CSS <code>has-image-animation<\/code> \u00e0 l&rsquo;\u00e9l\u00e9ment <code>figure<\/code> lorsque l&rsquo;attribut <code>imageAnimation<\/code> est d\u00e9fini sur <code>true<\/code>.<\/p>\n<p>Essayons de comprendre ce qui se passe en d\u00e9tail.<\/p>\n<ul>\n<li><code>addFilter<\/code> Les crochets s&rsquo;ins\u00e8rent dans les processus de l&rsquo;\u00e9diteur pour modifier les donn\u00e9es ou le comportement.<\/li>\n<li><code>blocks.getSaveContent.extraProps<\/code> est le crochet sp\u00e9cifique que nous visons. <code>extraProps<\/code> est un crochet sp\u00e9cial qui vous permet d&rsquo;ajouter des attributs HTML suppl\u00e9mentaires \u00e0 l&rsquo;\u00e9l\u00e9ment wrapper.<\/li>\n<li><code>image-hacker\/add-animation-class<\/code> est le nom unique de votre filtre.<\/li>\n<li><code>addAnimationFrontendClass<\/code> est le nom de la fonction de rappel qui s&rsquo;ex\u00e9cute chaque fois que le crochet <code>blocks.getSaveContent.extraProps<\/code> s&rsquo;ex\u00e9cute. Cette fonction prend 3 arguments :\n<ul>\n<li><code>extraProps<\/code>: Un objet contenant les propri\u00e9t\u00e9s de l&rsquo;\u00e9l\u00e9ment enveloppant du bloc, tel que <code>className<\/code>.<\/li>\n<li><code>blockType<\/code>: Un objet contenant des d\u00e9tails sur le bloc, comme son <code>name<\/code> (<code>core\/image<\/code>).<\/li>\n<li><code>attributes<\/code>: Un objet contenant les attributs du bloc.<\/li>\n<\/ul>\n<\/li>\n<li>La logique de la fonction garantit que le code ne s&rsquo;ex\u00e9cute que lorsque <code>blockType.name === 'core\/image'<\/code> et <code>attributes.imageAnimation<\/code> sont <code>true<\/code>.<\/li>\n<li>Si les deux conditions sont vraies, la fonction renvoie un nouvel objet <code>props<\/code> avec <code>has-image-animation<\/code> ajout\u00e9 \u00e0 l&rsquo;objet de classe existant.<\/li>\n<\/ul>\n<p>Vous pouvez maintenant l&rsquo;essayer vous-m\u00eame. Ajoutez une image \u00e0 votre contenu, s\u00e9lectionne le style Polaroid dans la colonne lat\u00e9rale du bloc et cliquez sur le bouton <strong>Toggle Animation<\/strong> dans la barre d&rsquo;outils du bloc. Sauvegardez votre publication et v\u00e9rifie le r\u00e9sultat sur l&rsquo;interface publique. Votre image devrait pivoter lorsque vous la survolez.<\/p>\n<figure id=\"attachment_196905\" aria-describedby=\"caption-attachment-196905\" style=\"width: 1954px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196905 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2025\/07\/is-style-polaroid-has-image-animation.jpg\" alt=\"Classes CSS is_style_polaroid et has_image_animation ajout\u00e9es au bloc Image\" width=\"1954\" height=\"1184\"><figcaption id=\"caption-attachment-196905\" class=\"wp-caption-text\">Classes CSS is_style_polaroid et has_image_animation ajout\u00e9es au bloc Image<\/figcaption><\/figure>\n<h3>Enregistrer une variation de bloc<\/h3>\n<p>Les variations de bloc sont des versions pr\u00e9configur\u00e9es d&rsquo;un bloc, avec un ensemble d&rsquo;attributs et de blocs imbriqu\u00e9s. WordPress traite les variations de bloc comme des blocs ind\u00e9pendants, en les rendant disponibles dans l&rsquo;insertion de bloc et en les marquant avec une ic\u00f4ne personnalis\u00e9e.<\/p>\n<p>Vous pouvez utiliser une variation de bloc pour cr\u00e9er une nouvelle version du bloc Image avec le style Polaro\u00efd appliqu\u00e9 par d\u00e9faut.<\/p>\n<p>La premi\u00e8re \u00e9tape consiste \u00e0 importer la fonction <code>registerBlockVariation<\/code> dans ton fichier <code>\/src\/index.js<\/code> :<\/p>\n<pre><code class=\"language-javascript\">import { registerBlockStyle, registerBlockVariation } from '@wordpress\/blocks';<\/code><\/pre>\n<p>Ensuite, vous ajoutez un appel \u00e0 la fonction <code>registerBlockVariation<\/code> \u00e0 l&rsquo;int\u00e9rieur de <code>domReady()<\/code>, juste en dessous de <code>registerBlockStyle<\/code> :<\/p>\n<pre><code class=\"language-javascript\">domReady(() =&gt; {\n\t\/\/ Register a style variation for the image block.\n\tregisterBlockStyle('core\/image', {\n\t\tname: 'polaroid',\n\t\tlabel: 'Polaroid',\n\t});\n\n\t\/\/ Register a block variation of the image block\n\tregisterBlockVariation('core\/image', {\n\t\tname: 'animated-polaroid',\n\t\ttitle: 'Animated Polaroid',\n\t\ticon: 'image-filter',\n\t\tattributes: {\n\t\t\tclassName: 'is-style-polaroid',\n\t\t\timageAnimation: true,\n\t\t},\n\t\tscope: ['inserter'],\n\t});\n});<\/code><\/pre>\n<p>La fonction <code>registerBlockVariation<\/code> cr\u00e9e une variation pour un bloc existant. Elle accepte deux arguments : le nom du bloc et un objet d\u00e9finissant la variation. (Voir \u00e9galement l&rsquo;<a href=\"https:\/\/developer.wordpress.org\/news\/2023\/08\/an-introduction-to-block-variations\/\" target=\"_blank\" rel=\"noopener noreferrer\">introduction aux variations de blocs<\/a> et la <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-variations\/\" target=\"_blank\" rel=\"noopener noreferrer\">documentation de l&rsquo;API Variations de blocs<\/a>).<\/p>\n<p>Enregistrez votre fichier, ex\u00e9cutez le build pour appliquer vos modifications, puis retournez dans votre administration WordPress. Cr\u00e9ez un nouvel article et recherchez le bloc <strong>Animated Polaroid<\/strong> dans l&rsquo;insertion de blocs.<\/p>\n<figure id=\"attachment_196842\" aria-describedby=\"caption-attachment-196842\" style=\"width: 1362px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196842 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2025\/07\/block-inserter.jpg\" alt=\"Une variation de bloc dans l'insertion de blocs\" width=\"1362\" height=\"876\"><figcaption id=\"caption-attachment-196842\" class=\"wp-caption-text\">Une variation de bloc dans l&rsquo;insertion de blocs<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>En raison de la complexit\u00e9 de l&rsquo;environnement et de la sp\u00e9cificit\u00e9 des s\u00e9lecteurs, nous n&rsquo;ajouterons pas le code qui g\u00e9n\u00e8re l&rsquo;animation dans l&rsquo;\u00e9diteur de blocs. Pour cette raison, l&rsquo;animation ne fonctionnera pas dans l&rsquo;\u00e9diteur.<\/p>\n<\/aside>\n\n<h3>Test et d\u00e9bogage<\/h3>\n<p>Faisons quelques tests. Ajoutez une ou plusieurs images \u00e0 un nouvelle publication. S\u00e9lectionnez le style Polaro\u00efd pour chaque image, activez l&rsquo;animation et ajoutez des liens. Effectuez \u00e9galement des tests avec le bloc Galerie.<\/p>\n<p>Tout semble fonctionner comme pr\u00e9vu. Cependant, l&rsquo;ajout d&rsquo;un lien avec un effet de visionneuse \u00e0 une image avec le style Polaro\u00efd ne produit pas un beau r\u00e9sultat.<\/p>\n<p>Ce comportement \u00e9trange semble \u00eatre d\u00fb \u00e0 un probl\u00e8me de compatibilit\u00e9 entre la visionneuse de WordPress et les transitions CSS.<\/p>\n<p>Pour \u00e9viter un processus de d\u00e9bogage long et complexe, vous pouvez d\u00e9sactiver l&rsquo;option <strong>Enlarge on click<\/strong> et ajouter un avertissement pour pr\u00e9venir les utilisateurs que la visionneuse est d\u00e9sactiv\u00e9e.<\/p>\n<p>Vous devez d&rsquo;abord importer quelques ressources suppl\u00e9mentaires. Vous trouverez ci-dessous la liste compl\u00e8te des ressources import\u00e9es du fichier <code>\/src\/index.js<\/code> :<\/p>\n<pre><code class=\"language-javascript\">import { registerBlockStyle, registerBlockVariation } from '@wordpress\/blocks';\nimport domReady from '@wordpress\/dom-ready';\nimport { addFilter } from '@wordpress\/hooks';\nimport { createHigherOrderComponent } from '@wordpress\/compose';\nimport { Fragment, useEffect } from '@wordpress\/element';\nimport { InspectorControls, BlockControls } from '@wordpress\/block-editor';\nimport { PanelBody, Notice, ToolbarGroup, ToolbarButton } from '@wordpress\/components';\nimport { __ } from '@wordpress\/i18n';\nimport { useDispatch } from '@wordpress\/data';\nimport '.\/style.scss';<\/code><\/pre>\n<p>Nous avons ajout\u00e9 les importations suivantes :<\/p>\n<ul>\n<li><code>useEffect<\/code> de <code>@wordpress\/element<\/code>(Voir <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-element\/#useeffect\" target=\"_blank\" rel=\"noopener noreferrer\">docs<\/a>)<\/li>\n<li><code>InspectorControls<\/code> de <code>@wordpress\/block-editor<\/code> (Voir les <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/HEAD\/packages\/block-editor\/src\/components\/inspector-controls\/README.md\" target=\"_blank\" rel=\"noopener noreferrer\">docs<\/a>).<\/li>\n<li><code>PanelBody<\/code> et <code>Notice<\/code> de <code>@wordpress\/components<\/code> (Voir <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/panel\/\" target=\"_blank\" rel=\"noopener noreferrer\">docs<\/a>).<\/li>\n<li><code>useDispatch<\/code> de <code>@wordpress\/data<\/code>. (Voir le <a href=\"https:\/\/developer.wordpress.org\/news\/2022\/12\/application-state-managed-withdispatch-withselect-and-compose-101\/\" target=\"_blank\" rel=\"noopener noreferrer\">blog du d\u00e9veloppeur WordPress<\/a>)<\/li>\n<\/ul>\n<p>Maintenant, modifiez la fonction <code>withPolaroidControls<\/code> comme suit :<\/p>\n<pre><code class=\"language-javascript\">const withPolaroidControls = createHigherOrderComponent((BlockEdit) =&gt; {\n\treturn (props) =&gt; {\n\t\tif (props.name !== 'core\/image') {\n\t\t\treturn &lt;BlockEdit {...props} \/&gt;;\n\t\t}\n\n\t\tconst { attributes, setAttributes, isSelected } = props;\n\t\tconst { imageAnimation, className, lightbox } = attributes;\n\n\t\tconst isPolaroid = className?.includes('is-style-polaroid');\n\n\t\tconst { createNotice } = useDispatch('core\/notices');\n\n\t\tuseEffect(() =&gt; {\n\t\t\tif (isPolaroid && lightbox?.enabled) {\n\t\t\t\t\/\/ Disable the lightbox to prevent the conflict.\n\t\t\t\tsetAttributes({ lightbox: { ...lightbox, enabled: false } });\n\n\t\t\t\t\/\/ Show the user a temporary 'snackbar' notice.\n\t\t\t\tcreateNotice(\n\t\t\t\t\t'warning', \/\/ The type of notice (info, success, warning, error)\n\t\t\t\t\t__('Lightbox disabled for Polaroid style.', 'image-hacker'),\n\t\t\t\t\t{\n\t\t\t\t\t\ttype: 'snackbar',\n\t\t\t\t\t\tisDismissible: true,\n\t\t\t\t\t}\n\t\t\t\t);\n\t\t\t}\n\t\t}, [isPolaroid, lightbox]);\n\n\t\treturn (\n\t\t\t&lt;Fragment&gt;\n\t\t\t\t&lt;BlockEdit {...props} \/&gt;\n\n\t\t\t\t&lt;BlockControls&gt;\n\t\t\t\t\t&lt;ToolbarGroup&gt;\n\t\t\t\t\t\t&lt;ToolbarButton\n\t\t\t\t\t\t\ticon=\"format-image\"\n\t\t\t\t\t\t\tlabel={__('Toggle Animation', 'image-hacker')}\n\t\t\t\t\t\t\tisActive={imageAnimation}\n\t\t\t\t\t\t\tonClick={() =&gt;\n\t\t\t\t\t\t\t\tsetAttributes({ imageAnimation: !imageAnimation })\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t&lt;\/ToolbarGroup&gt;\n\t\t\t\t&lt;\/BlockControls&gt;\n\n\t\t\t\t{isSelected && isPolaroid && (\n\t\t\t\t\t&lt;InspectorControls&gt;\n\t\t\t\t\t\t&lt;PanelBody title={__('Polaroid Style', 'image-hacker')}&gt;\n\t\t\t\t\t\t\t&lt;Notice status=\"info\" isDismissible={false}&gt;\n\t\t\t\t\t\t\t\t{__(\n\t\t\t\t\t\t\t\t\t'The \"Expand on click\" (lightbox) feature is disabled for this style to prevent visual conflicts.',\n\t\t\t\t\t\t\t\t\t'image-hacker'\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t&lt;\/Notice&gt;\n\t\t\t\t\t\t&lt;\/PanelBody&gt;\n\t\t\t\t\t&lt;\/InspectorControls&gt;\n\t\t\t\t)}\n\t\t\t&lt;\/Fragment&gt;\n\t\t);\n\t};\n}, 'withPolaroidControls');<\/code><\/pre>\n<ul>\n<li><code>useEffect<\/code> est un Hook React qui \u00ab vous permet de synchroniser un composant avec un syst\u00e8me externe \u00bb. Le code est ex\u00e9cut\u00e9 apr\u00e8s le rendu du composant et \u00e0 chaque fois qu&rsquo;une valeur du tableau de d\u00e9pendances <code>[isPolaroid, lightbox]<\/code> change. La v\u00e9rification ne s&rsquo;ex\u00e9cute que lorsque l&rsquo;utilisateur applique ou supprime le style Polaroid ou qu&rsquo;il active ou d\u00e9sactive la visionneuse. (Voir la <a href=\"https:\/\/react.dev\/reference\/react\/useEffect\" target=\"_blank\" rel=\"noopener noreferrer\">documentation de React<\/a>.)<\/li>\n<li>La condition <code>if (isPolaroid() && lightbox.enabled)<\/code> garantit que le code ne s&rsquo;ex\u00e9cute que si l&rsquo;image a le style Polaroid et que l&rsquo;option visionneuse est activ\u00e9e.<\/li>\n<li>Si la condition est <code>true<\/code>, la visionneuse est d\u00e9sactiv\u00e9e et un avis d&rsquo;avertissement temporaire appara\u00eet. (Voir \u00e9galement la r\u00e9f\u00e9rence de <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/data\/data-core-notices\/\" target=\"_blank\" rel=\"noopener noreferrer\">donn\u00e9es Avis<\/a>).<\/li>\n<li>La condition <code>isSelected && isPolaroid<\/code> g\u00e9n\u00e8re un nouveau panneau dans la barre d&rsquo;outils du bloc d&rsquo;images pour avertir les utilisateurs que la visionneuse est d\u00e9sactiv\u00e9e. Contrairement \u00e0 la barre d&rsquo;outils, ce panneau affiche un avertissement permanent.<\/li>\n<\/ul>\n<figure id=\"attachment_196858\" aria-describedby=\"caption-attachment-196858\" style=\"width: 2184px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196858 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2025\/07\/enlarge-on-click-disabled.jpg\" alt=\"L'option Agrandir au clic est d\u00e9sactiv\u00e9e.\" width=\"2184\" height=\"1406\"><figcaption id=\"caption-attachment-196858\" class=\"wp-caption-text\">L&rsquo;option Agrandir au clic est d\u00e9sactiv\u00e9e.<\/figcaption><\/figure>\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>Dans ce tutoriel, nous avons plong\u00e9 dans certaines des fonctionnalit\u00e9s les plus int\u00e9ressantes et les plus puissantes de l&rsquo;\u00e9diteur de blocs de WordPress \u00e0 travers l&rsquo;objectif d&rsquo;un projet r\u00e9el : nous avons \u00e9tendu le bloc principal Image avec des fonctionnalit\u00e9s qui ne sont pas disponibles normalement, avec des styles personnalis\u00e9s et des effets d&rsquo;animation.<\/p>\n<p>Nous avons suivi une approche d&rsquo;am\u00e9lioration progressive, en cr\u00e9ant une variation de style pour le bloc Image. Cela permet aux utilisateurs de donner \u00e0 leurs images un aspect polaro\u00efd classique en toute simplicit\u00e9.<\/p>\n<p>Ensuite, nous avons ajout\u00e9 un bouton d\u00e9di\u00e9 \u00e0 la barre d&rsquo;outils du bloc Image, permettant aux utilisateurs de cr\u00e9er un effet d&rsquo;animation captivant au survol.<\/p>\n<p>Enfin, nous avons termin\u00e9 en cr\u00e9ant une variation de bloc pr\u00e9configur\u00e9e avec le style Polaroid et les r\u00e9glages d&rsquo;animation appliqu\u00e9s par d\u00e9faut.<\/p>\n<p>Nous esp\u00e9rons que les connaissances et les techniques que vous avez acquises gr\u00e2ce \u00e0 ce tutoriel vous donneront les moyens de cr\u00e9er des personnalisations vraiment surprenantes pour les blocs principaux de Gutenberg !<\/p>\n<p>Bon codage !<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Gutenberg a \u00e9volu\u00e9 pour devenir un \u00e9diteur puissant et hautement personnalisable. Au-del\u00e0 de ses robustes fonctionnalit\u00e9s pr\u00eates \u00e0 l&#8217;emploi, les d\u00e9veloppeurs WordPress peuvent d\u00e9sormais tirer parti &#8230;<\/p>\n","protected":false},"author":36,"featured_media":80463,"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-80462","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>Ma\u00eetrisez les variations de styles et de blocs dans Gutenberg<\/title>\n<meta name=\"description\" content=\"Vous souhaitez apprendre \u00e0 hacker Gutenberg et ajouter des fonctionnalit\u00e9s avanc\u00e9es \u00e0 vos blocs avec des styles et des variations de blocs ? Ne manquez pas ce tutoriel !\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinqsta.com\/fr\/blog\/variations-style-bloc-gutenberg\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comment hacker les blocs de Gutenberg avec les variations de style et les variations de bloc.\" \/>\n<meta property=\"og:description\" content=\"Vous souhaitez apprendre \u00e0 hacker Gutenberg et ajouter des fonctionnalit\u00e9s avanc\u00e9es \u00e0 vos blocs avec des styles et des variations de blocs ? Ne manquez pas ce tutoriel !\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/fr\/blog\/variations-style-bloc-gutenberg\/\" \/>\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-08-07T08:03:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-08T09:24:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/08\/gutenberg-style-variations-and-block-variations.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=\"Carlo Daniele\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Vous souhaitez apprendre \u00e0 hacker Gutenberg et ajouter des fonctionnalit\u00e9s avanc\u00e9es \u00e0 vos blocs avec des styles et des variations de blocs ? Ne manquez pas ce tutoriel !\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/08\/gutenberg-style-variations-and-block-variations-1024x512.png\" \/>\n<meta name=\"twitter:creator\" content=\"@carlodaniele\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlo Daniele\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"20 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/variations-style-bloc-gutenberg\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/variations-style-bloc-gutenberg\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinqsta.com\/fr\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Comment hacker les blocs de Gutenberg avec les variations de style et les variations de bloc.\",\"datePublished\":\"2025-08-07T08:03:23+00:00\",\"dateModified\":\"2025-08-08T09:24:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/variations-style-bloc-gutenberg\/\"},\"wordCount\":3109,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/variations-style-bloc-gutenberg\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/08\/gutenberg-style-variations-and-block-variations.png\",\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/variations-style-bloc-gutenberg\/\",\"url\":\"https:\/\/kinqsta.com\/fr\/blog\/variations-style-bloc-gutenberg\/\",\"name\":\"Ma\u00eetrisez les variations de styles et de blocs dans Gutenberg\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/variations-style-bloc-gutenberg\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/variations-style-bloc-gutenberg\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/08\/gutenberg-style-variations-and-block-variations.png\",\"datePublished\":\"2025-08-07T08:03:23+00:00\",\"dateModified\":\"2025-08-08T09:24:04+00:00\",\"description\":\"Vous souhaitez apprendre \u00e0 hacker Gutenberg et ajouter des fonctionnalit\u00e9s avanc\u00e9es \u00e0 vos blocs avec des styles et des variations de blocs ? Ne manquez pas ce tutoriel !\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/variations-style-bloc-gutenberg\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/fr\/blog\/variations-style-bloc-gutenberg\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/variations-style-bloc-gutenberg\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/08\/gutenberg-style-variations-and-block-variations.png\",\"contentUrl\":\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/08\/gutenberg-style-variations-and-block-variations.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/variations-style-bloc-gutenberg\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinqsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"D\u00e9veloppement WordPress\",\"item\":\"https:\/\/kinqsta.com\/fr\/sujets\/developpement-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Comment hacker les blocs de Gutenberg avec les variations de style et les variations de bloc.\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinqsta.com\/fr\/#website\",\"url\":\"https:\/\/kinqsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinqsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinqsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinqsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinqsta.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:\/\/kinqsta.com\/fr\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinqsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"caption\":\"Carlo Daniele\"},\"description\":\"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.\",\"sameAs\":[\"https:\/\/frammentidicodice.com\/\",\"https:\/\/x.com\/carlodaniele\"],\"url\":\"https:\/\/kinqsta.com\/fr\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Ma\u00eetrisez les variations de styles et de blocs dans Gutenberg","description":"Vous souhaitez apprendre \u00e0 hacker Gutenberg et ajouter des fonctionnalit\u00e9s avanc\u00e9es \u00e0 vos blocs avec des styles et des variations de blocs ? Ne manquez pas ce tutoriel !","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:\/\/kinqsta.com\/fr\/blog\/variations-style-bloc-gutenberg\/","og_locale":"fr_FR","og_type":"article","og_title":"Comment hacker les blocs de Gutenberg avec les variations de style et les variations de bloc.","og_description":"Vous souhaitez apprendre \u00e0 hacker Gutenberg et ajouter des fonctionnalit\u00e9s avanc\u00e9es \u00e0 vos blocs avec des styles et des variations de blocs ? Ne manquez pas ce tutoriel !","og_url":"https:\/\/kinqsta.com\/fr\/blog\/variations-style-bloc-gutenberg\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2025-08-07T08:03:23+00:00","article_modified_time":"2025-08-08T09:24:04+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/08\/gutenberg-style-variations-and-block-variations.png","type":"image\/png"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Vous souhaitez apprendre \u00e0 hacker Gutenberg et ajouter des fonctionnalit\u00e9s avanc\u00e9es \u00e0 vos blocs avec des styles et des variations de blocs ? Ne manquez pas ce tutoriel !","twitter_image":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/08\/gutenberg-style-variations-and-block-variations-1024x512.png","twitter_creator":"@carlodaniele","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Carlo Daniele","Dur\u00e9e de lecture estim\u00e9e":"20 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/fr\/blog\/variations-style-bloc-gutenberg\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/fr\/blog\/variations-style-bloc-gutenberg\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinqsta.com\/fr\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Comment hacker les blocs de Gutenberg avec les variations de style et les variations de bloc.","datePublished":"2025-08-07T08:03:23+00:00","dateModified":"2025-08-08T09:24:04+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/fr\/blog\/variations-style-bloc-gutenberg\/"},"wordCount":3109,"publisher":{"@id":"https:\/\/kinqsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/fr\/blog\/variations-style-bloc-gutenberg\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/08\/gutenberg-style-variations-and-block-variations.png","inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/fr\/blog\/variations-style-bloc-gutenberg\/","url":"https:\/\/kinqsta.com\/fr\/blog\/variations-style-bloc-gutenberg\/","name":"Ma\u00eetrisez les variations de styles et de blocs dans Gutenberg","isPartOf":{"@id":"https:\/\/kinqsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/fr\/blog\/variations-style-bloc-gutenberg\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/fr\/blog\/variations-style-bloc-gutenberg\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/08\/gutenberg-style-variations-and-block-variations.png","datePublished":"2025-08-07T08:03:23+00:00","dateModified":"2025-08-08T09:24:04+00:00","description":"Vous souhaitez apprendre \u00e0 hacker Gutenberg et ajouter des fonctionnalit\u00e9s avanc\u00e9es \u00e0 vos blocs avec des styles et des variations de blocs ? Ne manquez pas ce tutoriel !","breadcrumb":{"@id":"https:\/\/kinqsta.com\/fr\/blog\/variations-style-bloc-gutenberg\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/fr\/blog\/variations-style-bloc-gutenberg\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinqsta.com\/fr\/blog\/variations-style-bloc-gutenberg\/#primaryimage","url":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/08\/gutenberg-style-variations-and-block-variations.png","contentUrl":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/08\/gutenberg-style-variations-and-block-variations.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinqsta.com\/fr\/blog\/variations-style-bloc-gutenberg\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinqsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"D\u00e9veloppement WordPress","item":"https:\/\/kinqsta.com\/fr\/sujets\/developpement-wordpress\/"},{"@type":"ListItem","position":3,"name":"Comment hacker les blocs de Gutenberg avec les variations de style et les variations de bloc."}]},{"@type":"WebSite","@id":"https:\/\/kinqsta.com\/fr\/#website","url":"https:\/\/kinqsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinqsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinqsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinqsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinqsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinqsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinqsta.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:\/\/kinqsta.com\/fr\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinqsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","caption":"Carlo Daniele"},"description":"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.","sameAs":["https:\/\/frammentidicodice.com\/","https:\/\/x.com\/carlodaniele"],"url":"https:\/\/kinqsta.com\/fr\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/posts\/80462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/comments?post=80462"}],"version-history":[{"count":8,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/posts\/80462\/revisions"}],"predecessor-version":[{"id":80479,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/posts\/80462\/revisions\/80479"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/80462\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/80462\/translations\/it"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/80462\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/80462\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/80462\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/80462\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/80462\/translations\/es"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/80462\/translations\/pt"},{"href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/80462\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/media\/80463"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/media?parent=80462"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/tags?post=80462"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/topic?post=80462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}