Creación de Bloques Personalizados en Gutenberg: Potencia tu Editor de WordPress 🚀

Introducción a los Bloques Personalizados en Gutenberg ✨

El editor de bloques de WordPress, conocido como Gutenberg, ha revolucionado la forma en que creamos y editamos contenido. Si bien los bloques predeterminados son muy potentes, a menudo necesitamos funcionalidades más específicas o diseños únicos que no están cubiertos. Aquí es donde entran los bloques personalizados.

Crear tus propios bloques te permite ir más allá de las limitaciones y adaptar el editor exactamente a tus necesidades, ofreciendo una experiencia de edición más intuitiva y controlada para ti o tus clientes. En este tutorial, te embarcarás en el viaje de desarrollar bloques personalizados, desde los conceptos básicos hasta la implementación de interacciones complejas.

¿Por qué crear bloques personalizados?

La principal razón es la flexibilidad. Con bloques personalizados, puedes:

• Simplificar la edición: Ofrece a los usuarios finales una interfaz clara y específica para su contenido, evitando que tengan que lidiar con shortcodes complejos o HTML manual.
• Mantener la coherencia de diseño: Asegura que el contenido se adhiera a la guía de estilo de tu marca o proyecto, limitando las opciones de estilo solo a las necesarias.
• Mejorar la experiencia del usuario: Crea componentes reutilizables que se integren perfectamente en el flujo de trabajo de Gutenberg.
• Integrar funcionalidades avanzadas: Conecta tu bloque a APIs externas, bases de datos personalizadas o lógicas de negocio complejas.

Requisitos Previos y Configuración del Entorno 🛠️

Antes de sumergirnos en el código, asegúrate de tener las siguientes herramientas instaladas en tu sistema:

• WordPress: Una instalación local de WordPress (LocalWP, MAMP, XAMPP, Docker) es ideal para desarrollo.
• Node.js y npm: Necesitarás Node.js (versión LTS recomendada) y npm (que viene con Node.js) para gestionar dependencias y compilar tu código JavaScript.
  • Puedes verificar la instalación con: node -v y npm -v
• Editor de Código: Un editor como VS Code es altamente recomendado por sus extensiones para React y JavaScript.

1. Instalación de wp-scripts

WordPress proporciona un paquete oficial llamado wp-scripts que simplifica enormemente la configuración de Webpack y Babel, encargándose de la compilación de tu JavaScript y JSX. Es la forma recomendada de desarrollar bloques.

Crear una carpeta para tu plugin de bloques:

Dirígete a la carpeta wp-content/plugins de tu instalación de WordPress y crea una nueva carpeta para tu plugin de bloques personalizado. Por ejemplo, my-custom-blocks.

cd wp-content/plugins
mkdir my-custom-blocks
cd my-custom-blocks

Inicializar el proyecto npm:

npm init -y

Esto creará un archivo package.json en tu carpeta.

Instalar wp-scripts:

npm install @wordpress/scripts --save-dev

Ahora, abre tu archivo package.json y añade los siguientes scripts en la sección scripts:

{
  "name": "my-custom-blocks",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "wp-scripts build",
    "start": "wp-scripts start"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@wordpress/scripts": "^26.0.0"
  }
}

• npm run build: Compila tus archivos JavaScript y CSS para producción (minificados).
• npm run start: Compila tus archivos y los observa para recargas en desarrollo, con un mapa de origen (source map).

2. Estructura del plugin de bloques

Para un bloque simple, la estructura básica dentro de tu carpeta my-custom-blocks podría ser la siguiente:

my-custom-blocks/
├── my-custom-blocks.php
├── src/
│   └── block.js
├── build/
│   ├── block.js
│   └── block.asset.php
└── package.json

• my-custom-blocks.php: El archivo principal del plugin de WordPress, donde se registra el bloque.
• src/block.js: El archivo fuente de tu bloque, donde escribirás el código React.
• build/: Carpeta generada automáticamente por wp-scripts con los archivos compilados.

El Archivo Principal del Plugin (my-custom-blocks.php) 📄

Este archivo es el corazón de tu plugin. Aquí es donde registras tu bloque con WordPress. Crea my-custom-blocks.php en la raíz de tu carpeta de plugin:

<?php
/**
 * Plugin Name: My Custom Blocks
 * Description: Un plugin para bloques personalizados de Gutenberg.
 * Version: 1.0.0
 * Author: Tu Nombre
 * License: GPL2
 * Text Domain: my-custom-blocks
 */

