Heliblocks, diseños en bloques para WordPress

Aunque el editor de bloques de WordPress (aka Gutenberg) ha supuesto un paso enorme en la maquetación de contenidos, las necesidades de los publicadores web se han afilado viendo de lo que son capaces los constructores visuales premium (Divi y Elementor, fundamentalmente).

Una de sus grandes ventajas son las librerías de plantillas que permiten crear webs muy visuales en minutos. Es cierto que esto va contra la personalización y exclusividad pero reconozcamos que estos aspectos no siempre son la prioridad.

Desde la llegada del editor de bloques han surgido librerías similares para Gutenberg como Shareablock (para Editorskit) o las disponibles en la colección de Atomic Blocks. Uno de sus planteamientos más interesantes es que no solo comparten diseños completos para página, sino bloques con elementos de diseño individuales: heros, tablas de precios, columnas superpuestas, fichas de productos, etc.

Del desarrollador español Jesús Olazagoitia nos llega ahora Heliblocks, una idea brillante que va un paso más allá en lo que a colecciones de diseños para bloques se refiere.

Qué es Heliblocks

Heliblocks es un plugin para WordPress que permite que los implementadores e usuarios de WordPress puedan añadir y editar en sus webs composiciones visuales en forma de bloques, creadas por diseñadores web especialistas en html y CSS.

Como ves, en este plugin se conectan dos mundos. Los diseñadores pueden crear colecciones de diseños y los usuarios importarlas a sus WordPress.

Hasta aquí nada muy diferente de lo que ya teníamos en las opciones comentadas anteriormente. Pero hay un punto clave que es que, si el diseñador lo ha definido a priori, el usuario podrá modificar aspectos del diseño como colores, tamaños o características de los textos desde las propiedades de ese bloque. Para ello usará selectores y herramientas convencionales del editor de bloques.

Ventajas de Heliblocks

Se me ocurren varias situaciones en las que Heliblocks puede suponer una gran ventaja.

• La más evidente de todas ellas es que cualquier persona con unos conocimientos básicos de html y CSS sería capaz de crear sus propios bloques sin necesidad de saber nada de JavaScript. Podría incluso copiar el código de un elemento de cualquier web y crear con ello un bloque para WordPress.
• A nivel de servicios de desarrollo web, el diseñador puede crear una colección de bloques para cubrir todas las posibilidades de un sitio web, de tal forma que cuando vaya a construirlo, lo haga de una manera más eficiente. Sería algo similar a un Sistema de Diseño o a una librería de componentes.
• Una vez construido un sitio web serviría para que si el propietario del mismo o los redactores necesitaran añadir nuevos contenidos, siguieran el sistema de diseño ajustándose a los patrones definidos por el diseñador. Este último habría definido cuales son las variables en las que se admiten modificaciones.
• Por supuesto también abre la puerta a la comercialización de diseños específicos en forma de snippets. Con añadirlos a nuestra cuenta (usa Github para esto) estarán disponibles en la librería.
• Para implementadores las ventajas son obvias: La galería de Heliblocks representa una biblioteca de bloques editables a la que recurrir a demanda. Tal y como funcionan las librerías de Divi, Elementor o Shareablock.

Cómo funciona Heliblocks

El funcionamiento de Heliblocks se puede enfocar desde dos perfiles: diseñador e implementador.

Para los diseñadores:

En la web de Heliblocks puedes loguearte usando tu cuenta de GitHub. Con ello podrás empezar a crear tus bloques. Desde ese momento en tu perfil se almacenarán todos los que diseñes, pudiendo volver a editarlos en cualquier momento.

Una vez logueado, podemos crear nuestro primer bloque. La ventana de edición cuenta con un campo para el HTML, otro para el CSS y otro para la vista previa. Un entorno familiar para cualquiera que hay editado código antes.
En todo caso si tu código va a ser extenso, es recomendable trabajar con otra herramienta y pegar después tu código aquí.

La gracia aquí es trabajar con las variables que harán después que esas características sean editables después en el bloque en WordPress. Para ello Heliblocks ya tiene algunas variables predefinidas.

En la barra superior de la interfaz puedes nombrar tu bloque y en el botón de Settings describirlo, etiquetarlo y añadir el enlace a una fuente embebida.

Una vez guardes tu código el servidor lo procesará para comprobar que no hay código malicioso, minificar, transformar los selectores, etc. Apenas tarda unos minutos en ese tarea. A continuación pasará a estar disponible tanto en tu perfil como en la biblioteca general de bloques de Heliblocks.

Para los implementadores y usuarios:

Tras instalar y activar el plugin de Heliblocks en tu WordPress, podrás llamarlo desde el editor de bloques como cualquier otro bloque normal.

Cuando lo hagas se te desplegará la galería de bloques disponible en la web de Heliblocks (aquí puedes verla completa) y podrás elegir aquella que mejor te cuadre. Para facilitar la selección puedes usar el buscador incorporado.

Una vez añadido el bloque correspondiente podrás cambiar su contenido de ejemplo (imágenes y/o texto). Además podrás modificar aquellas variables que haya predefinido el diseñador del bloque. Normalmente serán colores, propiedades de los textos y tamaños. Este tipo de variables ofrecen de momento solo algunas opciones pero Jesús está trabajando en ampliar las posibilidades.

El futuro de Heliblocks

No hay duda de que Heliblocks tiene una pinta estupenda. Es sencillo de manejar y el potencial es enorme, la primera piedra está muy bien puesta.

Aun se echan en falta algunas opciones como crear colecciones de bloques privados, guardar un bloque en formato de borrador y un mayor abanico de variables para diseñadores. Pero hay que entender que el plugin está en una fase muy inicial y con mucho margen de mejora, lo que es genial para seguir su evolución. Y lo digo porque lo bueno de esto es que va a ser el feedback de sus usuarios el que le diga a Heliblocks hacia dónde evolucionar.

Precisamente sus posibilidades de crecimiento a nivel de descargas en el repositorio están directamente relacionadas con la profundidad del catálogo de bloques. El propio desarrollador, Jesús Olazagoitia, está añadiendo bloques muy interesantes pero con el modelo actual la riqueza la va a aportar la comunidad de diseñadores. En solo unas horas desde su publicación ya han aparecido nuevos bloques en la librería y seguramente en los próximos días crezca aun más.

Aunque compartir bloques de forma abierta es muy atractivo para que algunos diseñadores se promocionen, una de las claves para que se consiga que compartan sus mejores trabajos está en la posibilidad de que obtengan un retorno comercial. Esto se puede hacer de formas muy distintas, veremos por cuál apuesta (si lo hace) Heliblocks.

¿Habrá una versión premium en el futuro? Espero que si. La mejor manera de que un plugin crezca es que su desarrollador obtenga un rendimiento de su trabajo y Heliblocks tiene ese potencial. Me encantaría que Heliblocks creciera mucho.

Este tipo de proyectos nos hacen sentirnos muy orgullosos a toda la comunidad WordPress española y Jesús Olazagoitia ha hecho un gran trabajo que esperamos que tenga mucha repercusión internacional.

Te invito a probar Heliblocks y contarme qué te parece o qué echas en falta. Seguro que todas esa información le vendrá estupendamente a Jesús para seguir mejorando el plugin. No te olvides de dejarle una valoración en la página del plugin, las votaciones de 5 estrellas ayudan muchísimo a la difusión de un plugin.