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

Add product query support for Sale badge block #7709

Merged
merged 5 commits into from
Nov 23, 2022

Conversation

imanish003
Copy link
Contributor

@imanish003 imanish003 commented Nov 18, 2022

Adds Product Query support for the atomic Sale badge block

On the client side, when the Sale badge block is used within the product query block, the markup will be rendered on the server side - No javascript related to Sale badge block will be rendered.

Fixes #7331

Testing

  1. Checkout this branch and run npm start
  2. Be sure that you have latest version of the Gutenberg feature plugin installed and activated
  3. Create a post/page and add the Product Query block.
  4. Add Sale Badge block to Post Template of product query block as shown in video below:
    https://user-images.githubusercontent.com/16707866/202644003-ee85857b-a01f-4b4f-819a-ec910b630dd5.mov
  5. Now save the post & Open the frontend side and confirm that:
  • No JS related to the Product Sale Badge block is loaded (search in your network tab for product-sale-badge-frontend.js). As you can see in the screenshot below, product-sale-badge-frontend.js showing before the changes made in this PR. This shouldn't be visible in network tab anymore.

image

  • The UI of the block is identical to on the editor side.
  • That the settings are reflected correctly (eg: custom style). Try changing custom style from the sidebar(Shown in screenshot below):

image

  • ADDITIONAL CSS CLASS(ES)(available in advanced toggle in sidebar) should be added to the container div

image

  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

@github-actions
Copy link
Contributor

The release ZIP for this PR is accessible via:

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

@github-actions
Copy link
Contributor

github-actions bot commented Nov 18, 2022

TypeScript Errors Report

Files with errors: 429
Total errors: 2064

⚠️ ⚠️ This PR introduces new TS errors on 2 files:

assets/js/atomic/blocks/product-elements/sale-badge/index.ts

assets/js/blocks/cart/cart-cross-sells-product-list/cart-cross-sells-product.tsx

@github-actions
Copy link
Contributor

github-actions bot commented Nov 18, 2022

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.

@imanish003 imanish003 added skip-changelog PRs that you don't want to appear in the changelog. type: refactor The issue/PR is related to refactoring. block-type: product elements Issues related to Product Element blocks. block-type: product-query Issues related to/affecting all product-query variations. labels Nov 18, 2022
@github-actions
Copy link
Contributor

github-actions bot commented Nov 18, 2022

Size Change: +13 B (0%)

Total Size: 971 kB

