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

Global Styles support for Product Price block #5950

Merged
merged 5 commits into from
Feb 28, 2022

Conversation

tomasztunik
Copy link
Contributor

@tomasztunik tomasztunik commented Feb 25, 2022

Adds Global Styles support for Product Price element block.

  • ⚠️ comes sat a cost of losing control over regular vs sale price
  • adds font style and weight controls
  • enables new ui controls via supports
  • includes refactor of attribute from align to textAlign as align
    is a reserved supports feature attribute and textAlign is
    used across the Gutenberg project when text-align css is used
  • includes removal of attributes that are controlled by supports

I’ve noticed that we are using align attribute in couple of places in a wrong way. Since introduction of supports: { align } Gutenberg uses context based align attributes for anything that is not align. IE. css text-align should be textAlign and so on. Apart of that it seemed like it might be causing conflicts when using these “reserved” attributes in other contexts (ie. product title align which doesn't use the supports property stopped working on front-end and works just fine if changed to another name).

Fixes #5672

Accessibility

  • I've tested using only a keyboard (no mouse)
  • I've tested using a screen reader

Screenshots

before after
Screenshot 2022-02-25 at 15 56 16 Screenshot 2022-02-25 at 15 43 09

Manual Testing

How to test the changes in this Pull Request:

  1. Edit Global Styles for the Product Price block (color, font-size).
  2. Add Single Product and All Products components to a page.
  3. The Price component should reflect global styles.
  4. Add another set of Single Product and All Products components.
  5. For these override Global Styles with local styles.
  6. Ensure both sets work as expected on the Front-End of your store.

Changelog

Add Global Styles support to the Product Price block.

@tomasztunik tomasztunik added focus: global styles Issues that involve styles/css/layout structure. block-type: product elements Issues related to Product Element blocks. focus: FSE Work related to prepare WooCommerce for FSE. labels Feb 25, 2022
@rubikuserbot rubikuserbot requested a review from a team February 25, 2022 14:54
@github-actions
Copy link
Contributor

github-actions bot commented Feb 25, 2022

Size Change: -384 B (0%)

Total Size: 863 kB

Filename Size Change
build/all-products.js 33.9 kB -435 B (-1%)
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/catego--214e300a.js 0 B -222 B (removed) 🏆
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js 2.65 kB -1 B (0%)
build/atomic-block-components/add-to-cart.js 7.49 kB -1 B (0%)
build/atomic-block-components/button--atomic-block-components/category-list--atomic-block-components/imag--acd4dc5e.js 0 B -500 B (removed) 🏆
build/atomic-block-components/button.js 2.3 kB +1 B (0%)
build/atomic-block-components/price-frontend.js 1.93 kB +193 B (+11%) ⚠️
build/atomic-block-components/price.js 1.51 kB -175 B (-10%) 👏
build/atomic-block-components/rating.js 718 B -1 B (0%)
build/atomic-block-components/sale-badge.js 683 B -1 B (0%)
build/atomic-block-components/stock-indicator.js 624 B -1 B (0%)
build/atomic-block-components/title.js 932 B -1 B (0%)
build/attribute-filter.js 13 kB -1 B (0%)
build/cart.js 43.5 kB +9 B (0%)
build/checkout.js 44.7 kB +15 B (0%)
build/featured-category.js 8.62 kB +1 B (0%)
build/featured-product.js 9.73 kB -2 B (0%)
build/mini-cart-contents.js 24.2 kB +11 B (0%)
build/mini-cart.js 6.39 kB -1 B (0%)
build/price-filter.js 8.47 kB -3 B (0%)
build/single-product-frontend.js 22 kB +1 B (0%)
build/single-product.js 10 kB +7 B (0%)
build/wc-blocks-vendors.js 69.4 kB +2 B (0%)
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/catego--90468e1a.js 223 B +223 B (new file) 🆕
build/atomic-block-components/button--atomic-block-components/category-list--atomic-block-components/imag--f11cdc7a.js 498 B +498 B (new file) 🆕
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 6.27 kB
build/active-filters.js 6.94 kB
build/all-products-frontend.js 18.6 kB
build/all-reviews.js 8.03 kB
build/atomic-block-components/add-to-cart-frontend.js 7.01 kB
build/atomic-block-components/button-frontend.js 2.08 kB
build/atomic-block-components/category-list-frontend.js 920 B
build/atomic-block-components/category-list.js 501 B
build/atomic-block-components/image-frontend.js 1.86 kB
build/atomic-block-components/image.js 1.09 kB
build/atomic-block-components/rating-frontend.js 1.13 kB
build/atomic-block-components/sale-badge-frontend.js 1.09 kB
build/atomic-block-components/sku-frontend.js 385 B
build/atomic-block-components/sku.js 386 B
build/atomic-block-components/stock-indicator-frontend.js 1.03 kB
build/atomic-block-components/summary-frontend.js 1.34 kB
build/atomic-block-components/summary.js 923 B
build/atomic-block-components/tag-list-frontend.js 921 B
build/atomic-block-components/tag-list.js 499 B
build/atomic-block-components/title-frontend.js 1.31 kB
build/attribute-filter-frontend.js 16.8 kB
build/blocks-checkout.js 17.2 kB
build/cart-blocks/accepted-payment-methods-frontend.js 1.14 kB
build/cart-blocks/checkout-button-frontend.js 1.15 kB
build/cart-blocks/empty-cart-frontend.js 347 B
build/cart-blocks/express-payment-frontend.js 5.18 kB
build/cart-blocks/filled-cart-frontend.js 767 B
build/cart-blocks/items-frontend.js 299 B
build/cart-blocks/line-items-frontend.js 5.5 kB
build/cart-blocks/order-summary-frontend.js 8.88 kB
build/cart-blocks/totals-frontend.js 320 B
build/cart-frontend.js 45.2 kB
build/checkout-blocks/actions-frontend.js 1.41 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.13 kB
build/checkout-blocks/billing-address-frontend.js 891 B
build/checkout-blocks/contact-information-frontend.js 2.85 kB
build/checkout-blocks/express-payment-frontend.js 5.48 kB
build/checkout-blocks/fields-frontend.js 344 B
build/checkout-blocks/order-note-frontend.js 1.13 kB
build/checkout-blocks/order-summary-frontend.js 11.3 kB
build/checkout-blocks/payment-frontend.js 7.77 kB
build/checkout-blocks/shipping-address-frontend.js 997 B
build/checkout-blocks/shipping-methods-frontend.js 4.73 kB
build/checkout-blocks/terms-frontend.js 1.22 kB
build/checkout-blocks/totals-frontend.js 323 B
build/checkout-frontend.js 47.4 kB
build/handpicked-products.js 7.1 kB
build/legacy-template.js 2.18 kB
build/mini-cart-component-frontend.js 16 kB
build/mini-cart-contents-block/empty-cart-frontend.js 363 B
build/mini-cart-contents-block/filled-cart-frontend.js 222 B
build/mini-cart-contents-block/footer--mini-cart-contents-block/products-table-frontend.js 5.33 kB
build/mini-cart-contents-block/footer-frontend.js 6.27 kB
build/mini-cart-contents-block/items-frontend.js 206 B
build/mini-cart-contents-block/products-table-frontend.js 5.33 kB
build/mini-cart-contents-block/shopping-button-frontend.js 260 B
build/mini-cart-contents-block/title-frontend.js 348 B
build/mini-cart-frontend.js 1.71 kB
build/price-filter-frontend.js 12.5 kB
build/price-format.js 1.19 kB
build/product-best-sellers.js 7.37 kB
build/product-categories.js 3.17 kB
build/product-category.js 8.49 kB
build/product-new.js 7.67 kB
build/product-on-sale.js 7.99 kB
build/product-search.js 2.19 kB
build/product-tag.js 7.81 kB
build/product-top-rated.js 7.9 kB
build/products-by-attribute.js 8.38 kB
build/reviews-by-category.js 11.4 kB
build/reviews-by-product.js 12.6 kB
build/reviews-frontend.js 7.34 kB
build/stock-filter-frontend.js 6.5 kB
build/stock-filter.js 6.56 kB
build/vendors--atomic-block-components/add-to-cart--cart-blocks/order-summary--checkout-blocks/billing-ad--c5eb4dcd-frontend.js 19 kB
build/vendors--atomic-block-components/add-to-cart-frontend.js 7.51 kB
build/vendors--atomic-block-components/price--cart-blocks/line-items--cart-blocks/order-summary--checkout--194c50bf-frontend.js 5.26 kB
build/vendors--cart-blocks/line-items--checkout-blocks/order-summary--mini-cart-contents-block/products-table-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/order-summary---eb4d2cec-frontend.js 4.74 kB
build/vendors--mini-cart-contents-block/footer--mini-cart-contents-block/products-table-frontend.js 7.72 kB
build/wc-blocks-data.js 9.78 kB
build/wc-blocks-editor-style-rtl.css 4.84 kB
build/wc-blocks-editor-style.css 4.84 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 953 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-style-rtl.css 22.2 kB
build/wc-blocks-style.css 22.2 kB
build/wc-blocks-vendors-style-rtl.css 1.28 kB
build/wc-blocks-vendors-style.css 1.28 kB
build/wc-blocks.js 2.62 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

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.

Thanks for working on this block 🚀
I saw a PHP error:

Block type "woocommerce/product-price" is already registered. 

We need to remove product-price from this array

I left a couple of small comments, but overall looking good 💪

- This comes sat a cost of losing control over regular vs sale price
- This includes refactor of attribute from align to textAlign
   which is a reserved supports feature attribute and textAlign is
   used across the Gutenberg project
This is required to make the GlobalStyles work inside of
the InnerContent block. Ie. All Products block.
@tomasztunik tomasztunik force-pushed the add/global-styles-product-elements-price branch from c301ebd to d031690 Compare February 28, 2022 10:57
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.

Great job! LGTM :shipit:

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

Confirmed regression of possible user customisation via controls with @vivialice.

@tomasztunik tomasztunik merged commit 7ecdbe6 into trunk Feb 28, 2022
@tomasztunik tomasztunik deleted the add/global-styles-product-elements-price branch February 28, 2022 11:36
@frontdevde frontdevde added the type: enhancement The issue is a request for an enhancement. label Feb 28, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block-type: product elements Issues related to Product Element blocks. focus: FSE Work related to prepare WooCommerce for FSE. 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.

Product Price: Improve Global Styles API integration
3 participants