Muestra condicionalmente los bloques de Gutenberg con Block Visibility

Nick Diego es un desarrollador de WordPress que trabaja en Automattic y que tiene unos cuantos plugins publicados en el repositorio de plugins, pero hay dos que destacan en mi opinión. Uno es The Icon Block y el otro es Block Visibility. En esta entrada os muestro la maravilla que es Block Visibility y lo que se puede hacer con él.

¿Qué es Block Visibility?

Gutenberg, el editor de bloques de WordPress, va mejorando poco a poco, y es mucho mejor que cualquier maquetador de páginas (Elementor, Divi, WPBakery Page Builder…) en cuanto a rendimiento y simplicidad. Pero todavía le faltan algunas cosas, como por ejemplo la capacidad de poder mostrar u ocultar los bloques de acuerdo a las condiciones que tú le digas. Esto es lo que soluciona Block Visibility.

Block Visibility es un plugin que se integra con el editor de bloques de WordPress (Gutenberg) y te permite aplicar condiciones de visibilidad a cualquier bloque. Esto incluye los bloques nativos de WordPress, los bloques de terceros e incluso los widgets basados en bloques.

Lo bueno es que el plugin tenía una versión de pago, pero Nick decidió no hace mucho tiempo hacerla gratis, así que todos podemos disfrutar de sus características, que son:

• Ocultar bloques para todos los usuarios
• Programar en qué fecha y hora se deben mostrar los bloques
• Mostrar u ocultar bloques según el tamaño de pantalla (móvil, tablet, ordenador)
• Mostrar u ocultar bloques según si el usuario está conectado o no
• Mostrar u ocultar bloques solo a roles o usuario específicos
• Mostrar u ocultar bloques según los parámetros de la URL
• Mostrar u ocultar bloques según su tipo de contenido o atributos (taxonomía, archivos, páginas, entradas…)
• Mostrar u ocultar bloques según de qué dominio/URL venga el visitante (referidos)

Aquí tienes algunos ejemplos de para qué lo puedes usar:

• Puedes crear un bloque de botón que solo se muestre en móviles para facilitar la navegación.
• Puedes mostrar un bloque de opinión solo a los usuarios que no están registrados o conectados para que confíen más en tu producto si es la primera vez que lo ven.
• Puedes mostrar un bloque de oferta especial solo a los visitantes que provengan de una campaña de marketing específica.
• Como Block Visibility es compatible con Advanced Custom Fields (ACF), podrías mostrar un bloque de video solo a los usuarios que hayan completado un campo ACF específico.

¿Por qué Block Visibility es tan bueno?

En primer lugar, porque no lo ha creado un don nadie. Nick Diego ha aparecido en varios podcasts, WordCamps, y ha trabajado (o trabaja) para WP Engine y Automattic. Es un admirador de Gutenberg y se nota en sus plugins.

Block Visibility es rápido, ligero, y lo que más valoro es que se integra a la perfección con el editor de Gutenberg. Una imagen vale más que mil palabras. Bueno, dos imágenes. Podéis ver que sigue las pautas de diseño y experiencia de usuario de WordPress. O en otras palabras, no se nota que es un plugin.

Y además de no introducir ninguna interfaz de usuario nueva, también te permite borrar todos los datos del plugin al desinstalarlo. Así te aseguras de dejar la base de datos bien limpia. Todos los plugins deberían incluir esta opción y muy pocos lo hacen realmente…

¿Cómo funciona?

Fácil, vamos a poner como ejemplo que queremos mostrar un botón solamente en móviles.

1. Instalamos el plugin.
2. Vamos a la página donde tengamos el botón, y en los ajustes de la barra derecha, hacemos clic en «Visibilidad».
   
3. Seleccionamos «Tamaño de pantalla».
4. Seleccionamos «Ocultar en dispositivos de escritorio» y «Ocultar en tabletas», tal que así:
   
5. Listo, guardamos la página.

Y así con todas las condiciones que queramos.

Y por si no tenemos suficiente, sus ajustes lo hacen muchísimo más versátil. Desde ahí podemos:

• Personalizar cómo se verán los bloques que tengan condiciones aplicadas en el editor.
• Restringir los controles de visibilidad a ciertos roles de usuario (administrador, editor…)
• Activar o desactivar condiciones en general. Por ejemplo, si sabemos que nunca usaremos la condición de usuarios conectados, la podemos desactivar para que nunca aparezca en el editor.
• Modificar qué entiende el plugin cómo tablet, móvil y ordenador. Es decir, le indicas al plugin que a partir de tantos píxeles de anchura, se considera que el dispositivo es un móvil, tablet u ordenador.
• Seleccionar a qué bloques Gutenberg se les puede aplicar las condiciones de visibilidad.

Prueba ya el plugin Block Visibility gratis: https://wordpress.org/plugins/block-visibility/