Con questa serie di materiali pratici, voglio mostrarti fino a che punto si è evoluto lo sviluppo WordPress. Nel 2024, uno sviluppatore WordPress è principalmente uno sviluppatore frontend che deve avere una solida conoscenza di HTML/CSS, React, delle specificità di WordPress, nonché di PHP per scrivere autonomamente il backend dei blocchi creati. Ammettilo, pensavi si trattasse solo di cliccare pulsanti in Elementor, vero? 🙂
L’editor a blocchi di WordPress (Gutenberg) ha trasformato significativamente il processo di creazione e modifica dei contenuti sui siti WordPress, fornendo agli sviluppatori potenti strumenti per creare blocchi personalizzabili e funzionali. In questa guida creeremo il nostro componente “Todo-List”, che consente agli utenti di creare elenchi di attività e inviare dati al server quando cambia lo stato delle attività.
Elementi di base del blocco
Il blocco che creeremo sarà composto da diversi elementi chiave:
- RichText: un componente che consente agli utenti di inserire e modificare testo all’interno del blocco.
- InspectorControls: un pannello che fornisce impostazioni e controlli per il blocco nell’editor.
- CheckboxControl: un elemento di controllo utilizzato per contrassegnare le attività come completate.
- useState: un hook che gestisce lo stato delle attività all’interno del blocco.
- fetch API: utilizzata per inviare i dati delle attività al server.
Ogni blocco viene creato come plugin separato, che può essere riutilizzato in altri progetti WordPress. Ciò consente di integrare facilmente il blocco creato in qualsiasi altro sito basato su WordPress.
Configurazione dell’ambiente di sviluppo
Prima di iniziare a creare il componente, è importante assicurarsi che l’ambiente di sviluppo sia configurato correttamente. Per sviluppare il blocco saranno necessari i seguenti strumenti:
- WordPress: assicurati che la tua versione di WordPress sia la 5.0 o superiore, poiché l’editor a blocchi è stato introdotto in questa versione.
- Node.js e npm: necessari per lavorare con JavaScript e gestire le dipendenze.
- WP-CLI (facoltativo): uno strumento da riga di comando per lavorare con WordPress, che può semplificare lo sviluppo.
Installazione di Node.js e npm
Se Node.js e npm non sono ancora installati sul tuo computer, scaricali e installali dal sito web ufficiale di Node.js.
Dopo l’installazione, esegui i seguenti comandi per assicurarti che tutto sia installato correttamente:
node -v
npm -vSe i comandi restituiscono le versioni, tutto funziona correttamente.
Creazione del blocco Todo-List
Per accelerare il processo di creazione del blocco, puoi utilizzare un comando che genererà automaticamente l’intera struttura del progetto, comprese configurazioni e file.
Passaggio 1: creazione del blocco tramite comando
Apri il terminale ed esegui il seguente comando per creare automaticamente il blocco “Todo-List”:
npx @wordpress/create-block@latest todo-listQuesto comando eseguirà per te i seguenti passaggi:
- Inizializzazione del progetto: il comando creerà una nuova directory denominata todo-list, contenente tutti i file e la struttura necessari per il blocco.
- Installazione delle dipendenze: tutti i pacchetti necessari, come @wordpress/scripts, verranno installati automaticamente.
- Creazione della struttura dei file: la struttura includerà le cartelle src e build, nonché un file index.js con il codice di base del blocco.
- Configurazione di block.json: questo file verrà creato con la configurazione di base che definisce il blocco “Todo-List”.
Struttura dei file e descrizione
Dopo aver eseguito il comando, verrà creata la seguente struttura del progetto:
todo-list/
│
├── src/
│ └── index.js
│
├── build/
│
├── block.json
├── package.json
└── README.md1. src/index.js
Il file index.js nella cartella src contiene tutto il codice sorgente del blocco. Qui viene implementata la logica del blocco, inclusi il suo aspetto e l’interazione con l’utente. Le parti principali del codice riguardano la registrazione del blocco tramite la funzione registerBlockType, la configurazione degli attributi e la definizione delle funzioni per modificare e salvare il blocco.
Contenuto di esempio di 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
La cartella build è destinata a contenere i file compilati. Dopo aver compilato il progetto con il comando npm run build, il file index.js pronto all’uso verrà inserito in questa cartella e sarà utilizzato da WordPress per visualizzare e far funzionare il blocco.
3. block.json
Il file block.json contiene i metadati del blocco. Definisce il nome, la categoria, l’icona, gli script e gli stili necessari al suo funzionamento. Questo file è essenziale per registrare il blocco in WordPress.
Contenuto di esempio di 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
Il file package.json contiene informazioni sul progetto e sulle relative dipendenze. Gestisce l’installazione e l’utilizzo dei pacchetti necessari per sviluppare e compilare il blocco. Questo file viene creato automaticamente durante l’inizializzazione del progetto e viene aggiornato man mano che vengono aggiunte nuove dipendenze.
Contenuto di esempio di 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
Il file README.md contiene una descrizione del progetto, istruzioni per l’installazione e l’utilizzo e altre informazioni importanti che potrebbero essere necessarie a sviluppatori o utenti. Questo file è utile per documentare il progetto.
Compilazione del progetto
Dopo aver apportato modifiche al codice, compila il progetto per ottenere un file pronto all’uso per WordPress:
npm run build
Il comando build compilerà il codice e lo inserirà nella cartella build.
Registrazione del blocco in WordPress
Ora che il blocco è pronto, deve essere registrato in WordPress. Per farlo, aggiungi il seguente codice al file del tuo plugin o tema:
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' );Questo codice registrerà il blocco in WordPress e accoderà il file JavaScript compilato.
Conclusione
L’utilizzo del comando npx @wordpress/create-block@latest accelera significativamente il processo di creazione di un nuovo blocco per l’editor a blocchi di WordPress. In questa guida abbiamo visto come creare un blocco “Todo-List” che consente agli utenti di creare elenchi di attività e gestirne il completamento, con i dati inviati al server. Questo componente può essere ampliato aggiungendo nuove funzionalità e migliorando l’interazione con l’utente, aprendo ampie possibilità di personalizzazione del tuo sito WordPress.