Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Fix Twenty Twenty-Two Products by Category block item tile styling issues #5684

Conversation

tomasztunik
Copy link
Contributor

@tomasztunik tomasztunik commented Jan 31, 2022

This PR provides override styles for the Twenty Twenty Two theme to correctly display added to cart "View cart" call out (#5285) and sale prices to not be underlined (#5286).

This follows convention from the past where core themes were receiving patches in styles.scss via theme class namespace.

I've merged these two issues as they were very closely related and trivial in their complexity and the little potential effect on other areas of the extension.

Fixes #5285
Fixes #5286

Screenshots

On mobile:

Screenshot 2022-01-31 at 19 25 34

On desktop:

Screenshot 2022-01-31 at 19 00 24

Testing

Manual Testing

How to test the changes in this Pull Request:

  1. Get the Twenty Twenty Two theme
  2. Create a page with Products by category block with products on sale available
  3. Visit the page
  4. Confirm sale price on products on sale is not underlined
  5. Add product to cart
  6. Confirm View cart action is centred under the Add to cart button and not broken into two lines

User Facing Testing

These are steps for user testing (where "user" is someone interacting with this change that is not editing any code).

  • [✔️ ] Same as above, or
  • See steps below.

Changelog

Fixes Twenty Twenty Two issues with sales price and added to cart "View Cart" call out styling in the "Products by Category" block

fixes #5285 - View cart after adding item to cart was squeezed
in on the same line as the Add to Cart button
fixes #5286 - sale price was underlined because of the default
styles on the used ins HTML element
@rubikuserbot rubikuserbot requested review from a team and sunyatasattva and removed request for a team January 31, 2022 18:32
@github-actions
Copy link
Contributor

Size Change: +59 B (0%)

Total Size: 745 kB

Filename Size Change
build/wc-blocks-style-rtl.css 21.8 kB +30 B (0%)
build/wc-blocks-style.css 21.8 kB +29 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 6.21 kB
build/active-filters.js 7.08 kB
build/all-products-frontend.js 18.6 kB
build/all-products.js 35.1 kB
build/all-reviews.js 8.39 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---8f355022.js 238 B
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js 2.67 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button.js 1.48 kB
build/atomic-block-components/add-to-cart-frontend.js 7.04 kB
build/atomic-block-components/add-to-cart.js 6.6 kB
build/atomic-block-components/button-frontend.js 1.48 kB
build/atomic-block-components/button.js 854 B
build/atomic-block-components/category-list-frontend.js 458 B
build/atomic-block-components/category-list.js 458 B
build/atomic-block-components/image-frontend.js 1.37 kB
build/atomic-block-components/image.js 1.05 kB
build/atomic-block-components/price-frontend.js 1.74 kB
build/atomic-block-components/price.js 1.69 kB
build/atomic-block-components/rating-frontend.js 703 B
build/atomic-block-components/rating.js 700 B
build/atomic-block-components/sale-badge-frontend.js 624 B
build/atomic-block-components/sale-badge.js 624 B
build/atomic-block-components/sku-frontend.js 386 B
build/atomic-block-components/sku.js 384 B
build/atomic-block-components/stock-indicator--atomic-block-components/summary--atomic-block-components/title.js 452 B
build/atomic-block-components/stock-indicator-frontend.js 926 B
build/atomic-block-components/stock-indicator.js 624 B
build/atomic-block-components/summary-frontend.js 1.23 kB
build/atomic-block-components/summary.js 925 B
build/atomic-block-components/tag-list-frontend.js 459 B
build/atomic-block-components/tag-list.js 458 B
build/atomic-block-components/title-frontend.js 1.19 kB
build/atomic-block-components/title.js 932 B
build/attribute-filter-frontend.js 16.3 kB
build/attribute-filter.js 12.6 kB
build/blocks-checkout.js 17.6 kB
build/cart-blocks/accepted-payment-methods-frontend.js 1.14 kB
build/cart-blocks/checkout-button-frontend.js 1.14 kB
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/express-payment-frontend.js 4.73 kB
build/cart-blocks/filled-cart-frontend.js 713 B
build/cart-blocks/items-frontend.js 277 B
build/cart-blocks/line-items-frontend.js 5.26 kB
build/cart-blocks/order-summary-frontend.js 8.62 kB
build/cart-blocks/totals-frontend.js 294 B
build/cart-frontend.js 45.4 kB
build/cart.js 43.8 kB
build/checkout-frontend.js 45.3 kB
build/checkout.js 22.7 kB
build/featured-category.js 8.63 kB
build/featured-product.js 9.91 kB
build/handpicked-products.js 7.31 kB
build/legacy-template.js 2.16 kB
build/mini-cart-component-frontend.js 14.2 kB
build/mini-cart-contents.js 3.57 kB
build/mini-cart-frontend.js 1.76 kB
build/mini-cart.js 6.43 kB
build/price-filter-frontend.js 12.6 kB
build/price-filter.js 8.89 kB
build/price-format.js 1.18 kB
build/product-best-sellers.js 7.52 kB
build/product-categories.js 3.43 kB
build/product-category.js 8.67 kB
build/product-new.js 7.98 kB
build/product-on-sale.js 8.35 kB
build/product-search.js 2.47 kB
build/product-tag.js 8.06 kB
build/product-top-rated.js 7.94 kB
build/products-by-attribute.js 8.78 kB
build/reviews-by-category.js 11.9 kB
build/reviews-by-product.js 12.9 kB
build/reviews-frontend.js 7.34 kB
build/single-product-frontend.js 22.2 kB
build/single-product.js 10.5 kB
build/stock-filter-frontend.js 6.8 kB
build/stock-filter.js 6.82 kB
build/vendors--atomic-block-components/add-to-cart--cart-blocks/order-summary-frontend.js 19 kB
build/vendors--atomic-block-components/add-to-cart-frontend.js 7.42 kB
build/vendors--atomic-block-components/price--cart-blocks/line-items--cart-blocks/order-summary-frontend.js 5.71 kB
build/vendors--cart-blocks/line-items-frontend.js 3.33 kB
build/vendors--cart-blocks/order-summary-frontend.js 4.75 kB
build/wc-blocks-data.js 8.84 kB
build/wc-blocks-editor-style-rtl.css 4.7 kB
build/wc-blocks-editor-style.css 4.7 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 949 B
build/wc-blocks-registry.js 2.7 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.14 kB
build/wc-blocks-vendors-style-rtl.css 1.28 kB
build/wc-blocks-vendors-style.css 1.28 kB
build/wc-blocks-vendors.js 65.6 kB
build/wc-blocks.js 2.96 kB
build/wc-payment-method-bacs.js 816 B
build/wc-payment-method-cheque.js 811 B
build/wc-payment-method-cod.js 909 B
build/wc-payment-method-paypal.js 837 B
build/wc-settings.js 2.61 kB

compressed-size-action

@tomasztunik tomasztunik changed the title Fix 5285 and 5286 Twenty Twenty Two prodcuts by category item tile styling issues Fix 5285 and 5286 Twenty Twenty Two Products by Category block item tile styling issues Jan 31, 2022
@tomasztunik tomasztunik changed the title Fix 5285 and 5286 Twenty Twenty Two Products by Category block item tile styling issues Fix Twenty Twenty-Two Products by Category block item tile styling issues Feb 1, 2022
Copy link
Contributor

@sunyatasattva sunyatasattva left a comment

Choose a reason for hiding this comment

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

:shipit:

(Did you figure out the strategy for the future on these kind of issues?)

@github-actions github-actions bot added this to the 7.0.0 milestone Feb 2, 2022
@tomasztunik
Copy link
Contributor Author

Not yet @sunyatasattva! Got this and couple other little things I'm wrapping up to share as my onboarding summary/outcome.

@tomasztunik tomasztunik merged commit 207bc55 into trunk Feb 2, 2022
@tomasztunik tomasztunik deleted the fix/5285-and-5286-twentytwentytwo-prodcut-list-tile-style-issues branch February 2, 2022 17:21
@tomasztunik tomasztunik self-assigned this Feb 2, 2022
@sunyatasattva sunyatasattva added focus: global styles Issues that involve styles/css/layout structure. block-type: product Issues related to/affecting all blocks related to products. theme: Twenty Twenty-Two type: bug The issue/PR concerns a confirmed bug. labels Feb 14, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block-type: product Issues related to/affecting all blocks related to products. focus: global styles Issues that involve styles/css/layout structure. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
2 participants