El gran tutorial de Gutenberg Wordpress para desarrolladores/as: Crea tus propios bloques

Maddy Osman
11 min.
WordPress -Gutenberg-Tutorial-Developer

Gutenberg abre nuevas y emocionantes posibilidades 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 personalizar los existentes.

Gutenberg es el editor que se lanzó con la versión WordPress 5.0. Con Gutenberg se introdujo el concepto de bloques WordPress. Esto permite a los propietarios de sitios web colocar elementos de diseño mediante la función de arrastrar y soltar, sin necesidad de un constructor de páginas externo ni de conocimientos de programación. 

Gutenberg se utilizará como base para la edición completa del sitio en el futuro. En el pasado, siempre era necesario codificar, incluso si se utilizaba un constructor de páginas o "Page Builder": Algunos cambios y personalizaciones implicaron código obligatorio.

Con cada nueva actualización importante de WordPress va quedando claro que no basta con conocimientos de PHP y de desarrollo tradicional de sitios web WordPress. Como desarrollador/a WordPress, necesitas también dominar Gutenberg.

Este tutorial incluye: 

  • Información sobre Gutenberg
  • Cómo trabajar con bloques WordPress
  • Cómo utilizar estas nuevas funciones y tecnologías para crear potentes sitios web WordPress.

Sumerjámonos en el tutorial de Gutenberg WordPress para desarrolladores: ¡pa' dentro!

¿Qué es Gutenberg?

Gutenberg se lanzó por primera vez enWordPress 5.0 para facilitar la creación de entradas o posts y sitios de forma puramente visual. Pero esto era solo la primera fase del proyecto.

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

¿Qué es el editor de bloques Gutenberg?

Gutenberg sustituye al TinyMCE Editor (a menudo conocido como editor clásico) y te permite utilizar bloques de contenido para añadir elementos como texto o imágenes a tus entradas y páginas.

Con nuevas actualizaciones y la fase 2, Gutenberg preveía convertirse en un editor de sitios web completo. En el futuro será posible crear sitios web enteros WordPress a través de bloques.

WordPress -Gutenberg-Tutorial-Developer

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 construir un sitio web WordPress desde cero. Necesitas conocer el funcionamiento de JavaScript, React y REST API si quieres crear bloques y elementos de diseño personalizados para sitios web configurados para Gutenberg. 

Bloques WordPress: Inicio

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 iniciar tu desarrollo con Gutenberg y crear tus propios bloques WordPress.

Lo que debe saber antes de desarrollar con Gutenberg 

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

Las nuevas características o funciones se incluyen en la versión 2015, ES6, y en la última versión, ESNext. 

Entender ES6 y ESNext te será valioso. Sin embargo, si prefieres utilizarlos en el desarrollo de tus bloques WordPress necesitarás saber cómo configurar las herramientas que convertirán tus códigos más recientes al ES5. 

WordPress -Gutenberg-Tutorial-Developer

También tendrás que conocer bien el JSX, una extensión de sintaxis de javascript y que también requiere 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. 

WordPress -Gutenberg-Tutorial-Developer

Webpack, además de Babel, es una popular herramienta de transformación. Esta combinación de herramientas minifica tu Javascript. 

WordPress -Gutenberg-Tutorial-Developer

Por último, pero no por ello menos importante, conocer React JS puede ayudarte enormemente a la hora de crear tus propios bloques WordPress quieras poder entender varios tutoriales WordPress para desarrolladores/as 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 se almacena de forma diferente en Gutenberg . El contenido ya no se almacena como HTML, sino como comentarios HTML en una determinada estructura 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 es una buena opción cuando se trata de contenidos simples y basados en texto. Sin embargo, cuando se trata de contenido generado dinámicamente, tu código lamentablemente se desordenará. 

No es necesario conocer los detalles técnicos del funcionamiento de los bloques 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. 

Lo que puedes hacer con los bloques WordPress de Gutenberg 

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

Veamos algunas opciones: 

  • Desarrolla tus propios bloques WordPress: esta es la tarea más compleja que puedes hacer. Sin embargo, los bloques personalizados WordPress merecen verdaderamente la pena si persigues conseguir una buena personalización. 
  • Prepara tu theme para Gutenberg: aquí es necesario que sigas las instrucciones de WordPress.org para que tu theme sea compatible con Gutenberg. Esto incluye el ajuste del estilo del bloque para conseguir 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 post personalizables específicos. 

