Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Homepage block spacing expands shortly after initial render

Abierto
  • ¿Algo no está bien?
#2,995 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
52/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Activo
Stack tecnológico
javascript, tailwindcss, wordpress
Área
frontend, testing-qa, web-dev

Línea de trabajo

Comienza con inc/plugins/class-atomic-wind-blocks.php y src/atomic-wind/tailwind/generator-frontend.js, luego ejecuta una reproducción en el navegador con contenido de Atomic Wind sin caché. Compara el espaciado calculado antes y después de atomic-wind:css-ready e inspecciona #atomic-wind-tailwind para comprobar cuál es la declaración ganadora. Revisa las pruebas de enrutamiento en tests/test-atomic-wind-blocks.php; se considera terminado cuando la hoja de estilos frontend retrasada ya no cambia el espaciado del bloque notificado y existe cobertura para el ciclo de vida.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

bug-report bug-report-triage

Summary

On an affected homepage, configured distances between Gutenberg blocks initially render correctly and then become larger shortly afterward. Block spacing is expected to remain consistent after the first paint. The transition disrupts the published layout and can substantially change page length and content grouping.

Customer context

Product / area: Otter Blocks frontend styling; likely Atomic Wind fallback path
Version: 3.2.3
Environment: Homepage using Gutenberg blocks; theme and browser not provided
Integration / third party: Unknown from available evidence
Reported error / symptom: Configured block distances appear initially, then become larger after roughly half a second
Impact: Published block layout shifts visibly after page load.

Reproduction notes

Reported workflow: open the homepage on Otter Blocks 3.2.3, observe the configured block distances initially, then observe larger distances after about half a second. Repository-derived conditional setup: Atomic Wind is enabled and frontend generation is reached because cached CSS is unavailable or late-rendered content requires generation. Runtime reproduction and exact markup are not available.

Diagnosis

Conclusion

Otter Blocks v3.2.3 contains a reachable frontend path that appends newly compiled CSS after DOMContentLoaded, after scanning class names across the complete document. Tailwind important mode makes recognized spacing utilities globally applicable with elevated cascade priority. This directly establishes a delayed CSS transition capable of changing an existing utility-class margin, padding, gap, or spacing declaration. The exact class responsible on the submitted homepage is not available.

Where this likely occurs
  • Frontend homepage rendering when an Atomic Wind post lacks cached _atomic_wind_css, or when late-rendered Atomic Wind content triggers generator fallback.
  • inc/plugins/class-atomic-wind-blocks.php — Atomic_Wind_Blocks::enqueue_base_css() lines 187–206 also resets margins on Atomic Wind blocks, while the generator fallback is selected by Atomic_Wind_Blocks::output_singular_css() lines 315–339 and Atomic_Wind_Blocks::output_late_css() lines 427–467.
  • src/atomic-wind/tailwind/generator-frontend.js — createCompiler() lines 46–52 enables Tailwind important mode; build() lines 54–75 scans class names on all document elements; the DOMContentLoaded callback lines 117–125 appends the generated stylesheet after compilation.
  • Commit 477e3141 introduced this frontend generator in the v3.1.9 ancestry while addressing Atomic Wind overrides of core-specific styles. The relevant compiler and append behavior remains in v3.2.3 (0c6ff15e).
Engineering notes

The delayed path is conditional: cached singular CSS is inlined before render and does not rely on the same post-load append. Because candidate classes are collected document-wide, recognized Tailwind spacing utilities are not limited to Atomic Wind descendants. The base stylesheet separately sets margins to zero for Atomic Wind block wrappers and paragraphs, but that CSS is attached through the WordPress style enqueue path rather than the delayed JavaScript append. The reported increase in spacing is most consistent with a generated utility collision; the unavailable page markup prevents identifying the precise declaration.

Test coverage status

tests/test-atomic-wind-blocks.php — test_output_late_css_falls_back_to_generator_when_counts_exceed() lines 1412–1432 and test_output_singular_css_enqueues_generator_without_cache() lines 1449–1458 cover routing into the generator. tests/test-css.php covers server-generated spacing values, but no relevant browser coverage was found during inspection for computed Gutenberg block gaps over the frontend generator lifecycle.

What to verify or explore next
  • A browser reproduction on v3.2.3 using uncached Atomic Wind content alongside Gutenberg elements carrying Tailwind-recognized spacing classes.
  • Computed margin, padding, gap, and block-gap values before and after atomic-wind:css-ready.
  • The affected selector and winning declaration from #atomic-wind-tailwind on the reported page shape.
  • Cached singular requests compared with missing-cache and late-render fallback requests.
Unknowns / follow-up

The report does not identify the blocks, spacing controls, Atomic Wind cache state, colliding class, theme, viewport, or browser.

Confidence

Confidence: 84/100

Repository inspection confirms a delayed, document-wide Atomic Wind stylesheet path in v3.2.3 that can override existing utility-class typography and spacing after initial paint. The other three submissions lack enough feature, environment, or reproduction detail to confirm a product defect.

Source: automated uninstall feedback — otter-blocks, 2026-08-23
Generated by bug-report-triage (ID: bug-report-triage_6a8bd0087959e6.44978995)

Lenguaje dominante
JavaScript
Estrellas
198
Forks
36
Merge medio
2 d 11 h
PR fusionados (30 d)
29

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de Codeinwp/otter-blocks

Todos los issues de Codeinwp/otter-blocks

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.