Invisible cover block background colors

[akmetin]

Bug Description

Cover block background colors do not work as expected.

Expected Behaviour

Should render as in the editor.

Screenshots

PHP Version

8.1

Plugin Version

2.4.0

AMP plugin template mode

Reader

WordPress Version

6.1.1

Site Health

No issues

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]

@deepnees what primary (non-AMP) theme are you using?

We did seek to address this previously in #6039.

[thelovekesh]

I think a block-based theme is being used here.

Blocks-based themes rely on theme.json and our logic for determining styles, and the color palette is based on theme_support

amp-wp/src/ReaderThemeSupportFeatures.php

Lines 206 to 210 in 0737c78

	foreach ( array_keys( self::SUPPORTED_FEATURES ) as $feature_key ) {
	$feature_value = current( (array) get_theme_support( $feature_key ) );
	if ( ! is_array( $feature_value ) || empty( $feature_value ) ) {
	continue;
	}

Also, check this note. According to this we will need to get editor-color-palette from theme.json's color palette.

[milindmore22]

Yes, I tested it with TT1 theme
https://amp-support.rt.gw/2023/03/02/cover-background-color-test/?amp=1

[westonruter]

Looks like the way to get the theme.json data is via wp_get_global_settings( [], 'theme' ).

[westonruter]

And more specifically: wp_get_global_settings( [ 'color', 'palette' ], 'theme' )

[thelovekesh]

@westonruter Should we take into account the fluid font sizes that WordPress 6.1 offers?

[westonruter]

I'm not very familiar with them. If not taken into account, would the AMP version seem broken?

[thelovekesh]

Fluid font sizes are all about using clamp() and more of a responsive utility. So, it will not break AMP in any way.

It is being used in theme.json like:

"fontSizes": [
	{
		"fluid": {
			"min": "0.875rem",
			"max": "1rem"
		},
		"size": "1rem",
		"slug": "small"
	},
]

and being outputted as:

--wp--preset--font-size--small: clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 0.24), 1rem);

If fluid typography is not used, then it will use font size from default/theme presets:

--wp--preset--font-size--small: 13px;

[westonruter]

Got it. At the moment, these will be broken entirely due to php-css-parser failing to parse such complex CSS values. This was just raised in a support topic which we had already reported in #7291. I'm going to re-open the issue and think about a workaround.

[westonruter]

But yes, we should preserve fluid font sizes from the main theme when in Reader mode, same as we try to preserve the color palette. But the color palette is more important since lack of support can mean the text is impossible to read due to being white-on-white or black-on-black.

[pavanpatil1]

Cross-checked the issue and the fix is working fine. background-color is now visible and text is also visible properly in the reader mode. However, in the cover block, the background color for the paragraph inside the cover is visible outside the container.

[thelovekesh]

#7496 aims to fix the above issue. It happened because of p.has-background CSS which was implemented for every p.has-background selector instead of .amp-wp-article-content > p.has-background.

[pavanpatil1]

QA Passed ✅

Verified the fix. It is working as expected. The block style is visible properly.

[westonruter]

@deepnees This is now released on the WordPress.org Plugin Directory.