Filename Size Change
build/all-products.js 33.1 kB +13 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.75 kB
build/active-filters-wrapper-frontend.js 6.01 kB
build/active-filters.js 7.33 kB
build/all-products-frontend.js 11.3 kB
build/all-reviews.js 7.78 kB
build/attribute-filter-frontend.js 22.6 kB
build/attribute-filter-wrapper-frontend.js 7.12 kB
build/attribute-filter.js 12.2 kB
build/blocks-checkout.js 27.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-cross-sells-products--product-add-to-cart-frontend.js 5.48 kB
build/cart-blocks/cart-cross-sells-products-frontend.js 4.74 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.02 kB
build/cart-blocks/cart-express-payment-frontend.js 778 B
build/cart-blocks/cart-items-frontend.js 299 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.29 kB
build/cart-blocks/cart-line-items-frontend.js 1.07 kB
build/cart-blocks/cart-order-summary-frontend.js 1.11 kB
build/cart-blocks/cart-totals-frontend.js 319 B
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/filled-cart-frontend.js 783 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.72 kB
build/cart-blocks/order-summary-discount-frontend.js 2.16 kB
build/cart-blocks/order-summary-fee-frontend.js 273 B
build/cart-blocks/order-summary-heading-frontend.js 455 B
build/cart-blocks/order-summary-shipping-frontend.js 5.99 kB
build/cart-blocks/order-summary-subtotal-frontend.js 274 B
build/cart-blocks/order-summary-taxes-frontend.js 435 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.19 kB
build/cart-frontend.js 46.2 kB
build/cart.js 46.1 kB
build/checkout-blocks/actions-frontend.js 1.77 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 3.9 kB
build/checkout-blocks/billing-address-frontend.js 955 B
build/checkout-blocks/contact-information-frontend.js 1.77 kB
build/checkout-blocks/express-payment-frontend.js 1.13 kB
build/checkout-blocks/fields-frontend.js 343 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.67 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.88 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.27 kB
build/checkout-blocks/order-summary-fee-frontend.js 276 B
build/checkout-blocks/order-summary-frontend.js 1.11 kB
build/checkout-blocks/order-summary-shipping-frontend.js 6.04 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/order-summary-taxes-frontend.js 435 B
build/checkout-blocks/payment-frontend.js 8.29 kB
build/checkout-blocks/shipping-address-frontend.js 1.07 kB
build/checkout-blocks/shipping-methods-frontend.js 5.03 kB
build/checkout-blocks/terms-frontend.js 1.63 kB
build/checkout-blocks/totals-frontend.js 325 B
build/checkout-frontend.js 48.3 kB
build/checkout.js 40.1 kB
build/featured-category.js 13.2 kB
build/featured-product.js 13.4 kB
build/filter-wrapper-frontend.js 13.8 kB
build/filter-wrapper.js 2.41 kB
build/general-style-rtl.css 1.29 kB
build/general-style.css 1.29 kB
build/handpicked-products.js 7.29 kB
build/legacy-template.js 2.85 kB
build/mini-cart-component-frontend.js 20 kB
build/mini-cart-contents-block/empty-cart-frontend.js 366 B
build/mini-cart-contents-block/filled-cart-frontend.js 230 B
build/mini-cart-contents-block/footer-frontend.js 2.97 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 591 B
build/mini-cart-contents-block/shopping-button-frontend.js 288 B
build/mini-cart-contents-block/title-frontend.js 368 B
build/mini-cart-contents.js 17.1 kB
build/mini-cart-frontend.js 1.77 kB
build/mini-cart.js 4.28 kB
build/price-filter-frontend.js 13.6 kB
build/price-filter-wrapper-frontend.js 7.01 kB
build/price-filter.js 8.37 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-category-list--product-image--product-price--product-r--a0326d00.js 226 B
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 151 B
build/product-add-to-cart-frontend.js 1.46 kB
build/product-add-to-cart.js 8.37 kB
build/product-best-sellers.js 7.62 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 431 B
build/product-button--product-image--product-rating--product-sale-badge--product-title.js 302 B
build/product-button-frontend.js 2.13 kB
build/product-button.js 3.82 kB
build/product-categories.js 2.36 kB
build/product-category-list-frontend.js 1.13 kB
build/product-category-list.js 502 B
build/product-category.js 8.62 kB
build/product-image-frontend.js 2.16 kB
build/product-image.js 3.93 kB
build/product-new.js 7.62 kB
build/product-on-sale.js 7.96 kB
build/product-price-frontend.js 2.15 kB
build/product-price.js 1.53 kB
build/product-query.js 3.2 kB
build/product-rating-frontend.js 1.45 kB
build/product-rating.js 787 B
build/product-sale-badge-frontend.js 1.38 kB
build/product-sale-badge.js 811 B
build/product-search.js 2.62 kB
build/product-sku-frontend.js 630 B
build/product-sku.js 377 B
build/product-stock-indicator-frontend.js 1.26 kB
build/product-stock-indicator.js 645 B
build/product-summary-frontend.js 1.52 kB
build/product-summary.js 921 B
build/product-tag-list-frontend.js 1.12 kB
build/product-tag-list.js 497 B
build/product-tag.js 8 kB
build/product-title-frontend.js 1.58 kB
build/product-title.js 3.3 kB
build/product-top-rated.js 7.86 kB
build/products-by-attribute.js 8.54 kB
build/rating-filter-frontend.js 7.16 kB
build/rating-filter-wrapper-frontend.js 5.41 kB
build/rating-filter.js 5.79 kB
build/reviews-by-category.js 11.2 kB
build/reviews-by-product.js 12.3 kB
build/reviews-frontend.js 7.01 kB
build/single-product-frontend.js 17.5 kB
build/single-product.js 10 kB
build/stock-filter-frontend.js 7.79 kB
build/stock-filter-wrapper-frontend.js 6.03 kB
build/stock-filter.js 6.71 kB
build/vendors--attribute-filter-wrapper--mini-cart-contents-block/footer--product-add-to-cart-frontend.js 6.87 kB
build/vendors--attribute-filter-wrapper-frontend.js 8.2 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--671ca56f-frontend.js 5.26 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.1 kB
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 7.54 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--5b8feb0b-frontend.js 4.86 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping--checkout-block--dda5866c-frontend.js 8.85 kB
build/wc-blocks-data.js 18.6 kB
build/wc-blocks-editor-style-rtl.css 5.24 kB
build/wc-blocks-editor-style.css 5.24 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 934 B
build/wc-blocks-registry.js 2.92 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 24.2 kB
build/wc-blocks-style.css 24.2 kB
build/wc-blocks-vendors-style-rtl.css 1.95 kB
build/wc-blocks-vendors-style.css 1.95 kB
build/wc-blocks-vendors.js 62.4 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

compressed-size-action

@imanish003 imanish003 marked this pull request as ready for review November 23, 2022 05:23
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.

Everything is working well and code looks good. 👌 I left one minor comment but LGTM.

src/Utils/StyleAttributesUtils.php Outdated Show resolved Hide resolved
imanish003 and others added 4 commits November 23, 2022 16:54
On the client side, when the Sale badge block is used within the product query block, the markup will be rendered on the server side - No javascript related to Sale badge block will be rendered.
ADDITIONAL CSS CLASS(ES)(available in advanced toggle in sidebar) should be added to the container div
We are getting padding value in preset format like this:
"var:preset|spacing|50"
Therefore I added a function to convert it to CSS variable like this:
"var(--wp--preset--spacing--50)"

i.e. "var:preset|spacing|50" -> "var(--wp--preset--spacing--50)"
@imanish003 imanish003 force-pushed the add/7331-sale-badge-block-pq-support branch from dba4570 to f859dcd Compare November 23, 2022 11:25
@imanish003 imanish003 merged commit ca4bad3 into trunk Nov 23, 2022
@imanish003 imanish003 deleted the add/7331-sale-badge-block-pq-support branch November 23, 2022 11:42
tarunvijwani pushed a commit that referenced this pull request Nov 24, 2022
* Add product query support for Sale badge block

On the client side, when the Sale badge block is used within the product query block, the markup will be rendered on the server side - No javascript related to Sale badge block will be rendered.

* Add support for additional CSS class(es)

ADDITIONAL CSS CLASS(ES)(available in advanced toggle in sidebar) should be added to the container div

* Convert preset to css variable for padding

We are getting padding value in preset format like this:
"var:preset|spacing|50"
Therefore I added a function to convert it to CSS variable like this:
"var(--wp--preset--spacing--50)"

i.e. "var:preset|spacing|50" -> "var(--wp--preset--spacing--50)"

* Add reference for preset to css variable conversion logic
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. block-type: product-query Issues related to/affecting all product-query variations. skip-changelog PRs that you don't want to appear in the changelog. type: refactor The issue/PR is related to refactoring.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Product Query: [Atomic Block] Convert Sale Badge Block
2 participants