Gutenberg: Atomic Blocks

Con esta entrada inauguro una serie de posts en los que voy a ir repasando todos los plugins que agregan bloques extra a Gutenberg y con los que se puede maquetar una página profesional perfectamente. Al menos todos los que yo conozco y he probado.

Este plugin es muy especial para mi porque fue el primero que me hizo considerar especializarme en Gutenberg para diseñar. Hace un año en Atomic Blocks apostaron por Gutenberg, y no solo con una serie de bloques interesantes sino con su propio Theme del mismo nombre.

atomic blocks logo gutenberg

Me encantó la apariencia y las posibilidades, además de que era un plugin gratuito, y me lancé de cabeza a probarlo.

Es un proyecto de la gente de StudioPress, los creadores del archiconocido Genesis Framework.

Experimentando con él me di cuenta de que esto era el futuro. Gutenberg quiero decir, no Atomic Blocks en particular. Va a costar mucho que el editor por defecto de WP se haga con la cuota de mercado principal, pero estoy convencido de que llegará el día en que será tan bueno que al menos un 51% de los sitios en WP no instalarán ningún maquetador PRO adicional. Si acaso algún plugin gratuito como este con el que ya podrán hacerse el 75% de las webs para casi cualquier cometido.

De hecho, es que ese futuro ya está aquí, pero de momento muy pocos están intentando extraer todo su potencial, porque las limitaciones requieren de mayor esfuerzo y creatividad y es más cómodo dejarse llevar por la corriente.

Tipos de bloques en Atomic Blocks

De momento cuenta con 14 bloques, y siguen trabajando en más. El listado es el siguiente:

Advanced Columns Block

Bloque para agregar de 1 a 6 columnas para mostrar información tanto con un encabezado de texto como una imagen. Admite posiciones centradas o a los lados y se puede incluir un botón con llamada a la acción en la columna. Sencillo pero efectivo.

Newsletter Block

Un bloque para integrar una suscripción a una lista de correo en Mailchimp (y solo en Mailchimp). Una funcionalidad muy demandada y que la mayoría de plugins de Gutenberg no incluye. Personalmente este tipo de formularios para mi son un gran quebradero de cabeza. No me acaba de convencer ningún plugin o maquetador (todos tienen sus limitaciones e impedimentos) y son un grano en el culo a la hora de ser integrados en un diseño. Que un pack de bloques gratuitos como estos incluya algo así es una alegría. La parte negativa: es muy simple. Apenas puedes configurar el color de fondo del bloque, el color del botón y el texto, y ya. Un solo campo para la dirección de email y activar o desactivar el doble opt-in. Olvídate de checkboxes u otras funcionalidades. En Europa tendrías que rodear a este formulario de un gran contexto para no incurrir en infracciones legales, hasta donde yo sé.

Pricing Table

Hasta cuatro tablas para presentar precios de un producto o servicio así como un listado de características / beneficios. Permite añadir una imagen ilustrativa y un botón. Viene con las opciones de personalización mínimas, pero suficientes para la mayoría de casos.

gutenberg atomic blocks plugin

Post Grid Block

Te permite mostrar una cuadrícula de entradas del blog. Puedes construir la típica página de archivo con las páginas de tu blog mostrando la imagen destacada, un extracto del texto, la fecha, autor, categoría, enlace para leer más, etcétera. Sencillo pero resultón, la tónica general de este plugin. También puedes configurarlos con la imagen a un lado, dando así una sensación más de lista, o con la imagen como encabezado para mostrar los posts en plan grid.

Container Block

Tal y como dice el nombre, es un bloque capaz de albergar a otros bloques. ¿Por qué querrías hacer esto? Bueno, pues para crear secciones compuestas de varios bloques y otorgar al conjunto de ellos una apariencia especial, porque en este bloque puedes configurar un relleno o un margen específicos, colores, fondo, etcétera.

Call to Action Block

No confundir con un botón de llamada a la acción. Esto es un bloque completo pre-formateado como una llamada a la acción algo más completa. Incluye un titular, un subtítulo o párrafo y el botón con texto. Además también puede configurarse un color o imagen de fondo en el bloque para darle más énfasis al CTA.

gutenberg atomic blocks plugin

Testimonial Block

