Automattic / Automattic/jetpack

Carousel: theme styles can overwrite the carousel styles

Open
#26,013 3 comments 0 reactions 0 assignees View on GitHub
[Feature] Carousel [Focus] Compatibility [Platform] Atomic [Platform] Simple [Plugin] Jetpack [Pri] Low Bug Triaged
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

### 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)

Screen Shot 2022-09-02 at 15 49 02

### 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:

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

Contributor guide

Open the contributing guide

Research direction

Reproduce the issue using the listed Jetpack Carousel, Dyad 2 theme, gallery, and attachment-page steps, then inspect the Carousel modal styles against the theme styles. Confirm the fix by verifying that image metadata, including the caption opened with the information icon, is visible without custom CSS.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, php, wordpress
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.