Rockfield: Buttons not rendering correct shape

lizkarkoski commented 5 years ago

Steps to replicate

add rockfield to simple test site
customize button text
view front end of site
check customizer view
compare button to theme demo https://rockfielddemo.wordpress.com/
compare button to theme setup instructions https://wordpress.com/theme/rockfield/

Result

Buttons are rendering as a black oval with black text. Only when hovering on the front end buttons does the text change to white and become legible. That is also when the white rectangle appears with in the black oval. The buttons on the demo and instructional page are just black rectangles with a white border frame and white text.

screen shot of demo site buttons: https://cloudup.com/cwIGOaFXRVg

Expected

Instead, the buttons look like this. Customizer view: https://cloudup.com/cQhwmDbdoUc Front end view: https://cloudup.com/cA2hEj059lO

[What you expected to happen.]

User report from forums: https://en.forums.wordpress.com/topic/rockfield-theme-download-buttons/#add-note
Follow-up ticket: https://en.forums.wordpress.com/topic/rockfield-theme-download-buttons/#add-note

ivan-ottinger commented 4 years ago

Another report: #3345115-zd

alaczek commented 4 years ago

This issue is quite old and the screenshots are not loading anymore. If someone could drop new screenshots here in the issue for reference, I could take a look. I tried replicating, but everything looks fine to me, so I'm probably missing something.

ivan-ottinger commented 4 years ago

Here is the screenshot:

Markup on 2020-09-27 at 12:02:06

I could have mentioned in my previous comment that the issue seems to apply to the File block only currently. My apologies.

Example page: https://testpremium262720522.wordpress.com/test-file-block/

alaczek commented 4 years ago

Thanks Ivan, that helps a lot!

So it looks like those are the default styles coming through from Gutenberg (I think?), and not being overwritten in the theme. The border-radius and padding in particular.

.wp-block-file .wp-block-file__button {
    background: #32373c;
    border-radius: 2em;
    color: #fff;
    font-size: .8em;
    padding: .5em 1em;
}

I tried a couple of Varia child themes (Barnsbury, Balasana, Exford), and all have the same issue. I wasn't able to replicate in TwentyTwenty or Seedlet though.

Barnsbury

Seedlet

Automattic / themes