Caption Elements: Settings don't work for galleries

[scruffian]

Description

The caption element settings aren't working for galleries. When a caption color is set using theme.json, the change works for the gallery caption, but not for the images inside:

This should probably be dealt with as part of #8030

Step-by-step reproduction instructions

1. Add this to the element part of theme.json:

				"color": {
					"background": "pink",
					"text": "black"
				}
			}

2. Add a gallery block to a post
3. Check that the gallery caption has the correct colors, but the images inside do not.

Screenshots, screen recording, code snippet

No response

Environment info

No response

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

[ramonjd]

Looks like a specificity issue. The elements styles are being overridden by block styles, e.g.,

gutenberg/packages/block-library/src/gallery/style.scss

Line 47 in c1d065f

background: linear-gradient(0deg, rgba($color: $black, $alpha: 0.7) 0, rgba($color: $black, $alpha: 0.3) 70%, transparent);

cc @glendaviesnz

[MaggieCabrera]

We have two problems here: one is the specificity, which it's the easy part, the other is that the block is adding a gradient, and the elements are only overriding the background-color. Solving specificity will not solve this problem, it ends up doing something like:

Applying both the gradient and background color.