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 Atomic SKU Block #7385

Merged
merged 9 commits into from Nov 10, 2022

Conversation

danielwrobert
Copy link
Contributor

@danielwrobert danielwrobert commented Oct 13, 2022

Adds Product Query support for the atomic SKU block.

On the client side, when the SKU Block is used within the Product Query block, the markup will be rendered on the server side - no javascript related to the SKU block will be loaded.

Fixes #7332

Testing

  1. Checkout this branch and run npm start (need to run the start command to catch the experimental flags).
  2. Be sure that you have the latest version of the Gutenberg feature plugin installed and activated.
  3. Add the woocommerce/product-sku block to the Product Query INNER_BLOCKS_TEMPLATE in assets/js/blocks/product-query/constants.ts under line 54 (only for testing, remove afterwards).
  4. Create a post/page and add the Product Query block.
  5. Save it.
  6. Open the frontend side and confirm that:
    • No JS related to the Product SKU block is loaded (search in your network tab for product-sku-frontend.js).
    • The UI of the block is identical to on the editor side.
    • That the settings are reflected correctly (eg: custom style).
  7. Back in the editor confirm that the Product SKU block can be added as a child of the Product query block via the inserter (inside Product Query > Post Template use Insert Before/After one of the existing children blocks).
  8. For comparison, switch to trunk and add the All Products block to confirm that the aforementioned product-sku-frontend.js is loaded.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

@danielwrobert danielwrobert self-assigned this Oct 13, 2022
@danielwrobert danielwrobert added type: refactor The issue/PR is related to refactoring. skip-changelog PRs that you don't want to appear in the changelog. block-type: product elements Issues related to Product Element blocks. labels Oct 13, 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-7385.zip

@github-actions
Copy link
Contributor

github-actions bot commented Oct 13, 2022

Size Change: +29 B (0%)

Total Size: 990 kB

Filename Size Change
build/all-products.js 33.5 kB +29 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.74 kB
build/active-filters-wrapper-frontend.js 6.02 kB
build/active-filters.js 7.32 kB
build/all-products-frontend.js 26.4 kB
build/all-reviews.js 7.79 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 18.5 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.37 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.47 kB
build/cart-blocks/cart-cross-sells-products-frontend.js 4.68 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 4.93 kB
build/cart-blocks/cart-express-payment-frontend.js 764 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 320 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.73 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--checkout-blocks/order-summary-shipping-frontend.js 5.66 kB
build/cart-blocks/order-summary-shipping-frontend.js 428 B
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.19 kB
build/cart-frontend.js 54.5 kB
build/cart.js 46.2 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 952 B
build/checkout-blocks/contact-information-frontend.js 1.77 kB
build/checkout-blocks/express-payment-frontend.js 1.12 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.89 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.28 kB
build/checkout-blocks/order-summary-fee-frontend.js 275 B
build/checkout-blocks/order-summary-frontend.js 1.11 kB
build/checkout-blocks/order-summary-shipping-frontend.js 603 B
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 7.7 kB
build/checkout-blocks/shipping-address-frontend.js 1.06 kB
build/checkout-blocks/shipping-methods-frontend.js 4.89 kB
build/checkout-blocks/terms-frontend.js 1.63 kB
build/checkout-blocks/totals-frontend.js 323 B
build/checkout-frontend.js 56.6 kB
build/checkout.js 40.3 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.84 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.29 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.25 kB
build/product-add-to-cart.js 8.36 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 1.89 kB
build/product-button.js 3.82 kB
build/product-categories.js 2.36 kB
build/product-category-list-frontend.js 884 B
build/product-category-list.js 502 B
build/product-category.js 8.62 kB
build/product-image-frontend.js 1.91 kB
build/product-image.js 3.94 kB
build/product-new.js 7.63 kB
build/product-on-sale.js 7.95 kB
build/product-price-frontend.js 1.92 kB
build/product-price.js 1.53 kB
build/product-query.js 2.89 kB
build/product-rating-frontend.js 1.2 kB
build/product-rating.js 787 B
build/product-sale-badge-frontend.js 1.15 kB
build/product-sale-badge.js 812 B
build/product-search.js 2.62 kB
build/product-sku-frontend.js 377 B
build/product-sku.js 376 B
build/product-stock-indicator-frontend.js 999 B
build/product-stock-indicator.js 624 B
build/product-summary-frontend.js 1.29 kB
build/product-summary.js 921 B
build/product-tag-list-frontend.js 878 B
build/product-tag-list.js 498 B
build/product-tag.js 8 kB
build/product-title-frontend.js 1.33 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.15 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 32.2 kB
build/single-product.js 10 kB
build/stock-filter-frontend.js 7.78 kB
build/stock-filter-wrapper-frontend.js 6.03 kB
build/stock-filter.js 6.7 kB
build/vendors--attribute-filter-wrapper--mini-cart-contents-block/footer-frontend.js 6.86 kB
build/vendors--attribute-filter-wrapper-frontend.js 8.22 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.53 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/wc-blocks-data.js 18.2 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 931 B
build/wc-blocks-registry.js 2.92 kB
build/wc-blocks-shared-context.js 1.51 kB
build/wc-blocks-shared-hocs.js 1.72 kB
build/wc-blocks-style-rtl.css 24.3 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

