Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

La API de Bloque de WordPress Gutenberg: Una Introducción

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called WordPress Gutenberg Block API.
WordPress Gutenberg Block API: Block Look and Feel

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Está prevista la publicación de la versión 5.0 del nuevo editor de WordPress (denominado Gutenberg). Ahora es el momento perfecto para conseguir entender cómo funciona, antes de que venga incluido en el núcleo de WordPress.

Te voy a mostrar cómo trabajar con la API de bloques y a crear tu propios bloques de contenido que podrás usar para construir tus entradas y páginas.

No existe todavía una fecha exacta para el lanzamiento de WordPress 5.0, pero debería producirse dentro de los próximos meses. Hasta entonces, Gutenberg estará disponible en forma de plugin independiente.

Gutenberg Plugin

Yo te recomendaría que probases el nuevo editor Gutenberg si es que todavía no lo has hecho. Su instalación es muy sencilla, lo puedes hacer desde el área de admin de WordPress. No obstante, al tratarse todavía de una versión beta del nuevo editor, no te recomiendo que lo uses todavía en sitios web que estén en funcionamiento. Hazlo de momento solo en sitios web en un entorno de desarrollo local.

Además, tener instalado Gutenberg es clave para seguir este tutorial. De esta forma, podrás experimentar cómo crear tus propios bloques. El desarrollo del nuevo editor ha sido recogido rápidamente durante los últimos meses, y ya cuenta con varios lanzamientos en lo que llevamos de 2018. La última versión de Gutenberg es de momento 2.7.0., a fecha de este artículo.

Con cada lanzamiento, se añaden nuevas características, y la interfaz del editor se mejora continuamente teniendo en consideración las opiniones recibidas por parte de los usuarios. Está empezando a verse y sentirse bastante más sencillo que las versiones anteriores. Además, se han resuelto muchos errores, haciendo que el editor sea mucho más robusto.

Gutenberg proporciona una nueva forma de crear contenido para las entradas, mediante "bloques" que pueden ser apilados unos sobre otros hasta formar la totalidad de la página. Cada bloque individual existe de forma independiente del resto y puede contener, si te apetece, casi cualquier tipo de código, estilos, y JavaScript.

Gutenberg Editor

A lo largo de este tutorial, vamos a ver todo lo que necesitas  saber sobre la API de bloques de manera que puedas empezar a crear los tuyos propios y personalizarlos directamente a tu gusto. Una vez domines los aspectos fundamentales, ¡la creación de bloques más complejos será más sencilla de lo que piensas!

El proyecto Gutenberg es una gran noticia para WordPress por otra importante razón. Está creado sobre React. Correcto, por primera vez en WordPress, ¡React será incluido en el núcleo! Son buenas noticias para los desarrolladores de temas o plugins ya que React puede añadirse fácilmente a cualquier página usando las librerías de React y ReactDOM incluídas en el núcleo de WordPress.

Dentro de muy poco serás capaz de crear componentes UI para todos tus proyectos de WordPress directamente con React. Antes, si querías usar las librerías de React y ReactDOM, tenías que incluirlas manualmente. Tenerlas ya en el núcleo es mucho más conveniente.

¡Imagina simplemente en cuán increíble sería crear una pantalla de opciones para un plugin directamente en React! ¿O qué te parecería crear algunas opciones avanzadas para el personalizador del tema? Estas nuevas herramientas van a proporcionar a los desarrolladores mucha libertad y flexibilidad para crear algunas estupendas interfaces de usuario interactivas.

Te anticipo que el desarrollo para WordPress durante los próximos dos años va a ponerse muy interesante y también muy divertido!

Nuevamente, ¿Qué Es un Bloque?

El concepto de bloque en el nuevo editor es un gran cambio con respecto al actual editor basado en TinyMCE, así que veamos más detalladamente qué es un bloque antes de zambullirnos en la API de bloques. Imagina que los bloques son como cajas negras, y que cada una contiene una cierta cantidad de código, estilos, y JavaScript, todo dentro de una entidad convenientemente denominada "bloque".

Cuando un bloque es añadido al editor, este muestra una previsualización de cual será su aspecto en el front end. CAsi todos los bloques cuentan con ajustes para personalizar aún más su apariencia y/o su comportamiento.

