Unable to opt-out of block gap styles for columns block

[grappler]

Description

Unable to opt-out of black gap styles for the columns block as of WordPress 6.0.

I am running a custom classic theme with a theme.json.

I would have expected that if not opted-in to the block gap styles, there would be no gap styles.

Seems like this was supposed to be the case based on #34491, but the Gap CSS is outputted regardless.

theme.json

```json { "version": 1, "settings": { "layout": { "contentSize": "940px" }, "color": { "custom": true, "customGradient": true, "link": true, "palette": [ { "name": "Black", "slug": "black", "color": "#111" }, { "name": "White", "slug": "theme-white", "color": "#fff" }, { "name": "Dark Grey", "slug": "dark-grey", "color": "#333" }, { "name": "Grey", "slug": "grey", "color": "#969696" }, { "name": "Light Grey", "slug": "light-grey", "color": "#ededed" }, { "name": "Magenta", "slug": "magenta", "color": "#d10074" }, { "name": "Light Blue", "slug": "light-blue", "color": "#c2e6f6" }, { "name": "Light Yellow", "slug": "light-yellow", "color": "#f7f191" }, { "name": "Cyan", "slug": "cyan", "color": "#49778b" }, { "name": "Light Cyan", "slug": "light-cyan", "color": "#7ec1cb" }, { "name": "Blizzard Blue", "slug": "blizzard-blue", "color": "#9fd6f1" }, { "name": "Orange", "slug": "orange", "color": "#f7a600" }, { "name": "Light Orange", "slug": "light-orange", "color": "#fab943" }, { "name": "Plum", "slug": "plum", "color": "#941e7b" }, { "name": "Buddha Gold", "slug": "buddha-gold", "color": "#b0a000" }, { "name": "Caper", "slug": "caper", "color": "#dde7ac" }, { "name": "Golden Sand", "slug": "golden-sand", "color": "#eadc72" }, { "name": "Pink", "slug": "pink", "color": "#f088b6" }, { "name": "Light Pink", "slug": "light-pink", "color": "#f5b5d2" } ] }, "typography": { "customFontSize": true }, "spacing": { "padding": true, "margin": true, "units": [ "px", "%", "em", "rem", "vh", "vw" ] } } } ```

Step-by-step reproduction instructions

1. Have a classic theme with a theme.json
2. Create a columns block with two columns and see a 2em gap on the frontend.

Screenshots, screen recording, code snippet

No response

Environment info

• WordPress 6.0

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[andrewserong]

Thanks for reporting this @grappler, I've added this as a task to the Layout tracking issue (#39336), it sounds like we need a more explicit way for themes to opt-out of layout / blockGap styles.

The 2em fallback gap was introduced in #41098 to ensure backwards compatibility, as the Columns block's CSS used to include a 2em margin between columns by default. That PR was introduced to fix the issue reported in: #40952.

[markhowellsmead]

See also #41431.

[annezazu]

@markhowellsmead seems to correctly cover this use case. Can we close this out and link to #41431 instead by chance?

[andrewserong]

Sure thing, I couldn't tell immediately from reading #41431 if it was the same use case (the desire to opt-out of blockGap styles for the column block altogether), but yes, it seems to be a double-up (or at the very least, best to consolidate the discussion and potential fix on the one issue).

Thanks for reporting this one @grappler (and for linking to the earlier issue @markhowellsmead)! I've updated the layout tracking issue (#39336) to point to #41431 instead.

[andrewserong]

I've added a follow-up comment in #41431 (comment) — let's continue the discussion over there!

[grappler]

I just found out it is possible to opt-out of the columns block gap using the following in the theme.json.

{
  "$schema": "https://schemas.wp.org/wp/6.0/theme.json",
  "version": 2,
  "settings": {
    "spacing": {
      "blockGap": false
    }
  },
  "styles": {
    "blocks": {
      "core/columns": {
        "spacing": {
          "blockGap": false
        }
      }
    }
  }
}

https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/#what-is-blockgap-and-how-can-i-use-it