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

Conversation

nielslange
Copy link
Member

Fixes #8811

Currently, the Checkout block partially supports the default theme-level global styles for Typography » Headings. This issue aims to ensure that the Checkout block fully supports the default theme-level global styles.

Current support of Global Styles of various themes

I tested this with the following themes:

Below, I listed the current support of Global Styles:

  • 🔴: The theme overwrites these Global Styles.
  • 🟢: The theme supports these Global Styles.
  • 🔵: This PR adds support for these Global Styles.

Current support for Adventurer theme

Post Editor Frontend
FONT 🔴 🔴
APPERANCE 🔴 🔴
LINE HEIGHT 🟢 🟢
LETTER SPACING 🔵 🟢
LETTER CASE 🔵 🔴

These are the sections where this theme overwrites the Global Styles:

Current support for Beaumont theme

Post Editor Frontend
FONT 🟢 🟢
APPERANCE 🟢 🟢
LINE HEIGHT 🟢 🟢
LETTER SPACING 🟢 🟢
LETTER CASE 🔵 🟢

This theme does not overwrite any Global Styles.

Current support for Björk theme

Post Editor Frontend
FONT 🟢 🟢
APPERANCE 🔴 🟢
LINE HEIGHT 🔴 🔴
LETTER SPACING 🟢 🟢
LETTER CASE 🔵 🟢

These are the sections where this theme overwrites the Global Styles:

Current support for Twenty Twenty-Two theme

Post Editor Frontend
FONT 🔴 🔴
APPERANCE 🔴 🔴
LINE HEIGHT 🔴 🔴
LETTER SPACING 🔵 🟢
LETTER CASE 🔵 🟢

These are the sections where this theme overwrites the Global Styles:

Current support for Twenty Twenty-Three theme

Post Editor Frontend
FONT 🟢 🟢
APPERANCE 🔴 🟢
LINE HEIGHT 🔴 🔴
LETTER SPACING 🔵 🟢
LETTER CASE 🔵 🟢

These are the sections where this theme overwrites the Global Styles:

Screenshots

Before:

Screen Shot 2023-03-31 at 18 19 45
After:

Screen Shot 2023-03-31 at 18 17 26

Testing

User Facing Testing

  1. Install and activate the Beaumont theme.
  2. Create a test page with the Checkout block.
  3. Go to WP Admin » Settings » Reading.
  4. Define the test page from step 2. as a static page.

Screenshot 2023-03-29 at 11 15 29

  1. Go to WP Admin » Apperance » Editor.
  2. Open the Styles sidebar.
  3. Open the Typography » Headings settings.
  4. Adjust the settings FONT, APPEARANCE, LINE HEIGHT, LETTER SPACING and LETTER CASE.
  5. Open the test page from step 2. both in the post editor and the frontend.
  6. Verify that the headlines show the typography settings as defined in step 8.

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Update: Ensure Checkout block supports the theme-level global styles for Typography » Headings.

@nielslange nielslange added type: enhancement The issue is a request for an enhancement. block: checkout Issues related to the checkout block. focus: global styles Issues that involve styles/css/layout structure. labels Mar 31, 2023
@nielslange nielslange self-assigned this Mar 31, 2023
@woocommercebot woocommercebot requested review from a team and wavvves and removed request for a team March 31, 2023 11:20
@github-actions
Copy link
Contributor

github-actions bot commented Mar 31, 2023

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-8918.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: 451
  • Total errors: 2212

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Mar 31, 2023

Size Change: +24 B (0%)

Total Size: 1.06 MB

