Gutenberg abre nuevas y emocionantes posibilidades para ti como desarrollador/a. En este tutorial, explico todo lo que necesitas saber sobre el editor de bloques. Aprende a crear tus propios bloques WordPress y a adaptar los existentes.

Gutenberg es el editor que se lanzó con WordPress 5.0. Con Gutenberg, se introdujo el concepto de bloques WordPress. Esto permite a propietarios/as de sitios web colocar elementos de diseño arrastrando y soltando (drag and drop), sin necesidad de un page builder externo o conocimientos de programación. 

Gutenberg se utilizará como base para la edición completa del sitio (FSE) en el futuro. En el pasado, siempre era necesario codificar, incluso si se utilizaba un page builder: para algunos cambios y personalizaciones, ha tenido que poner en juego el código.

Con cada nueva actualización importante de WordPress, queda claro que los conocimientos de PHP y el desarrollo tradicional de sitios web WordPress ya no son suficientes. Como desarrollador/a WordPress, necesitas dominar Gutenberg.

Este tutorial incluye: 

• Qué es Gutenberg
• Cómo trabajar con los bloques de WordPress
• Cómo utilizar estas nuevas funciones y tecnologías para crear potentes webs WordPress.

Vamos a sumergirnos en el tutorial de Gutenberg WordPress para desarrolladores/as.

¿Qué es Gutenberg?

Gutenberg se lanzó por primera vez enWordPress 5. 0 para simplificar la creación de entradas y páginas de forma puramente visual. Pero esto era sólo la fase 1 del proyecto.

Gutenberg se basa en tecnologías modernas como JavaScript, React y la API REST para crear una experiencia de editor dinámico que imita la edición del frontend. En esta primera fase, se lanzó el Block Editor. 

Con nuevas actualizaciones y la fase 2, Gutenberg se convertirá en un editor de sitios web completo. En el futuro, será posible crear sitios web WordPress con bloques.

Esto significa que cualquiera que desarrolle sitios web WordPress debe redefinir su propio flujo de trabajo como desarrollador/a. Los conocimientos de PHP ya no son suficientes para crear un sitio web WordPress desde cero. Necesitas conocer JavaScript, React y REST API si quieres crear bloques y elementos de diseño personalizados para sitios web basados en Gutenberg. 

Introducción a los bloques WordPress

Es emocionante embarcarse en este nuevo viaje con el editor de bloques Gutenberg. Con este tutorial aprenderás todo lo que necesitas saber antes de empezar con el desarrollo Gutenberg y crear tus propios bloques WordPress.

Lo que deberías saber antes de desarrollar para Gutenberg 

El lenguaje más importante que debes conocer para seguir este tutorial sobre Gutenberg para desarrolladores/as es Javascript. Más concretamente, es necesario conocer la versión ES5, que es la que soportan la mayoría de los navegadores modernos. 

En la versión de 2015, ES6, y en la última versión, ESNext, se incluyen nuevas funciones. 

Entender ES6 y ESNext puede ser valioso. Sin embargo, si quieres utilizarlos en tu tarea de desarrollo de bloques WordPress, necesitarás saber cómo configurar las herramientas que convierten tu nuevo código más reciente a ES5. 

También tienes que entender JSX, que es una extensión de la sintaxis de Javascript y también requiere una transformación. Dado que ES6, ESNext y JSX son mucho más fáciles de escribir que ES5, merece la pena el esfuerzo de crear herramientas de transformación. 

Webpack, en combinación con Babel, es una popular herramienta de transformación. Esta combinación de herramientas minifica tu Javascript. 

Por último, pero no menos importante, el conocimiento de React JS puede ayudarte enormemente cuando crees tu tus propios bloques de WordPress o sigas varios tutoriales de WordPress para desarrolladores que se centran en la personalización de bloques. 

El contenido se almacena de forma diferente en Gutenberg 

A diferencia del editor de contenidos clásico, el contenido en Gutenberg se guarda de forma diferente. El contenido ya no se guarda como HTML, sino como comentarios HTML en una estructura específica con formato JSON. Esto facilita la transferencia de contenidos a otra instalación WordPress o a un sistema de gestión de contenidos (CMS). 

El almacenamiento de contenidos en HTML tradicional está bien si se trata de contenidos simples y basados en texto. Sin embargo, cuando se trata de contenidos generados dinámicamente, tu código se vuelve desgraciadamente desordenado. 

