Con esta serie de materiales prácticos, quiero mostrarte hasta dónde ha llegado el desarrollo con WordPress. En 2024, un desarrollador de WordPress es principalmente un desarrollador frontend que debe tener un sólido conocimiento de HTML/CSS, React, las particularidades de WordPress, así como de PHP para escribir de forma independiente el backend de los bloques que crea. Admítelo, pensabas que solo consistía en hacer clic en botones en Elementor, ¿verdad? 🙂
El editor de bloques de WordPress (Gutenberg) ha transformado significativamente el proceso de creación y edición de contenido en sitios de WordPress, proporcionando a los desarrolladores potentes herramientas para crear bloques personalizables y funcionales. En esta guía, crearemos nuestro propio componente de «lista de tareas» que permite a los usuarios crear listas de tareas y enviar datos al servidor cuando cambia el estado de las tareas.
Elementos básicos del bloque
El bloque que crearemos constará de varios elementos clave:
- RichText: Un componente que permite a los usuarios introducir y editar texto dentro del bloque.
- InspectorControls: Un panel que proporciona ajustes y controles para el bloque en el editor.
- CheckboxControl: Un elemento de control utilizado para marcar tareas como completadas.
- useState: Un hook que gestiona el estado de las tareas dentro del bloque.
- fetch API: Se utiliza para enviar datos de las tareas al servidor.
Cada bloque se crea como un plugin independiente, que puede reutilizarse en otros proyectos de WordPress. Esto permite integrar fácilmente el bloque creado en cualquier otro sitio que funcione con WordPress.
Configuración del entorno de desarrollo
Antes de empezar a crear el componente, es importante asegurarse de que el entorno de desarrollo esté correctamente configurado. Necesitarás las siguientes herramientas para desarrollar el bloque:
- WordPress: Asegúrate de que tu versión de WordPress sea 5.0 o superior, ya que el editor de bloques se introdujo en esta versión.
- Node.js y npm: Necesarios para trabajar con JavaScript y gestionar dependencias.
- WP-CLI (opcional): Una herramienta de línea de comandos para trabajar con WordPress que puede simplificar el desarrollo.
Instalación de Node.js y npm
Si Node.js y npm aún no están instalados en tu ordenador, descárgalos e instálalos desde el sitio web oficial de Node.js.
Después de la instalación, ejecuta los siguientes comandos para comprobar que todo esté instalado correctamente:
node -v
npm -vSi los comandos devuelven versiones, todo funciona correctamente.
Creación del bloque de lista de tareas
Para acelerar el proceso de creación del bloque, puedes utilizar un comando que generará automáticamente toda la estructura del proyecto, incluidas las configuraciones y los archivos.
Paso 1: Creación del bloque mediante un comando
Abre tu terminal y ejecuta el siguiente comando para crear automáticamente el bloque de «lista de tareas»:
npx @wordpress/create-block@latest todo-listEste comando realizará los siguientes pasos por ti:
- Inicialización del proyecto: El comando creará un nuevo directorio llamado todo-list, que contendrá todos los archivos y la estructura necesarios para el bloque.
- Instalación de dependencias: Todos los paquetes necesarios, como @wordpress/scripts, se instalarán automáticamente.
- Creación de la estructura de archivos: La estructura incluirá las carpetas src y build, así como un archivo index.js con el código básico del bloque.
- Configuración de block.json: Este archivo se creará con la configuración básica que define el bloque de «lista de tareas».
Estructura y descripción de los archivos
Después de ejecutar el comando, se creará la siguiente estructura de proyecto:
todo-list/
│
├── src/
│ └── index.js
│
├── build/
│
├── block.json
├── package.json
└── README.md1. src/index.js
El archivo index.js de la carpeta src contiene todo el código fuente de tu bloque. Aquí se implementa la lógica del bloque, incluido su aspecto y su interacción con el usuario. Las partes principales del código incluyen el registro del bloque mediante la función registerBlockType, la configuración de atributos y la definición de las funciones para editar y guardar el bloque.
Contenido de ejemplo 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
La carpeta build está destinada a almacenar archivos compilados. Después de compilar el proyecto mediante el comando npm run build, el archivo index.js listo para usar se colocará en esta carpeta, y WordPress lo utilizará para mostrar y operar el bloque.
3. block.json
El archivo block.json contiene los metadatos de tu bloque. Define el nombre, la categoría, el icono, los scripts y los estilos necesarios para su funcionamiento. Este archivo es esencial para registrar el bloque en WordPress.
Contenido de ejemplo 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
El archivo package.json contiene información sobre el proyecto y sus dependencias. Gestiona la instalación y el uso de los paquetes necesarios para desarrollar y compilar el bloque. Este archivo se crea automáticamente durante la inicialización del proyecto y se actualiza a medida que se añaden nuevas dependencias.
Contenido de ejemplo 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
El archivo README.md contiene una descripción del proyecto, instrucciones de instalación y uso, y otra información importante que puedan necesitar los desarrolladores o los usuarios. Este archivo es útil para documentar el proyecto.
Compilación del proyecto
Después de realizar cambios en el código, compila el proyecto para obtener un archivo listo para usar en WordPress:
npm run build
El comando build compilará tu código y lo colocará en la carpeta build.
Registro del bloque en WordPress
Ahora que el bloque está listo, debe registrarse en WordPress. Para ello, añade el siguiente código a tu archivo de 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' );Este código registrará tu bloque en WordPress y pondrá en cola el archivo JavaScript compilado.
Conclusión
El uso del comando npx @wordpress/create-block@latest acelera significativamente el proceso de creación de un nuevo bloque para el editor de bloques de WordPress. En esta guía, hemos visto cómo crear un bloque de «lista de tareas» que permite a los usuarios crear listas de tareas y gestionar su finalización, enviando los datos al servidor. Este componente puede ampliarse añadiendo nuevas funciones y mejorando la interacción del usuario, lo que abre amplias posibilidades para personalizar tu sitio de WordPress.