issue with Wp buttons having a transparent background post 5.5 update

Hi,

I’ve tried to reproduce what you reported with both WordPress 5.4.2 and WordPress 5.5. I’ve also tested creating a post in WP 5.4.2 and then migrating to WP 5.5.

This is what I’ve found using the TwentyTwenty theme and no plugins:

– The editor & front reflect the same styles.

– The background color takes effect when the button doesn’t have a style set (or it’s “Fill”). The background color isn’t applied when the style is “Outline” (unless the user selects a custom color on purpose).

This seems to be working as expected for me.

I’ve noticed that in the staging site you shared (as well as on the page you need help with) all the buttons have the CSS class ‘is-style-outline’. This suggests that the buttons’ style was set to “Outline” at some point. If you remove that style, the background color will be shown.

Is this helpful?

Actually! I was just able to reproduce with some frest installations. These are the steps:

1. Add a button.
2. Select a background color.
3. Set the style to outline (the background color is still present).
4. Publish.

In WordPress 5.4, both the editor and front have the background color. In WordPress 5.5, the editor shows the background color but the front doesn’t.

I’ll come back when I know more.

• This reply was modified 4 years, 6 months ago by André Maneiro.
• This reply was modified 4 years, 6 months ago by André Maneiro.

Thanks very much for your speedy reply.
Maybe it’s my misunderstanding and perhaps I didn’t create the buttons as they were intended to be used but nevertheless all these buttons had brightly coloured fills before the update (mostly red, orange or blue). You are correct – when I re-designed the various pages back in May I chose an outline style but I also chose a fill to go with it.

Several on my front page are on a basically black background so a transparent background wouldn’t have worked or passed the inspection! Each one is designated a color for a reason so again I know which buttons were orange, blue or red – so it is weird …
When I ‘inspect’ the button (on the staging site for example) the html reads:
Go to BallotBuddy

Doesn’t this suggest a blue background? And as I say 1. when I look at this or any of the other buttons in page edit mode all the buttons still display the color I originally chose and would expect to see reflected on the output page. 2. Other buttons on the page that also have outline style but a custom color fill rather than one of the default colours have remained in order (‘Spain as a golfing destination’ for example).

Thanks for looking into this for me and if I basically need to go and re-edit my various pages then that’s tedious but achievable – just didn’t want a ‘fix’ to appear and have to undo it again..

Sorry forgot the code …<a class="wp-block-button__link has-very-light-gray-color has-vivid-cyan-blue-background-color has-text-color has-background" href="https://staging1.gingerbeergolftravel.com/st-andrews-old-course-single-golfer-ballot/" style="border-radius:32px">Go to BallotBuddy</a>

I missed your reply while compiling this – I will wait to hear from you, thanks

Hi,

I’ve found this to be a bug in the block editor. There’s a fix for this at https://github.com/WordPress/gutenberg/pull/24599 that will be shipped with the next release of the plugin editor (Gutenberg, to be shipped August 31st).

I don’t know if/when there’s going to be a WordPress 5.5.1 release. If/when there’s one, this fix will be part of it as well.

Best,

• This reply was modified 4 years, 6 months ago by André Maneiro.

Hi,

I think I’ve found another issue with this. If I apply a different text color on an outlined button, the color is not applied as default text color from the block itself is overriding it.

The block native style of:

.is-style-outline .wp-block-button__link,
.wp-block-button__link.is-style-outline {
	color: #32373c;
	background-color: transparent;
	border: 2px solid;
}

Will override the theme’s:

.has-bada55-color {
	color: #bada55;
}

Could you please make sure to apply the color on the button link only if it does not have a text color applied? Basically, changing the default block styles to:

.is-style-outline .wp-block-button__link,
.wp-block-button__link.is-style-outline {
	background-color: transparent;
	border: 2px solid;
}

.is-style-outline .wp-block-button__link:not(.has-text-color),
.wp-block-button__link.is-style-outline:not(.has-text-color) {
	color: #32373c;
}

Thanks!

I’ve actually went ahead and created an issue and a pull request fixing it at https://github.com/WordPress/gutenberg/issues/24625

Thanks for getting to the bottom of this for me. The links text is not a big surprise either – I found it acted weirdly even before 5.5 so guess there is a little glitch there.

Thanks very much

Hi @nosolosw,

Any update when the fix could be added to the WP core please? Or should we report the issue somewhere else then https://github.com/WordPress/gutenberg/issues/24625 ?

Thanks.

Oliver