Button Styling Issue in Marl Theme: Button Text and Background

[michaelglorydev]

Quick summary

The button text color and background in the Marl theme take on the same color as the page background, making buttons invisible. This issue occurs regardless of the settings in Site Editor > Styles > Color > Button, as the global styles for buttons are not being applied.

Steps to reproduce

Tickets: 9325052-zen, 9323573-zen

Steps to Reproduce

1. Create a site using the Marl theme (tested on both Simple and Atomic sites).
2. Add a page and insert a Button block.
3. Set a color for the button background and text via Site Editor > Styles > Color > Button.
4. Publish or preview the page.

Expected Result
The button should display with the background and text colors as defined in the Site Editor > Styles > Color > Button settings.

Actual Result
The button background and text colors are set to match the page background, rendering the button completely invisible. Changing the settings in Site Editor > Styles > Color > Button has no effect. For customer's using the theme for WooCommerce stores, the Add to Cart button on the shop page is completely invisible.

Site owner impact

More than 60% of the total website/platform users

Severity

Moderate

What other impact(s) does this issue have?

Individual site owner revenue

If a workaround is available, please outline it here.

Users may attempt custom CSS overrides to manually set button styles.

Platform (Simple and/or Atomic)

Simple, Atomic, Self-hosted

[github-actions]

Support References

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

• 9325052-zen
• 9323573-zen
• 9327982-zen
• 9327145-zen
• 9337704-zen
• 9342814-zen
• https://wordpress.com/forums/topic/hover-over-button-color

[pkevan]

I think this is due to inheritance from the blockbase theme not being available on Simple and Atomic sites since the blockbase theme is a premium theme.

When you try this locally with a checkout from https://github.com/Automattic/themes/ the primary and secondary colors appear and the theme functions as expected.

Simple:

Locally:

[markbiek]

📌 REPRODUCTION RESULTS

I was able to reproduce this immediately from the page editor.

📌 FINDINGS/SCREENSHOTS/VIDEO

📌 ACTIONS

@pkevan It seems like you were the most recent person to work on Marl. Can you take a look at this issue?