\u00c0 travers cette s\u00e9rie de contenus pratiques, je souhaite vous montrer \u00e0 quel point le d\u00e9veloppement WordPress a \u00e9volu\u00e9. En 2024, un d\u00e9veloppeur WordPress est avant tout un d\u00e9veloppeur frontend qui doit poss\u00e9der une solide ma\u00eetrise de HTML\/CSS, de React, des sp\u00e9cificit\u00e9s de WordPress, ainsi que de PHP afin d\u2019\u00e9crire de mani\u00e8re autonome le backend des blocs cr\u00e9\u00e9s. Avouez-le, vous pensiez qu\u2019il s\u2019agissait simplement de cliquer sur des boutons dans Elementor, n\u2019est-ce pas ? \ud83d\ude42<\/p>\n\n\n\n
L\u2019\u00e9diteur de blocs WordPress (Gutenberg) a consid\u00e9rablement transform\u00e9 le processus de cr\u00e9ation et de modification de contenu sur les sites WordPress, en fournissant aux d\u00e9veloppeurs des outils puissants pour cr\u00e9er des blocs personnalisables et fonctionnels. Dans ce guide, nous allons cr\u00e9er notre propre composant \u00ab Todo-List \u00bb, qui permet aux utilisateurs de cr\u00e9er des listes de t\u00e2ches et d\u2019envoyer des donn\u00e9es au serveur lorsque le statut des t\u00e2ches change.<\/p>\n\n\n\n
Le bloc que nous allons cr\u00e9er sera compos\u00e9 de plusieurs \u00e9l\u00e9ments cl\u00e9s :<\/p>\n\n\n\n
Chaque bloc est cr\u00e9\u00e9 sous la forme d\u2019une extension distincte, qui peut \u00eatre r\u00e9utilis\u00e9e dans d\u2019autres projets WordPress. Cela vous permet d\u2019int\u00e9grer facilement le bloc cr\u00e9\u00e9 dans tout autre site fonctionnant sous WordPress.<\/p>\n\n\n\n
Avant de commencer \u00e0 cr\u00e9er le composant, il est important de vous assurer que votre environnement de d\u00e9veloppement est correctement configur\u00e9. Vous aurez besoin des outils suivants pour d\u00e9velopper le bloc :<\/p>\n\n\n\n
Si Node.js et npm ne sont pas encore install\u00e9s sur votre ordinateur, t\u00e9l\u00e9chargez-les et installez-les depuis le site officiel de Node.js.<\/p>\n\n\n\n
Apr\u00e8s l\u2019installation, ex\u00e9cutez les commandes suivantes afin de vous assurer que tout est correctement install\u00e9 :<\/p>\n\n\n\n
node -v\nnpm -v<\/code><\/pre>\n\n\n\nSi les commandes renvoient des versions, tout fonctionne correctement.<\/p>\n\n\n\n
Cr\u00e9ation du bloc Todo-List<\/h3>\n\n\n\n
Pour acc\u00e9l\u00e9rer le processus de cr\u00e9ation du bloc, vous pouvez utiliser une commande qui g\u00e9n\u00e9rera automatiquement toute la structure du projet, y compris les configurations et les fichiers.<\/p>\n\n\n\n
\u00c9tape 1 : cr\u00e9ation du bloc via une commande<\/h3>\n\n\n\n
Ouvrez votre terminal et ex\u00e9cutez la commande suivante pour cr\u00e9er automatiquement le bloc \u00ab Todo-List \u00bb :<\/p>\n\n\n\n
npx @wordpress\/create-block@latest todo-list<\/code><\/pre>\n\n\n\nCette commande effectuera les \u00e9tapes suivantes pour vous :<\/p>\n\n\n\n
\n- Initialisation du projet :<\/strong> la commande cr\u00e9era un nouveau r\u00e9pertoire nomm\u00e9\u00a0todo-list, contenant tous les fichiers et la structure n\u00e9cessaires au bloc.<\/li>\n\n\n\n
- Installation des d\u00e9pendances :<\/strong> tous les packages n\u00e9cessaires, tels que\u00a0@wordpress\/scripts, seront install\u00e9s automatiquement.<\/li>\n\n\n\n
- Cr\u00e9ation de la structure des fichiers :<\/strong> la structure inclura les dossiers\u00a0src\u00a0et\u00a0build, ainsi qu\u2019un fichier\u00a0index.js\u00a0contenant le code de base du bloc.<\/li>\n\n\n\n
- Configuration de <\/strong>block.json :\u00a0ce fichier sera cr\u00e9\u00e9 avec la configuration de base qui d\u00e9finit le bloc \u00ab Todo-List \u00bb.<\/li>\n<\/ol>\n\n\n\n
Structure des fichiers et description<\/h3>\n\n\n\n
Apr\u00e8s l\u2019ex\u00e9cution de la commande, la structure de projet suivante sera cr\u00e9\u00e9e :<\/p>\n\n\n\n
todo-list\/\n\u2502\n\u251c\u2500\u2500 src\/\n\u2502 \u2514\u2500\u2500 index.js\n\u2502\n\u251c\u2500\u2500 build\/\n\u2502\n\u251c\u2500\u2500 block.json\n\u251c\u2500\u2500 package.json\n\u2514\u2500\u2500 README.md<\/code><\/pre>\n\n\n\n1. src\/index.js<\/h3>\n\n\n\n
Le fichier index.js du dossier src contient tout le code source de votre bloc. C\u2019est l\u00e0 que la logique du bloc est impl\u00e9ment\u00e9e, y compris son apparence et son interaction avec l\u2019utilisateur. Les principales parties du code concernent l\u2019enregistrement du bloc \u00e0 l\u2019aide de la fonction registerBlockType, la configuration des attributs et la d\u00e9finition des fonctions de modification et d\u2019enregistrement du bloc.<\/p>\n\n\n\n
Exemple de contenu de index.js :<\/p>\n\n\n\n
import { registerBlockType } from '@wordpress\/blocks';\nimport { useState } from '@wordpress\/element';\nimport { RichText, InspectorControls } from '@wordpress\/block-editor';\nimport { PanelBody, CheckboxControl } from '@wordpress\/components';\n\nregisterBlockType('todo-plugin\/todo-list', {\n title: 'Todo List',\n icon: 'list-view',\n category: 'widgets',\n attributes: {\n tasks: {\n type: 'array',\n default: [],\n },\n },\n edit({ attributes, setAttributes }) {\n const { tasks } = attributes;\n const [taskText, setTaskText] = useState('');\n\n const addTask = () => {\n if (taskText) {\n const newTasks = [...tasks, { text: taskText, done: false }];\n setAttributes({ tasks: newTasks });\n setTaskText('');\n sendTasksToServer(newTasks);\n }\n };\n\n const toggleTaskDone = (index) => {\n const newTasks = tasks.map((task, i) =>\n i === index ? { ...task, done: !task.done } : task\n );\n setAttributes({ tasks: newTasks });\n sendTasksToServer(newTasks);\n };\n\n const sendTasksToServer = (tasks) => {\n \/\/ Example of sending data to the server\n fetch('\/wp-json\/todo\/v1\/update', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json',\n },\n body: JSON.stringify({ tasks }),\n });\n };\n\n return (\n <div>\n <InspectorControls>\n <PanelBody title=\"Tasks\">\n {tasks.map((task, index) => (\n <CheckboxControl\n key={index}\n label={task.text}\n checked={task.done}\n onChange={() => toggleTaskDone(index)}\n \/>\n ))}\n <\/PanelBody>\n <\/InspectorControls>\n <div>\n <RichText\n tagName=\"p\"\n value={taskText}\n onChange={(text) => setTaskText(text)}\n placeholder=\"Enter new task\"\n \/>\n <button onClick={addTask}>Add Task<\/button>\n <\/div>\n <ul>\n {tasks.map((task, index) => (\n <li key={index}>\n <CheckboxControl\n label={task.text}\n checked={task.done}\n onChange={() => toggleTaskDone(index)}\n \/>\n <\/li>\n ))}\n <\/ul>\n <\/div>\n );\n },\n save({ attributes }) {\n const { tasks } = attributes;\n\n return (\n <ul>\n {tasks.map((task, index) => (\n <li key={index}>\n <RichText.Content\n tagName=\"span\"\n value={task.text}\n style={{ textDecoration: task.done ? 'line-through' : 'none' }}\n \/>\n <\/li>\n ))}\n <\/ul>\n );\n },\n});<\/code><\/pre>\n\n\n\n2.\u00a0build<\/h3>\n\n\n\n
Le dossier build est destin\u00e9 \u00e0 stocker les fichiers compil\u00e9s. Apr\u00e8s avoir compil\u00e9 le projet \u00e0 l\u2019aide de la commande npm run build, le fichier index.js pr\u00eat \u00e0 l\u2019emploi sera plac\u00e9 dans ce dossier ; il sera utilis\u00e9 par WordPress pour afficher et faire fonctionner le bloc.<\/p>\n\n\n\n
3. block.json<\/h3>\n\n\n\n
Le fichier block.json contient les m\u00e9tadonn\u00e9es de votre bloc. Il d\u00e9finit le nom, la cat\u00e9gorie, l\u2019ic\u00f4ne, les scripts et les styles n\u00e9cessaires \u00e0 son fonctionnement. Ce fichier est indispensable pour enregistrer le bloc dans WordPress.<\/p>\n\n\n\n
Exemple de contenu de block.json :<\/p>\n\n\n\n
{\n \"apiVersion\": 2,\n \"name\": \"todo-plugin\/todo-list\",\n \"title\": \"Todo List\",\n \"category\": \"widgets\",\n \"icon\": \"list-view\",\n \"description\": \"A customizable todo list block.\",\n \"keywords\": [ \"todo\", \"tasks\", \"list\" ],\n \"version\": \"1.0.0\",\n \"textdomain\": \"todo-list\",\n \"editorScript\": \"file:.\/build\/index.js\"\n}<\/code><\/pre>\n\n\n\n4. package.json<\/h3>\n\n\n\n
Le fichier package.json contient des informations sur le projet et ses d\u00e9pendances. Il g\u00e8re l\u2019installation et l\u2019utilisation des packages requis pour d\u00e9velopper et compiler le bloc. Ce fichier est cr\u00e9\u00e9 automatiquement lors de l\u2019initialisation du projet et est mis \u00e0 jour \u00e0 mesure que de nouvelles d\u00e9pendances sont ajout\u00e9es.<\/p>\n\n\n\n
Exemple de contenu de package.json :<\/p>\n\n\n\n
{\n \"name\": \"todo-list\",\n \"version\": \"1.0.0\",\n \"description\": \"A custom block for todo list\",\n \"scripts\": {\n \"build\": \"wp-scripts build\",\n \"start\": \"wp-scripts start\"\n },\n \"devDependencies\": {\n \"@wordpress\/scripts\": \"^24.0.0\"\n }\n}<\/code><\/pre>\n\n\n\n5. README.md<\/h3>\n\n\n\n
Le fichier README.md contient une description du projet, des instructions d\u2019installation et d\u2019utilisation, ainsi que d\u2019autres informations importantes dont les d\u00e9veloppeurs ou les utilisateurs peuvent avoir besoin. Ce fichier est utile pour documenter le projet.<\/p>\n\n\n\n
Compilation du projet<\/h3>\n\n\n\n
Apr\u00e8s avoir apport\u00e9 des modifications au code, compilez le projet afin d\u2019obtenir un fichier pr\u00eat \u00e0 l\u2019emploi pour WordPress :<\/p>\n\n\n\n
npm run build<\/pre>\n\n\n\nLa commande build compilera votre code et le placera dans le dossier build.<\/p>\n\n\n\n
Enregistrement du bloc dans WordPress<\/h3>\n\n\n\n
Maintenant que le bloc est pr\u00eat, il doit \u00eatre enregistr\u00e9 dans WordPress. Pour cela, ajoutez le code suivant \u00e0 votre fichier d\u2019extension ou de th\u00e8me :<\/p>\n\n\n\n
function todo_plugin_register_block() {\n wp_register_script(\n 'todo-list-editor-script',\n plugins_url( 'build\/index.js', __FILE__ ),\n array( 'wp-blocks', 'wp-element', 'wp-editor' ),\n filemtime( plugin_dir_path( __FILE__ ) . 'build\/index.js' )\n );\n\n register_block_type( 'todo-plugin\/todo-list', array(\n 'editor_script' => 'todo-list-editor-script',\n ) );\n}\nadd_action( 'init', 'todo_plugin_register_block' );<\/code><\/pre>\n\n\n\nCe code enregistrera votre bloc dans WordPress et mettra le fichier JavaScript compil\u00e9 en file d\u2019attente.<\/p>\n\n\n\n
Conclusion<\/h3>\n\n\n\n
L\u2019utilisation de la commande npx @wordpress\/create-block@latest acc\u00e9l\u00e8re consid\u00e9rablement le processus de cr\u00e9ation d\u2019un nouveau bloc pour l\u2019\u00e9diteur de blocs WordPress. Dans ce guide, nous avons vu comment cr\u00e9er un bloc \u00ab Todo-List \u00bb qui permet aux utilisateurs de cr\u00e9er des listes de t\u00e2ches et de g\u00e9rer leur r\u00e9alisation, avec envoi des donn\u00e9es au serveur. Ce composant peut \u00eatre \u00e9tendu en ajoutant de nouvelles fonctionnalit\u00e9s et en am\u00e9liorant l\u2019interaction avec l\u2019utilisateur, ouvrant ainsi de nombreuses possibilit\u00e9s de personnalisation de votre site WordPress.<\/p>\n","protected":false},"excerpt":{"rendered":"
\u00c0 travers cette s\u00e9rie de contenus pratiques, je souhaite vous montrer \u00e0 quel point le d\u00e9veloppement WordPress a \u00e9volu\u00e9. En 2024, un d\u00e9veloppeur WordPress est avant tout un d\u00e9veloppeur frontend qui doit poss\u00e9der une solide ma\u00eetrise de HTML\/CSS, de React, des sp\u00e9cificit\u00e9s de WordPress, ainsi que de PHP afin d\u2019\u00e9crire de mani\u00e8re autonome le backend […]<\/p>\n","protected":false},"author":1,"featured_media":905,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1871","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"acf":[],"yoast_head":"\n
Cr\u00e9er un composant de liste de t\u00e2ches pour l\u2019\u00e9diteur de blocs WordPress - partie 1 - asgru<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/asgru.com\/fr\/creer-un-composant-de-liste-de-taches-pour-lediteur-de-blocs-wordpress-partie-1\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cr\u00e9er un composant de liste de t\u00e2ches pour l\u2019\u00e9diteur de blocs WordPress - partie 1 - asgru\" \/>\n<meta property=\"og:description\" content=\"\u00c0 travers cette s\u00e9rie de contenus pratiques, je souhaite vous montrer \u00e0 quel point le d\u00e9veloppement WordPress a \u00e9volu\u00e9. En 2024, un d\u00e9veloppeur WordPress est avant tout un d\u00e9veloppeur frontend qui doit poss\u00e9der une solide ma\u00eetrise de HTML\/CSS, de React, des sp\u00e9cificit\u00e9s de WordPress, ainsi que de PHP afin d\u2019\u00e9crire de mani\u00e8re autonome le backend […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/asgru.com\/fr\/creer-un-composant-de-liste-de-taches-pour-lediteur-de-blocs-wordpress-partie-1\/\" \/>\n<meta property=\"og:site_name\" content=\"asgru\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/asgru.wp\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-08-19T05:56:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-14T01:07:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/asgru.com\/wp-content\/uploads\/2024\/08\/to-do-scaled.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1186\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"asgru\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ArtemKondranin\" \/>\n<meta name=\"twitter:site\" content=\"@ArtemKondranin\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"asgru\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/asgru.com\\\/fr\\\/creer-un-composant-de-liste-de-taches-pour-lediteur-de-blocs-wordpress-partie-1\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/asgru.com\\\/fr\\\/creer-un-composant-de-liste-de-taches-pour-lediteur-de-blocs-wordpress-partie-1\\\/\"},\"author\":{\"name\":\"asgru\",\"@id\":\"https:\\\/\\\/asgru.com\\\/fr\\\/#\\\/schema\\\/person\\\/8f6cca385f5ae3eb7802b1e40b721576\"},\"headline\":\"Cr\u00e9er un composant de liste de t\u00e2ches pour l\u2019\u00e9diteur de blocs WordPress – partie 1\",\"datePublished\":\"2024-08-19T05:56:15+00:00\",\"dateModified\":\"2026-09-14T01:07:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/asgru.com\\\/fr\\\/creer-un-composant-de-liste-de-taches-pour-lediteur-de-blocs-wordpress-partie-1\\\/\"},\"wordCount\":1154,\"publisher\":{\"@id\":\"https:\\\/\\\/asgru.com\\\/fr\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/asgru.com\\\/fr\\\/creer-un-composant-de-liste-de-taches-pour-lediteur-de-blocs-wordpress-partie-1\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/asgru.com\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/to-do-scaled.png\",\"articleSection\":[\"Uncategorized\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/asgru.com\\\/fr\\\/creer-un-composant-de-liste-de-taches-pour-lediteur-de-blocs-wordpress-partie-1\\\/\",\"url\":\"https:\\\/\\\/asgru.com\\\/fr\\\/creer-un-composant-de-liste-de-taches-pour-lediteur-de-blocs-wordpress-partie-1\\\/\",\"name\":\"Cr\u00e9er un composant de liste de t\u00e2ches pour l\u2019\u00e9diteur de blocs WordPress - partie 1 - asgru\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/asgru.com\\\/fr\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/asgru.com\\\/fr\\\/creer-un-composant-de-liste-de-taches-pour-lediteur-de-blocs-wordpress-partie-1\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/asgru.com\\\/fr\\\/creer-un-composant-de-liste-de-taches-pour-lediteur-de-blocs-wordpress-partie-1\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/asgru.com\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/to-do-scaled.png\",\"datePublished\":\"2024-08-19T05:56:15+00:00\",\"dateModified\":\"2026-09-14T01:07:13+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/asgru.com\\\/fr\\\/creer-un-composant-de-liste-de-taches-pour-lediteur-de-blocs-wordpress-partie-1\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/asgru.com\\\/fr\\\/creer-un-composant-de-liste-de-taches-pour-lediteur-de-blocs-wordpress-partie-1\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/asgru.com\\\/fr\\\/creer-un-composant-de-liste-de-taches-pour-lediteur-de-blocs-wordpress-partie-1\\\/#primaryimage\",\"url\":\"https:\\\/\\\/asgru.com\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/to-do-scaled.png\",\"contentUrl\":\"https:\\\/\\\/asgru.com\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/to-do-scaled.png\",\"width\":2560,\"height\":1186},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/asgru.com\\\/fr\\\/creer-un-composant-de-liste-de-taches-pour-lediteur-de-blocs-wordpress-partie-1\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/asgru.com\\\/fr\\\/home\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Cr\u00e9er un composant de liste de t\u00e2ches pour l\u2019\u00e9diteur de blocs WordPress – partie 1\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/asgru.com\\\/fr\\\/#website\",\"url\":\"https:\\\/\\\/asgru.com\\\/fr\\\/\",\"name\":\"asgru\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/asgru.com\\\/fr\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/asgru.com\\\/fr\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/asgru.com\\\/fr\\\/#organization\",\"name\":\"asgru\",\"url\":\"https:\\\/\\\/asgru.com\\\/fr\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/asgru.com\\\/fr\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/asgru.com\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/logo-black.svg\",\"contentUrl\":\"https:\\\/\\\/asgru.com\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/logo-black.svg\",\"caption\":\"asgru\"},\"image\":{\"@id\":\"https:\\\/\\\/asgru.com\\\/fr\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/asgru.wp\\\/\",\"https:\\\/\\\/x.com\\\/ArtemKondranin\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/asgru\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/asgru.com\\\/fr\\\/#\\\/schema\\\/person\\\/8f6cca385f5ae3eb7802b1e40b721576\",\"name\":\"asgru\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8226b63c28c55f65ad493c4aacf00e751309b5d3005e6aef331fd48ac864080d?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8226b63c28c55f65ad493c4aacf00e751309b5d3005e6aef331fd48ac864080d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8226b63c28c55f65ad493c4aacf00e751309b5d3005e6aef331fd48ac864080d?s=96&d=mm&r=g\",\"caption\":\"asgru\"},\"sameAs\":[\"http:\\\/\\\/asgru.loc\"],\"url\":\"https:\\\/\\\/asgru.com\\\/fr\\\/author\\\/asgru\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Cr\u00e9er un composant de liste de t\u00e2ches pour l\u2019\u00e9diteur de blocs WordPress - partie 1 - asgru","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:\/\/asgru.com\/fr\/creer-un-composant-de-liste-de-taches-pour-lediteur-de-blocs-wordpress-partie-1\/","og_locale":"fr_FR","og_type":"article","og_title":"Cr\u00e9er un composant de liste de t\u00e2ches pour l\u2019\u00e9diteur de blocs WordPress - partie 1 - asgru","og_description":"\u00c0 travers cette s\u00e9rie de contenus pratiques, je souhaite vous montrer \u00e0 quel point le d\u00e9veloppement WordPress a \u00e9volu\u00e9. En 2024, un d\u00e9veloppeur WordPress est avant tout un d\u00e9veloppeur frontend qui doit poss\u00e9der une solide ma\u00eetrise de HTML\/CSS, de React, des sp\u00e9cificit\u00e9s de WordPress, ainsi que de PHP afin d\u2019\u00e9crire de mani\u00e8re autonome le backend […]","og_url":"https:\/\/asgru.com\/fr\/creer-un-composant-de-liste-de-taches-pour-lediteur-de-blocs-wordpress-partie-1\/","og_site_name":"asgru","article_publisher":"https:\/\/www.facebook.com\/asgru.wp\/","article_published_time":"2024-08-19T05:56:15+00:00","article_modified_time":"2026-09-14T01:07:13+00:00","og_image":[{"width":2560,"height":1186,"url":"https:\/\/asgru.com\/wp-content\/uploads\/2024\/08\/to-do-scaled.png","type":"image\/png"}],"author":"asgru","twitter_card":"summary_large_image","twitter_creator":"@ArtemKondranin","twitter_site":"@ArtemKondranin","twitter_misc":{"\u00c9crit par":"asgru","Dur\u00e9e de lecture estim\u00e9e":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/asgru.com\/fr\/creer-un-composant-de-liste-de-taches-pour-lediteur-de-blocs-wordpress-partie-1\/#article","isPartOf":{"@id":"https:\/\/asgru.com\/fr\/creer-un-composant-de-liste-de-taches-pour-lediteur-de-blocs-wordpress-partie-1\/"},"author":{"name":"asgru","@id":"https:\/\/asgru.com\/fr\/#\/schema\/person\/8f6cca385f5ae3eb7802b1e40b721576"},"headline":"Cr\u00e9er un composant de liste de t\u00e2ches pour l\u2019\u00e9diteur de blocs WordPress – partie 1","datePublished":"2024-08-19T05:56:15+00:00","dateModified":"2026-09-14T01:07:13+00:00","mainEntityOfPage":{"@id":"https:\/\/asgru.com\/fr\/creer-un-composant-de-liste-de-taches-pour-lediteur-de-blocs-wordpress-partie-1\/"},"wordCount":1154,"publisher":{"@id":"https:\/\/asgru.com\/fr\/#organization"},"image":{"@id":"https:\/\/asgru.com\/fr\/creer-un-composant-de-liste-de-taches-pour-lediteur-de-blocs-wordpress-partie-1\/#primaryimage"},"thumbnailUrl":"https:\/\/asgru.com\/wp-content\/uploads\/2024\/08\/to-do-scaled.png","articleSection":["Uncategorized"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/asgru.com\/fr\/creer-un-composant-de-liste-de-taches-pour-lediteur-de-blocs-wordpress-partie-1\/","url":"https:\/\/asgru.com\/fr\/creer-un-composant-de-liste-de-taches-pour-lediteur-de-blocs-wordpress-partie-1\/","name":"Cr\u00e9er un composant de liste de t\u00e2ches pour l\u2019\u00e9diteur de blocs WordPress - partie 1 - asgru","isPartOf":{"@id":"https:\/\/asgru.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/asgru.com\/fr\/creer-un-composant-de-liste-de-taches-pour-lediteur-de-blocs-wordpress-partie-1\/#primaryimage"},"image":{"@id":"https:\/\/asgru.com\/fr\/creer-un-composant-de-liste-de-taches-pour-lediteur-de-blocs-wordpress-partie-1\/#primaryimage"},"thumbnailUrl":"https:\/\/asgru.com\/wp-content\/uploads\/2024\/08\/to-do-scaled.png","datePublished":"2024-08-19T05:56:15+00:00","dateModified":"2026-09-14T01:07:13+00:00","breadcrumb":{"@id":"https:\/\/asgru.com\/fr\/creer-un-composant-de-liste-de-taches-pour-lediteur-de-blocs-wordpress-partie-1\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/asgru.com\/fr\/creer-un-composant-de-liste-de-taches-pour-lediteur-de-blocs-wordpress-partie-1\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/asgru.com\/fr\/creer-un-composant-de-liste-de-taches-pour-lediteur-de-blocs-wordpress-partie-1\/#primaryimage","url":"https:\/\/asgru.com\/wp-content\/uploads\/2024\/08\/to-do-scaled.png","contentUrl":"https:\/\/asgru.com\/wp-content\/uploads\/2024\/08\/to-do-scaled.png","width":2560,"height":1186},{"@type":"BreadcrumbList","@id":"https:\/\/asgru.com\/fr\/creer-un-composant-de-liste-de-taches-pour-lediteur-de-blocs-wordpress-partie-1\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/asgru.com\/fr\/home\/"},{"@type":"ListItem","position":2,"name":"Cr\u00e9er un composant de liste de t\u00e2ches pour l\u2019\u00e9diteur de blocs WordPress – partie 1"}]},{"@type":"WebSite","@id":"https:\/\/asgru.com\/fr\/#website","url":"https:\/\/asgru.com\/fr\/","name":"asgru","description":"","publisher":{"@id":"https:\/\/asgru.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/asgru.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/asgru.com\/fr\/#organization","name":"asgru","url":"https:\/\/asgru.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/asgru.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/asgru.com\/wp-content\/uploads\/2025\/06\/logo-black.svg","contentUrl":"https:\/\/asgru.com\/wp-content\/uploads\/2025\/06\/logo-black.svg","caption":"asgru"},"image":{"@id":"https:\/\/asgru.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/asgru.wp\/","https:\/\/x.com\/ArtemKondranin","https:\/\/www.linkedin.com\/in\/asgru\/"]},{"@type":"Person","@id":"https:\/\/asgru.com\/fr\/#\/schema\/person\/8f6cca385f5ae3eb7802b1e40b721576","name":"asgru","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/secure.gravatar.com\/avatar\/8226b63c28c55f65ad493c4aacf00e751309b5d3005e6aef331fd48ac864080d?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/8226b63c28c55f65ad493c4aacf00e751309b5d3005e6aef331fd48ac864080d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8226b63c28c55f65ad493c4aacf00e751309b5d3005e6aef331fd48ac864080d?s=96&d=mm&r=g","caption":"asgru"},"sameAs":["http:\/\/asgru.loc"],"url":"https:\/\/asgru.com\/fr\/author\/asgru\/"}]}},"_links":{"self":[{"href":"https:\/\/asgru.com\/fr\/wp-json\/wp\/v2\/posts\/1871","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/asgru.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/asgru.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/asgru.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/asgru.com\/fr\/wp-json\/wp\/v2\/comments?post=1871"}],"version-history":[{"count":1,"href":"https:\/\/asgru.com\/fr\/wp-json\/wp\/v2\/posts\/1871\/revisions"}],"predecessor-version":[{"id":1872,"href":"https:\/\/asgru.com\/fr\/wp-json\/wp\/v2\/posts\/1871\/revisions\/1872"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/asgru.com\/fr\/wp-json\/wp\/v2\/media\/905"}],"wp:attachment":[{"href":"https:\/\/asgru.com\/fr\/wp-json\/wp\/v2\/media?parent=1871"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/asgru.com\/fr\/wp-json\/wp\/v2\/categories?post=1871"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/asgru.com\/fr\/wp-json\/wp\/v2\/tags?post=1871"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}