// Si se accede directamente, sal de aquí
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

/**
 * Registra los scripts para nuestros bloques personalizados.
 */
function my_custom_blocks_register_block() {
    // Obtener la información del archivo asset.php generado por wp-scripts
    $asset_file = include( plugin_dir_path( __FILE__ ) . 'build/block.asset.php');

    // Registrar el script del editor
    wp_register_script(
        'my-custom-blocks-editor-script',
        plugin_dir_url( __FILE__ ) . 'build/block.js',
        $asset_file['dependencies'],
        $asset_file['version']
    );

    // Registrar el bloque
    register_block_type( 'my-custom-blocks/my-first-block', array(
        'editor_script' => 'my-custom-blocks-editor-script',
        // 'render_callback' => 'my_custom_blocks_render_callback', // Para bloques dinámicos
        // 'attributes' => array(), // Para atributos personalizados
    ) );
}
add_action( 'init', 'my_custom_blocks_register_block' );

// Para bloques dinámicos (opcional)
// function my_custom_blocks_render_callback( $attributes, $content ) {
//     ob_start();
//     ?>
<!-- //     <div class="my-first-block-frontend"> -->
<!-- //         <h2><?php echo esc_html( $attributes['title'] ); ?></h2> -->
<!-- //         <p><?php echo esc_html( $attributes['description'] ); ?></p> -->
<!-- //         <?php echo $content; ?> -->
<!-- //     </div> -->
<?php
//     return ob_get_clean();
// }

Creando tu Primer Bloque Estático (src/block.js) ✍️

Los bloques de Gutenberg tienen dos partes principales: la función edit (lo que ves en el editor) y la función save (lo que se guarda en la base de datos). Un bloque estático guarda directamente el HTML generado por la función save en la base de datos.

Crea el archivo src/block.js y añade el siguiente código:

/**
 * WordPress dependencies
 */
import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n'; // Para internacionalización

/**
 * Registra el bloque.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
 */
registerBlockType( 'my-custom-blocks/my-first-block', {
	/**
	 * Título del bloque.
	 * @type {string}
	 */
	title: __( 'Mi Primer Bloque Personalizado', 'my-custom-blocks' ),

	/**
	 * Descripción del bloque.
	 * @type {string}
	 */
	description: __( 'Un bloque simple para mostrar un mensaje de bienvenida.', 'my-custom-blocks' ),

	/**
	 * Icono del bloque. Puede ser un dashicon o un elemento SVG.
	 * @type {string}
	 */
	icon: 'star-filled',

	/**
	 * Categoría del bloque (common, formatting, layout, widgets, embed).
	 * @type {string}
	 */
	category: 'common',

	/**
	 * Atributos del bloque (para datos dinámicos).
	 * No usaremos atributos en este primer bloque estático, pero los incluimos para referencia.
	 */
	attributes: {
		content: {
			type: 'string',
			source: 'html',
			selector: 'p',
		},
	},

	/**
	 * La función edit se ejecuta en el editor.
	 * Aquí es donde defines la interfaz de edición de tu bloque.
	 */
	edit: ( { attributes, setAttributes } ) => {
		const blockProps = useBlockProps(); // Proporciona las clases y atributos esenciales para el bloque
		return (
			<div { ...blockProps }>
				<p>¡Hola desde mi primer bloque personalizado en el editor!</p>
			</div>
		);
	},

	/**
	 * La función save se ejecuta para guardar el contenido en la base de datos.
	 * El HTML devuelto aquí es lo que se mostrará en el frontend.
	 */
	save: ( { attributes } ) => {
		const blockProps = useBlockProps.save(); // Similar a useBlockProps, pero para la función save
		return (
			<div { ...blockProps }>
				<p>¡Hola desde mi primer bloque personalizado en el frontend!</p>
			</div>
		);
	},
} );

Ejecutar el compilador:

En tu terminal, dentro de la carpeta my-custom-blocks, ejecuta el script start para compilar tu código en modo desarrollo:

npm run start

Esto creará la carpeta build con los archivos block.js y block.asset.php. Mantén este proceso ejecutándose mientras desarrollas.

Activación y Prueba del Bloque