No es necesario que conozcas los detalles técnicos del funcionamiento de los bloques de WordPress. Lo importante es que cuando creas contenido en Gutenberg , el HTML generado está libre de código desordenado. Esto se debe a que todos los detalles se almacenan dentro de los comentarios HTML. 

Qué puedes hacer con los bloques WordPress Gutenberg 

Puedes hacer varias cosas en Gutenberg. Si sigues un tutorial WordPress para desarrolladores/as, deberías conocer tus posibilidades. 

Exploremos algunas de ellas: 

• Desarrolla tus propios bloques WordPress: esta es la tarea más compleja que puedes hacer. No obstante, los bloques personalizados de WordPress suelen merecer la pena para conseguir una verdadera personalización. 
• Prepara tu theme para Gutenberg: esto incluye seguir la guía de themes sugerida por WordPress.org para asegurarte de que el theme es compatible con Gutenberg. Aquí se incluye el ajuste del estilo del bloque para mantener el aspecto deseado de tu theme y mantener la funcionalidad del bloque. 
• Personaliza o amplía los bloques de contenido existentes en WordPress: como se ha mencionado anteriormente, puedes personalizar los bloques existentes de WordPress en Gutenberg. Esto incluye la adición de estilos de bloque personalizados, la adición de filtros a través de Javascript, o la personalización de las categorías de bloques y los tipos de bloques que aparecen para los tipos de entradas personalizables específicos. 

Configuración de un entorno de desarrollo para el Gutenberg Block Editor

Antes de que puedas crear algo con Gutenberg o hacer cualquier tutorial de WordPress para desarrolladores/as, necesitas configurar un entorno de desarrollo. Tu primer paso es conseguir Node.js. WordPress recomienda utilizar el Node Version Manager (nvm) para instalar y gestionar Node. 

Dentro del repositorio clonado, puedes construir Gutenberg ejecutando lo siguiente: 

npm ci
npm run build

Esta codificación garantiza que Gutenberg pueda utilizarse como un plugin. A continuación, añade el directorio Gutenberg creado a la carpeta wp-content/plugins en tu entorno local de WordPress. A White Pixel también recomienda instalar Webpack y Babel. 

Realiza todos los pasos de configuración para ajustar un entorno de desarrollo. Necesitarás un sitio de prueba local que ejecute WordPress con el plugin Gutenberg que has creado, y acceso al terminal para ejecutar una serie de comandos de línea. WordPress.org proporciona numerosos recursos para los scripts de desarrollo. 

Ahora que has configurado tu entorno local, podemos pasar a la parte principal de este tutorial de WordPress para desarrolladores/as: los bloques WordPress.

Entender los bloques WordPress

Los bloques WordPress son contenedores en los que se coloca el contenido dentro del editor de bloques de WordPress. Los bloques WordPress se pueden mover a través de una interfaz drag and drop.

Entender qué son los bloques WordPress es importante antes de crear el tuyo propio. Los bloques WordPress también son muy completos e incluyen varias funciones importantes como: 

• Contenido: estos bloques de uso frecuente incluyen párrafos, títulos, imágenes, listas, citas y multimedia.
• Formato: mejora el formato de tu contenido con bloques que añaden código, HTML personalizado y tablas.
• Diseños: personaliza el aspecto de las páginas y entradas con bloques para añadir saltos de página, espaciadores, columnas, bloques de botones y separadores.
• Widgets: estos bloques permiten insertar fácilmente los widgets en cualquier lugar e incluyen opciones como shortcode, categorías, iconos de redes sociales, RSS y últimos comentarios. 

Cómo crear tus propios bloques WordPress

Con este tutorial sobre Gutenberg para desarrolladores/as, aprenderás lo que necesitas para crear bloques de contenido personalizados en WordPress. De este modo podrás utilizarlos en el sitio web o el de tus clientes/as. 

Cómo registrar nuevos bloques WordPress

Cada nuevo bloque comienza con el registro. Utiliza la función registerBlockType para registrar una nueva definición de tipo de bloque.  

El nombre del bloque es una cadena que debe escribirse como namespace/block-name. Sustituye namespace por el nombre del bloque que deseas crear. 

A partir de ahí hay que definir las propiedades de tu nuevo bloque, como el título, la descripción, la categoría, el icono, las palabras clave o los estilos. 

Añadir barras de herramientas para acciones personalizables

