Styled-components wrapper breaks spacing

  • Resolved Ninar0307

    (@ninar0307)


    1 week, 3 days ago

    Description:

    With AI Engine active, paragraph spacing collapses in the Gutenberg block editor — no visible gap between paragraphs while editing. The published front end is completely unaffected (normal spacing), so this is editor-only.

    What I found:

    Using Chrome DevTools, I inspected the paragraph block directly. The paragraph’s own computed margin-bottom is correct (32px) — so this isn’t a CSS override on the <p> element itself.

    The actual issue: right above my paragraph block in the DOM, AI Engine injects a <style> tag followed by an empty styled-components wrapper div:

    <div class="sc-bCwgXz hMoAxA neko-wrap...">

    This wrapper appears to sit inside the Gutenberg editor’s content flow itself (not scoped to AI Engine’s own admin UI), which disrupts the normal margin collapse/layout between blocks — even though each paragraph’s own margin value is unaffected.

    Steps to reproduce:

    1. Activate AI Engine (all other plugins deactivated to isolate).
    2. Edit any post with 2+ paragraph blocks in Gutenberg.
    3. Inspect DOM — neko-wrap styled-components div appears between blocks in the editor content area.
    4. Paragraph spacing visually collapses in the editor, though front end renders fine.

    Environment:

    • AI Engine version: 3.6.1
    • WordPress version: 7.0.1
    • Theme: Kadence

    This is on all of my WordPress sites (x5) and only seen on the backend edit blogpost screen. You can use californiaisforadventure.com if that helps but again, it’s happening on multple sites and only on the backend.

    Happy to provide more DOM/console output if useful.

    • This topic was modified 1 week, 3 days ago by Ninar0307.

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Plugin Author Jordy Meow

    (@tigroumeow)

    1 week, 2 days ago

    Hi, thanks for digging into this! You were right that it’s editor-only and caused by AI Engine. The exact cause was slightly different from the neko-wrap you spotted though: the AI Copilot feature was wrapping every paragraph block in an extra <div>, which nested paragraphs one level deeper than headings and lists, breaking margin collapse. Themes like Kadence that space top-level blocks stopped spacing paragraphs correctly as a result. The published frontend was fine since the wrapper only exists in the editor.

    I’ve fixed it so the wrapper no longer affects layout, and it’ll be out in an upcoming release. Thanks for helping pin it down! 😊

Viewing 1 replies (of 1 total)

You must be logged in to reply to this topic.