Tutorial WordPress: Personalizar el bloque Navigation (menú) de Gutenberg con CSS avanzado

Introducción

El bloque Navigation (menú) de Gutenberg ofrece una estructura HTML limpia y flexible para construir menús dentro del editor de bloques. Con CSS avanzado puedes transformar ese bloque en menús altamente personalizados: menús centrados, con submenús desplegables accesibles, indicadores animados, versiones sticky y responsive, y mucho más. En este artículo verás las técnicas, selectores clave y ejemplos listos para usar. Inserta los fragmentos CSS/PHP tal cual en tu tema o plugin.

1. Preparar: cómo cargar tus estilos (front-end y editor)

Para que los estilos que escribas afecten tanto al front-end como al editor (que habitualmente muestra el bloque Navigation), registra y encola archivos CSS desde el functions.php de tu tema. Ejemplo práctico:

2. Selectores clave del bloque Navigation

La estructura del bloque suele incluir un contenedor con la clase wp-block-navigation y listas anidadas (ul/li). Es recomendable trabajar con selectores específicos al bloque para no afectar otros menús.

Selector	Descripción / uso
`.wp-block-navigation`	Contenedor raíz del bloque. Punto de partida para todas las reglas.
`.wp-block-navigation ul`	Selector para la lista principal y sublistas útil para layout con flex/grid y para ocultar/mostrar submenús.
`.wp-block-navigation li`	Elementos de menú ahí aplicas márgenes, posiciones relativas y control de submenús.
`.wp-block-navigation a`	Enlaces de navegación ideal para tipografía, colores, animaciones de hover y focus.
`.wp-block-navigation li ul`	Submenús típica base para dropdowns posicionados con absolute.
`.current-menu-item, .is-active`	Clases que pueden indicar el elemento actual. Incluye ambas para compatibilidad.

3. Ejemplos avanzados y recetas CSS

Cada bloque de CSS viene con explicación y consejos de personalización.

3.1 Menú horizontal centrado con separación fluida

Diseño clásico horizontal, centrado y con separación controlada por gap (flexbox). Soporta wrapping).

/ navigation-custom.css /
/ Base: centro, horizontal y responsivo /
.wp-block-navigation {
  --nav-gap: 1.25rem
  display: block
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial
}

.wp-block-navigation > ul {
  display: flex
  flex-wrap: wrap
  justify-content: center / centra horizontalmente /
  gap: var(--nav-gap)
  list-style: none
  margin: 0
  padding: 0
  align-items: center
}

.wp-block-navigation li {
  position: relative / para dropdowns /
}

