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 Product Summary block #7774

Merged
merged 7 commits into from
Dec 1, 2022

Conversation

imanish003
Copy link
Contributor

@imanish003 imanish003 commented Nov 29, 2022

Adds Product Query support for the atomic Product Summary block

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

Fixes #7334

Testing

  1. Checkout this branch and run npm start
  2. Be sure that you have the latest version of the Gutenberg feature plugin installed and activated
  3. Create a post/page and add the Product Query block.
  4. Add Product Summary block to Post Template of product query block as shown in video below:
Screen.Recording.2022-11-29.at.12.01.41.PM.mov
  1. Now save the post & confirm that:
    1. No JS related to the Product Summary block is loaded (search in your network tab for product-summary-frontend.js). As you can see in the screenshot below, product-summary-frontend.js is showing. This shouldn't be visible in the network tab.
      image
    2. UI of block should be identical in Frontend & Editor.
    3. The settings are reflected correctly (eg: custom style). Try changing custom style from the sidebar.
    4. ADDITIONAL CSS CLASS(ES)(available in advanced toggle in sidebar) should be added to the container div
    5. Summary text styling set using WYSIWYG editor should work in Editor & frontend. By WYSIWYG editor, I mean following editing block of product:
      image
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

On the client side, when the Product Summary block is used within the product query block, the markup will be rendered on the server side - No javascript related to Product Summary block will be rendered.
@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 29, 2022
@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-7774.zip

@github-actions
Copy link
Contributor

github-actions bot commented Nov 29, 2022

TypeScript Errors Report

Files with errors: 432
Total errors: 2067

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

assets/js/atomic/blocks/product-elements/summary/attributes.ts

assets/js/atomic/blocks/product-elements/summary/index.ts

@github-actions
Copy link
Contributor

github-actions bot commented Nov 29, 2022

Size Change: -3 B (0%)

Total Size: 972 kB

Filename Size Change
build/all-products.js 33.1 kB -3 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.74 kB
build/active-filters-wrapper-frontend.js 6.01 kB
build/active-filters.js 7.32 kB
build/all-products-frontend.js 11.3 kB
build/all-reviews.js 7.79 kB
build/attribute-filter-frontend.js 22.6 kB
build/attribute-filter-wrapper-frontend.js 7.14 kB
build/attribute-filter.js 12.3 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.04 kB
build/cart-blocks/cart-express-payment-frontend.js 779 B
build/cart-blocks/cart-items-frontend.js 298 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 781 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.89 kB
build/checkout-blocks/billing-address-frontend.js 955 B
build/checkout-blocks/contact-information-frontend.js 1.8 kB
build/checkout-blocks/express-payment-frontend.js 1.13 kB
build/checkout-blocks/fields-frontend.js 344 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.89 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.28 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 436 B
build/checkout-blocks/payment-frontend.js 8.31 kB
build/checkout-blocks/shipping-address-frontend.js 1.07 kB
build/checkout-blocks/shipping-methods-frontend.js 5.01 kB
build/checkout-blocks/terms-frontend.js 1.64 kB
build/checkout-blocks/totals-frontend.js 324 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.4 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.95 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 590 B
build/mini-cart-contents-block/shopping-button-frontend.js 289 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.88 kB
build/mini-cart.js 4.28 kB
build/price-filter-frontend.js 13.6 kB
build/price-filter-wrapper-frontend.js 7.02 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 227 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 432 B
build/product-button--product-image--product-rating--product-sale-badge--product-title.js 301 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.95 kB
build/product-price-frontend.js 2.15 kB
build/product-price.js 1.53 kB
build/product-query.js 4.44 kB
build/product-rating-frontend.js 1.44 kB
build/product-rating.js 787 B
build/product-sale-badge-frontend.js 1.38 kB
build/product-sale-badge.js 816 B
build/product-search.js 2.62 kB
build/product-sku-frontend.js 629 B
build/product-sku.js 377 B
build/product-stock-indicator-frontend.js 1.26 kB
build/product-stock-indicator.js 646 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 498 B
build/product-tag.js 8 kB
build/product-title-frontend.js 1.57 kB
build/product-title.js 3.3 kB
build/product-top-rated.js 7.87 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.02 kB
build/single-product-frontend.js 17.5 kB
build/single-product.js 10 kB
build/stock-filter-frontend.js 7.8 kB
build/stock-filter-wrapper-frontend.js 6.04 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.86 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.85 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.7 kB
build/wc-blocks-editor-style-rtl.css 5.19 kB
build/wc-blocks-editor-style.css 5.19 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 29, 2022 07:09
@rubikuserbot rubikuserbot requested review from a team and Aljullu and removed request for a team November 29, 2022 07:09
@sunyatasattva
Copy link
Contributor

