Skip to content

Conversation

@Aljullu
Copy link
Contributor

@Aljullu Aljullu commented Dec 29, 2022

All Submissions:

Changes proposed in this Pull Request:

This PR adds a .woocommerce-block-theme-has-button-styles class to the body element of the page if the theme in use is a block theme that defines button styles in theme.json using the Elements API. Using that class, we then disable all button styling provided by WC core (I used a :where() selector so these changes shouldn't affect the specificity of CSS selectors).

Closes woocommerce/woocommerce-blocks#7972 (Shop and product page buttons).

  • This PR is a very minor change/addition and does not require testing instructions (if checked you can ignore/remove the next section).

How to test the changes in this Pull Request:

  1. Enable a theme which adds button styles via theme.json and is not Twenty Twenty-Three.
  2. Go to the Shop page.
  3. Verify Add to Cart buttons follow the theme style.
Before After
imatge imatge
  1. Go to the single product page.
  2. Verify Add to Cart button follows the theme style.
Before After
Single Product page with purple icon Single Product page with button following theme styles
  1. Repeat the same in other pages with buttons. Ie: Account details, Cart (with cart shortcode), Checkout (with checkout shortcode), etc.
Before After
imatge imatge
  1. Now repeat the steps above with Storefront, another classic theme (ie: GeneratePress), Twenty Twenty-Two and Twenty Twenty-Three.
  2. Verify in none of them there are any regressions between trunk and this branch.

Other information:

  • Have you added an explanation of what your changes do and why you'd like us to include them?
  • Have you written new tests for your changes, as applicable?
  • Have you created a changelog file for each project being changed, ie pnpm --filter=<project> changelog add?

FOR PR REVIEWER ONLY:

  • I have reviewed that everything is sanitized/escaped appropriately for any SQL or XSS injection possibilities. I made sure Linting is not ignored or disabled.

@Aljullu Aljullu requested review from a team and jorgeatorres and removed request for a team December 29, 2022 09:49
@github-actions github-actions bot added the plugin: woocommerce Issues related to the WooCommerce Core plugin. label Dec 29, 2022
Comment on lines +1657 to +1658
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)),
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FYI to ease the review: I hadn't made any changes to the styles below 👇 , they appear in the diff because they were moved from another section of the document.

@Aljullu Aljullu requested review from a team and gigitux and removed request for a team December 29, 2022 09:56
@github-actions
Copy link
Contributor

Test Results Summary

Commit SHA: 37e9502

Test 🧪Passed ✅Failed 🚨Broken 🚧Skipped ⏭️Unknown ❔Total 📊Duration ⏱️
API Tests25900202610m 55s
E2E Tests189006019515m 57s

To view the full API test report, click here.
To view the full E2E test report, click here.
To view all test reports, visit the WooCommerce Test Reports Dashboard.

Copy link
Contributor

@gigitux gigitux left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@Aljullu
Copy link
Contributor Author

Aljullu commented Jan 12, 2023

@jorgeatorres, is this PR on your radar? Wondering if there is anything we can do to help this being merged in time for WC 7.4.

Copy link
Member

@jorgeatorres jorgeatorres left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. Thank you @Aljullu!

@jorgeatorres jorgeatorres merged commit 7875968 into trunk Jan 18, 2023
@jorgeatorres jorgeatorres deleted the fix/remove-button-styles-when-custom-block-theme branch January 18, 2023 16:36
@github-actions github-actions bot added this to the 7.4.0 milestone Jan 18, 2023
adrianduffell pushed a commit that referenced this pull request Jan 20, 2023
…theme.json (#36225)

* Remove button styles if the block theme has their own

* Fix button style in TT2
vedanshujain pushed a commit that referenced this pull request Jan 25, 2023
…theme.json (#36225)

* Remove button styles if the block theme has their own

* Fix button style in TT2
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

plugin: woocommerce Issues related to the WooCommerce Core plugin.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Zaino: Inconsistent button styling.

4 participants