Carousel: theme styles can overwrite the carousel styles

[jeherve]

Impacted plugin

Jetpack

Steps to Reproduce

1. Start with a site that's connected to WordPress.com, and where you've activated the Carousel feature under Jetpack > Settings > Writing
2. Install and activate the Dyad 2 theme from the WordPress.com showcase
3. Create a new post, insert a gallery block, and upload images from Pexels (they will all have extra information like caption and description that will be useful for our tests)
4. Set the gallery settings to link to the attachment page
5. Publish your post
6. View the post, and click an image to open the carousel modal

A clear and concise description of what you expected to happen.

All the image's metadata should be clearly visible

What actually happened

Some of the theme's styles overwrite the default Carousel styles, and we end up not being able to see the image caption (when clicking on the i icon at the bottom of the gallery view)

Browser

No response

Other information

No response

Platform (Simple, Atomic, or both?)

Simple, Atomic, Self-hosted

Reproducibility

Consistent

Severity

Some (< 50%)

Available workarounds?

Yes, difficult to implement

Workaround details

You can set up your own custom CSS to overwrite the theme styles:

.jp-carousel-photo-info h3 {
    color: #fff;
}

[Robertght]

I can see this is on our project board.

Should this be fixed within the themes directly or can it be addressed inside Jetpack? 🤔

[coder-karen]

Jumping in here with some thoughts as @jeherve is away. I'd interpret this to suggest that since any theme's styles could overwrite the Carousel styles (Dyad 2 given as an example but there could be more), then working out if there is a good fix (from within Jetpack) could be good - unless on deeper investigation it turns out that this is not an easy fix (too easy to be manipulated by themes for example).

[Robertght]

Sounds good! Thank you @coder-karen !