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?

[synora]

Another report at 9327982-zen. The user would like to be updated when a fix has been completed. I provided the user with a CSS workaround for now.

[mxhassani]

9327145-zen
Video of the workaround:
https://github.com/user-attachments/assets/4d957eaf-11ff-48c3-a365-8d0a8da6e973

droplr

[mxhassani]

9337704-zen

[fushar]

I am not 100% what's happening. But, reverting #8615 on my sandbox fixes the issue for me.

@pkevan, we might want to revert or reconsider the approach? cc-ing also @alaczek / @richtabor for any insight.

[pkevan]

See: #5787 (comment)

[jorpdesigns]

9342814-zen

Site is on the Personal plan so couldn't implement a custom CSS workaround.

I was able to set a custom background color from Styles settings, but the button is still invisible in the hover state.

The user would like to be updated when a permanent fix has been implemented.

[mxhassani]

@jorpdesigns CSS isn't required here. Here is a predef:

I can confirm the issue you're facing. While there isn't a direct way to change the hover color of a button, it is typically following the secondary color set on the theme.
But in this case, the theme in question doesn't have a secondary color set, which results in the button taking using the background color instead.

The good news is there is a way to set a secondary color on the theme. I prepared this demo for you: https://href.li/http://d.pr/v/wJ9vCE

You can start by going to Appearance → Editor → Styles → Colors →Edit palette

Currently, the theme has 3 colors set:  
Foreground - 14453D
Background - FCF9F4
Tertiary - ECECE7

Your goal is to have 5 colors set instead:
Primary - 14453D
Secondary - The color of your liking. In the demo, I used a purple for illustration. You can try C2D6D3
Foreground - 14453D
Background - FCF9F4
Tertiary - ECECE7

For information, the values in question are HEX color codes, you can change those colors if you prefer.

[merkushin]

So, as I understand the issue it is related to the fact the styles in the parent theme are defined for the block "core/button".
That is the issue described in the post here: p6rkRX-6hi-p2

When applying global styles on top of block styles, the fundamental problem is that block styles take precedence, and so global styles aren’t applied

If I comment out that part in the parent theme, everything starts working.

One possible solution is to move the definition of styles to "elements" section, instead of "blocks". And at the moment, we have definition in both sections.

[merkushin]

I created these two draft PRs, testing them now…
#8643
156590-ghe-Automattic/wpcom-themes

[merkushin]

Unfortunately, the solution mentioned above is risky to apply. There are too many (37) dependent themes that will be affected.

On the other hand, it is still possible to set custom colors for a button, but we need to use styling for Blocks instead of styling for Elements.

Considering, that the parent theme (Blockbase) has styling specifically for the block, this looks pretty logical. Though, the duality in styling elements and blocks is confusing. Especially, for a person who is not familiar with themes.

But there is one unsolved issue with styling the hover state. I didn't find how to set colors for it from the Site Editor.

If nothing has changed since October 2023, the only way to set it is from CSS.

[inaikem]

@merkushin 👋

Considering, that the parent theme (Blockbase) has styling specifically for the block, this looks pretty logical. Though, the duality in styling elements and blocks is confusing. Especially, for a person who is not familiar with themes.

Thanks for your review and last comment above. Question: What do you see as the next steps here?

From my reading of it, the issue is prioritised as a Blocker but isn't actively being worked on by anyone. To me, that says it's either not/no longer a blocker and should be deprioritiesed, or that we should ensure it's allocated to a team for short-turnaround review.

Looping in @oskosk to help us unblock next steps 🙏

[alaczek]

I tested this today and changing button colors via Site Editor > Styles > Colors > Button resulted in:

• buttons on pages not changing colors at all. They remained default green.
• WooCommerce related buttons did change colors according to settings.

marl-buttons.mp4

the issue is prioritised as a Blocker but isn't actively being worked on by anyone

There were no invisible buttons in my testing on both simple and AT. While this is poor experience I don't think it's a blocker, so I'd be ok with changing status to normal.

Given that this is an older hybrid theme and also a child theme, with potential solution affecting all child themes of Blockbase, I don't know if we should attempt a fix. The workaround mentioned above (setting custom button colors via site Editor > Styles > Blocks > Button) works and is available on all paid plans.