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

Product Query: create variation of core/post-excerpt as a Product Query inner block #7837

Merged
merged 29 commits into from
Dec 5, 2022

Conversation

sunyatasattva
Copy link
Contributor

As much as we can, we should use core blocks when the functionality is mostly overlapping. In the case of the Post Title block, we don't need to add and maintain our own block most likely, so we should just brand the Post Title block instead.

This PR does the following:

  • Creates a new block variation based on the core “Post Excerpt” called “Product Summary”.
  • Brands it as our old “Product Summary” atomic element.
  • Creates a utility function to allow easy creation of such variations.

Fixes #7835

Testing

Automated Tests

  • Changes in this PR are covered by Automated Tests.
    • Unit tests
    • E2E tests

User Facing Testing

  1. Add a Product Query block.
  2. Add a “Product Summary” block within the “Post template” inner blocks.
  3. Ensure that the “Product Summary” block is equivalent to the “Post excerpt” block.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

The prompt doesn't appear at the very bottom as there isn't
currently any straightforward way to do this in the block variation.

More investigation is required.
The order of the inspector controls is set in Gutenberg.
We can hack our way down by hooking to the “color” group and
display our feedback there.

Other panels would be displayed below that if added, such as borders
and margin.
We already had `atomic-blocks` but it wasn't resolving correctly in
VSCode, although it was working as a module resolution.

Adding this path also makes the import shorter.
Eventually, we might want to remove `atomic-blocks` path
resolver altogether, perhaps.
@sunyatasattva sunyatasattva added type: enhancement The issue is a request for an enhancement. status: blocker Used on issues or pulls that block work from being released. type: new block Applied to work that introduces a new block (typically used on an epic issue). skip-changelog PRs that you don't want to appear in the changelog. block-type: product-query Issues related to/affecting all product-query variations. labels Dec 3, 2022
@sunyatasattva sunyatasattva self-assigned this Dec 3, 2022
@sunyatasattva sunyatasattva changed the title Add/7736 core post excerpt variation Product Query: create variation of core/post-excerpt as a Product Query inner block Dec 3, 2022
The prompt doesn't appear at the very bottom as there isn't
currently any straightforward way to do this in the block variation.

More investigation is required.
The order of the inspector controls is set in Gutenberg.
We can hack our way down by hooking to the “color” group and
display our feedback there.

Other panels would be displayed below that if added, such as borders
and margin.
We already had `atomic-blocks` but it wasn't resolving correctly in
VSCode, although it was working as a module resolution.

Adding this path also makes the import shorter.
Eventually, we might want to remove `atomic-blocks` path
resolver altogether, perhaps.
@sunyatasattva sunyatasattva force-pushed the add/7735-core-post-title-variation branch from 825adb7 to e2ed4ea Compare December 5, 2022 15:37
@github-actions
Copy link
Contributor

github-actions bot commented Dec 5, 2022

The release ZIP for this PR is accessible via:

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

@github-actions
Copy link
Contributor

github-actions bot commented Dec 5, 2022

Size Change: +234 B (0%)

Total Size: 974 kB

