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

Add theme-level global styles to Cart and Checkout block #8809

Merged
merged 35 commits into from
Apr 21, 2023

Conversation

tarunvijwani
Copy link

@tarunvijwani tarunvijwani commented Mar 21, 2023

Fixes #8710

With this PR, we're enabling the theme-level global styles in Cart and Checkout blocks.

Changes in the PR

Accessibility

Testing

Automated Tests

  • Changes in this PR are covered by Automated Tests.
    • Unit tests
    • E2E tests

User Facing Testing

  1. Install and activate a block theme, e.g. Twenty Twenty-Three.
  2. Create a test page with the Checkout block.
  3. Create a test page with the Cart block.
  4. Go to WP Admin » Apperance » Editor.
  5. Open the Styles sidebar.
  6. Adjust all Typography and Color settings.
  7. Go to the Checkout block page editor.
  8. Confirm Global styles are applied successfully.
  9. Go to the Cart block page editor.
  10. Confirm Global styles are applied successfully.
  11. Navigate to Cart and Checkout block page on the front-end.
  12. Confirm Global styles are applied successfully.
  • Do not include in the Testing Notes

Screen recording:

Screen.Recording.2023-04-18.at.11.22.34.AM.mov

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Performance Impact

Changelog

Add theme-level global styles to Cart and Checkout block

@tarunvijwani tarunvijwani changed the title Dummy commit to open a PR Add theme-level and WCBlocks-level global styles to Cart and Checkout block Mar 21, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Mar 21, 2023

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-8809.zip

Script Dependencies Report

There is no changed script dependency between this branch and trunk.

This comment was automatically generated by the ./github/compare-assets action.

TypeScript Errors Report

  • Files with errors: 452
  • Total errors: 2217

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Mar 21, 2023

Size Change: -8.89 kB (-1%)

Total Size: 1.1 MB

