Introducción
Este artículo explica, paso a paso y con ejemplos, cómo estilizar el bloque de navegación de Gutenberg (nuevo bloque Menú) en WordPress. Se cubren buenas prácticas, formas de aplicar estilos seguros, integración con theme.json, cómo añadir estilos al editor y soluciones para menú responsivo (hamburguesa, submenús). Todos los ejemplos de código vienen listos para copiar y pegar.
1. Entender la estructura y buenas prácticas
El bloque de navegación crea un elemento nav con una estructura de listas internas (ul > li > a). Las clases propias de los bloques pueden cambiar entre versiones, por lo que la opción más robusta es añadir una clase CSS personalizada al bloque (propiedad Additional CSS class(es) en el panel del bloque) y apuntar a esa clase en tus estilos.
- Regla general: evita depender exclusivamente de clases internas del core usa una clase tuya como .mi-nav para mantener compatibilidad.
- Accesibilidad: mantén el foco visible, contraste suficiente y soporte de teclado para desplegables.
- Editor vs Frontal: añade estilos al editor para que el bloque se muestre similar mientras diseñas.
2. Cómo añadir una clase personalizada al bloque
- Selecciona el bloque de navegación en el editor.
- En la barra lateral, abre Advanced y en Additional CSS class(es) escribe, por ejemplo, mi-nav.
- Ahora puedes usar .mi-nav como selector principal en tu CSS.
3. Ejemplo: menú horizontal básico (CSS)
Este ejemplo transforma la lista en una barra horizontal, añade espaciado y estilos de enlace.
/ Clase aplicada al bloque: .mi-nav /
.mi-nav {
background: #0a2540
color: #fff
font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial
}
/ Contenedor de la lista: forzamos layout horizontal /
.mi-nav ul {
list-style: none
margin: 0
padding: 0
display: flex
gap: 1rem / separaciones entre ítems /
align-items: center
}
/ Ítems y enlaces /
.mi-nav ul li {
margin: 0
}
.mi-nav a {
color: #ffffff
text-decoration: none
padding: .6rem .9rem
border-radius: 6px
transition: background .18s ease, color .18s ease
}
.mi-nav a:hover,
.mi-nav a:focus {
background: rgba(255,255,255,0.08)
outline: none
}
4. Menú con logo a la izquierda y elementos a la derecha
Si el bloque contiene el logo como primer elemento o si lo colocas al lado del menú, puedes usar flexbox para separar el logo del conjunto de enlaces.
.mi-nav {
display: flex
align-items: center
justify-content: space-between
padding: .6rem 1rem
}
/ Contenedor principal: asumimos que el logo queda en primer lugar y la lista después /
.mi-nav > :first-child {
margin-right: 1rem / logo /
}
.mi-nav .wp-block-navigation__container, / fallback si existe /
.mi-nav ul {
display: flex
gap: 1rem
margin: 0
padding: 0
list-style: none
}
5. Submenús (dropdown) accesible y responsivo
El bloque de navegación anida submenús como ul dentro de li. Aquí una técnica CSS simple y accesible para desplegar submenús con hover y con foco táctil/teclado.
/ Submenú oculto por defecto /
.mi-nav ul ul {
display: none
position: absolute
background: #0a2540
margin-top: .4rem
padding: .5rem
border-radius: 6px
box-shadow: 0 6px 18px rgba(6,10,20,0.4)
min-width: 12rem
z-index: 40
}
/ Mostrar submenú cuando el elemento padre está en hover o cuando recibe foco dentro /
.mi-nav li:focus-within > ul,
.mi-nav li:hover > ul {
display: block
}
/ Estilos de enlaces dentro del submenú /
.mi-nav ul ul a {
display: block
padding: .45rem .6rem
white-space: nowrap
}
6. Menú hamburguesa para pantallas pequeñas (CSS JS)
El bloque de navegación ya cuenta con una versión responsiva, pero si quieres personalizar o crear tu propio control hamburguesa, aquí tienes un patrón sencillo: ocultar los enlaces en mobile y mostrar un botón que activa una clase is-open. Se recomienda añadir este JS al footer o en un archivo encolado.
/ Mobile: ocultar lista y mostrar botón /
.mi-nav .menu-toggle {
display: none / hidden on desktop /
background: transparent
border: none
color: inherit
font-size: 1.25rem
}
@media (max-width: 800px) {
.mi-nav ul {
display: none / hide by default on mobile /
flex-direction: column
gap: 0
}
.mi-nav .menu-toggle {
display: block
}
/ Cuando la clase is-open está presente, mostramos el menú /
.mi-nav.is-open ul {
display: flex
}
}
// JavaScript mínimo para alternar clase is-open
document.addEventListener(DOMContentLoaded, function () {
var toggles = document.querySelectorAll(.mi-nav .menu-toggle)
toggles.forEach(function (btn) {
btn.addEventListener(click, function (e) {
var nav = btn.closest(.mi-nav)
if (!nav) return
nav.classList.toggle(is-open)
btn.setAttribute(aria-expanded, nav.classList.contains(is-open) ? true : false)
})
})
})
En el HTML del bloque (editor) añade un botón con la clase menu-toggle mediante un bloque de HTML personalizado o usando un bloque de botón dentro del bloque de navegación y aplicándole esa clase CSS.
7. Añadir estilos al editor (editor stylesheet)
Para ver los cambios visuales dentro del editor, añade un stylesheet de editor desde functions.php y/o usa theme.json. Ejemplo de funciones para añadir soporte de estilos del editor:
8. Usar theme.json para estilos por bloque
En themes basados en bloques (o que usan theme.json) puedes definir estilos por bloque dentro de la clave styles para mantener coherencia. Ejemplo mínimo:
{
version: 2,
settings: {},
styles: {
blocks: {
core/navigation: {
spacing: {
blockGap: 1rem,
padding: {
top: 0.5rem,
bottom: 0.5rem
}
},
color: {
background: #0a2540,
text: #ffffff
},
typography: {
fontSize: 16px
}
}
}
}
}
Nota: theme.json controla propiedades reconocidas por el sistema de estilos. Para fine-tuning (posicionamiento absoluto de submenús, sombras complejas) aún necesitarás CSS adicional.
9. Registrar variaciones de estilo para el bloque
Puedes ofrecer variaciones (presets) a los editores mediante register_block_style, de modo que el usuario seleccione estilos predefinidos desde la barra lateral del bloque.
underline-links,
label => Enlaces subrayados
))
})
?>
Luego en tu CSS global defines la clase que se añade al bloque cuando el editor selecciona la variación, por ejemplo .is-style-underline-links .mi-nav a { text-decoration: underline }
10. Estado activo, foco y accesibilidad
- Asegura que :focus sea claramente visible incluso si ocultas outline. Usa outline-offset y un color de alto contraste.
- Usa aria-expanded y aria-controls en botones de hamburguesa para indicar el estado a lectores de pantalla.
- Verifica la navegación por teclado (tab, shift tab): los submenús deben poder abrirse con el teclado (focus-within es una ayuda en algunos casos se necesita JS adicional).
11. Depuración y pruebas
- Prueba en varios tamaños de pantalla y navegadores.
- Comprueba que el contraste cumpla con WCAG al menos 4.5:1 para texto normal.
- Usa la herramienta Inspect para comprobar si se aplican tus selectores y evita la necesidad de !important.
- Si un selector no funciona, asegúrate de que la clase personalizada esté en el bloque y que no haya reglas de mayor especificidad aplicando sobre ella.
12. Ejemplo completo (resumen práctico)
Pasos rápidos para aplicar un estilo personalizado y responsivo:
- Añade la clase mi-nav en el bloque Navigation (Advanced → Additional CSS class(es)).
- Crea archivo CSS (p. ej. assets/css/style-navigation.css) con las reglas de los ejemplos anteriores y encola o incluye en tu stylesheet principal.
- Añade editor-style.css con las reglas esenciales para que el editor refleje el diseño.
- Si necesitas toggling en mobile, encola el JS mostrado y asegúrate de que el botón hamburguesa tenga la clase menu-toggle y atributo aria-expanded.
- Registra variaciones de bloque si quieres ofrecer presets a editores.
Recursos útiles
Conclusión
Estilizar el nuevo bloque de navegación de Gutenberg es sencillo si sigues estas reglas: añade una clase personalizada al bloque, aplica CSS robusto (flexbox para layout, ocultar/mostrar submenús), añade estilos al editor y usa theme.json para mantener coherencia. Para comportamientos más complejos (APIs de accesibilidad, animaciones avanzadas, control total del toggle) combina CSS y un poco de JavaScript. Con estos patrones tendrás menús modernos, accesibles y fáciles de mantener.
Leave a Reply