Si deseas añadir acciones personalizadas a tu bloque mediante una barra de herramientas interactiva, puedes personalizar (o crear desde cero) las barras de herramientas de trabajo de Gutenberg. Establece los iconos personalizados, el formato, el posicionamiento y las acciones asignadas en función de las necesidades de tus plugins o themes. 

Según el Block Editor Handbook, la adición de una barra de herramientas personalizada podría ser algo así: 

Cómo traducir los bloques WordPress 

Al internacionalizarte, puedes asegurarte de que los bloques de WordPress que creas llegan a un público más amplio. 

Desde WordPress 5.0, puedes utilizar el paquete JavaScript wp-i18n para añadir cadenas traducibles. También puedes crear archivos de traducción y hacer que se carguen cuando un usuario solicite contenidos en ese idioma. 

Añadir la configuración de inspector

Todos los bloques tienen un conjunto de ajustes de inspección que aparecen en la parte derecha de la pantalla cuando se insertan en el contenido. Y dependiendo del bloque WordPress, los aspectos que los/as usuarios/as pueden personalizar son diferentes. Para cada bloque individual que se cree, deben definirse los ajustes del inspector. 

Du kannst <InspectorControls> hinzufügen, indem du WordPress mitteilst, welche Inspektor Steuerelemente verwendet werden sollen, wie sie aussehen sollen, welche Optionen enthalten sein sollen und in welcher Reihenfolge sie erscheinen sollen. 

Los esfuerzos de JavaScript para WordPress son algo así: 

Con estas especificaciones, puedes utilizar JSX para dar estilo a cada función y ajustar su orden. 

Cómo producir contenido dinámico con PHP

El contenido dinámico es esencial para WordPress. Hay muchas razones por las que puedes necesitar un bloque dinámico. 

Por ejemplo, si quieres crear un bloque personalizado de Últimas Entradasque muestre las últimas entradas del blog en tiempo real, necesitas un bloque dinámico. 

El bloque se apoya en PHP porque necesita recuperar nueva información cada vez que se renderiza. La clave para que la mayoría de los bloques sean dinámicos es cambiar su función de memoria a cero. A continuación, añade código para indicarle al nuevo bloque que recupere el contenido adecuado. 

También puedes establecer un atributo para indicar al bloque que muestre un determinado número de entradas.

Añadir ajustes individuales a bloques Gutenberg ya existentes

También puedes añadir ajustes personalizables y realizar cambios en los bloques existentes WordPress de Gutenberg. Por ejemplo, puedes añadir controles personalizables al panel de bloque avanzado dentro de la configuración del inspector de un bloque. Jeffrey Carandang ha escrito un gran tutorial sobre esto en su blog.

Crear patrones de bloques personalizados

Vamos a explorar otro aspecto de Gutenberg en este tutorial WordPress para desarrolladores/as. Con patrones de bloques WordPress puedes crear y compartir diseños de bloques predefinidos. Se trata de una agrupación de bloques WordPress que permiten crear diseños complejos con unos pocos clics.

Puedes acceder a los patrones de bloques en la pantalla de edición de las entradas/páginas pulsando el signo + . Luego verás todos los patrones de bloques disponibles para tu sitio web. 

Así crearás tus propios patrones de bloques 

Para empezar, crea un borrador o diseño de página o entrada. Añade bloques en la configuración que quieras. Por ejemplo, si diriges una revista online, puedes crear un diseño de página para los nuevos artículos con títulos, columnas, imágenes y citas destacadas. 

A continuación, tienes que diseñar los bloques para que tengan el aspecto que deseas. 

El siguiente paso es copiar todo lo que has hecho hasta ahora. Haz clic en todos tus bloques mientras mantienes pulsada la tecla ALT para seleccionarlos. A continuación, haz clic en el icono con los tres puntos apilados (más opciones) de la barra de herramientas. Haz clic en "Copiar". 

A continuación, tienes que descodificar la salida HTML que acabas de copiar. Para ello, puedes utilizar la herramienta JSON Escape/Unescape. Copia el código de la cadena de resultados que aparece después de hacer clic en Escape. 

Ahora tienes que registrar tu nuevo patrón de bloques. 

Cómo registrar y anular el registro de patrones de bloques

Puedes registrar un bloque de patrones personalizados utilizando la API de bloques de patrones para pegar el código que has copiado anteriormente en el archivo functions.php de tu theme WordPress o añadiéndolo a un plugin personalizado.

También puedes utilizar el plugin Block Pattern Builder para eliminar los requisitos de codificación para crear patrones de bloques.  