1. Activa el plugin: Ve a Plugins > Plugins instalados en tu panel de WordPress y activa My Custom Blocks.
2. Crea una nueva entrada/página: Abre el editor de Gutenberg.
3. Busca tu bloque: Haz clic en el icono + para añadir un bloque y busca "Mi Primer Bloque Personalizado".
4. Inserta el bloque: Insértalo y verás el mensaje "¡Hola desde mi primer bloque personalizado en el editor!".
5. Guarda y verifica el frontend: Guarda la entrada y visita la página para ver "¡Hola desde mi primer bloque personalizado en el frontend!".

Bloques Interactivos con Atributos y Controles 🎨

Para hacer tus bloques útiles, necesitarás permitir que los usuarios los configuren. Esto se logra mediante atributos y controles de la interfaz de usuario en el panel de ajustes del bloque.

1. Definir Atributos

Los atributos son las piezas de datos que tu bloque almacena. Se definen en el objeto de registro del bloque.

Vamos a crear un bloque de "Caja de Alerta" donde el usuario pueda definir el mensaje y el tipo de alerta (éxito, advertencia, información).

Modifica src/block.js para incluir atributos:

/**
 * WordPress dependencies
 */
import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps, RichText, InspectorControls } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
import { PanelBody, SelectControl, TextControl } from '@wordpress/components'; // Componentes UI

registerBlockType( 'my-custom-blocks/alert-box', {
	title: __( 'Caja de Alerta', 'my-custom-blocks' ),
	description: __( 'Muestra un mensaje de alerta personalizable.', 'my-custom-blocks' ),
	icon: 'warning',
	category: 'common',
	attributes: {
		message: {
			type: 'string',
			source: 'html',
			selector: '.alert-message',
			default: __( 'Este es un mensaje de alerta.', 'my-custom-blocks' ),
		},
		alertType: {
			type: 'string',
			default: 'info',
		},
	},
	edit: ( { attributes, setAttributes } ) => {
		const blockProps = useBlockProps( {
			className: `alert-box alert-${ attributes.alertType }`,
		} );

		const onChangeMessage = ( newMessage ) => {
			setAttributes( { message: newMessage } );
		};

		const onChangeAlertType = ( newType ) => {
			setAttributes( { alertType: newType } );
		};

		return (
			<>
				<InspectorControls>
					<PanelBody title={ __( 'Ajustes de Alerta', 'my-custom-blocks' ) }>
						<SelectControl
							label={ __( 'Tipo de Alerta', 'my-custom-blocks' ) }
							value={ attributes.alertType }
							onChange={ onChangeAlertType }
							opciones={ [
								{ label: __( 'Información', 'my-custom-blocks' ), value: 'info' },
								{ label: __( 'Éxito', 'my-custom-blocks' ), value: 'success' },
								{ label: __( 'Advertencia', 'my-custom-blocks' ), value: 'warning' },
								{ label: __( 'Error', 'my-custom-blocks' ), value: 'error' },
							] }
						/>
					</PanelBody>
				</InspectorControls>
				<div { ...blockProps }>
					<RichText
						tagName="p"
						className="alert-message"
						value={ attributes.message }
						onChange={ onChangeMessage }
						placeholder={ __( 'Escribe tu mensaje de alerta...', 'my-custom-blocks' ) }
					/>
				</div>
			</>
		);
	},
	save: ( { attributes } ) => {
		const blockProps = useBlockProps.save( {
			className: `alert-box alert-${ attributes.alertType }`,
		} );
		return (
			<div { ...blockProps }>
				<p className="alert-message">{ attributes.message }</p>
			</div>
		);
	},
} );

2. Componentes Esenciales de Gutenberg UI

• <RichText />: Permite al usuario editar texto enriquecido directamente en el área de contenido del bloque. Similar a un editor WYSIWYG.
• <InspectorControls />: Un contenedor para los controles que aparecerán en la barra lateral de ajustes del bloque (el "Inspector").
• <PanelBody />: Un componente para agrupar controles dentro de InspectorControls.
• <SelectControl />: Un menú desplegable para elegir entre opciones predefinidas.
• <TextControl />: Un campo de entrada de texto simple.

3. Añadir Estilos para el Frontend y el Editor

Para que tu caja de alerta se vea bien, necesitarás algo de CSS. Puedes crear archivos CSS separados para el editor y el frontend.

Modifica my-custom-blocks.php para cargar los estilos:

<?php
// ... (código anterior)

/**
 * Registra los scripts y estilos para nuestros bloques personalizados.
 */
