Creación y Uso de Bloques en el Editor Gutenberg de WordPress

¿Qué es Gutenberg en WordPress?

Gutenberg es el nombre del nuevo editor de WordPress, lanzado para revolucionar la forma en que los usuarios crean sitios web. Lleva este nombre en honor a Johannes Gutenberg, inventor de la imprenta de tipos móviles, ya que, según Matt Mullenweg, fundador de WordPress, este nuevo editor tiene el potencial de transformar la experiencia de construcción en la plataforma, permitiendo a los usuarios materializar las ideas en sus cabezas a un nivel nunca visto antes.

¿Cómo surgió Gutenberg?

El origen de Gutenberg se remonta a enero de 2017 cuando se hizo público en el repositorio oficial de WordPress como un proyecto que buscaba una integración completa en su sistema. Desde diciembre de 2018, con la versión 5.0 de WordPress, Gutenberg se implementó como el editor por defecto. Esencialmente, Gutenberg funciona mediante una capa de abstracción que permite la interacción de bloques, que son componentes desarrollados en React, para adaptarse a las funcionalidades y estructura de WordPress.

¿Qué impacto tuvo su lanzamiento?

El lanzamiento de Gutenberg generó cierta controversia dentro de la comunidad de WordPress. Al tratarse de un cambio significativo, muchos usuarios tuvieron que adaptarse a una forma nueva de trabajar con sus sitios. La curva de aprendizaje del editor se convirtió en un tema de debate, especialmente considerando que muchos estaban acostumbrados a otros editores o herramientas visuales como Visual Composer.

WordPress, consciente del revuelo, lanzó herramientas como el "Editor Clásico" para aquellos que preferían seguir utilizando el sistema anterior. Sin embargo, la transición, anunciada con antelación, no dejó del todo satisfecha a toda la comunidad. Aun así, Gutenberg representa uno de los cambios más grandes e importantes en el código fuente de WordPress en años recientes, al embarcarse en la incorporación de tecnologías modernas.

¿Cómo funciona técnicamente Gutenberg?

¿Qué son los bloques en Gutenberg?

En Gutenberg, los bloques son la unidad base del editor, permitiendo a los usuarios construir sus páginas a través de componentes de React que tienen un estado y permiten modificar contenido. Cada bloque interactúa con archivos de JavaScript y tiene la capacidad de crear, editar, modificar o eliminar contenido dentro del editor.

// Ejemplo de un bloque simple en Gutenberg
import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';

registerBlockType('mi-plugin/mi-bloque', {
	title: __('Mi Bloque', 'mi-plugin'),
	category: 'widgets',
	edit: ({ className }) => {
		return <p className={className}>{__('Hola Mundo', 'mi-plugin')}</p>;
	},
	save: () => {
		return <p>{__('Hola Mundo', 'mi-plugin')}</p>;
	},
});

¿Cómo interactúa Gutenberg con la API de WordPress?

El editor Gutenberg se comunica directamente con la API REST de WordPress. Esto facilita a los usuarios la posibilidad de hacer cambios en el contenido, ya que pueden interactuar con el backend de WordPress desde el editor, permitiéndoles ver cómo quedará el contenido final.

¿Qué significa Gutenberg para los desarrolladores?

Para los desarrolladores, Gutenberg representa un reto y una oportunidad de aprendizaje en nuevas tecnologías como React. Esta es una oportunidad para actualizarse y adaptarse a los avances, convirtiéndose en expertos en la construcción de bloques dentro de WordPress.

¿Qué herramientas existen para el desarrollo de bloques?

WordPress proporciona una biblioteca a través de npm llamada @wordpress/scripts que ayuda a configurar un entorno de desarrollo para Gutenberg de forma más sencilla e intuitiva. Esta biblioteca incluye herramientas como webpack, y permite realizar pruebas con Jest y compilar en directo o generar un build al finalizar el desarrollo del código.

Instalación con npm

Para comenzar a desarrollar bloques propios, es recomendable seguir estos pasos:

1. Crear un directorio nuevo para los bloques:

   mkdir my-blocks
   cd my-blocks

2. Instalar la biblioteca de herramientas de desarrollo de WordPress:

   npm install @wordpress/scripts --save-dev

3. Configurar el entorno de desarrollo para crear bloques personalizados dentro de WordPress con facilidad.

La adopción de Gutenberg marca el camino hacia un futuro más flexible y adaptado a la innovación tecnológica en WordPress. Los desarrolladores que abracen este cambio podrán aprovechar las ventajas de crear experiencias más ricas y dinámicas para los usuarios de la plataforma.