.wp-block-navigation a {
  display: inline-block
  padding: 0.5rem 0.75rem
  color: var(--wp--preset--color--dark, #111)
  text-decoration: none
  font-weight: 500
  border-radius: 6px
  transition: background-color .18s ease, color .18s ease, transform .12s ease
}

.wp-block-navigation a:hover,
.wp-block-navigation a:focus {
  background: rgba(0,0,0,.05)
  transform: translateY(-1px)
}

3.2 Indicador animado (underline) con pseudo-elemento

Un subrayado animado que se expande desde el centro o desde la izquierda al hacer hover/focus. Buen efecto visual y accesible.

/ Animated underline /
.wp-block-navigation a {
  position: relative
  padding-bottom: 0.45rem
}

.wp-block-navigation a::after {
  content: 
  position: absolute
  left: 50%
  bottom: 6px
  transform: translateX(-50%) scaleX(0)
  transform-origin: center
  width: 70%
  height: 2px
  background: linear-gradient(90deg, #ff8a00, #e52e71)
  transition: transform 250ms cubic-bezier(.2,.9,.3,1)
  border-radius: 2px
}

.wp-block-navigation a:hover::after,
.wp-block-navigation a:focus::after,
.wp-block-navigation .current-menu-item > a::after,
.wp-block-navigation .is-active > a::after {
  transform: translateX(-50%) scaleX(1)
  left: 50%
}

3.3 Dropdown accesible (hover y focus-within)

Esta técnica usa el comportamiento por hover para dispositivos pointer y focus-within para teclado. Las sublistas se posicionan con absolute y se muestran con opacidad y transform para animaciones suaves.

/ Dropdown básico y accesible /
.wp-block-navigation li ul {
  position: absolute
  left: 0
  top: calc(100%   0.6rem)
  min-width: 12rem
  list-style: none
  margin: 0
  padding: 0.4rem 0
  background: #fff
  box-shadow: 0 8px 22px rgba(10,10,10,0.08)
  border-radius: 8px
  opacity: 0
  pointer-events: none
  transform: translateY(-6px) scale(.98)
  transition: opacity .18s ease, transform .18s ease
  z-index: 40
}

/ Mostrar cuando hover o foco interior (accesible con teclado) /
.wp-block-navigation li:hover > ul,
.wp-block-navigation li:focus-within > ul {
  opacity: 1
  pointer-events: auto
  transform: translateY(0) scale(1)
}

/ Items en el dropdown /
.wp-block-navigation li ul li a {
  display: block
  padding: 0.5rem 1rem
  white-space: nowrap
  color: #222
}

3.4 Versión mobile: colapsable con CSS (usar focus-within/checkbox si el markup lo permite)

Si tu Navigation block incorpora un botón o clase para alternar, puedes usar una solución pura CSS mediante un checkbox oculto (si puedes añadir ese markup) o adaptarlo a la clase que el bloque genera. Aquí muestro un patrón que usa una clase .nav-open aplicada al contenedor por JavaScript (muchos temas lo gestionan). Si no la tienes, implementa el toggle con JS o con un input checkbox en tu plantilla.

/ Responsive: menú vertical en mobile /
@media (max-width: 880px) {
  .wp-block-navigation > ul {
    flex-direction: column
    align-items: stretch
    gap: 0
    max-height: 0
    overflow: hidden
    transition: max-height .28s cubic-bezier(.2,.9,.3,1), opacity .25s
    opacity: 0
  }
  / Cuando el menú está abierto (clase .nav-open en el contenedor) /
  .wp-block-navigation.nav-open > ul {
    max-height: 60vh / limita altura y permite scroll interno /
    opacity: 1
  }
  .wp-block-navigation a {
    padding: 0.9rem 1rem
    border-bottom: 1px solid rgba(0,0,0,.04)
  }
}

3.5 Sticky header y efecto blur

Agrega posición sticky para mantener el menú visible y un fondo semi-transparente con backdrop-filter para un aspecto moderno (ver compatibilidad de backdrop-filter en navegadores).

/ Sticky header /
.header-wrap { / contenedor general donde colocas el bloque nav /
  position: sticky
  top: 0
  z-index: 60
}

/ Fondo con blur ajusta color/alpha según tu paleta /
.header-wrap .wp-block-navigation {
  background: rgba(255,255,255,0.7)
  backdrop-filter: blur(6px)
  -webkit-backdrop-filter: blur(6px)
  border-bottom: 1px solid rgba(0,0,0,0.06)
}

3.6 Variables CSS para tema y reducción de movimiento

Usa variables CSS para que el menú herede la paleta del tema, y respeta la preferencia del usuario por reducir animaciones.

:root {
  --nav-accent: #ff8a00
  --nav-text: #111
  --nav-bg: #fff
}

@media (prefers-reduced-motion: reduce) {
  .wp-block-navigation a,
  .wp-block-navigation a::after,
  .wp-block-navigation li ul {
    transition: none !important
    animation: none !important
  }
}

4. Editor (Gutenberg): aplicar los mismos estilos dentro del editor

Para que lo que ves en el editor refleje el front-end, añade un archivo CSS específico para el editor o encola el mismo CSS en enqueue_block_editor_assets como se mostró arriba. En algunos temas también conviene declarar support para estilos del editor con add_theme_support(editor-styles) y add_editor_style().

5. Buenas prácticas, accesibilidad y rendimiento

Evita depender de selectores frágiles: si usas clases internas generadas, revisa su consistencia entre versiones de WP. Mejor usar selectores por block name (.wp-block-navigation) y por estructura (ul/li/a).
Accesibilidad: asegura que los submenús sean navegables con teclado: usa :focus-within y comprueba que los enlaces sean foco-accessibles. Añade roles/aria donde haga falta en el markup si modificas la plantilla.
Reduce repaints: anima transform/opacity en lugar de width/height cuando sea posible.
Prefiere variables: centraliza colores y tamaños con variables CSS para facilitar mantenimiento y teming.
Compatibilidad: comprueba backdrop-filter y otras propiedades modernas y ofrece alternativas si es crítico para la experiencia.
Editor vs Front-end: encola estilos para ambos para evitar discrepancias visuales.

6. Tabla rápida de patrones y propiedades recomendadas

Patrón	Propiedades clave
Menú horizontal	display:flex gap justify-content:center
Dropdown	position:absolute transform opacity para animación pointer-events control
Mobile colapsable	max-height overflow transition toggling con clase JS
Indicador animado	::after transform: scaleX transition
Sticky	position:sticky backdrop-filter (opcional)

7. Conclusión

Personalizar el bloque Navigation con CSS avanzado te permite crear menús únicos y modernos sin tocar demasiado el HTML generado por Gutenberg. Trabaja siempre sobre .wp-block-navigation para mantener el alcance de las reglas limitado al bloque, usa variables para facilitarel mantenimiento, y combina transiciones con prefers-reduced-motion para accesibilidad. Inserta los fragmentos de ejemplo en tu archivo navigation-custom.css y encola desde functions.php tal como se mostró.

Notas finales

Antes de desplegar en producción, revisa la compatibilidad y prueba en varios navegadores y en móvil.
Si tu tema o plugin introduce clases o botones específicos para abrir el menú mobile, adapta los selectores .nav-open del ejemplo al HTML real que genera tu entorno.

SushiHost