Media & Text block does not apply theme colors on background property in Dalston Theme

[Jaykame]

Quick summary

Media & Text block does not apply theme colors on background property in Dalston Theme.

Steps to reproduce

1. Have "Dalston Theme" installed.
2. Insert "Media & Text" block in a new or existing page.
3. On block settings, choose a "theme" background color.
4. Background color is changed on the editor.
5. Preview/publish - background color is not set.
6. Insert another "Media & Text" block.
7. On block settings, choose a "custom" background color.
8. Preview/publish - background color is set.

What you expected to happen

The theme background color for the Media & Text block should change.

What actually happened

The theme background color for the Media & Text block did not change.

Context

Report from 5432436-zen

• Test on other themes: Heiwa, Appleton, Alonso & Blank Canvas and there is no issues on these themes.

Applying theme background color:

Applying custom background color:

Platform (Simple, Atomic, or both?)

Simple, Atomic

Theme-specific issue?

Dalston

Browser, operating system and other notes

Devices Tested:

• MacBook Air 2021
• MacBook Pro 2021

Reproducibility

Consistent

Severity

No response

Available workarounds?

Yes, easy to implement

Workaround details

1. Choose a custom color instead of a theme color.

2. Apply CSS workaround if wanting to use a theme color. E.g.:

.entry .entry-content .wp-block-media-text.has-secondary-background-color{
background: #000000;  /* Replace with HEX code of theme color choice */ 
}

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 5432436-zen
• [ ] 6051345-zen
• [ ] 6086175-zen

[Robertght]

📌 HOUSEKEEPING

• Labels ✅
• Priority ✅
• Replicable on Core - Yes/No

📌 SCRUBBING

• Tested on P2 - no
• Tested on Simple ✅
• Tested on AT ✅
• Tested on Self-hosted - no

📌 FINDINGS/SCREENSHOTS/VIDEO

• I'm unable to replicate this on my end. @Jaykame is this happening on a specific browser? Also, is it possible to see a test site where the issue happens?

📌 ACTIONS

• Await author feedback

[Jaykame]

• I'm unable to replicate this on my end. @Jaykame is this happening on a specific browser? Also, is it possible to see a test site where the issue happens?

@Robertght I updated the report (see above) with some gifs showing what is happening. In short, the Media & Text block would not take in theme colors options - be it default theme colors or added by user on theme customizer as theme colors. The background color would update when you pick a custom color instead.

I tried to apply the color added to the theme color in HEX code when using the custom color picker option, but that does not work once a color is set as a theme color.

Workarounds would be to choose a custom color (which would not be ideal if user wants to use the specific color they added to their theme) or apply CSS.

[Robertght]

Thank you @Jaykame !

[mdtanjid0]

• [ ] 6051345-zen ( needs to follow up ).

[christianguerrag]

The same issue was reported here 6086175-zen. Followed up with the CSS workaround.