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

Product Price: support for background color, line height, font family, letter spacing, and padding. #8906

Merged
merged 7 commits into from
Apr 4, 2023

Conversation

imanish003
Copy link
Contributor

@imanish003 imanish003 commented Mar 30, 2023

This Pull Request enhances the styling capabilities of the Product Price block by introducing additional support for background color, line height, font family, letter spacing, and padding. This improvement provides users with more flexibility when customizing the appearance of the Product Price block.

Part of #8692 & #7954

Testing

Test using blocks sidebar

  1. Create a new page or post
  2. Add the "Products" block to your post.
  3. Select the Product Price block and open the block settings in the right sidebar.
  4. Customize the block using the new styling options available:
    • Change the background color under the "Color" settings.
    • Adjust the line height, font family, and letter spacing under the "Typography" settings.
    • Modify the padding under the "Dimensions" settings.
  5. Verify that the styling changes are immediately visible and applied correctly within the editor itself.
  6. Save the post, then view it on the front-end to ensure the styling changes are visible and applied correctly.

Test using blocks sidebar

  1. Open the Global Styles sidebar by clicking the "Styles" button at the top right corner of the editor.
Screen.Recording.2023-03-30.at.2.17.57.PM.mov
  1. In the Global Styles sidebar, locate the "Product Price" block.
  2. Customize the block using the new styling options available under the "Product Price" block in the Global Styles sidebar:
    • Change the background color under the "Colors" settings.
    • Adjust the line height, font family, and letter spacing under the "Typography" settings.
    • Modify the padding under the "Layout" settings.
  3. Verify that these applied correctly within editor & on frontend:
    1. Create a new post
    2. Add Products block
    3. Add Product Price block as an inner block if not included already
    4. Check the Product Price block in both the editor and on the front-end to ensure that the changes made through the Global styles UI are accurately applied:
      - In the editor, inspect Product Price block & ensure it matches the value set in the Global styles UI.
      - Save the post & publish it. On frontend, inspect Product Price block & ensure it matches the value set in the Global styles UI.

Also, verify these in all products block, which also uses Product Price block.

  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Enhance Product Price block styling capabilities with additional support for background color, line height, font family, letter spacing, and padding.

This commit adds additional typography and spacing support to the Product Price block. The following changes have been made:

1. In `assets/js/atomic/blocks/product-elements/price/block.tsx`, the `typographyProps.className` has been added to the `classNames` function to apply the typography styles.

2. In `assets/js/atomic/blocks/product-elements/price/supports.ts`, the following support attributes have been added to the `typography` object:
  - `lineHeight`
  - `__experimentalFontFamily`
  - `__experimentalLetterSpacing`
Additionally, the `padding` attribute has been added to the `spacing` object.

3. In `src/BlockTypes/ProductPrice.php`, the `StyleAttributesUtils::get_classes_and_styles_by_attributes` function has been updated to receive all attributes instead of a predefined list.
This commit enables the background color support for the Product Price block in the WooCommerce Blocks plugin. The following change has been made:

1. In `assets/js/atomic/blocks/product-elements/price/supports.ts`, the `background` property within the `color` object has been changed from `false` to `true`, allowing users to set the background color for the Product Price block.
@imanish003 imanish003 changed the title Add/7954 product price global styles review Product Price: support for background color, line height, font family, letter spacing, and padding. Mar 30, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Mar 30, 2023

The release ZIP for this PR is accessible via:

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

Size Change: +28 B (0%)

Total Size: 1.07 MB

Filename Size Change
build/all-products-frontend.js 11.8 kB +1 B (0%)
build/all-products.js 37.5 kB +8 B (0%)
build/cart-blocks/cart-cross-sells-products-frontend.js 9.72 kB +5 B (0%)
build/cart-frontend.js 29.3 kB +2 B (0%)
build/cart.js 48.3 kB +7 B (0%)
build/product-price-frontend.js 2.08 kB +5 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-reviews.js 7.65 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-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 301 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.07 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 655 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.32 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 275 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 309 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 kB
build/filter-wrapper.js 2.39 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 705 B
build/mini-cart-contents-block/title-frontend.js 368 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.96 kB
build/price-filter.js 8.4 kB
build/price-format.js 1.19 kB
build/product-add-to-cart-frontend.js 6.43 kB
build/product-add-to-cart.js 178 B
build/product-best-sellers.js 8.26 kB
build/product-button-frontend.js 1.91 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 178 B
build/product-new.js 8.26 kB
build/product-on-sale.js 8.59 kB
build/product-query.js 11 kB
build/product-rating-frontend.js 1.34 kB
build/product-results-count.js 1.66 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.98 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.7 kB
build/store-notices.js 1.69 kB
build/vendors--attribute-filter-wrapper--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary--ef6753df-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-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.4 kB
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 7.25 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/billing-address--checkout-blocks/shipping-address-frontend.js 5.44 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.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-style-rtl.css 27.1 kB
build/wc-blocks-style.css 27.1 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

@imanish003 imanish003 added block-type: product-query Issues related to/affecting all product-query variations. type: enhancement The issue is a request for an enhancement. focus: blocks Specific work involving or impacting how blocks behave. labels Mar 30, 2023
@imanish003 imanish003 marked this pull request as ready for review March 30, 2023 09:23
@woocommercebot woocommercebot requested review from a team and thealexandrelara and removed request for a team March 30, 2023 09:23
Copy link
Contributor

@thealexandrelara thealexandrelara 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! I tested and it is working as expected! Thank you!

@imanish003 imanish003 enabled auto-merge (squash) April 4, 2023 09:55
@imanish003 imanish003 merged commit 74badf2 into trunk Apr 4, 2023
@imanish003 imanish003 deleted the add/7954-product-price-global-styles-review branch April 4, 2023 10:08
@opr opr added this to the 10.0.0 milestone Apr 10, 2023
@kmanijak kmanijak mentioned this pull request May 5, 2023
6 tasks
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block-type: product-query Issues related to/affecting all product-query variations. focus: blocks Specific work involving or impacting how blocks behave. 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