Skip to content

Homepage block spacing expands shortly after initial render #2995

Description

@pirate-bot

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.phpAtomic_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.jscreateCompiler() 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.phptest_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)

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions