Cómo Desarrollar un Bloque Personalizado de Gutenberg para WordPress

Introducción

El editor de Gutenberg ha revolucionado la experiencia de creación de contenido en WordPress al introducir la edición basada en bloques. Como desarrollador de WordPress, puedes aprovechar el poder de los bloques personalizados de Gutenberg para ofrecer soluciones de contenido a medida para tus clientes o proyectos. En esta guía, te llevaremos a través del proceso de desarrollo de un bloque personalizado de Gutenberg desde cero.

Paso 1: Configura tu Entorno de Desarrollo

Antes de comenzar, asegúrate de que tu entorno local esté listo para el desarrollo de bloques:

• Instalación de WordPress: Configura una instancia local de WordPress.
• Node.js y npm: Asegúrate de tener Node.js y npm instalados para gestionar paquetes de JavaScript.
• Crea un plugin: Si estás construyendo un bloque para un plugin específico, comienza creando un nuevo plugin. De lo contrario, puedes agregar el código del bloque al archivo functions.php de tu tema o a un archivo de bloque personalizado.

Crea la carpeta de tu plugin en wp-content/plugins/, por ejemplo, my-custom-block, y crea dos archivos dentro de ella:

my-custom-block/
  my-custom-block.php
  block.js

Paso 2: Registra el Bloque

En tu archivo de plugin my-custom-block.php, registrarás el bloque en WordPress. Usa el siguiente código para crear una estructura básica:

<?php
/*
Plugin Name: My Custom Block
Description: Un bloque personalizado simple de Gutenberg
Version: 1.0
Author: Tu Nombre
*/

function register_my_custom_block() {
    wp_register_script(
        'my-custom-block-script',
        plugins_url( 'block.js', __FILE__ ),
        array( 'wp-blocks', 'wp-editor', 'wp-element' )
    );

    register_block_type( 'myplugin/my-custom-block', array(
        'editor_script' => 'my-custom-block-script',
    ));
}

add_action( 'init', 'register_my_custom_block' );

Paso 3: Escribe el Script del Bloque

En block.js, escribirás el JavaScript del bloque utilizando React (JSX). Esto definirá cómo se ve y se comporta el bloque en el editor.

const { registerBlockType } = wp.blocks;
const { RichText } = wp.blockEditor;

registerBlockType('myplugin/my-custom-block', {
    title: 'Bloque Personalizado',
    icon: 'smiley',
    category: 'common',
    attributes: {
        content: {
            type: 'string',
            source: 'html',
            selector: 'p',
        },
    },
    edit({ attributes, setAttributes }) {
        return (
            <RichText
                tagName="p"
                value={attributes.content}
                onChange={(content) => setAttributes({ content })}
                placeholder="Escribe algo..."
            />
        );
    },
    save({ attributes }) {
        return <RichText.Content tagName="p" value={attributes.content} />;
    },
});

Paso 4: Enqueue los Recursos del Bloque

Asegúrate de que WordPress encole los recursos de tu bloque registrando el tipo de bloque y asociándolo con el script de block.js. El script del editor maneja cómo se comporta el bloque dentro del editor de Gutenberg, y la estructura de contenido guardado asegura una correcta visualización en el frontend.

Paso 5: Prueba y Personaliza

Ahora que el bloque está registrado, activa el plugin, ve al editor de Gutenberg y busca tu bloque personalizado por nombre. Pruébalo agregando contenido. Puedes extender el bloque añadiendo estilos, funcionalidad adicional u otras configuraciones del bloque.

Conclusión

Desarrollar bloques personalizados de Gutenberg te da control total sobre la experiencia de edición en WordPress. Ya sea para proyectos personales o trabajo para clientes, la flexibilidad que ofrecen los bloques personalizados permite un flujo de trabajo de creación de contenido altamente personalizado y dinámico.