function my_custom_blocks_register_block() {
    $asset_file = include( plugin_dir_path( __FILE__ ) . 'build/block.asset.php');

    // Registrar el script del editor
    wp_register_script(
        'my-custom-blocks-editor-script',
        plugin_dir_url( __FILE__ ) . 'build/block.js',
        $asset_file['dependencies'],
        $asset_file['version']
    );

    // Registrar estilos del editor (solo se cargan en el backend)
    wp_register_style(
        'my-custom-blocks-editor-styles',
        plugin_dir_url( __FILE__ ) . 'build/editor.css',
        array( 'wp-edit-blocks' ), // Dependencia de Gutenberg
        $asset_file['version']
    );

    // Registrar estilos del frontend (se cargan en el frontend y en el editor para previsualización)
    wp_register_style(
        'my-custom-blocks-frontend-styles',
        plugin_dir_url( __FILE__ ) . 'build/style.css',
        array(), // Sin dependencias específicas
        $asset_file['version']
    );

    // Registrar el bloque
    register_block_type( 'my-custom-blocks/alert-box', array(
        'editor_script' => 'my-custom-blocks-editor-script',
        'editor_style'  => 'my-custom-blocks-editor-styles',
        'style'         => 'my-custom-blocks-frontend-styles',
        // 'render_callback' => 'my_custom_blocks_render_callback',
    ) );
}
add_action( 'init', 'my_custom_blocks_register_block' );

Crear archivos CSS en src/:

1. Crea src/style.scss (para frontend y editor): Este archivo se compilará a build/style.css.

.wp-block-my-custom-blocks-alert-box {
padding: 15px;
border-left: 5px solid;
margin-bottom: 20px;

&.alert-info {
background-color: #e7f3fe;
border-color: #2196F3;
color: #2196F3;
}
&.alert-success {
background-color: #e9f7ef;
border-color: #4CAF50;
color: #4CAF50;
}
&.alert-warning {
background-color: #fff3e0;
border-color: #FF9800;
color: #FF9800;
}
&.alert-error {
background-color: #fce7e7;
border-color: #f44336;
color: #f44336;
}

.alert-message {
margin: 0;
font-weight: bold;
}
}

2. Crea src/editor.scss (solo para editor, si necesitas estilos específicos del backend): Este archivo se compilará a build/editor.css.

.wp-block-my-custom-blocks-alert-box {
/* Estilos específicos del editor, si es necesario */
border: 1px dashed #ccc;
}

Modifica src/block.js para importar los estilos:

// ... (código existente)

// Importar los estilos
import './style.scss'; // Para el frontend y la previsualización en el editor
import './editor.scss'; // Para estilos específicos del editor

// ... (resto del código registerBlockType)

