Captions with hyperlinks have a dark colour that's not compatible with the black captions banner - Twenty Twenty One theme

[jamesozzie]

Bug Description

When there is a caption with a hyperlink in a gallery block this hyperlink is unreadable when it's displayed as a carousel on AMP URLs. This is only applicable for the Twenty Twenty One theme and was identified by one user in the support forums.

Recording of this experience.

Gif of experience below:

This is not an issue with the Twenty Twenty or Twenty Nineteen themes, with the hyperlink font color white and underlined. The same approach would be suitable for Twenty Twenty One.

Expected Behaviour

The figcaption color should be more readable.

The below CSS rule works as a temporary solution:

figcaption.amp-wp-gallery-caption a {
    color: #fff;
}

Screenshots

No response

PHP Version

No response

Plugin Version

2.2.0 Alpha

AMP plugin template mode

Standard

WordPress Version

5.8

Site Health

No response

Gutenberg Version

No response

OS(s) Affected

No response

Browser(s) Affected

No response

Device(s) Affected

No response

Acceptance Criteria

No response

Implementation Brief

No response

QA Testing Instructions

No response

Demo

No response

Changelog Entry

No response

[westonruter]

The .amp-wp-gallery-caption currently has this white color alread:

amp-wp/assets/css/src/amp-default.css

Lines 54 to 63 in 2e31d81

	amp-carousel .amp-wp-gallery-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.5);
	color: #fff;
	padding: 1rem;
	}

So yeah, I think it's just a matter of adding:

amp-carousel .amp-wp-gallery-caption a {
    color: #fff; 
}

[bartoszgadomski]

I think this is more a Gutenberg stylesheet issue rather than AMP, as the same appears in Block editor:

Twenty Twenty-Two theme (editor)

For Twenty Twenty theme, this issue is resolved in editor only, the same black link text appears on front-end:

Twenty Twentytheme (editor)	Twenty Twentytheme (front)

I think could suggest adding new CSS property here: https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/gallery/style.scss#L48-L66, something like:

figcaption {
    [...]

    a {
        color: inherit;
    }
}

This should resolve reported bug as well.

[bartoszgadomski]

Gutenberg issue: WordPress/gutenberg#37032
PR with fix: WordPress/gutenberg#37033

[westonruter]

What about when the gallery has “Display as carousel” enabled?

I think that's the issue here. However, it seems that the new carousel is not working with the latest Gallery block in WordPress 5.9-beta (and the latest Gutenberg).

Could you double check that? Try enabling carousel on a Gallery block in WordPress 5.8, and then try doing the same in WordPress 5.9-beta1 (or the latest Gutenberg). Set the gallery to link to the attachment page so that the captions get hyperlinks.

[maitreyie-chavan]

@delawski please could you take a look at this and see if any further updates need to be made by us?

[delawski]

@maitreyie-chavan There still was an issue with the caption colors. It's addressed and now waits for a code review (#6907).

[pooja-muchandikar]

QA Passed ✅

Captions with hyperlinks looks better.
Themes Tested: Twenty Twenty One, Twenty Twenty Two and Twenty Twenty

Twenty Twenty One

---

Twenty Twenty Two

---

Twenty Twenty