TT3: Inconsistent WooCommerce button styling

[tjcafferkey]

Describe the bug

The WooCommerce buttons are styled differently to the current themes buttons on TT3, this does not happen on TT2.

To reproduce

Steps to reproduce the behavior:

1. Activated TT3
2. Go To Appearance > Site Editor > Product Catalog and add a button to this template (or filter blocks) > Save.
3. Go to the Shop page
4. View the difference in button styles.
5. Go to the product page and now add to basket a related product at the bottom of the page
6. View another set of different buttons in the Mini Cart.

Expected behavior

Button styling should be consistent.

Screenshots

Shop page

Mini Cart

[tjcafferkey]

I suspect this will probably be fixed as part of this epic. Currently WC is missing theme support to load in the relevant theme assets for TT3 which haven't been created yet.

[gigitux]

I'm testing WC Blocks with this WC's PR, and everything look okay:

Pretty sure that we consider #7466 as a duplicate of this issue. @Aljullu, what do you think? For me, we can close both issues 👍

[Aljullu]

Thanks for investigating it! I can still reproduce the issue I reported in #7466. But, it looks like it's only reproducible if the link has never been visited. An easy way to test it is to visit that page from a private browsing window.

For reference, the buttons on top are added by an HTML block with these contents:

<a href="/" class="wp-block-button__link">Visited link</a>
<a href="/a-route-i-have-never-visited" class="wp-block-button__link">Not visited link</a>

Adding .wp-element-button to those links, fixes the issue. So I think we should fix it in the same way in the other buttons. Thoughts @gigitux?

[gigitux]

@Aljullu Oh, I didn't notice! I tested your suggestion, and it fixes the issue. In the same PR, should we address the fix for the Mini Cart Drawer button?

[Aljullu]

In the same PR, should we address the fix for the Mini Cart Drawer button?

I don't have a strong opinion. Personally, I don't think it's a blocker, but if you think that's something easy to fix, it would be good to include it. One thing, however, is that we should keep it consistent with Cart & Checkout buttons as well.

[gigitux]

I don't have a strong opinion. Personally, I don't think it's a blocker, but if you think that's something easy to fix, it would be good to include it. One thing, however, is that we should keep it consistent with Cart & Checkout buttons as well.

The fix is not immediate, so it is better if we postpone this. Is there a reason why the Cart & Checkout buttons don't inherit the style from the theme?

[Aljullu]

The fix is not immediate, so it is better if we postpone this.

Sounds good to me. 👍 It might be worth creating an issue so we don't forget about this.

Is there a reason why the Cart & Checkout buttons don't inherit the style from the theme?

It has some historical reasons. When we created the Cart & Checkout blocks we wanted to have more opinionated styles so we could apply good practices to increase conversion. However, with time, I think we should revisit that decision and just inherit as much as possible the styles from the theme; at least, text and background colors. Otherwise, those buttons look off compared to the other buttons.

[gigitux]

Sounds good to me. 👍 It might be worth creating an issue so we don't forget about this.

I created the issue #7522