À travers cette série de contenus pratiques, je souhaite vous montrer à quel point le développement WordPress a évolué. En 2024, un développeur WordPress est avant tout un développeur frontend qui doit posséder une solide maîtrise de HTML/CSS, de React, des spécificités de WordPress, ainsi que de PHP afin d’écrire de manière autonome le backend des blocs créés. Avouez-le, vous pensiez qu’il s’agissait simplement de cliquer sur des boutons dans Elementor, n’est-ce pas ? 🙂
L’éditeur de blocs WordPress (Gutenberg) a considérablement transformé le processus de création et de modification de contenu sur les sites WordPress, en fournissant aux développeurs des outils puissants pour créer des blocs personnalisables et fonctionnels. Dans ce guide, nous allons créer notre propre composant « Todo-List », qui permet aux utilisateurs de créer des listes de tâches et d’envoyer des données au serveur lorsque le statut des tâches change.
Éléments de base du bloc
Le bloc que nous allons créer sera composé de plusieurs éléments clés :
- RichText : un composant qui permet aux utilisateurs de saisir et de modifier du texte dans le bloc.
- InspectorControls : un panneau qui fournit des paramètres et des contrôles pour le bloc dans l’éditeur.
- CheckboxControl : un élément de contrôle utilisé pour marquer les tâches comme terminées.
- useState : un hook qui gère l’état des tâches au sein du bloc.
- fetch API : utilisée pour envoyer les données des tâches au serveur.
Chaque bloc est créé sous la forme d’une extension distincte, qui peut être réutilisée dans d’autres projets WordPress. Cela vous permet d’intégrer facilement le bloc créé dans tout autre site fonctionnant sous WordPress.
Configuration de l’environnement de développement
Avant de commencer à créer le composant, il est important de vous assurer que votre environnement de développement est correctement configuré. Vous aurez besoin des outils suivants pour développer le bloc :
- WordPress : assurez-vous que votre version de WordPress est 5.0 ou ultérieure, car l’éditeur de blocs a été introduit dans cette version.
- Node.js et npm : requis pour travailler avec JavaScript et gérer les dépendances.
- WP-CLI (facultatif) : un outil en ligne de commande pour travailler avec WordPress qui peut simplifier le développement.
Installation de Node.js et npm
Si Node.js et npm ne sont pas encore installés sur votre ordinateur, téléchargez-les et installez-les depuis le site officiel de Node.js.
Après l’installation, exécutez les commandes suivantes afin de vous assurer que tout est correctement installé :
node -v
npm -vSi les commandes renvoient des versions, tout fonctionne correctement.
Création du bloc Todo-List
Pour accélérer le processus de création du bloc, vous pouvez utiliser une commande qui générera automatiquement toute la structure du projet, y compris les configurations et les fichiers.
Étape 1 : création du bloc via une commande
Ouvrez votre terminal et exécutez la commande suivante pour créer automatiquement le bloc « Todo-List » :
npx @wordpress/create-block@latest todo-listCette commande effectuera les étapes suivantes pour vous :
- Initialisation du projet : la commande créera un nouveau répertoire nommé todo-list, contenant tous les fichiers et la structure nécessaires au bloc.
- Installation des dépendances : tous les packages nécessaires, tels que @wordpress/scripts, seront installés automatiquement.
- Création de la structure des fichiers : la structure inclura les dossiers src et build, ainsi qu’un fichier index.js contenant le code de base du bloc.
- Configuration de block.json : ce fichier sera créé avec la configuration de base qui définit le bloc « Todo-List ».
Structure des fichiers et description
Après l’exécution de la commande, la structure de projet suivante sera créée :
todo-list/
│
├── src/
│ └── index.js
│
├── build/
│
├── block.json
├── package.json
└── README.md1. src/index.js
Le fichier index.js du dossier src contient tout le code source de votre bloc. C’est là que la logique du bloc est implémentée, y compris son apparence et son interaction avec l’utilisateur. Les principales parties du code concernent l’enregistrement du bloc à l’aide de la fonction registerBlockType, la configuration des attributs et la définition des fonctions de modification et d’enregistrement du bloc.
Exemple de contenu de index.js :
import { registerBlockType } from '@wordpress/blocks';
import { useState } from '@wordpress/element';
import { RichText, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, CheckboxControl } from '@wordpress/components';
registerBlockType('todo-plugin/todo-list', {
title: 'Todo List',
icon: 'list-view',
category: 'widgets',
attributes: {
tasks: {
type: 'array',
default: [],
},
},
edit({ attributes, setAttributes }) {
const { tasks } = attributes;
const [taskText, setTaskText] = useState('');
const addTask = () => {
if (taskText) {
const newTasks = [...tasks, { text: taskText, done: false }];
setAttributes({ tasks: newTasks });
setTaskText('');
sendTasksToServer(newTasks);
}
};
const toggleTaskDone = (index) => {
const newTasks = tasks.map((task, i) =>
i === index ? { ...task, done: !task.done } : task
);
setAttributes({ tasks: newTasks });
sendTasksToServer(newTasks);
};
const sendTasksToServer = (tasks) => {
// Example of sending data to the server
fetch('/wp-json/todo/v1/update', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ tasks }),
});
};
return (
<div>
<InspectorControls>
<PanelBody title="Tasks">
{tasks.map((task, index) => (
<CheckboxControl
key={index}
label={task.text}
checked={task.done}
onChange={() => toggleTaskDone(index)}
/>
))}
</PanelBody>
</InspectorControls>
<div>
<RichText
tagName="p"
value={taskText}
onChange={(text) => setTaskText(text)}
placeholder="Enter new task"
/>
<button onClick={addTask}>Add Task</button>
</div>
<ul>
{tasks.map((task, index) => (
<li key={index}>
<CheckboxControl
label={task.text}
checked={task.done}
onChange={() => toggleTaskDone(index)}
/>
</li>
))}
</ul>
</div>
);
},
save({ attributes }) {
const { tasks } = attributes;
return (
<ul>
{tasks.map((task, index) => (
<li key={index}>
<RichText.Content
tagName="span"
value={task.text}
style={{ textDecoration: task.done ? 'line-through' : 'none' }}
/>
</li>
))}
</ul>
);
},
});2. build
Le dossier build est destiné à stocker les fichiers compilés. Après avoir compilé le projet à l’aide de la commande npm run build, le fichier index.js prêt à l’emploi sera placé dans ce dossier ; il sera utilisé par WordPress pour afficher et faire fonctionner le bloc.
3. block.json
Le fichier block.json contient les métadonnées de votre bloc. Il définit le nom, la catégorie, l’icône, les scripts et les styles nécessaires à son fonctionnement. Ce fichier est indispensable pour enregistrer le bloc dans WordPress.
Exemple de contenu de block.json :
{
"apiVersion": 2,
"name": "todo-plugin/todo-list",
"title": "Todo List",
"category": "widgets",
"icon": "list-view",
"description": "A customizable todo list block.",
"keywords": [ "todo", "tasks", "list" ],
"version": "1.0.0",
"textdomain": "todo-list",
"editorScript": "file:./build/index.js"
}4. package.json
Le fichier package.json contient des informations sur le projet et ses dépendances. Il gère l’installation et l’utilisation des packages requis pour développer et compiler le bloc. Ce fichier est créé automatiquement lors de l’initialisation du projet et est mis à jour à mesure que de nouvelles dépendances sont ajoutées.
Exemple de contenu de package.json :
{
"name": "todo-list",
"version": "1.0.0",
"description": "A custom block for todo list",
"scripts": {
"build": "wp-scripts build",
"start": "wp-scripts start"
},
"devDependencies": {
"@wordpress/scripts": "^24.0.0"
}
}5. README.md
Le fichier README.md contient une description du projet, des instructions d’installation et d’utilisation, ainsi que d’autres informations importantes dont les développeurs ou les utilisateurs peuvent avoir besoin. Ce fichier est utile pour documenter le projet.
Compilation du projet
Après avoir apporté des modifications au code, compilez le projet afin d’obtenir un fichier prêt à l’emploi pour WordPress :
npm run build
La commande build compilera votre code et le placera dans le dossier build.
Enregistrement du bloc dans WordPress
Maintenant que le bloc est prêt, il doit être enregistré dans WordPress. Pour cela, ajoutez le code suivant à votre fichier d’extension ou de thème :
function todo_plugin_register_block() {
wp_register_script(
'todo-list-editor-script',
plugins_url( 'build/index.js', __FILE__ ),
array( 'wp-blocks', 'wp-element', 'wp-editor' ),
filemtime( plugin_dir_path( __FILE__ ) . 'build/index.js' )
);
register_block_type( 'todo-plugin/todo-list', array(
'editor_script' => 'todo-list-editor-script',
) );
}
add_action( 'init', 'todo_plugin_register_block' );Ce code enregistrera votre bloc dans WordPress et mettra le fichier JavaScript compilé en file d’attente.
Conclusion
L’utilisation de la commande npx @wordpress/create-block@latest accélère considérablement le processus de création d’un nouveau bloc pour l’éditeur de blocs WordPress. Dans ce guide, nous avons vu comment créer un bloc « Todo-List » qui permet aux utilisateurs de créer des listes de tâches et de gérer leur réalisation, avec envoi des données au serveur. Ce composant peut être étendu en ajoutant de nouvelles fonctionnalités et en améliorant l’interaction avec l’utilisateur, ouvrant ainsi de nombreuses possibilités de personnalisation de votre site WordPress.