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