Filename Size Change
build/active-filters.js 7.48 kB -5 B (0%)
build/all-products-frontend.js 11.8 kB +15 B (0%)
build/all-products.js 38.6 kB +67 B (0%)
build/all-reviews.js 7.66 kB +4 B (0%)
build/attribute-filter-frontend.js 22.5 kB +1 B (0%)
build/attribute-filter-wrapper-frontend.js 7.07 kB -1 B (0%)
build/attribute-filter.js 13.2 kB +4 B (0%)
build/breadcrumbs.js 2.05 kB -2 B (0%)
build/cart-blocks/cart-cross-sells-products-frontend.js 5.38 kB -4.44 kB (-45%) 🎉
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.16 kB +1 B (0%)
build/cart-blocks/cart-items-frontend.js 302 B +1 B (0%)
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.4 kB -5 B (0%)
build/cart-blocks/cart-line-items-frontend.js 1.06 kB +1 B (0%)
build/cart-blocks/cart-order-summary-frontend.js 1.27 kB -4 B (0%)
build/cart-blocks/cart-totals-frontend.js 307 B -1 B (0%)
build/cart-blocks/empty-cart-frontend.js 346 B +1 B (0%)
build/cart-blocks/filled-cart-frontend.js 655 B -2 B (0%)
build/cart-blocks/order-summary-coupon-form-frontend.js 1.63 kB +1 B (0%)
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB -2 B (0%)
build/cart-blocks/order-summary-fee-frontend.js 273 B +1 B (0%)
build/cart-blocks/order-summary-heading-frontend.js 334 B -122 B (-27%) 🎉
build/cart-blocks/order-summary-shipping-frontend.js 11.8 kB -5 B (0%)
build/cart-blocks/order-summary-subtotal-frontend.js 274 B +1 B (0%)
build/cart-blocks/order-summary-taxes-frontend.js 431 B -1 B (0%)
build/cart-blocks/proceed-to-checkout-frontend.js 1.38 kB -3 B (0%)
build/cart-frontend.js 29.3 kB -23 B (0%)
build/cart.js 44.5 kB -4.26 kB (-9%)
build/catalog-sorting.js 1.7 kB -4 B (0%)
build/checkout-blocks/actions-frontend.js 1.84 kB -1 B (0%)
build/checkout-blocks/billing-address-frontend.js 4.19 kB +1 B (0%)
build/checkout-blocks/order-note-frontend.js 1.14 kB +2 B (0%)
build/checkout-blocks/order-summary-cart-items-frontend.js 3.69 kB -17 B (0%)
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.79 kB +3 B (0%)
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB +1 B (0%)
build/checkout-blocks/order-summary-frontend.js 1.27 kB -4 B (0%)
build/checkout-blocks/order-summary-shipping-frontend.js 11.8 kB -2 B (0%)
build/checkout-blocks/payment-frontend.js 8.27 kB +1 B (0%)
build/checkout-blocks/pickup-options-frontend.js 4.14 kB -1 B (0%)
build/checkout-blocks/shipping-address-frontend.js 4.14 kB -2 B (0%)
build/checkout-blocks/shipping-methods-frontend.js 5.84 kB +6 B (0%)
build/checkout-blocks/terms-frontend.js 1.56 kB +1 B (0%)
build/checkout-blocks/totals-frontend.js 310 B -1 B (0%)
build/checkout-frontend.js 30.9 kB +12 B (0%)
build/checkout.js 46.3 kB -45 B (0%)
build/customer-account.js 3.17 kB +2 B (0%)
build/featured-category.js 14.3 kB -3 B (0%)
build/featured-product.js 14.5 kB -5 B (0%)
build/filter-wrapper-frontend.js 14 kB +8 B (0%)
build/filter-wrapper.js 2.4 kB +4 B (0%)
build/handpicked-products.js 7.93 kB +4 B (0%)
build/legacy-template.js 5.62 kB -6 B (0%)
build/mini-cart-component-frontend.js 29.2 kB -1 B (0%)
build/mini-cart-contents-block/checkout-button-frontend.js 871 B +1 B (0%)
build/mini-cart-contents-block/empty-cart-frontend.js 360 B -1 B (0%)
build/mini-cart-contents-block/footer-frontend.js 3.2 kB +4 B (0%)
build/mini-cart-contents-block/items-frontend.js 238 B +1 B (0%)
build/mini-cart-contents-block/products-table-frontend.js 589 B +1 B (0%)
build/mini-cart-contents-block/title-label-frontend.js 661 B +1 B (0%)
build/mini-cart-contents.js 17.8 kB -13 B (0%)
build/mini-cart.js 4.49 kB +1 B (0%)
build/price-filter-frontend.js 13.9 kB -1 B (0%)
build/price-filter-wrapper-frontend.js 7.03 kB +1 B (0%)
build/price-filter.js 8.45 kB +1 B (0%)
build/product-add-to-cart-frontend.js 6.42 kB -8 B (0%)
build/product-add-to-cart.js 8.84 kB +37 B (0%)
build/product-best-sellers.js 8.26 kB +1 B (0%)
build/product-categories.js 2.36 kB -3 B (0%)
build/product-category.js 9.25 kB +4 B (0%)
build/product-image.js 4.3 kB +2 B (0%)
build/product-new.js 8.25 kB -1 B (0%)
build/product-on-sale.js 8.59 kB +2 B (0%)
build/product-price.js 1.67 kB +1 B (0%)
build/product-query.js 11.3 kB +3 B (0%)
build/product-rating-frontend.js 1.33 kB +3 B (0%)
build/product-sale-badge-frontend.js 975 B -1 B (0%)
build/product-sale-badge.js 801 B +2 B (0%)
build/product-search.js 2.63 kB +4 B (0%)
build/product-stock-indicator-frontend.js 1.19 kB +2 B (0%)
build/product-stock-indicator.js 769 B -1 B (0%)
build/product-summary-frontend.js 1.29 kB +1 B (0%)
build/product-summary.js 920 B -3 B (0%)
build/product-title-frontend.js 1.37 kB +1 B (0%)
build/product-title.js 3.73 kB +2 B (0%)
build/product-top-rated.js 8.5 kB +7 B (0%)
build/rating-filter-frontend.js 20.8 kB -1 B (0%)
build/rating-filter-wrapper-frontend.js 5.59 kB +1 B (0%)
build/rating-filter.js 6.98 kB -6 B (0%)
build/reviews-by-category.js 11.9 kB +5 B (0%)
build/reviews-by-product.js 13 kB +2 B (0%)
build/stock-filter-frontend.js 21.1 kB -2 B (0%)
build/stock-filter-wrapper-frontend.js 5.83 kB +1 B (0%)
build/stock-filter.js 7.7 kB -4 B (0%)
build/store-notices.js 1.69 kB -1 B (0%)
build/vendors--attribute-filter-wrapper--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary--82e4ed06-frontend.js 0 B -6.82 kB (removed) 🏆
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 0 B -19.1 kB (removed) 🏆
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 0 B -7.25 kB (removed) 🏆
build/vendors--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 5.44 kB -2 B (0%)
build/wc-blocks-style-rtl.css 27.6 kB -50 B (0%)
build/wc-blocks-style.css 27.6 kB -52 B (0%)
build/wc-blocks-vendors.js 62.8 kB -4 B (0%)
build/wc-blocks.js 2.63 kB -1 B (0%)
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js 6.82 kB +6.82 kB (new file) 🆕
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 19.1 kB +19.1 kB (new file) 🆕
build/vendors--product-add-to-cart-frontend.js 7.25 kB +7.25 kB (new file) 🆕
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.99 kB
build/active-filters-wrapper-frontend.js 5.97 kB
build/blocks-checkout.js 35.1 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.38 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-express-payment-frontend.js 719 B
build/checkout-blocks/contact-information-frontend.js 2.05 kB
build/checkout-blocks/express-payment-frontend.js 1.13 kB
build/checkout-blocks/fields-frontend.js 331 B
build/checkout-blocks/order-summary-fee-frontend.js 275 B
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/order-summary-taxes-frontend.js 431 B
build/checkout-blocks/shipping-method-frontend.js 2.63 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/mini-cart-contents-block/cart-button-frontend.js 867 B
build/mini-cart-contents-block/filled-cart-frontend.js 268 B
build/mini-cart-contents-block/shopping-button-frontend.js 760 B
build/mini-cart-contents-block/title-frontend.js 1.09 kB
build/mini-cart-contents-block/title-items-counter-frontend.js 733 B
build/mini-cart-frontend.js 2.02 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-image--product-price--product-rating--product-sale-bad--49d3ecb2.js 253 B
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 151 B
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--408017d2.js 262 B
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js 464 B
build/product-button-frontend.js 1.92 kB
build/product-button.js 4.17 kB
build/product-image-frontend.js 1.84 kB
build/product-price-frontend.js 2.12 kB
build/product-rating.js 920 B
build/product-results-count.js 1.66 kB
build/product-sku-frontend.js 1 kB
build/product-sku.js 578 B
build/product-tag.js 8.74 kB
build/products-by-attribute.js 9.59 kB
build/reviews-frontend.js 7.1 kB
build/single-product.js 11 kB
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 7.7 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js 5.26 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping--checkout-block--24d3fc0c-frontend.js 8.25 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12 kB
build/wc-blocks-data.js 21.8 kB
build/wc-blocks-editor-style-rtl.css 5.87 kB
build/wc-blocks-editor-style.css 5.87 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 933 B
build/wc-blocks-registry.js 3.15 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.75 kB
build/wc-blocks-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.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.6 kB
build/wc-shipping-method-pickup-location.js 29.9 kB
build/woo-directives-runtime.js 2.73 kB
build/woo-directives-vendors.js 7.91 kB