Algunos bloques que están disponibles de forma predeterminada en el nuevo editor son los siguientes:

  • Párrafo
  • Galería
  • Lista
  • Cita
  • Código
  • Tabla
  • Botón
  • Columnas

Esto te da una idea del tipo de contenido que puedes añadir al editor mediante los bloques incluídos en el nuevo editor. Todos estos tipos de bloques son útiles, pero bastante básicos, así es de esperar que empiecen a aparecer otros bloques mucho más comprensibles para añadir prácticamente cualquier tipo de contenido que puedas imaginar.

Es posible que ya se te hayan ocurrido algunos bloques de contenido que posiblemente necesites en tus propios proyectos. Si ninguno de ellos está disponible en Gutenberg, probablemente sean buenos candidatos para crear tu propio bloque personalizado.

Yo te recomendaría que lo intentases con el código presente en esta serie de tutoriales ya que es la mejor forma para aprender a crear los tuyos propios usando la API de bloques. Por todos los medios lee primero todo el tutorial para entender cómo funciona la API de bloques, y vuelve después para probar con algo de código por tí mismo y, ¡empieza a crear algunos bloques!

Prerequisitos

Este es un medio para una serie de tutoriales de nivel avanzado, así que asumo que no eres un novato en el desarrollo con WordPress. Para aprovechar al máximo estas series, deberías tener al menos conocimientos sobre lo siguiente:

  • JavaScript (ES6+)
  • React (y ReactDOM)
  • JSX
  • Línea de comandos
  • Node/NPM
  • PHP
  • Desarrollo de temas y/o plugins para WordPress
  • Desarrollo WordPress en un entorno local

Si necesitas mejorar en cualquiera de estas áreas, podría ser buena idea que lo hagas antes de proseguir con este tutorial. Explicaré conceptos conforme vayan surgiendo, pero queda fuera del ámbito de este tutorial explicar cada pequeño detalle.

Es una práctica bastante común crear bloques personalizados en WordPress usando JSX, aunque no es necesario. Si estás acostumbrado a usar React para desarrollar componentes en vanilla JavaScript, puedes hacerlo también en WordPress. La elección es completamente tuya. Sin embargo, la mayoría del código de los bloques que encontrarás estará escrito en JXS (incluido este tutorial), así que te resultará más fácil entender los conceptos si tú también lo usas.

Gutenberg: Un Proyecto Todavía en Evolución

El proyecto Gutenberg todavía está evolucionando bastante, de manera que es posible que algunas cosas hayan cambiado cuando leas este tutorial. Entre estos cambios podríamos incluir la interfaz del editor, nuevos componentes principales. etcétera.

No obstante, el nuevo editor es bastante estable actualmente, y las características añadidas recientemente como los bloques anidados y la posibilidad de reorganizarlos mediante su arrastre son bastante emocionantes. Incluso aunque alguno de los pequeños detalles sobre la forma en la implementas los bloques cambia, lo que no debes olvidar es el concepto general de lo que es un bloque y cómo los puedes usar para crear cualquier tipo de contenido.

Si te quedas bloqueado, te recomiendo que eches un vistazo al manual oficial de Gutenberg, que siempre está actualizado con los últimos cambios. Consulta también el proyecto Gutenberg en GitHub para inspeccionar el código fuente y registra cualquier problema con el que te hayas topado.

Cuanta más personas lo prueben y reporten los problemas que encuentran, más sólido será el proyecto. Este es otro gran motivo para empezar a desarrollar bloques ahora mismo, ¡antes de que formen oficialmente parte de WordPress!

Configuración del Entorno

Para continuar con el código de este tutorial, necesitarás lo siguiente:

  • Un entorno de desarrollo local.
  • La última versión de WordPress.
  • El plugin de Gutenberg.
  • Un editor de código.

Si todavía no tienes un entorno de desarrollo local configurado, puedes usar algo como Local by Flywheel o DesktopServer ya que ambos cuentan con una versiones gratuitas y compatibles con múltiples sistemas operativos.

Asegúrate de que estás trabajando con la última versión de WordPress y del plugin Gutenberg para poder usar más recientes características. Además, existen algunos excelentes editores de código por ahí, así que si todavía no tienes ninguno instalado, echa un vistazo a editores gratuitos como Visual Studio o Atom, serán más que suficientes.