Cómo utilizar el editor Gutenberg como desarrollador/a de themes

Gutenberg facilita el desarrollo de bloques de WordPress personalizados que hacen de la publicación de contenidos una experiencia rica. También puedes utilizar Gutenberg para evitar la necesidad de un plugin constructor de páginas independiente como Elementor o Divi.

Gutenberg se puede utilizar para crear diseños responsivos para la página de inicio, habilitando bloques de ancho completo y de ancho. O puedes crear un tema basado en bloques desde cero. 

Analicemos en detalle algunas de tus opciones 

Utilizar bloques de portada para añadir secciones de página

Los bloques de portada o "cover blocks" son una adición más reciente a Gutenberg y son una gran manera de añadir diferentes secciones a un sitio. Ve este vídeo para más información.

Los bloques de superposición que puedes añadir son:

• Bloques de imágenes
• Fondos de vídeo
• Bloques de encabezado
• Bloques de párrafos
• Bloques de botones 

Los bloques de portada hacen que tu sitio web sea más versátil. De este modo, podrás crear una página de inicio personalizada. Incluso podrías crear un theme WordPress sencillo con una combinación de bloques de portada y patrones de bloques. 

También se vislumbran opciones aún más amplias para la edición completa del sitio web. El equipo de Make WordPress Design afirma que la manipulación de plantillas, los patrones de bloques avanzados y los estilos globales serán el foco principal. 

Utilizando el plugin Advanced Custom Fields 

Una de las limitaciones de los bloques es que no se puede conseguir un diseño de ancho completo: siempre estará organizado por cajas. 

Sin embargo, con unas cuantas manipulaciones inteligentes puedes utilizar el Advanced Custom Fields para añadir configuraciones meta personalizadas y forzar diseños de ancho completo. Esto es esencial si quieres utilizar Gutenberg para crear tus propios temas. 

Utilizar estilos de bloque personalizados 

Otra forma de utilizar Gutenberg como desarrollador/a de themes es utilizar estilos de bloque personalizados. Una vez hayas creado patrones de bloques o hayas utilizado bloques de cubierta para crear secciones de página, podrás añadir o eliminar estilos de bloque a cada bloque en cuestión. 

Es necesario conocer el nombre del bloque para poder añadir o eliminar los estilos asociados a este. Este paso adicional hace posible que la clase CSS personalizada no tenga que insertarse cada vez que se utilice el bloque. 

Bloques WordPress para landing pages y portadas

Ya hemos mencionado lo eficaces que pueden ser los bloques de portada para crear páginas de inicio para tu sitio web o tu theme. También funcionan muy bien para las landing pages. 

Otros bloques que vale la pena mencionar y que pueden ayudar en esta tarea son 

• Galerías
• Bloques de columnas
• Bloques de imágenes
• Bloques de tablas
• Bloques de texto

La mayoría de los bloques pueden utilizarse junto con los bloques de cubierta para crear una página de inicio de aspecto profesional. 

Si necesitas más funciones, puedes añadir un plugin de bloque Gutenberg que añada un solo bloque a Gutenberg, o un plugin de biblioteca de bloques Gutenberg que añada varios. 

Ultimate Addons para Gutenberg y Atomic Blocks son excelentes opciones de biblioteca que proporcionan una experiencia de construcción de sitios más fácil con bloques para testimonios, llamadas a la acción, opciones de diseño de página, formularios de contacto, tablas de precios y códigos cortos. 

Los plugins son ideales para los que quieren familiarizarse con Gutenberg y desarrollar sitios web, sin usar mucho código. 

Reflexiones finales sobre los bloques WordPress

El editor de bloques WordPress Gutenberg es ahora parte del núcleo WordPress y el equipo de desarrollo detrás de WordPress tiene grandes planes para este. Eventualmente podrás utilizar Gutenberg para crear menús de navegación. En el futuro, el editor será compatible con aún más themes.

Con la ayuda de este tutorial WordPress para desarrolladores/as, ahora puedes utilizar los bloques WordPress para crear sitios web y adaptar el contenido a tus necesidades. 

Ahora puedes crear bloques WordPress desde cero y eventualmente construir sitios web completos de WordPress usando el editor de bloques incorporado.
Mientras tanto, deberías asegurarte de que los sitios web que desarrolles esténalojados con Raidboxes. Raidboxes ofrece paquetes completos de hosting WordPress adecuados tanto para propietarios/as de sitios web individuales como para agencias.