compressed-size-action

@tarunvijwani tarunvijwani changed the title Add theme-level and WCBlocks-level global styles to Cart and Checkout block Add theme-level global styles to Cart and Checkout block Apr 19, 2023
@tarunvijwani tarunvijwani marked this pull request as ready for review April 19, 2023 17:07
@tarunvijwani tarunvijwani self-assigned this Apr 19, 2023
@tarunvijwani tarunvijwani requested a review from Aljullu April 19, 2023 17:11
Copy link
Contributor

@Aljullu Aljullu left a comment

Choose a reason for hiding this comment

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

I didn't review the code, but after some smoke testing I noticed:

Color

  1. Cart and Checkout: buttons can be hovered and they lose their style. This happens both, in the editor and the frontend:
Enregistrament.de.pantalla.des.de.2023-04-20.19-29-19.webm
  1. Cart & Checkout: link color seems to work in the editor, but not the frontend:
Editor Frontend
imatge imatge
  1. Checkout: heading background is full-width in editor but smaller in the frontend:
Editor Frontend
imatge imatge

Typography

  1. Checkout: heading appearance (italics and bold) is not respected in the editor:
Editor Frontend
imatge imatge
  1. Cart and Checkout: heading line-height is not respected.
  2. Checkout: text appearance (italics and bold) is not respected in the editor:
Editor Frontend
imatge imatge

Besides that, everything else seemed to be working well. 👌

@nielslange
Copy link
Member

Thanks for your review, @Aljullu! 🙌 @tarunvijwani asked me if I can take care of this PR given that he's on porter rotation.

The following issues, which you reported, are related to the TT3 theme:

  • Cart and Checkout: buttons can be hovered and they lose their style. This happens both, in the editor and the frontend.
  • Cart & Checkout: link color seems to work in the editor, but not the frontend.
  • Cart and Checkout: heading line-height is not respected.

Note
If you're using a different theme, e.g. Beaumont or Tove, these issued no longer appear.

The following issues have been fixed:

  • Checkout: heading background is full-width in editor but smaller in the frontend.
  • Checkout: heading appearance (italics and bold) is not respected in the editor.
  • Checkout: text appearance (italics and bold) is not respected in the editor.

Screenshot

Screen Shot 2023-04-21 at 15 36 43

In the screenshot, you might notice that the Country/Region field in the style editor (and also in the post editor), is shorter than the other fields. I thought that this PR might have caused it, but I'm seeing the same problem in trunk.

@nielslange nielslange requested a review from Aljullu April 21, 2023 08:39
@nielslange nielslange self-assigned this Apr 21, 2023
@nielslange nielslange removed their request for review April 21, 2023 08:39
Copy link
Contributor

@Aljullu Aljullu left a comment

Choose a reason for hiding this comment

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

Thanks for the update, @nielslange!

I did another round of testing and couldn't find anything besides what has already been mentioned.

The following issues have been fixed:

Confirming this. 👌

Copy link
Member

@mikejolley mikejolley left a comment

Choose a reason for hiding this comment

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

Smoke tested and seems to be in order, however I spotted one visual issue that may require a follow up.

With headings on the checkout, if you increase font size you'll see some abnormalities:

Screenshot 2023-04-21 at 15 41 33

And in editor:

Screenshot 2023-04-21 at 15 41 55

Approving anyhow.

@tarunvijwani
Copy link
Author

@mikejolley Thank you for reviewing the PR. I have created a new ticket to tackle this problem in the sprint: #9164.

@tarunvijwani
Copy link
Author

Markdown and Playwright tests are getting failed. Asked for confirmation to merge the PR: p1682089388117269-slack-C02UBB1EPEF

@tarunvijwani tarunvijwani merged commit b0f94b8 into trunk Apr 21, 2023
@tarunvijwani tarunvijwani deleted the add/global-style-for-cart-checkout branch April 21, 2023 20:11
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
focus: global styles Issues that involve styles/css/layout structure. status: blocker Used on issues or pulls that block work from being released. type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add theme-level global styles to Cart and Checkout block
4 participants