Gallery block: Gap set in theme.json is overwritten by default value

[andersnoren]

Description

If you set a custom blockGap value on the gallery block in theme.json, that CSS is output in the editor and on the front-end, but it's overwritten by the CSS for the default value which has a higher specificity.

This is the CSS output for the theme.json value, with a 0.1.0 specificity:

.wp-block-gallery-is-layout-flex {
    gap: 200px;
}

And this is the CSS output for the default value, with a 0.2.0 specificity:

.wp-block-gallery.wp-block-gallery-12 {
    --wp--style--unstable-gallery-gap: var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) );
    gap: var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) );
}

Expected behavior

The blockGap value set in theme.json should overwrite the default value.

Step-by-step reproduction instructions

1. Activate Twenty Twenty-Four.
2. Create a new post, add a gallery block, and insert a few images.
3. In the TT4 theme.json file, locate styles.blocks.core/gallery.spacing, and add "blockGap": "200px".
4. Inspect the gallery block in the post. The 200px value will be overwritten by the default value, like in the screenshot.

Screenshots, screen recording, code snippet

Environment info

WordPress 6.5
With or without Gutenberg 18.0.0 active
Twenty Twenty-Four 1.1

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 opening this issue! It's very similar to #56554 which asks for the UI to be available in global styles. In both cases I believe the blocker is that the Gallery block includes ad hoc output of default rules for backwards compatibility, which interferes with opting-in for global styles. One potential option could be to perform a look-up to see whether or not a global styles rule for gap is set before outputting the fallback rules. That should be possible in the PHP-side, however in the block editor would likely require something like #59929 to land first, in order to be able to check whether or not the global styles value is set before outputting the rules via JS.

It would be really good to address this one way or another, though, as not being able to set global gap for Gallery blocks is quite a missing feature!