Filename Size Change
build/active-filters.js 7.32 kB -1 B (0%)
build/all-products.js 33.2 kB +21 B (0%)
build/all-reviews.js 7.79 kB +2 B (0%)
build/attribute-filter.js 12.3 kB -3 B (0%)
build/cart.js 46.4 kB +9 B (0%)
build/checkout.js 40.5 kB +17 B (0%)
build/featured-category.js 13.2 kB +9 B (0%)
build/featured-product.js 13.4 kB -2 B (0%)
build/filter-wrapper.js 2.4 kB -1 B (0%)
build/handpicked-products.js 7.29 kB +3 B (0%)
build/mini-cart-contents.js 17.1 kB -3 B (0%)
build/price-filter.js 8.38 kB +12 B (0%)
build/product-best-sellers.js 7.62 kB +1 B (0%)
build/product-button--product-image--product-rating--product-sale-badge--product-title.js 301 B -1 B (0%)
build/product-button.js 3.85 kB -2 B (0%)
build/product-categories.js 2.36 kB +1 B (0%)
build/product-category-list.js 503 B +1 B (0%)
build/product-category.js 8.61 kB -4 B (0%)
build/product-image.js 3.93 kB -1 B (0%)
build/product-new.js 7.62 kB -2 B (0%)
build/product-on-sale.js 7.95 kB +1 B (0%)
build/product-price.js 1.54 kB -1 B (0%)
build/product-query.js 5.74 kB +154 B (+3%)
build/product-sale-badge.js 811 B -3 B (0%)
build/product-search.js 2.61 kB -3 B (0%)
build/product-stock-indicator.js 644 B -1 B (0%)
build/product-summary.js 920 B -1 B (0%)
build/product-tag-list.js 497 B -1 B (0%)
build/product-top-rated.js 7.86 kB -3 B (0%)
build/products-by-attribute.js 8.54 kB -3 B (0%)
build/rating-filter.js 5.8 kB +4 B (0%)
build/reviews-by-product.js 12.3 kB +3 B (0%)
build/single-product.js 10.1 kB +3 B (0%)
build/stock-filter.js 6.71 kB +3 B (0%)
build/wc-blocks-vendors.js 62.4 kB +25 B (0%)
build/wc-blocks.js 2.63 kB +1 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.74 kB
build/active-filters-wrapper-frontend.js 6.01 kB
build/all-products-frontend.js 11.3 kB
build/attribute-filter-frontend.js 22.6 kB
build/attribute-filter-wrapper-frontend.js 7.14 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.77 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.04 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.24 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 782 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.73 kB
build/cart-blocks/order-summary-discount-frontend.js 2.15 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/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 1.09 kB
build/checkout-blocks/contact-information-frontend.js 1.79 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.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.24 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.63 kB
build/checkout-blocks/totals-frontend.js 325 B
build/checkout-frontend.js 48.3 kB
build/filter-wrapper-frontend.js 13.8 kB
build/general-style-rtl.css 1.29 kB
build/general-style.css 1.29 kB
build/legacy-template.js 2.86 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 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-frontend.js 1.88 kB
build/mini-cart.js 4.29 kB
build/price-filter-frontend.js 13.6 kB
build/price-filter-wrapper-frontend.js 7.02 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-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 430 B
build/product-button-frontend.js 2.17 kB
build/product-category-list-frontend.js 1.13 kB
build/product-image-frontend.js 2.16 kB
build/product-price-frontend.js 2.16 kB
build/product-rating-frontend.js 1.47 kB
build/product-rating.js 816 B
build/product-sale-badge-frontend.js 1.38 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-summary-frontend.js 1.52 kB
build/product-tag-list-frontend.js 1.12 kB
build/product-tag.js 8 kB
build/product-title-frontend.js 1.57 kB
build/product-title.js 3.3 kB
build/rating-filter-frontend.js 7.16 kB
build/rating-filter-wrapper-frontend.js 5.41 kB
build/reviews-by-category.js 11.2 kB
build/reviews-frontend.js 7.02 kB
build/single-product-frontend.js 17.5 kB
build/stock-filter-frontend.js 7.8 kB
build/stock-filter-wrapper-frontend.js 6.04 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-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

@github-actions
Copy link
Contributor

github-actions bot commented Dec 5, 2022

TypeScript Errors Report

Files with errors: 430
Total errors: 2065

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

assets/js/blocks/product-query/variations/elements/product-summary.tsx

Base automatically changed from add/7735-core-post-title-variation to trunk December 5, 2022 15:56
@github-actions
Copy link
Contributor

github-actions bot commented Dec 5, 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.

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.

LGTM! 🚢

@github-actions github-actions bot added this to the 9.1.0 milestone Dec 5, 2022
@sunyatasattva sunyatasattva merged commit 590d594 into trunk Dec 5, 2022
@sunyatasattva sunyatasattva deleted the add/7736-core-post-excerpt-variation branch December 5, 2022 16:25
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. skip-changelog PRs that you don't want to appear in the changelog. status: blocker Used on issues or pulls that block work from being released. type: enhancement The issue is a request for an enhancement. type: new block Applied to work that introduces a new block (typically used on an epic issue).
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Product Query] [3]: [Atomic Block] [Variation] Use core Post Excerpt instead of ours
2 participants