Ahora, cuando ejecutes npm run start, wp-scripts detectará estos archivos .scss y los compilará a CSS, y los importará a tu block.js (aunque los importes en block.js, WordPress los cargará de forma inteligente a través de wp_enqueue_style usando los archivos build/*.asset.php).

Bloques Dinámicos: Cuando PHP Necesita Controlar el Renderizado 🔄

Un bloque dinámico no guarda su HTML directamente en post_content. En su lugar, guarda los atributos en la base de datos, y el HTML se genera en tiempo real en el frontend mediante una función PHP cada vez que se carga la página.

Esto es ideal para contenido que necesita ser actualizado con frecuencia, que depende de datos externos, o que requiere lógica compleja de PHP para su visualización (por ejemplo, mostrar los últimos 5 posts de una categoría específica).

1. Modificar register_block_type

Descomenta o añade la línea render_callback en tu archivo my-custom-blocks.php:

<?php
// ... (código anterior)

/**
 * Registra los scripts y estilos para nuestros bloques personalizados.
 */
function my_custom_blocks_register_block() {
    $asset_file = include( plugin_dir_path( __FILE__ ) . 'build/block.asset.php');

    // Registrar el script del editor
    wp_register_script(
        'my-custom-blocks-editor-script',
        plugin_dir_url( __FILE__ ) . 'build/block.js',
        $asset_file['dependencies'],
        $asset_file['version']
    );

    // Registrar estilos del editor
    wp_register_style(
        'my-custom-blocks-editor-styles',
        plugin_dir_url( __FILE__ ) . 'build/editor.css',
        array( 'wp-edit-blocks' ),
        $asset_file['version']
    );

    // Registrar estilos del frontend
    wp_register_style(
        'my-custom-blocks-frontend-styles',
        plugin_dir_url( __FILE__ ) . 'build/style.css',
        array(),
        $asset_file['version']
    );

    // Registrar el bloque
    register_block_type( 'my-custom-blocks/latest-posts', array(
        'editor_script' => 'my-custom-blocks-editor-script',
        'editor_style'  => 'my-custom-blocks-editor-styles',
        'style'         => 'my-custom-blocks-frontend-styles',
        'render_callback' => 'my_custom_blocks_render_latest_posts_block', // <-- ¡Esto lo hace dinámico!
    ) );
}
add_action( 'init', 'my_custom_blocks_register_block' );

/**
 * Función de renderizado para el bloque de "Últimas Entradas".
 *
 * @param array    $attributes Atributos del bloque.
 * @param string   $content    Contenido del bloque (si lo hubiera).
 * @param WP_Block $block      Objeto WP_Block.
 * @return string HTML renderizado del bloque.
 */
function my_custom_blocks_render_latest_posts_block( $attributes, $content, $block ) {
    $args = array(
        'posts_per_page' => isset( $attributes['postsToShow'] ) ? $attributes['postsToShow'] : 3,
        'category__in'   => isset( $attributes['selectedCategory'] ) && $attributes['selectedCategory'] !== 'all' ? array( $attributes['selectedCategory'] ) : array(),
    );

    $query = new WP_Query( $args );

    ob_start(); // Inicia el buffer de salida
    ?>
    <div class="wp-block-my-custom-blocks-latest-posts">
        <h3>Últimas Entradas</h3>
        <?php if ( $query->have_posts() ) : ?>
            <ul>
                <?php while ( $query->have_posts() ) : $query->the_post(); ?>
                    <li>
                        <a href="<?php the_permalink(); ?>">
                            <?php the_title(); ?>
                        </a>
                    </li>
                <?php endwhile; ?>
            </ul>
        <?php else : ?>
            <p><?php esc_html_e( 'No hay entradas para mostrar.', 'my-custom-blocks' ); ?></p>
        <?php endif; ?>
    </div>
    <?php
    wp_reset_postdata(); // Restaura los datos del post global
    return ob_get_clean(); // Devuelve el contenido del buffer
}

2. Modificar src/block.js para Bloque Dinámico

Para un bloque dinámico, la función save debe devolver null o un elemento vacío para indicar que el contenido no se guarda en el post_content.

También necesitaremos una forma de mostrar una vista previa en el editor. A menudo, esto implica hacer una llamada AJAX para obtener los datos o simplemente mostrar un placeholder representativo.

Vamos a crear un nuevo bloque latest-posts en src/block.js:

/**
 * WordPress dependencies
 */
import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
import { PanelBody, RangeControl, SelectControl, Spinner } from '@wordpress/components';
import { useSelect } from '@wordpress/data'; // Para obtener datos de WordPress
import { Fragment } from '@wordpress/element'; // Para agrupar elementos sin un wrapper DOM

// Importar estilos (asumiendo que los anteriores ya los importan)
// import './style.scss';
// import './editor.scss';

registerBlockType( 'my-custom-blocks/latest-posts', {
	title: __( 'Últimas Entradas', 'my-custom-blocks' ),
	description: __( 'Muestra una lista de las últimas entradas.', 'my-custom-blocks' ),
	icon: 'admin-post',
	category: 'widgets',
	attributes: {
		postsToShow: {
			type: 'number',
			default: 3,
		},
		selectedCategory: {
			type: 'string',
			default: 'all',
		},
	},
	edit: ( { attributes, setAttributes } ) => {
		const blockProps = useBlockProps();
		const { postsToShow, selectedCategory } = attributes;

		// Usamos useSelect para obtener datos de la tienda de WordPress
		// Esto simula la lógica que tendríamos en PHP para la previsualización
		const latestPosts = useSelect( ( select ) => {
			const query = {
				per_page: postsToShow,
				_embed: true,
			};
			if ( selectedCategory !== 'all' ) {
				query.categories = selectedCategory;
			}
			return select( 'core' ).getEntityRecords( 'postType', 'post', query );
		}, [ postsToShow, selectedCategory ] );

		const categories = useSelect( ( select ) => {
			return select( 'core' ).getEntityRecords( 'taxonomy', 'category', { per_page: -1 } );
		}, [] );

		const categoryOptions = [
			{ label: __( 'Todas las categorías', 'my-custom-blocks' ), value: 'all' },
			...( categories || [] ).map( ( cat ) => ( {
				label: cat.name,
				value: String( cat.id ),
			} ) ),
		];

		return (
			<div { ...blockProps }>
				<InspectorControls>
					<PanelBody title={ __( 'Ajustes de Entradas', 'my-custom-blocks' ) }>
						<RangeControl
							label={ __( 'Número de entradas a mostrar', 'my-custom-blocks' ) }
							value={ postsToShow }
							onChange={ ( value ) => setAttributes( { postsToShow: value } ) }
							min={ 1 }
							max={ 10 }
						/>
						<SelectControl
							label={ __( 'Filtrar por categoría', 'my-custom-blocks' ) }
							value={ selectedCategory }
							onChange={ ( value ) => setAttributes( { selectedCategory: value } ) }
							opciones={ categoryOptions }
						/>
					</PanelBody>
				</InspectorControls>
				<h3 className="editor-preview-heading">Últimas Entradas (Previsualización)</h3>
				{ ! latestPosts && <Spinner /> }
				{ latestPosts && latestPosts.length === 0 && <p>{ __( 'No se encontraron entradas.', 'my-custom-blocks' ) }</p> }
				{ latestPosts && latestPosts.length > 0 && (
					<ul>
						{ latestPosts.map( ( post ) => (
							<li key={ post.id }>
								<a href={ post.link } target="_blank" rel="noreferrer noopener">
									{ post.title.rendered || __( '(Sin título)', 'my-custom-blocks' ) }
								</a>
							</li>
						) ) }
					</ul>
				) }
			</div>
		);
	},
	save: () => {
		// Para bloques dinámicos, la función save devuelve null.
		// El contenido HTML se genera completamente por PHP en el frontend.
		return null;
	},
} );

3. Diagrama de Flujo: Bloques Estáticos vs. Dinámicos

Tabla Comparativa:

Herramientas Adicionales y Buenas Prácticas 🚀

1. Internacionalización (i18n)

Siempre usa __( 'Tu texto', 'tu-textdomain' ) para todas las cadenas de texto visibles en tu bloque. Esto permite que tu bloque sea traducible a otros idiomas.

• Dominio de texto: En nuestro ejemplo, es my-custom-blocks.
• Generar archivos PO/MO: Puedes usar herramientas como WP-CLI para generar estos archivos (wp i18n make-pot .).

2. Estilos Avanzados

• block.json: A partir de WordPress 5.8, block.json es el método preferido para registrar bloques. Simplifica el registro y permite cargar automáticamente scripts y estilos. Te animo a investigar su uso para futuras implementaciones, ya que reemplaza mucha de la lógica PHP que hemos visto.
• SCSS/Sass: Utilizar preprocesadores CSS como Sass te permite escribir estilos más organizados y mantenibles, como hemos hecho en los ejemplos.

3. Contexto del Bloque y Composiciones

• useBlockProps.save(): Asegura que los atributos necesarios para el bloque se añadan correctamente al elemento raíz en el frontend.
• InnerBlocks: Permite que tu bloque contenga otros bloques de Gutenberg, creando plantillas o layouts complejos (ej. un bloque de "Columnas" que contenga bloques de "Columna").
• BlockControls: Permite añadir controles a la barra de herramientas flotante del bloque, en lugar de solo en la barra lateral.

4. Depuración 🐞

• Usa las herramientas de desarrollo del navegador para inspeccionar los elementos de tu bloque en el editor. Puedes ver cómo React renderiza tu componente.
• console.log() en tu JavaScript es tu amigo para depurar el flujo de datos y el estado de React.
• Asegúrate de que npm run start esté siempre ejecutándose para ver los cambios de inmediato.

Conclusión 🎉

Has completado un viaje exhaustivo en la creación de bloques personalizados para Gutenberg. Desde la configuración inicial hasta la implementación de bloques estáticos y dinámicos con atributos y controles, ahora posees los conocimientos fundamentales para extender las capacidades de tu editor de WordPress de maneras ilimitadas.

La capacidad de crear bloques a medida es una habilidad invaluable para cualquier desarrollador de WordPress, permitiéndote construir experiencias de usuario superiores y sitios web más robustos y personalizados. ¡Ahora es tu turno de experimentar y llevar tus proyectos de WordPress al siguiente nivel!