Configurar un entorno de desarrollo para el editor de bloques Gutenberg

WordPress -Gutenberg-Tutorial-Developer

Antes de poder construir algo con Gutenberg o realizar cualquier tutorial WordPress para desarrolladores/as, es necesario configurar un entorno de desarrollo. El primer paso que deberías seguir es conseguir Node.js. WordPress recomienda utilizar el Node Version Manager (nvm) para instalar Node y gestionarlo. 

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

npm ci
npm run build

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

Realiza todos los pasos correspondientes para configurar un entorno de desarrollo. Necesitarás un sitio de prueba local en el que WordPress funcione con el plugin creado por Gutenberg y acceso al terminal para ejecutar un conjunto de indicaciones de línea de comandos. WordPress.org ofrece numerosos recursos para el desarrollo de scripts

Después de haber instalado y configurado tu entorno local, podemos pasar a la parte principal de este tutorial de WordPress para desarrolladores: los bloques WordPress.

Bloques WordPress: Comprender cómo funcionan

Los bloques WordPress son contenedores en los que se colocan los contenidos dentro del editor de bloques WordPress. Los bloques se pueden mover mediante una interfaz de arrastrar y soltar.

Para poder comprender qué son los bloques WordPress es importante crearlos antes por tu propia cuenta. Los bloques WordPress también son muy completos e incluyen varias características importantes como: 

Cómo crear tus propios bloques WordPress

Con este tutorial de Gutenberg para desarrolladores WordPress aprenderás lo necesario para crear bloques de contenido personalizados en WordPress. A continuación, puedes utilizarlos en tus sitios web o en los de tus clientes. 

Cómo registrar nuevos bloques WordPress

Cada bloque nuevo comienza con su correspondiente 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 características 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 desea 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. 

WordPress -Gutenberg-Tutorial-Developer

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

Barra de herramientas de importación

Cómo traducir los bloques WordPress 

Si quieres implantar una internacionalización, puedes asegurarte de que los bloques WordPress que crees llegarán a un público más amplio. 

Desde WordPress 5.0 puedes utilizar el paquete wp-i18n JavaScript 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 del 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. Dependiendo del bloque WordPress, los aspectos que los usuarios pueden personalizar variarán. Para cada bloque individual que se cree, deben definirse los ajustes de inspector. 

WordPress -Gutenberg-Tutorial-Developer

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 por parte de JavaScript para WordPress se ven más o menos de esta manera: 

WordPress -Gutenberg-Tutorial-Developer

Con estas especificaciones, puedes usar JSX para diseñar cada función y personalizar su orden. 

Cómo producir contenido dinámico con PHP

El contenido dinámico es esencial en WordPress. Hay muchas razones por las que podrías necesitar un bloque dinámico. 

Por ejemplo, si quieres crear un bloque personalizado de Últimas Entradas que 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 almacenamiento a 0. A continuación, añade código para indicarle al nuevo bloque que recupere el contenido adecuado. 

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

Añadir ajustes individuales a los bloques existentes de Gutenberg

También puedes añadir ajustes personalizables y realizar cambios en los bloques WordPress de Gutenberg ya existentes. 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 al respecto en su blog.

Crear patrones de bloques personalizados

Exploremos otro aspecto de Gutenberg en este tutorial para desarrolladores WordPress. Con los patrones de bloques WordPress Block crearás y compartirás 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 bloque WordPress desde la pantalla de edición de la entrada/página pulsando el signo + . A continuación, verás todos los patrones de bloques disponibles para tu sitio web. 

WordPress -Gutenberg-Tutorial-Developer

Cómo crear tus propios patrones de bloque 

Para empezar, crea un diseño de página o de entrada. Añade bloques en la configuración que quieras. Por ejemplo, si llevas una revista en línea, puedes crear un diseño de página para los nuevos artículos con encabezados, 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 de tres puntos alineados (más opciones) de la barra de herramientas. Haz clic en copiar. 

WordPress -Gutenberg-Tutorial-Developer

Después 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

WordPress -Gutenberg-Tutorial-Developer

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

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

Puedes registrar un patrón de bloques personalizado utilizando la API de patrones de bloques para añadir el código, copiado anteriormente, en el archivo functions.php de tu theme WordPress o registrarlo añadiéndolo a un plugin personalizado.

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

WordPress -Gutenberg-Tutorial-Developer

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