Para crear fácilmente nuevos bloques, estaremos usando un paquete de herramientas relativamente nuevo llamado create-guten-block. Te permitirá crear rápidamente un nuevo plugin que contiene todo el código de instalación y arranque necesario para la creación bloques. Es un paquete de herramientas que no necesita ninguna configuración, funciona de inmediato de forma similar al paquete de herramientas create-react-app para configurar nuevas aplicaciones React con el mínimo esfuerzo. De manera que si ya has usado create-react-app, sabrás qué puedes esperar.

Echemos un vistazo a cómo podemos usar esta herramienta para crear bloques para Gutenberg. Abre una ventana de terminal dentro de la carpeta de tu plugin (/wp-content/plugins/) para tu sitio de desarrollo local e introduce lo siguiente:

(Nota: se requiere npm v5.2 o superior para usar el comando npx.)

Tras unos minutos, se habrá creado un nuevo plugin dentro de la carpeta my-custom-block conteniendo todos los archivos y herramientas necesarias para crear bloques usando React. No está mal, ¿eh?

El nombre del plugin en el admin de WordPress será my-custom-block - CGB Gutenberg Block Plugin. Venga, actívalo.

Activated Plugin

El plugin creará un nuevo bloque que ya podremos usar en el editor Gutenberg. Para probar nuestro nuevo bloque, dirígete al editor de entradas y pulsa sobre el texto Write your story.

Después, pulsa la tecla / para mostrar una ventana emergente que podemos usar para buscar todos los bloques disponibles.

Nota: existen otras formas para buscar un bloque, pero a mí me gusta usar / para mostrar el campo de búsqueda con rapidez y convenientemente. Pero tú utiliza el método con el que te sientas más cómodo.

Mientras tienes la ventana de búsqueda abierta, empieza a escribir my-custom-block y selecciona my-custom-block - CGB Block. Esto mostrará tu bloque personalizado dentro de la ventana del editor.

Block Rendered on Backend

De momento es sólo un bloque figurado, que realmente no hace otra cosa que mostrar un texto aleatorio dentro de una caja coloreada. Sin embargo, resalta un aspecto importante relativo a la creación de bloques.

Pulsa Ver Entrada para ver cómo se mostrará esta a los usuarios.

Block Rendered on Frontend

Como puedes ver, tanto el contenido como los estilos del bloque renderizado del front-end son distintos a los del back-end. Esto también vale para el código JavaScript, también puede tener aspecto distinto al mostrarse en el front end.

La razón de la diferencia en la representación se debe a que al crear bloques, es necesario declarar específicamente y por separado las funciones de representación de front-end y back-end.

Esto es así porque un montón de bloques requieren elementos adicionales de la interfaz de usuario que deben ser procesados en el editor de las entradas para ayudar a configurar las opciones de los bloques. Como esto sólo es relevante para el editor de post, es completamente redundante al representar el bloque en la parte delantera. Por lo tanto, especifica la salida que se va a mostrar en el front-end en una función de representación independiente.

Aunque este enfoque tiene sentido y funciona bien, provoca problemas derivados de la duplicación de código. Si no tienes cuidado, podría acabar con un montón de definiciones de contenido duplicadas.

Siempre que sea posible, es una buena idea separar el contenido común de las funciones de representación del front-end y el back-end para ayudar a reducir la duplicación. Este es el enfoque que vamos a seguir a lo largo de esta serie de tutoriales.

Conclusión

En este tutorial, te he iniciado a qué es un bloque y por qué el nuevo editor Gutenberg va a constituir una gran cambio cuando venga incorporado en WordPress 5.0. Es un gran cambio respecto al actual editor basado en TinyMCE.

Para ayudarte a crear bloques rápidamente, create-guten-block es una herramienta muy útil que te permite crear un plugin que contiene un bloque inicial preparado para su personalización.

Hemos acabado viendo cómo usar nuestro bloque personalizado dentro del nuevo editor de entradas, y hemos descubierto que el renderizado del front end y el back end puede ser muy distinto. ¡En Gutenberg, no es en absoluto necesario que coincida lo que se muestra en el editor con su salida!

En la segunda parte, veremos detalles más concretos de la API de bloques y cómo puedes usarlo para crear tus propios bloques personalizados.

Mientras, ¡consulta algunos de nuestros otros artículos sobre WordPress Gutenberg!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.