Curious here: why skip changelog? I think this is changelog-worthy.

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.

Thanks for creating this PR, @imanish003! This is testing well and code overall looks good. However, I think we should escape all values we print in render().

Even when they come from a source we know (ie: StyleAttributesUtils::get_classes_and_styles_by_attributes()), we should be escaping everything we print in the HTML. Otherwise, we might introduce a filter in get_classes_and_styles_by_attributes() in the future, and a plugin would be able to modify the output and print some malicious code in there.

I saw #7709, #7675 and #7734 are also affected by this. Will you be able to update them (if the PR is open) or create a new PR fixing it (if the original PR has already been merged?). We would need this to be fixed before the release next Monday.

src/BlockTypes/ProductSummary.php Outdated Show resolved Hide resolved
src/BlockTypes/ProductSummary.php Outdated Show resolved Hide resolved
src/BlockTypes/ProductSummary.php Outdated Show resolved Hide resolved
src/BlockTypes/ProductSummary.php Outdated Show resolved Hide resolved
@imanish003
Copy link
Contributor Author

Hi @Aljullu,
Thanks for pointing out the escaping issue 🙏🏻 I have made the changes. Can you please have a look again? Meanwhile, I am going to make the same changes in PRs too 🙂

@imanish003 imanish003 requested a review from Aljullu November 30, 2022 10:03
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.

Thanks for updating this PR, @imanish003! I had a small issue when the block had some custom styling, but besides that, everything looks good. I commented it inline below.

src/BlockTypes/ProductSummary.php Outdated Show resolved Hide resolved
src/BlockTypes/ProductSummary.php Outdated Show resolved Hide resolved
@Aljullu
Copy link
Contributor

Aljullu commented Nov 30, 2022

Curious here: why skip changelog? I think this is changelog-worthy.

@sunyatasattva I guess it's because the Product Query block hasn't been released yet (until next release), so probably there is no need to mention all its improvements in the changelog until it has been published, no?

@sunyatasattva
Copy link
Contributor

Curious here: why skip changelog? I think this is changelog-worthy.

@sunyatasattva I guess it's because the Product Query block hasn't been released yet (until next release), so probably there is no need to mention all its improvements in the changelog until it has been published, no?

Yep, @Aljullu, we talked privately with Manish and decided that from next release onwards, these kind of changes should have changelog entries, but for now it's ok like this.

The downside is that, as we release, these won't appear on the list. But I guess our Release Post can cover everything.

@imanish003 imanish003 mentioned this pull request Dec 1, 2022
4 tasks
@imanish003 imanish003 requested a review from Aljullu December 1, 2022 11:29
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.

This is testing well and code looks good. Thanks @imanish003! 🚢

@github-actions github-actions bot added this to the 9.1.0 milestone Dec 1, 2022
@imanish003 imanish003 merged commit ff0b05e into trunk Dec 1, 2022
@imanish003 imanish003 deleted the add/7334-product-summary-block-pq-support branch December 1, 2022 12:07
imanish003 added a commit that referenced this pull request Dec 2, 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. 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 Product Summary Block
3 participants