CSS y bugs del tema Astra

Reglas y gotchas aprendidas durante la implementación. Antes de pelearte con CSS, lee esto.

Resumen ejecutivo

Astra sobreescribe algunas propiedades visuales en su cascada con suficiente especificidad como para que un CSS externo con !important NO baste. La única solución probada es inline styles sobre el elemento.

Propiedades que Astra ignora desde CSS externo

Propiedad	Síntoma	Workaround
`border-radius` (en imágenes)	El radio no se aplica	Wrapper `<span>` con `overflow:hidden` + inline styles
`list-style`	Bullets siguen visibles aunque pongas `none`	Inline `style="list-style:none;padding-left:0;"` en el `<ul>`
`height: auto` en `<img>`	El alto se fuerza por Astra	Inline `style="height:auto;"`
`clip-path` (en imágenes)	Ignorado	Wrapper con `overflow:hidden`

Avatares circulares (caso canónico)

Patrón que funciona en este sitio:

<span style="display:inline-block;width:40px;height:40px;min-width:40px;border-radius:50%;overflow:hidden;flex-shrink:0;">
  <img src="..." width="40" height="40"
       style="width:40px;height:40px;object-fit:cover;display:block;">
</span>

El border-radius:50% está en el span (no la imagen).
El overflow:hidden del span hace el recorte real.
La imagen es un block sólido sin radio propio.

`!important` NO siempre gana

Cuando Astra aplica sus reglas con igual o mayor especificidad en cascada, !important en CSS externo NO basta. La cascada de inline styles está por encima del CSS de tema, así que inline siempre gana.

NO añadir esto a CSS global

html { font-size: 125% }
zoom: 1.25

Rompe Smart Slider 3. El slider de la portada se descalibra (overflow, posicionamiento incorrecto de slides). Si necesitas escalar tipografía, hazlo selector por selector.

Selectores FSE vs Astra

Tipo de página	Selector del título
Post / page con template FSE (Twenty Twenty-Five)	`.wp-block-post-title`
Resto de páginas Astra clásicas	`.entry-title`

Si tu CSS de título no aplica, lo más probable es que estés apuntando al selector equivocado para ese tipo de página. Casi todo el sitio ya está bajo FSE.

CSS condicional inyectado en `wp_head`

fea-homepage.php inyecta CSS solo en las páginas que lo necesitan, en lugar de cargarlo en todo el sitio:

Portada: fea_is_front_page() true
Página autores-lista: ID 18636
Páginas EFFA: strpos($post->post_content, 'effa_') !== false || post_name contiene effa
Brevo: por page-id-43892 / page-id-43893 en la propia página

Esto evita conflictos con el resto del sitio.

`<table>` para layout en bloques FSE

CSS grid / flexbox no funciona bien dentro de bloques Gutenberg FSE en este sitio (algún bug de breakpoints). El layout multicolumna se hace con HTML <table> + inline styles. Ejemplos: EFFA hub, listado autores en 3 columnas (en su variante anidada), etc.

Contenido de páginas WP desde CLI: NO usar bloques Gutenberg

wp post update --post_content ' ... ' desde CLI guarda el bloque como texto literal y se renderiza así en la página ( se ve a ojo en pantalla).

Regla: desde CLI, escribir HTML plano con shortcodes. Los bloques solo desde el editor de Gutenberg (UI), nunca desde wp-cli.

`str_replace` en patches de PHP

Antes de hacer str_replace para parchear fea-homepage.php u otro fichero PHP, siempre verificar el string exacto con grep. Espacios, comillas y saltos de línea cambian entre revisiones y el str_replace silenciosamente no reemplaza nada.

grep -n 'fragmento exacto' wordpress/wp-content/mu-plugins/fea-homepage.php

Confirma que el match existe antes de aplicar el patch.

Resumen visual

Si algo no se ve como esperas:

¿Es border-radius / list-style / height en imagen? → inline.
¿Es bloque FSE? → .wp-block-*, no .entry-*.
¿Es selector con !important y no aplica? → probablemente Astra te sobreescribe. Usa inline.
¿Es layout multicolumna en Gutenberg FSE? → <table> con inline styles.