Filename Size Change
build/wc-blocks-style-rtl.css 27.1 kB +12 B (0%)
build/wc-blocks-style.css 27.1 kB +12 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.98 kB
build/active-filters-wrapper-frontend.js 5.97 kB
build/active-filters.js 7.49 kB
build/all-products-frontend.js 11.8 kB
build/all-products.js 37.6 kB
build/all-reviews.js 7.66 kB
build/attribute-filter-frontend.js 22.4 kB
build/attribute-filter-wrapper-frontend.js 7.1 kB
build/attribute-filter.js 13.2 kB
build/blocks-checkout.js 44 kB
build/breadcrumbs.js 2.05 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-cross-sells-products-frontend.js 5.28 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.2 kB
build/cart-blocks/cart-express-payment-frontend.js 718 B
build/cart-blocks/cart-items-frontend.js 302 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.36 kB
build/cart-blocks/cart-line-items-frontend.js 1.06 kB
build/cart-blocks/cart-order-summary-frontend.js 1.24 kB
build/cart-blocks/cart-totals-frontend.js 307 B
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/filled-cart-frontend.js 653 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.62 kB
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB
build/cart-blocks/order-summary-fee-frontend.js 272 B
build/cart-blocks/order-summary-heading-frontend.js 455 B
build/cart-blocks/order-summary-shipping-frontend.js 10.7 kB
build/cart-blocks/order-summary-subtotal-frontend.js 273 B
build/cart-blocks/order-summary-taxes-frontend.js 433 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.33 kB
build/cart-frontend.js 29.3 kB
build/cart.js 44.1 kB
build/catalog-sorting.js 1.7 kB
build/checkout-blocks/actions-frontend.js 1.85 kB
build/checkout-blocks/billing-address-frontend.js 4.18 kB
build/checkout-blocks/contact-information-frontend.js 2.05 kB
build/checkout-blocks/express-payment-frontend.js 1.14 kB
build/checkout-blocks/fields-frontend.js 331 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.68 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.79 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB
build/checkout-blocks/order-summary-fee-frontend.js 274 B
build/checkout-blocks/order-summary-frontend.js 1.24 kB
build/checkout-blocks/order-summary-shipping-frontend.js 10.8 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/order-summary-taxes-frontend.js 433 B
build/checkout-blocks/payment-frontend.js 8.39 kB
build/checkout-blocks/pickup-options-frontend.js 4.11 kB
build/checkout-blocks/shipping-address-frontend.js 4.14 kB
build/checkout-blocks/shipping-method-frontend.js 2.6 kB
build/checkout-blocks/shipping-methods-frontend.js 4.82 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 310 B
build/checkout-frontend.js 30.9 kB
build/checkout.js 46 kB
build/customer-account.js 3.16 kB
build/featured-category.js 14 kB
build/featured-product.js 14.4 kB
build/filter-wrapper-frontend.js 14.1 kB
build/filter-wrapper.js 2.4 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/handpicked-products.js 7.92 kB
build/legacy-template.js 5.57 kB
build/mini-cart-component-frontend.js 28.3 kB
build/mini-cart-contents-block/cart-button-frontend.js 816 B
build/mini-cart-contents-block/checkout-button-frontend.js 818 B
build/mini-cart-contents-block/empty-cart-frontend.js 360 B
build/mini-cart-contents-block/filled-cart-frontend.js 268 B
build/mini-cart-contents-block/footer-frontend.js 3.18 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 589 B
build/mini-cart-contents-block/shopping-button-frontend.js 704 B
build/mini-cart-contents-block/title-frontend.js 367 B
build/mini-cart-contents.js 17.4 kB
build/mini-cart-frontend.js 2.02 kB
build/mini-cart.js 4.49 kB
build/price-filter-frontend.js 13.9 kB
build/price-filter-wrapper-frontend.js 6.95 kB
build/price-filter.js 8.4 kB
build/price-format.js 1.19 kB
build/product-add-to-cart-frontend.js 6.42 kB
build/product-add-to-cart.js 178 B
build/product-best-sellers.js 8.26 kB
build/product-button-frontend.js 1.92 kB
build/product-categories.js 2.36 kB
build/product-category.js 9.25 kB
build/product-image-frontend.js 1.77 kB
build/product-image.js 177 B
build/product-new.js 8.25 kB
build/product-on-sale.js 8.58 kB
build/product-price-frontend.js 2.08 kB
build/product-query.js 11 kB
build/product-rating-frontend.js 1.34 kB
build/product-results-count.js 1.65 kB
build/product-sale-badge-frontend.js 977 B
build/product-search.js 2.63 kB
build/product-sku-frontend.js 453 B
build/product-stock-indicator-frontend.js 1.01 kB
build/product-summary-frontend.js 1.29 kB
build/product-tag.js 8.74 kB
build/product-title-frontend.js 1.37 kB
build/product-title.js 178 B
build/product-top-rated.js 8.49 kB
build/products-by-attribute.js 9.58 kB
build/rating-filter-frontend.js 20.8 kB
build/rating-filter-wrapper-frontend.js 5.58 kB
build/rating-filter.js 6.99 kB
build/reviews-by-category.js 11.9 kB
build/reviews-by-product.js 13 kB
build/reviews-frontend.js 7.11 kB
build/stock-filter-frontend.js 21 kB
build/stock-filter-wrapper-frontend.js 5.82 kB
build/stock-filter.js 7.71 kB
build/store-notices.js 1.69 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--96321c21-frontend.js 6.85 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/billing-address--checkout-blocks/order--decc3dc6-frontend.js 19.4 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/billing-address--checkout-blocks/shipping-address-frontend.js 5.44 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12 kB
build/vendors--product-add-to-cart-frontend.js 7.25 kB
build/wc-blocks-data.js 21.8 kB
build/wc-blocks-editor-style-rtl.css 5.79 kB
build/wc-blocks-editor-style.css 5.79 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 930 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.73 kB
build/wc-blocks-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.96 kB
build/wc-blocks-vendors.js 64.2 kB
build/wc-blocks.js 2.63 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

@nielslange nielslange changed the title Add GS support for button typography in Checkout block Add GS support for headings typography in Checkout block Mar 31, 2023
@github-actions github-actions bot added this to the 10.0.0 milestone Apr 3, 2023
@nielslange
Copy link
Member Author

Thanks for your review, @wavvves!

@nielslange nielslange merged commit df7db1d into add/global-style-for-cart-checkout Apr 4, 2023
@nielslange nielslange deleted the update/GS-support-for-headings-typography-in-checkout branch April 4, 2023 07:09
@opr opr removed this from the 10.0.0 milestone Apr 10, 2023
tarunvijwani pushed a commit that referenced this pull request Apr 21, 2023
* Dummy commit to open a PR

* Revert the last change

* Ensure Checkout block supports the theme-level global styles for `Colors » Buttons` (#8844)

* Add GS support for button colors in Checkout block

* Sync button hover effect with GB

* Fix link margin/padding (#8908)

* Replace <AddToCartButton /> with <ProductButton /> (#8914)

* Add GS support for button typography in Checkout block (#8918)

* Ensure Checkout block supports the theme-level global styles for Typography » Buttons (#8892)

* Remove classname from cart image to avoid conflicts (#8898)

Co-authored-by: Niels Lange <[email protected]>

* Use consistent and semantically correct HTML elements in the Cart and Checkout blocks (#9065)

* Allow button height to adjust

* Ensure to display full width heading background

* Inherit font style and font weight for headings

* Inherit font style and font weight for textarea

* Inherit font family and font weight for buttons

---------

Co-authored-by: Niels Lange <[email protected]>
Co-authored-by: Mike Jolley <[email protected]>
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: checkout Issues related to the checkout block. focus: global styles Issues that involve styles/css/layout structure. type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants