Global Styles: Elements: Captions text color not respected in front end.

[scruffian]

Description

When I try to set the caption text color, the CSS overwrites it, when a theme opts in to opinionated styles.

This happens when theme opt in to opinionated CSS, using the wp-block-styles theme support:
add_theme_support( 'wp-block-styles' );

To solve this we should move this CSS into the block.json file so that the user settings override it. However this is complex because the CSS comes from the theme.css file, not the standard block file. We might need to introduce a new key to block.json for opinionated block styles.

cc @adamziel @draganescu @getdave

Step-by-step reproduction instructions

1. Switch to empty theme
2. Add this to the theme.json under elements. Note that the text should be white:

			"caption": {
				"border": {
					"color": "grey",
					"radius": "10px",
					"width": "5px",
					"style": "solid"
				},
				"color": {
					"background": "limegreen",
					"text": "white"
				},
				"spacing": {
					"padding": "10px"
				},
				"typography": {
					"fontFamily": "sans-serif",
					"fontSize": "20px"
				}
			},

3. Add a table block with a caption.
4. Notice that in the front end the color of the text on captions is still grey

Screenshots, screen recording, code snippet

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

[scruffian]

One suggestion is that this could be expected behaviour, since the theme is opting in to opinionated styles using the theme support (add_theme_support( 'wp-block-styles' );)

If we go this route then:

1. We should document it somewhere
2. We would gradually expect block themes to stop using the wp-block-styles theme support.

@WordPress/block-themers - does this approach make sense to you?

[carolinan]

I fully expect to stop using wp-block-styles. The main reason why I still use it is because of the .has-background padding, not the captions.

I'd happily get rid of it completely but I don't know how to solve it for older themes.

[pbking]

Not using wp-block-styles indeed makes the most sense; I don't see that being helpful for block themes moving forward. To me that says "I'm going to be customizing CSS in this theme and I'm keen to start with some extra". I'm sure there are other areas where the opinionated CSS clobber Global Styles and I would rather see the use of the support phased out rather than building exceptions for them.

I think those things that are more generally helpful and opinionated, though not currently configurable (like .has-background padding which is a great example) should instead be surfaced another way (as a configurable block attribute or added in the theme's CSS).

[scruffian]

See also the comment here: #41140 (comment)

[scruffian]

I'm closing this on the understanding that we expect the opinionated block styles to override the styles set in theme.json.

[carolinan]

Is it really logicall that theme.json overrides all but one specific stylesheet?
Does it also override users global styles?

[justintadlock]

Just ran into this issue with Gallery > Image font sizes. Even drilling down with both of these options, and they are still overruled for gallery images:

"core/gallery": {
	"elements": {
		"caption": {
			"typography": {
				"fontSize": "var( --wp--preset--font-size--sm )"
			}
		}
	}
},
"core/image": {
	"elements": {
		"caption": {
			"typography": {
				"fontSize": "var( --wp--preset--font-size--sm )"
			}
		}
	}
}

[scruffian]

Since the load order of global styles CSS was changed this is no longer an issue.