Add caption styles in theme.json

[ndiego]

I think it would be worthwhile to add caption styles in theme.json. In doing a bit of testing, there is a good amount of visual inconsistency between the Editor and Frontend. This is due to Editor specific styles that do not get loaded on the Frontend, which is a separate issue in my opinion. But until that is address/discussed in Gutenberg, simply adding theme-specific caption styles in theme.json would solve this.

Editor:

Frontend:

[carolinan]

Hi Nick!
Captions are already parts of theme.json elements, does it not work for you?
https://github.com/WordPress/gutenberg/blob/trunk/schemas/json/theme.json#L1256

{
	"version": 2,
	"styles": {
		"elements": {
			"caption": {
				"color": {
					"text": "#111111"
				},
				"typography": {
					"fontSize": "0.8rem",
					"lineHeight": ".7",
					"textTransform": "uppercase"
				}
			}
		}
	}
}

You may also be interested in WordPress/gutenberg#44094

[carolinan]

I am an idiot 😆 I mistook this for being in the Gutenberg repo, not TT3.

[bgardner]

Not sure the best path forward here, as image captions currently have center text align per this, in theme.css:

.wp-block-image figcaption {
    color: #555;
    font-size: 13px;
    text-align: center;
}

But theme.json does not support text align for captions (in elements), which means visual parody is not possible. (Unless I'm missing something.)

[ndiego]

Good call @bgardner.

@mikachan I just realized what the main issue is. We are not opting into WP block styles, i.e. add_theme_support( 'wp-block-styles' ); This is fine, but then you have to add them all yourself, which we are not doing. The issue arises with the Code block as well. It looks fine in the Editor, but the Frontend has no style. Enabling add_theme_support( 'wp-block-styles' ); fixes this, as it does with the caption styles.

[mikachan]

Ahh I see, thanks for looking into this further. I've actually just opened an issue for something similar to this here: WordPress/gutenberg#44510

I noticed that the block styles stylesheet is included in the editor, even when the theme doesn't opt into wp-block-styles. I'm wondering if this is correct, as it causes issues like this, where the styles are different between the editor and the front end. But I could be missing some context on why we need this stylesheet to always be used in the editor.

[carolinan]

@aristath and I discussed this earlier this week, but did not start working on a solution:
#202 (comment)

[mikachan]

Ugh sorry @carolinan, I completely forgot about that issue and I haven't kept up with the conversation there. The comment you've linked to is particularly interesting, I'll let you know if I manage to take a longer look into this.

[ndiego]

I wonder if the inclusion of the theme.css file in the Editor when support for block styles is not added is simply a mistake or maybe there are backward compatibility reasons for non-block themes? 🤔

[mikachan]

WordPress/gutenberg#44640 may fix this issue 🎉

[mikachan]

Fixed with WordPress/gutenberg#44640 🙏