Un bloque para presentar testimonios o citas. Algo que alguien ha dicho y que muestras en la página, en resumen. Trae el típico formato parecido a un tuit. El texto, una pequeña imagen circular y el nombre y cargo de la persona. Con sus opciones de color, alineación y demás. Suficiente para casi cualquier caso.

Inline Notice Block

Es sencillamente un bloque pre-formateado para presentar una noticia destacada en algún lugar de tu pagina. La típica caja con encabezado y párrafo para presentar una información especial y aplicarle un estilo más llamativo. Personalización muy básica, colores, tamaños y poco más, con la opción de poder dejar que el usuario cierre la «notificación».

Sharing Icons Block

Un bloque especial solo para compartir los iconos que apuntan a las redes sociales. Se puede escoger que el botón sea el icono de la red social o uno genérico, y permite el redondeado de bordes, configurar el color de forma personalizada o dejar que el botón tenga el color característico de la red social. Muy sencillo pero uno de lo más útiles por la cantidad de tiempo que ahorra y sin tener que recurrir a otros plugins sociales. La pega es que solo soporta las típicas redes más populares pero tiene ausencias muy importantes y en cuanto te salgas de ahí te tienes que buscar la vida. Así a bote pronto lo más grave es que, por ejemplo, no tiene Instagram.

gutenberg atomic blocks plugin

Author Profile Block

Te permite insertar un bloque a modo de perfil de autor. Un avatar, un texto e incluso botones sociales como los del bloque anterior para invitar a seguirte en la red. Posibilidad de redondear la foto, una opción que no está en todos los maquetadores. Configuración básica de colores y tamaños.

Accordion Block

El popular bloque con «efecto acordeón». Funciona bien, está estupendo que lo incluyan, pero es probablemente el bloque más básico que tienen. Lo único que se puede configurar el tamaño de la fuente y si quieres que el acordeón esté abierto por defecto. Ni siquiera los colores, solo admite un gris universal.

Customizable Button Block

Un sencillo pero efectivo bloque para insertar un botón. Permite configurar el aspecto de forma muy básica, tamaño de botón y padding, bordes, colores, fuente, que el enlace se abra en una nueva ventana y poco más.

gutenberg atomic blocks plugin

Drop Cap

Un bloque que no se suele ver mucho y es un detalle que esté en el pack, pero bien podrían haber trabajado otro más útil (esta funcionalidad ya la trae WP de forma nativa), es un poco bloque de relleno. Incluye una letra capitalizada con algo de estilo. Pero la configuración es mínima. Puedes tocar el tamaño de la letra y si la quieres encapsulada en forma de cuadrado, en solitario o con fondo oscuro o claro. Fin.

Spacer & Divider

El obligatorio bloque para añadir un separador. También incluye un divisor configurable en color y tamaño pero solo con la opción de agregar una regla sólida, de líneas o puntos. Funcional para la mayoría de los casos.

Atomic Blocks Theme

El tema es bastante bueno para llevar un blog básico sin florituras. Con la tranquilidad añadida de que es de StudioPress. Sin embargo no esperes un Genesis o algo así. Se puede maquetar una página de forma muy minimalista y resultona con el tema y los bloques del plugin. Compruébalo tú mismo en la página de demostración del Theme (y a su vez de los bloques Atomic):

Opinión personal

Aunque StudioPress fue uno de los primeros en apoyar Gutenberg y sacar una combinación de Tema + Plugins apañada, se nota que lo hicieron por la visibilidad de estar en el ajo. Algo altamente respetable, yo habría hecho lo mismo si fuese tan crack como ellos.

Pero el proyecto no parece que vaya a evolucionar mucho más y no esperaría grandes cambios de este maquetador. Al menos lo actualizan con bastante frecuencia y es probable que caiga algún bloque extra más.

Sin embargo, si buscas un maquetador gratuito y muy sencillo en Gutenberg para no tener que comerte el coco con configuraciones extrañas y solamente elegir de entre lo poco que te ofrece, con Atomic Blocks lo tienes. Y el resultado, ya lo ves, es bonito y profesional. Si además necesitas un buen theme gratuito con la solidez y el mantenimiento (no Premium) de StudioPress, Atomic Blocks te ofrece el pack completo.

Te veo en la próxima entrega donde seguiré peinando el mercado de Bloques Gutenberg.

Deja un comentario