Trabajar con Gutenberg y React en WordPress

Con la llegada del editor Gutenberg, WordPress ha transformado la manera en que creamos y editamos contenido, llevando la experiencia de edición a un nuevo nivel basado en bloques. Si eres desarrollador y quieres crear bloques personalizados utilizando Gutenberg y React, estás en el lugar adecuado. En este artículo, vamos a trabajar con el editor de bloques de WordPress y aprovecharemos React para crear bloques dinámicos y flexibles.

Gutenberg: Introducción Rápida

Gutenberg es el editor por defecto de WordPress desde la versión 5.0, y su principal filosofía es la de proporcionar una experiencia de edición mediante bloques reutilizables y personalizados. Cada párrafo, imagen, lista, cita, etc., es un bloque que puede ser editado, arrastrado y configurado fácilmente.

Para desarrollar bloques personalizados, Gutenberg utiliza JavaScript moderno, incluyendo la librería React. React se usa para manejar la interfaz de usuario de los bloques, lo que permite a los desarrolladores construir componentes reutilizables y mejorar la interactividad.

Configurando tu Entorno de Desarrollo

Para comenzar a trabajar con Gutenberg y React en WordPress, necesitas configurar un entorno de desarrollo adecuado. A continuación se detallan algunos pasos clave:

1. Instalar Node.js y npm: Gutenberg utiliza herramientas de construcción como Webpack y Babel, por lo que necesitarás Node.js y npm para instalar y gestionar las dependencias.
2. Configurar WordPress: Puedes instalar WordPress de manera local usando una herramienta como XAMPP, MAMP o Local by Flywheel. Asegúrate de tener acceso al archivo wp-content/plugins, donde crearás tu plugin para bloques personalizados.
3. Crear un Plugin para el Bloque: Los bloques personalizados se crean como plugins. En el directorio de plugins, crea una nueva carpeta, por ejemplo, mi-primer-bloque, y dentro de ella, un archivo PHP para definir tu plugin:

<?php
/**
 * Plugin Name: Mi Primer Bloque
 * Description: Un bloque Gutenberg personalizado.
 * Version: 1.0
 * Author: Tu Nombre
 */

function registrar_bloque_personalizado() {
    // Registrar el script del bloque
    wp_register_script(
        'mi-bloque-editor-script',
        plugins_url('build/index.js', __FILE__),
        array('wp-blocks', 'wp-element', 'wp-editor'),
        filemtime(plugin_dir_path(__FILE__) . 'build/index.js')
    );

    // Registrar el bloque
    register_block_type('mi-plugin/mi-primer-bloque', array(
        'editor_script' => 'mi-bloque-editor-script'
    ));
}
add_action('init', 'registrar_bloque_personalizado');
?>

Este código PHP registra un nuevo script que contiene el código JavaScript de nuestro bloque y luego lo asocia a un nuevo tipo de bloque.

Creando el Bloque con React

Ahora que tienes un plugin básico configurado, necesitas escribir el código JavaScript para el bloque. Crea un archivo index.js dentro de una carpeta src y escribe el siguiente código para definir el bloque utilizando React y las APIs de WordPress:

import { registerBlockType } from '@wordpress/blocks';
import { RichText } from '@wordpress/block-editor';
import { useState } from 'react';

registerBlockType('mi-plugin/mi-primer-bloque', {
    title: 'Mi Primer Bloque',
    icon: 'smiley',
    category: 'common',
    attributes: {
        content: {
            type: 'string',
            source: 'html',
            selector: 'p',
        },
    },
    edit: ({ attributes, setAttributes }) => {
        const { content } = attributes;
        return (
            <RichText
                tagName="p"
                value={content}
                onChange={(newContent) => setAttributes({ content: newContent })}
                placeholder="Escribe tu texto aquí..."
            />
        );
    },
    save: ({ attributes }) => {
        const { content } = attributes;
        return <RichText.Content tagName="p" value={content} />;
    },});

En este ejemplo, estamos utilizando la función registerBlockType para registrar un nuevo bloque llamado mi-plugin/mi-primer-bloque. Este bloque tiene un atributo content que almacena el contenido de tipo texto enriquecido. La función edit permite a los usuarios editar el contenido desde el editor, mientras que save define la forma en que el bloque se guardará.

Construir el Bloque

Para compilar el código JavaScript del bloque, necesitarás herramientas como Babel y Webpack. Puedes crear un archivo webpack.config.js para configurar el proceso de construcción:

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'index.js',
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env', '@babel/preset-react'],
                    },
                },
            },
        ],
    },
    externals: {
        react: 'React',
        'react-dom': 'ReactDOM',
    },};

Luego, ejecuta el comando npx webpack para compilar el archivo index.js en la carpeta build. Ahora el bloque está listo para ser usado en WordPress.

Conclusión

Trabajar con Gutenberg y React en WordPress es una excelente manera de crear experiencias de usuario interactivas y modernas en el editor de bloques. Aunque la configuración inicial puede ser un poco compleja, una vez que está todo listo, la creación de bloques personalizados se vuelve muy intuitiva y poderosa gracias a la flexibilidad de React y las APIs de WordPress.

¡Anímate a probar y añadir tus propios bloques personalizados para hacer que tu sitio de WordPress sea único y se ajuste a tus necesidades o las de tus clientes!