Buttons block: altered styling(colors, padding, border-radius)

[ClassicRKR27]

Quick summary

Had a user report that their buttons were missing from multiple sites that are all using the Canape theme which seems to be a new bug.

Steps to reproduce

1. Switch your theme to Canape or Coherent
2. Make sure that the background color of the theme is set to white
3. Add a button block and make sure that the Style is set to Fill without selecting any colors

What you expected to happen

The button should turn to a lighter shade of the color specified by the theme.

What actually happened

The button turns white regardless unless you change the color settings on the individual button (this is also reflected within the Editor as well as you'll see in the video below). You also can't see the button text that you're writing unless the button is not selected.

Context

35886225-hc

Screen.Capture.on.2022-06-23.at.15-57-35.mp4

Screen.Capture.on.2022-06-23.at.16-06-48.mp4

Simple, Atomic or both?

Simple, Atomic

Theme-specific issue?

So far I've found this happens for both Canape and Coherent, though it may be affecting others. Does not seem to be affecting and FSE sites based on my testing but I can't guarantee that.

Browser, operating system and other notes

Consistent across Chrome, Safari, and Firefox

Reproducibility

Consistent

Severity

All

Available workarounds?

Yes, easy to implement

Workaround details

Currently the only consistent workaround I've found that is applicable to both Simple and AT sites is that you need to change the Styles option from Fill to Outline. There are CSS options, but it seems like this only works if you select the individual element (I've tried several variations of CSS selectors and couldn't get anything to work unless it was specifically called out for a single element).

Video of CSS issue:

Screen.Capture.on.2022-06-23.at.16-03-55.mp4

[edequalsawesome]

I was able to duplicate this on a site with a third-party theme as well, and the buttons didn't display correctly on the front-end anymore:

The Internet Archive version of this customer's site had the buttons showing as expected on May 24th, though, so this is likely due to the Gutenberg 13.5 update: https://web.archive.org/web/20220524123225/https://edwincarcano.com/mundo-generacional-emprender-en-tiempos-de-conflictos-armados/

Provided CSS to resolve this in 5321543-zen

[happychait]

I had the same user in 5322223-zen with a similar issue but the custom CSS we provided earlier didn't help.

Captured.at.24-06-2022.at.11.18.13.mp4

I suggested a more straightforward workaround: you can edit the button in the Outline mode, and once you are done editing, you can check the button style to Fill as following:

[khristiansnyder]

I've encountered a few instances of button formatting changing after the latest GB update.

My findings so far:

• The cases I have had have been button blocks all with the .wp-block-button__link class
• The buttons lose their padding and usually the radius that was set.
• Seems to happen on AT and simple sites and most themes including third-party.

Screenshot. Left is current, right side is using Wayback machine showing the proper padding for that button:

Workaround: I have been providing CSS to return padding to that CSS class, such as:

.wp-block-button__link {
    padding: calc(0.667em + 2px) calc(1.333em + 2px);
}

[poeticabdul]

Reported here 6127121-hc

Followup 5323598-zen

[jp-imagines]

Reported in 34937445-hc. Third-party theme. One Buttons block (2 buttons) were affected (turned white on white background) when hovered over. Advised user to switch to a different "style" (Outline) for now.

• Follow-up: 5324135-zd-woothemes

[edequalsawesome]

Also reported in 5323732-zen, provided CSS workaround

[hanananah]

Reported in 5324212-zen

[edwinho89]

A little far-fetched, but this chat in 35888729-hc had its button border radius removed, and may be related altogether.

[Robertght]

Another case in here(#5323361-zen) with the missing padding:

Left: incorrect/current state
Right: correct/previous state

Theme: Sequential
The user stated the change happened yesterday.

• Follow-up: #5323361-zen

[Robertght]

Pinging in p1656142029379519-slack-C02FMH4G8

[filipanoscampos]

Another case was reported in 5323571-zd-woothemesand here 5325320-zd-woothemes

Please follow up:

• 5323571-zd-woothemes
• 5325320-zd-woothemes

Thanks!

[kerrynicl]

Another case report - HC-35902169

[helenaartmann]

Another case - 5325246-zd. Please follow up.

• 5325246-zd

[isocialtish]

Another report of this with Social Media icons missing 5326590-zd. Disabled Gutenberg for now. Please follow up to re-enable the plugin.

[sudeepbaral]

Another case here: 5309318-zd I suggested them to switch the button style to Outline and shared the CSS workaround.

[IoanaAMuresan]

Another report here: 5323639-zd simple site (Personal plan) -> suggeste the Fill to Outline workaround + creating a Reusable block they can use to more easily replace them.

[i11za]

Another report here: 5326449-zd-woothemes

• Simple site (Personal plan)
• Theme: Plane
• Suggested the Fill to Outline workaround.
  Please follow up once there's a fix. Thanks!

[i11za]

Another report: 5327309-zd-woothemes

• Simple site (Premium plan)
• Theme: Scratchpad

All buttons on the site were set to 36px radius, but have been reset.
They're using reusable blocks already to update, but have a lot of buttons to fix. I shared the following CSS which seems to be working:

.wp-block-button__link {
	padding: calc(0.667em + 2px) calc(1.333em + 2px);
	border-radius: 36px;
}

[anuguywp]

Another case here: 35914739-HC

Provided CSS put together by previous comment:

.wp-block-button__link {
	padding: calc(0.667em + 2px) calc(1.333em + 2px);
	border-radius: 36px;
}

• 5330360-ZEN Please follow up.

[sharonlaker19]

+1 at 35509748-hc, shared CSS workaround in 5332545-zen

[kerrynicl]

📌 HOUSEKEEPING

• Labels ✅
• Priority ✅

📌 SCRUBBING

• Tested on Simple ✅
• Tested on AT ✅

📌 FINDINGS/SCREENSHOTS/VIDEO
Replicable on Simple and AT
📌 ACTIONS

• Marked as Triaged for Quality Squad review

[arunsathiya]

• Quick clarifying note that this will be fixed only when Button Elements: Allow element styles in classic themes WordPress/gutenberg#42012 is merged. Related chat with @scruffian here: p1656579562681109/1656575923.679859-slack-C034TMVE5CM cc @Robertght
• We'll leave this open for a bit more and track customer reports.

[helenaartmann]

Another report:

• 5339955-zen

[edwinho89]

• 5338841-zd-woothemes

[becdetat]

• Another report: 5338885-zd-woothemes

The user's theme is Cerauno.

Text is "invisible" - same background and foreground - even with the Default colours selected.

[rambogenius]

Another report 35969016-hc

[dcoleonline]

I believe this was also the issue in 5365410-zd
They've manually fixed it on their site.

[msilbers]

• 5372892-zd-woothemes

[Jaykame]

5426069-zen Applied the CSS workaround but this site has a custom CSS add-on and is not atomic. Cross reported here: #64880

I added the plain old and it worked:

.wp-block-button__link {
    padding: 1em; 
}

[github-actions]

Support References

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

• 5321543-zen
• 5322223-zen
• 5323598-zen
• 5324135-zen
• 5323732-zen
• 5324212-zen
• 5323361-zen
• 5323571-zen
• 5325320-zen
• 5325246-zen
• 5326590-zen
• 5309318-zen
• 5323639-zen
• 5326449-zen
• 5327309-zen
• 5330360-zen
• 5332545-zen
• 5339955-zen
• 5338841-zen
• 5338885-zen
• 5365410-zen
• 5372892-zen
• 5426069-zen

[jp-imagines]

I think the user in 31797310-hc had experienced this too (Gateway theme).

All buttons were black with white text, but three were changed to white with black text (and white text on hover, turning them fully invisible); the other one was changed to gray with black text for some reason. No settings in the block editor indicated any changed/custom colors on all four buttons.

[vajrasar]

Hi everyone 👋 Just a quick note to let you all know @Automattic/dotcom-triage-pa-group has finished following up with the affected users reported in this thread.

Thanks for the reports, please let us know here if you see any future recurrence of the issue.

[Joshgrygiel]

📌 SCRUBBING : RESULT

• Tested on Simple: Yes
• Tested on AT: Yes
• Tested on Self-Hosted: Yes
• Tested on P2: No
• Replicable on Core: No

📌 FINDINGS/SCREENSHOTS/VIDEO

RESULT: I can confirm the button appears invisible when added to the Canape theme:

ATOMIC:

SIMPLE:

Self Hosted (Not replicable):

📌 ACTIONS

Reopened report

[scruffian]

I created a fix for this here: WordPress/gutenberg#43981