Si estas usando Gutenberg, es posible que hayas tenido la necesidad de mostrar u ocultar elementos dependiendo si el usuario esta registrado o no, en este artículo veremos como realizar esto ya sea usando un plugin o directamente por código.
Visibilidad de bloques usando un plugin
La opción más simple es usar un plugin como Block Visibility para mostrar condicionalmente un bloque del editor Gutenberg.
Una vez instalado el plugin, con los ajustes predeterminados, verás que al ir al editor Gutenberg y seleccionar un bloque, verás que tienes una sección de visibilidad, selecciona perfil de usuario para mostrar opciones adicionales.
Aparecerán opciones de perfil de usuario que puedes usar.
Con esto el bloque seleccionado sólo será visible para usuarios registrados.
Visibilidad de bloques usando CSS
Otra opción, si quieres ahorrarte un plugin, es usar código CSS para ocultar o mostrar elementos. Sin embargo ten en cuenta que el código HTML de lo que vas a ocultar se genera igualmente y con CSS sólo lo estas ocultando de la vista del usuario
Para ocultar o mostrar elementos necesitas asignar a los bloques una clase CSS, tras seleccionar un bloque, ubica la sección de avanzado y luego clases CSS adicionales.
Agrega una nueva clase CSS, si ya tienes clases CSS en este campo, simplemente separa la nueva clase con un espacio.
Adicionalmente, para detectar si un usuario esta o no conectado nos ayudaremos de las clases CSS que genera WordPress, si un usuario esta conectado se genera la siguiente clase .logged-in a nivel de la etiqueta body.
El código para mostrar un bloque solo a usuarios registrados, usará la clase only-register-user y será:
body:not(.logged-in) .only-register-user{
display: none;
}
El código para mostrar un bloque solo a visitantes usará la clase only-guest-user y será:
body.logged-in .only-guest-user{
display: none;
}
Conclusión
De momento Gutenberg no tiene opciones de visualización de bloques, sin embargo como hemos visto en este artículo puedes usar un plugin para tener esta funcionalidad o directamente puedes asignar clases CSS para mostrar u ocultar bloques.
¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores.
Artículos Relacionados
(1 votos, promedio: 5,00 de 5)
Cargando...