search

Automattic / wp-calypso

The JavaScript and API powered WordPress.com
https://developer.wordpress.com
GNU General Public License v2.0
12.4k stars 1.98k forks source link

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

Closed ClassicRKR27 closed 1 year ago

ClassicRKR27 commented 2 years ago

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

https://user-images.githubusercontent.com/51870544/175398188-17ce808b-6261-42d4-b61e-614c482326eb.mp4

https://user-images.githubusercontent.com/51870544/175398317-2c8bbd4a-44ba-42f7-8da4-af125662b4f2.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:

https://user-images.githubusercontent.com/51870544/175397009-b8a3f2ff-1831-42ea-8874-c10b072e9f10.mp4

edequalsawesome commented 2 years ago

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:

2022-06-23 16 12 50

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 commented 2 years ago

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

https://user-images.githubusercontent.com/1519466/175459457-76446850-3caf-427a-8154-b8a73d11804a.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: Captured at 24-06-2022 at 15 49 47

khristiansnyder commented 2 years ago

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

My findings so far:

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

Markup 2022-06-24 at 11 24 36

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 commented 2 years ago

Reported here 6127121-hc

Followup 5323598-zen

jp-imagines commented 2 years ago

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.

edequalsawesome commented 2 years ago

Also reported in 5323732-zen, provided CSS workaround

hanananah commented 2 years ago

Reported in 5324212-zen

edwinho89 commented 2 years ago

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

Robertght commented 2 years ago

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

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

Theme: Sequential The user stated the change happened yesterday.

Robertght commented 2 years ago

Pinging in p1656142029379519-slack-C02FMH4G8

filipanoscampos commented 2 years ago

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

Please follow up:

Thanks!

kerrynicl commented 2 years ago

Another case report - HC-35902169

helenaartmann commented 2 years ago

Another case - 5325246-zd. Please follow up.

isocialtish commented 2 years ago

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

sudeepbaral commented 2 years ago

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

IoanaAMuresan commented 2 years ago

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 commented 2 years ago

Another report here: 5326449-zd-woothemes

i11za commented 2 years ago

Another report: 5327309-zd-woothemes

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 commented 2 years ago

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;
}
sharonlaker19 commented 2 years ago

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

kerrynicl commented 2 years ago

📌 HOUSEKEEPING

📌 SCRUBBING

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

Robertght commented 2 years ago

This should be fixed here(p1656418840448029/1656142029.379519-slack-C02FMH4G8) and the last report from @sharonlaker19 will be fixed here: https://github.com/WordPress/gutenberg/pull/42012/files

I'm going to close this for now to avoid more confusion. If other padding issues show up, please report them here:

https://github.com/Automattic/wp-calypso/issues/65033

cc @kerrynicl @chad1008 @scruffian

Robertght commented 2 years ago

Reopening for bulk replies cc @vajrasar

cecilearkay commented 2 years ago

Another one on the FR forums: https://wordpress.com/fr/forums/topic/probleme-daffichage-des-boutons/

arunsathiya commented 2 years ago
helenaartmann commented 2 years ago

Another report:

edwinho89 commented 2 years ago
becdetat commented 2 years ago

The user's theme is Cerauno.

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

rambogenius commented 2 years ago

Another report 35969016-hc

dcoleonline commented 2 years ago

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

msilbers commented 2 years ago
Jaykame commented 2 years ago

5426069-zen Applied the CSS workaround but this site has a custom CSS add-on and is not atomic. Cross reported here: https://github.com/Automattic/wp-calypso/issues/64880

I added the plain old and it worked:

.wp-block-button__link {
    padding: 1em; 
}
github-actions[bot] commented 2 years ago

Support References

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