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

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

Conversation

nielslange
Copy link
Member

@nielslange nielslange commented Mar 29, 2023

Fixes #8810

Currently, the Checkout block partially supports the default theme-level global styles for Typography » Buttons.

Current support

Post Editor Frontend
FONT 🔴 🟢
SIZE 🔴 🟢
APPERANCE 🔴 🟢
LINE HEIGHT 🔴 🔴

Screenshots

Before:

Screenshot 2023-03-29 at 11 26 03
After:

Screenshot 2023-03-29 at 11 22 57

Testing

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. 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 » Buttons settings.
  4. Adjust the settings FONT, SIZE, APPEARANCE and LINE HEIGHT.
  5. Open the test page from step 2. both in the post editor and the frontend.
  6. Verify that the Place Order button shows the typography settings as defined in step 8.

Note
Defining the test page as a static page allows to see the applied styles in realtime.

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

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

@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 29, 2023
@nielslange nielslange self-assigned this Mar 29, 2023
@woocommercebot woocommercebot requested review from a team and tarunvijwani and removed request for a team March 29, 2023 04:29
@github-actions
Copy link
Contributor

github-actions bot commented Mar 29, 2023

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-8892.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 29, 2023

Size Change: -31 B (0%)

Total Size: 1.06 MB

Filename Size Change
build/wc-blocks-style-rtl.css 27.1 kB -15 B (0%)
build/wc-blocks-style.css 27.1 kB -16 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 base branch from trunk to add/global-style-for-cart-checkout March 31, 2023 05:38
@nielslange nielslange force-pushed the update/GS-support-for-button-typography-in-checkout branch from 74ace5f to 6d997ba Compare March 31, 2023 10:52
Copy link

@tarunvijwani tarunvijwani left a comment

Choose a reason for hiding this comment

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

Thank you for changes, @nielslange! It works great. 🎉

@github-actions github-actions bot added this to the 10.0.0 milestone Apr 3, 2023
@tarunvijwani
Copy link

This PR also fixes #8712 🎉

@nielslange nielslange merged commit 37dc54e into add/global-style-for-cart-checkout Apr 4, 2023
@nielslange nielslange deleted the update/GS-support-for-button-typography-in-checkout branch April 4, 2023 08:09
@nielslange
Copy link
Member Author

Thanks for reviewing this PR, @tarunvijwani! 🙌

@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
3 participants