Wide/full blocks nested in Otter Section blocks lose their side gutter (forced to width:100%) since 4.2.6

[milicavs]

Description

Since Neve 4.2.6, full-width (.alignfull) and wide (.alignwide) blocks that are nested inside an Otter "Section" block are forced to width: 100%; max-width: 100% and lose their side gutter, so the content stretches edge-to-edge. Header, page title, and footer are unaffected; only the nested main content is impacted. It is most visible on mobile. Rolling the theme back to 4.2.5 restores the correct layout; a Neve Pro rollback has no effect. Confirmed reproduced on 4.2.6 vs 4.2.5.

Root cause

PR #4501 ("Updated alignment styles", closes #4427), commit f3fc9b36a, changed the alignment reset in assets/scss/components/main/_gutenberg.scss (frontend) and assets/scss/main/_gutenberg.scss (editor).

Before 4.2.6 the reset was scoped to sidebar layouts only and did not set width:

.nv-sidebar-left,
.nv-sidebar-right {
  .alignfull, .alignwide { max-width: 100%; margin-left: auto; margin-right: auto; }
}

In 4.2.6 it was broadened to any nested-block context and width: 100% was added:

.nv-sidebar-left,
.nv-sidebar-right,
[class*="wp-block-"]:has(> [class*="wp-block-"]):not(.alignfull):not(.alignwide) {
  :is(.alignfull, .alignwide) {
    width: 100%;      /* newly added */
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

The [class*="wp-block-"] catch-all matches every namespaced third-party block, including Otter's Section column (wp-block-themeisle-blocks-advanced-column). As a result, .alignwide/.alignfull blocks nested inside a full-width Section are clamped from Neve's base width (98vw/100vw, which left a small gutter) to width: 100% of the full-width Section, i.e. edge-to-edge.

Note on #4427: that issue (Section-block column overlap from a nested .alignfull heading) is legitimate and must stay fixed. The overlap fix does not require width: 100% — max-width: 100% already caps the 100vw and margin: auto cancels the negative breakout margins. Removing only the width: 100% line resolves this regression while preserving the #4427 fix (needs QA against #4427).

Suggested fix: drop width: 100% from the reset block in both assets/scss/components/main/_gutenberg.scss and assets/scss/main/_gutenberg.scss (keeping max-width: 100%; margin-left: auto; margin-right: auto).

Not fixed in 4.2.7 (starter-site/dependency updates only); still present on master.

Step-by-step reproduction instructions

1. Install Neve 4.2.6 and Otter Blocks (free). View logged out at a mobile width (~400px) where it is clearest.
2. Create a Page and add an Otter Section block set to Full width (gets alignfull), left/right padding 0, with a light background.
3. Inside the Section's column, add a Columns block (2 columns), and set that Columns block's alignment to Wide (alignwide). Give each column a background so the edges are visible.
4. Publish and view the page: the wide block stretches to the screen edges (no side gutter).
5. Switch the theme to Neve 4.2.5 and reload: the wide block now sits ~1vw in from the edges (gutter restored). The difference is the regression.

Instant confirmation without swapping themes: on 4.2.6, inspect the nested .alignwide element and, in the [class*="wp-block-"]:has(> [class*="wp-block-"]) … :is(.alignfull,.alignwide) rule, untick width: 100% and max-width: 100% — the gutter returns.

Screenshots, screen recording, code snippet or Help Scout ticket

Reported via Help Scout ticket #3368762279 (customer running Neve 4.2.6, Neve Pro 3.2.6, Otter/Otter Pro 3.1.11; layout broke across multiple sites after the 4.2.6 update).

Environment info

• Neve theme: 4.2.6 (regression), compared against 4.2.5 (working)
• Otter Blocks: 3.1.11 (unchanged; confirmed not the cause)
• Reproduced locally on 4.2.6 vs 4.2.5.

[girishpanchal30]

@milicavs, could you please provide a video or some screenshots demonstrating this regression? I'm not able to reproduce it. On both Neve 4.2.5 and 4.2.6, I'm still seeing the gutter spacing on both sides. You can see what I'm seeing in the screenshot below.

[milicavs]

@girishpanchal30 Sure, here's the video walking you through the reproduction:
https://www.loom.com/share/0123f8a6a6cf44e6a6a69d4ff633af4a

[girishpanchal30]

@milicavs I have fixed it with this PR #4534

[milicavs]

@vytisbulkevicius The issue was not fully fixed in the latest release.

#4534 only exempts one block type: :not(.wp-block-columns - the literal example I shared). Every other wide/full block inside an Otter Section column is still forced to width:100% and still loses its gutter.

CC @rodica-andronache @girishpanchal30

[girishpanchal30]

@milicavs I have fixed it with this PR #4538