[Gallery] Gutenberg 19.1 text-shadow and background for image captions break theme design

[justintadlock]

Gutenberg 19.1 introduced a new text-shadow rule for image caption text and changed the how caption backgrounds are applied. This breaks the theme's default design for gallery image captions. In particular, it nearly makes the text for the Classic Gallery style variation tough to read.

• https://github.com/WordPress/gutenberg/pull/63471

To fix this, the theme needs some CSS to unset/overwrite what Core is doing in a way that's also back-compatible with WP 6.6.

[justintadlock]

Thought: it might be worthwhile taking this over completely from the theme's end to avoid conflicts when things change in Core in the future. At least until gallery image captions are customizable via theme.json.

[paaljoachim]

I am adding custom code to move the gallery image caption to below the images and now the text is blurred. I added a comment here: https://github.com/WordPress/gutenberg/pull/63471#issuecomment-2327286505 I am having a difficult time using !important to remove the text shadow.

Edit: I was able to improve the image caption. I noticed that the Image caption background areas is blurred when Gutenberg plugin 19.1 is active and the blurriness is gone when the plugin is not active.

[justintadlock]

You should be able to avoid !important with something like this:

.wp-block-gallery figure.wp-block-image figcaption {
    text-shadow: none;
}

If that doesn't work, you can double up on the gallery selector and use .wp-block-gallery.wp-block-gallery. Personally, I'm using a custom block style for "classic galleries" instead of styling the main gallery, so my code is slightly different.

As for the blurred background over the image, Gutenberg moved this to the <figure> element. It was previously on the <figcaption>. So, I had to add this to remove it:

.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption):before {
    display: none;
}