Gutenberg facilita el desarrollo de bloques personalizados WordPress que hacen de la publicación de contenidos una experiencia enriquecedora. También puedes utilizar Gutenberg para renunciar a un plugin constructor de páginas (Page Builder) independiente como Elementor o Divi.

Gutenberg se puede utilizar para crear diseños de páginas de inicio con capacidad de respuesta, habilitando bloques de ancho ampliado y completo. O puedes crear un tema basado en bloques desde cero. 

Analicemos en detalle algunas de tus opciones. 

Uso de bloques de fondo para añadir secciones de página

Los bloques de fondo son una adición más reciente a Gutenberg y una gran manera de añadir diferentes secciones a un sitio. Para más información, consulta este vídeo.

¿Qué son los bloques de fondo?

Los bloques de fondo son bloques de imagen sobre los que se puede colocar texto. Son una buena forma de crear cabeceras o secciones personalizadas que se encuentran en plugins WordPress para el diseño de páginas o en temas de WordPress (themes).

Los bloques superpuestos que puedes añadir son:

  • Bloques de imágenes
  • Fondos de vídeo
  • Bloques de encabezamiento
  • Bloques de párrafos
  • Bloques de botón 

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

Las posibilidades de edición completa de sitios web son increíblemente más amplias. El equipo de Make WordPress Design afirma que la manipulación de plantillas, patrones de bloques avanzados y estilos globales serán el foco principal. 

Utilización del plugin Advanced Custom Fields 

Una de las limitaciones de los bloques es que no se puede conseguir un diseño de ancho completo: siempre se limitará a espacios en cajas. 

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

WordPress -Gutenberg-Tutorial-Developer

Utilizar estilos de bloque personalizados 

Otra forma de utilizar Gutenberg como desarrollador/a de themes es utilizar los estilos de bloque personalizados. Una vez hayas creado patrones de bloques o utilizado bloques de fondo 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 él. Este paso adicional permite evitar la inserción de la clase CSS personalizada cada vez que se utiliza el bloque. 

Bloques WordPress para páginas de aterrizaje y portadas

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

Otros bloques que vale la pena mencionar y que pueden ayudar en este sentido son: 

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

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

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

Ultimate Addons for 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 recomendaciones, llamadas de atención, opciones de diseño de página, formularios de contacto, tablas de precios y shortcodes. 

WordPress -Gutenberg-Tutorial-Developer

Los plugins son ideales para quienes desean aprender Gutenberg y desarrollar sitios web sin necesidad de utilizar mucho código. 

Reflexiones finales sobre los bloques WordPress

El editor de bloques WordPress Gutenberg forma parte ahora del núcleo WordPress y el equipo de desarrollo WordPress tiene grandes planes para este. Podrás utilizar Gutenberg para crear menús de navegación y, en el futuro, este editor será compatible con muchos más themes.

Con la ayuda de este tutorial de WordPress para desarrolladores/as, ya puedes utilizar bloques WordPress para crear sitios web y personalizar tu contenido. 

Puedes crear bloques WordPress desde cero y finalmente crear sitios web WordPress completos utilizando el editor de bloques incorporado.
Mientras tanto, debes asegurarse de que los sitios web que desarrolles estánalojados en RAIDBOXES. RAIDBOXES ofrece paquetes completos de hosting WordPress adecuados tanto para propietarios de sitios web individuales como para agencias.

Tus dudas sobre el desarrollo con Gutenberg

¿Tienes preguntas para Maddy sobre la guía para desarrolladores con Gutenberg? Esperamos tu comentario. ¿Quieres estar informado/a de los nuevos artículos sobre WordPress? Entonces sigue a RAIDBOXES en Twitter, Facebook o a través de nuestra newsletter.

Maddy Osman es una especialista en estrategias de contenidos SEO. Trabaja con clientes seleccionados en el ámbito de WordPress y alojamientos web. Gracias a su formación en diseño web y WordPress ha adquirido un profundo conocimiento de SEO y sabe exactamente cómo conectar las marcas con contenido relevante SEO.

Artículos relacionados

Comentarios sobre este artículo

J

Hola, estoy empezando con esto de Guttenberg y la verdad es que una vez le pillas el "truco" no se hace tan tedioso y agiliza mucho. Pero tengo una duda, quisiera saber como crear un contenedor de bloques, para por ejemplo crear nuestro propio GRID o posicionar mejor los bloques en la página.

Gracias

Escribe un comentario

La dirección de correo electrónicotu no se publicará. Los campos obligatorios están marcados con *.