@danielwrobert danielwrobert changed the title Add attributes, settings, and editor PQ settings. Add Product Query Support for Atomic SKU Block Oct 13, 2022
@danielwrobert danielwrobert added the block-type: product-query Issues related to/affecting all product-query variations. label Oct 14, 2022
@github-actions
Copy link
Contributor

github-actions bot commented Oct 29, 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.

@danielwrobert danielwrobert marked this pull request as ready for review October 31, 2022 18:58
@rubikuserbot rubikuserbot requested review from a team and Aljullu and removed request for a team October 31, 2022 18:58
Copy link
Contributor

@imanish003 imanish003 left a comment

Choose a reason for hiding this comment

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

The UI of the block is identical to on the editor side.

For me, UI looks different in editor vs frontend.

Editor Frontend
image image

Also, in this PR for the Rating block, you converted js to ts. I am not sure if that is something we wanna cover in this PR too.

@danielwrobert
Copy link
Contributor Author

@imanish003 nice catch, thank you! Fixed in d6952b0.

The TS conversion took place separately but I have rebased this PR to include those changes from trunk.

@github-actions
Copy link
Contributor

github-actions bot commented Nov 9, 2022

TypeScript Errors Report

Files with errors: 440
Total errors: 2095

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

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

@@ -17,11 +17,16 @@ import {
} from './constants';

const blockConfig: BlockConfiguration = {
...sharedConfig,
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Just want to confirm we don't need this here, as we're spreading/merging the same config object in the registerExperimentalBlockType function below.

It seems redundant to spread it here in this definition, unless I'm missing something.

Copy link
Contributor

@imanish003 imanish003 left a comment

Choose a reason for hiding this comment

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

Verified, Now UI on Editor and Frontend looks the same 🚀

@danielwrobert danielwrobert force-pushed the add/atomic-sku-pq-support branch 2 times, most recently from b2fab83 to f458d5c Compare November 10, 2022 15:54
danielwrobert and others added 7 commits November 10, 2022 11:22
- Adds isDescendentOfQueryLoop attribute and sets up usage in editor.
- Connects Context (via useContext) in editor.
- Sets up necessary hierarchy in block index file settings.
Reassign parent array to ancestor array which allows for blocks to be
included with more flexibility - i.e., added within groups that are
children of the ancestor block.
SSR markup was accidentally using rating classname instead of sku so it
was not applying the proper text transform seen in the editor.
This keeps things consistent with the type naming on the other blocks.
We don't need to spread the `sharedConfig` object into the `blockConfig`
object when defining `blockConfig` since we spread/merge these two
objects when registering the block via `registerExperimentalBlockType`.
@danielwrobert danielwrobert merged commit 5b239c3 into trunk Nov 10, 2022
@danielwrobert danielwrobert deleted the add/atomic-sku-pq-support branch November 10, 2022 18:32
senadir pushed a commit to senadir/woocommerce-blocks that referenced this pull request Nov 12, 2022
* Add attributes, settings, and editor PQ settings.

- Adds isDescendentOfQueryLoop attribute and sets up usage in editor.
- Connects Context (via useContext) in editor.
- Sets up necessary hierarchy in block index file settings.

* Update parent inner blocks config.

Reassign parent array to ancestor array which allows for blocks to be
included with more flexibility - i.e., added within groups that are
children of the ancestor block.

* Add dynamic render function for PQ support.

* Update to use correct classnames on PHP side.

SSR markup was accidentally using rating classname instead of sku so it
was not applying the proper text transform seen in the editor.

* Rename BlockAttributes type to Attributes

This keeps things consistent with the type naming on the other blocks.

* Remove redundant spread of sharedConfig object.

We don't need to spread the `sharedConfig` object into the `blockConfig`
object when defining `blockConfig` since we spread/merge these two
objects when registering the block via `registerExperimentalBlockType`.

* bot: update checkstyle.xml

* bot: update checkstyle.xml

* Empty commit to trigger checks.

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
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 Sku Block
2 participants