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

Product search block as core/search variation #6191

Merged
merged 21 commits into from Aug 23, 2022

Conversation

tomasztunik
Copy link
Contributor

@tomasztunik tomasztunik commented Apr 5, 2022

Implements Search Block as a variation of Gutenberg core/search block:

Compatibility:

  • Ensures the legacy block work before users convert it to Core Search variation in the Editor.
  • Even though WooCommerce Blocks has an L0 support policy, we need to care about backward compatibility if we want to merge Product search block as core/search variation #6191 to WC Core, so adding legacy block back is necessary.

Should be tested against Gutenberg ≥ 13.4

Limitations:

  • Once the block is converted to core/search variation, it's out of our control.
  • We can't transform the search widget to product search variation.

Fixes #6170

Accessibility

Other Checks

  • I've updated this doc for any feature flags or experimental interfaces implemented in this pull request.
  • I tagged two reviewers because this PR makes queries to the database or I think it might have some security impact.

Screenshots

Screen.Recording.2022-07-29.at.12.57.56.mov

Testing

Automated Tests

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

User Facing Testing

These are steps for user testing (where "user" is someone interacting with this change that is not editing any code).

  1. Ensure the Gutenberg version is ≥ 13.4 and it is deactivated.
  2. With a block theme (2022 for example), add the Product Search block to the header.
  3. See the Product Search is the independent block (as it is in trunk), not a variation of the Search block. See the block is editable in the editor and working as expected on the front end.
  4. Activate Gutenberg.
  5. On the front end, see the block is still working as expected and is still a WC block (notice the classes, and search icon).
  6. Edit the header, see the Deprecation notice, and a call to action button to upgrade the search block to search variation.
  7. Click on the CTA button to see if the block is converted to WC variation of the core search block.
  8. Save and see the block functions flawlessly on the front end.
  9. Edit the header again, try adding the Product Search block, only variation is available in the inserter. The legacy can't be found and inserted from the inserter.

Performance Impact

N/A

Changelog

Register product search as a core/search variation when available.

@rubikuserbot rubikuserbot requested review from a team and Aljullu and removed request for a team April 5, 2022 11:11
@github-actions
Copy link
Contributor

github-actions bot commented Apr 5, 2022

Script Dependencies Report

The compare-assets action has detected some changed script dependencies between this branch and trunk. Please review and confirm the following are correct before merging.

Script Handle Added Removed
product-search.js wp-data ⚠️

This comment was automatically generated by the ./github/compare-assets action.

@github-actions
Copy link
Contributor

github-actions bot commented Apr 5, 2022

Size Change: +499 B (0%)

Total Size: 868 kB

Filename Size Change
build/active-filters.js 7.99 kB -1 B (0%)
build/all-products.js 33.7 kB +8 B (0%)
build/all-reviews.js 7.79 kB -3 B (0%)
build/attribute-filter.js 12.9 kB +1 B (0%)
build/cart.js 41.3 kB +7 B (0%)
build/checkout.js 42.6 kB +4 B (0%)
build/mini-cart-contents.js 22.9 kB +1 B (0%)
build/mini-cart.js 4.58 kB -1 B (0%)
build/price-filter.js 9.09 kB -1 B (0%)
build/product-add-to-cart--product-button--product-image--product-title.js 2.66 kB -1 B (0%)
build/product-add-to-cart.js 6.89 kB +2 B (0%)
build/product-button--product-image--product-rating--product-sale-badge--product-title.js 300 B -1 B (0%)
build/product-rating.js 742 B -1 B (0%)
build/product-search.js 2.64 kB +464 B (+21%) 🚨
build/product-sku.js 379 B -2 B (-1%)
build/product-stock-indicator.js 624 B -2 B (0%)
build/product-summary.js 920 B -1 B (0%)
build/product-tag-list.js 498 B -2 B (0%)
build/reviews-by-category.js 11.2 kB -2 B (0%)
build/reviews-by-product.js 12.3 kB -3 B (0%)
build/single-product.js 10 kB +2 B (0%)
build/stock-filter.js 7.46 kB +2 B (0%)
build/wc-blocks-editor-style-rtl.css 5.08 kB +15 B (0%)
build/wc-blocks-editor-style.css 5.09 kB +14 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.34 kB
build/all-products-frontend.js 18.1 kB
build/attribute-filter-frontend.js 21.9 kB
build/blocks-checkout.js 17.4 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.16 kB
build/cart-blocks/cart-express-payment-frontend.js 5.09 kB
build/cart-blocks/cart-items-frontend.js 299 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.27 kB
build/cart-blocks/cart-line-items-frontend.js 428 B
build/cart-blocks/cart-order-summary-frontend.js 1.1 kB
build/cart-blocks/cart-totals-frontend.js 321 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 2.65 kB
build/cart-blocks/order-summary-discount-frontend.js 2.15 kB
build/cart-blocks/order-summary-fee-frontend.js 274 B
build/cart-blocks/order-summary-heading-frontend.js 454 B
build/cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping-frontend.js 6.37 kB
build/cart-blocks/order-summary-shipping-frontend.js 426 B
build/cart-blocks/order-summary-subtotal-frontend.js 274 B
build/cart-blocks/order-summary-taxes-frontend.js 433 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.15 kB
build/cart-frontend.js 47 kB
build/checkout-blocks/actions-frontend.js 1.42 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.12 kB
build/checkout-blocks/billing-address-frontend.js 891 B
build/checkout-blocks/contact-information-frontend.js 2.83 kB
build/checkout-blocks/express-payment-frontend.js 5.38 kB
build/checkout-blocks/fields-frontend.js 345 B
build/checkout-blocks/order-note-frontend.js 1.07 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.66 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 2.8 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.26 kB
build/checkout-blocks/order-summary-fee-frontend.js 276 B
build/checkout-blocks/order-summary-frontend.js 1.1 kB
build/checkout-blocks/order-summary-shipping-frontend.js 604 B
build/checkout-blocks/order-summary-subtotal-frontend.js 274 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.03 kB
build/checkout-blocks/shipping-methods-frontend.js 4.74 kB
build/checkout-blocks/terms-frontend.js 1.23 kB
build/checkout-blocks/totals-frontend.js 325 B
build/checkout-frontend.js 49.2 kB
build/featured-category.js 13.2 kB
build/featured-product.js 13.5 kB
build/general-style-rtl.css 1.29 kB
build/general-style.css 1.29 kB
build/handpicked-products.js 7.36 kB
build/legacy-template.js 2.79 kB
build/mini-cart-component-frontend.js 16.8 kB
build/mini-cart-contents-block/empty-cart-frontend.js 365 B
build/mini-cart-contents-block/filled-cart-frontend.js 229 B
build/mini-cart-contents-block/footer--mini-cart-contents-block/products-table-frontend.js 4.69 kB
build/mini-cart-contents-block/footer-frontend.js 6.98 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 289 B
build/mini-cart-contents-block/shopping-button-frontend.js 288 B
build/mini-cart-contents-block/title-frontend.js 367 B
build/mini-cart-frontend.js 1.71 kB
build/price-filter-frontend.js 13.3 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 223 B
build/product-add-to-cart-frontend.js 6.95 kB
build/product-best-sellers.js 7.71 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 436 B
build/product-button-frontend.js 1.87 kB
build/product-button.js 1.57 kB
build/product-categories.js 2.42 kB
build/product-category-list-frontend.js 879 B
build/product-category-list.js 503 B
build/product-category.js 8.69 kB
build/product-image-frontend.js 1.88 kB
build/product-image.js 1.59 kB
build/product-new.js 7.71 kB
build/product-on-sale.js 8.03 kB
build/product-price-frontend.js 1.9 kB
build/product-price.js 1.51 kB
build/product-query.js 647 B
build/product-rating-frontend.js 1.16 kB
build/product-sale-badge-frontend.js 1.13 kB
build/product-sale-badge.js 804 B
build/product-sku-frontend.js 381 B
build/product-stock-indicator-frontend.js 993 B
build/product-summary-frontend.js 1.29 kB
build/product-tag-list-frontend.js 872 B
build/product-tag.js 8.08 kB
build/product-title-frontend.js 1.31 kB
build/product-title.js 922 B
build/product-top-rated.js 7.95 kB
build/products-by-attribute.js 8.63 kB
build/reviews-frontend.js 7.02 kB
build/single-product-frontend.js 21.4 kB
build/stock-filter-frontend.js 7.51 kB
build/vendors--cart-blocks/cart-line-items--cart-blocks/cart-order-summary--cart-blocks/order-summary-shi--c02aad66-frontend.js 5.26 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/billing-address--checkout-blocks/order--decc3dc6-frontend.js 19.1 kB
build/vendors--mini-cart-contents-block/footer-frontend.js 6.86 kB
build/vendors--product-add-to-cart-frontend.js 7.53 kB
build/wc-blocks-data.js 9.87 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 930 B
build/wc-blocks-registry.js 2.7 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.14 kB
build/wc-blocks-style-rtl.css 22.4 kB
build/wc-blocks-style.css 22.4 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 54.5 kB
build/wc-blocks.js 2.62 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

@tomasztunik tomasztunik force-pushed the try/product-search-as-variation branch from 26f73c1 to 6a163ba Compare April 22, 2022 16:21
@github-actions
Copy link
Contributor

Script Dependencies Report

The compare-assets action has detected some changed script dependencies between this branch and trunk. Please review and confirm the following are correct before merging.

Script Handle Added Removed
product-search.js wp-data wc-settings, wp-components, wp-compose

This comment was automatically generated by the ./github/compare-assets action.

1 similar comment
@github-actions
Copy link
Contributor

Script Dependencies Report

The compare-assets action has detected some changed script dependencies between this branch and trunk. Please review and confirm the following are correct before merging.

Script Handle Added Removed
product-search.js wp-data wc-settings, wp-components, wp-compose

This comment was automatically generated by the ./github/compare-assets action.

@tomasztunik tomasztunik force-pushed the try/product-search-as-variation branch from 867c945 to d8ea416 Compare May 6, 2022 11:38
@github-actions
Copy link
Contributor

github-actions bot commented May 6, 2022

Script Dependencies Report

The compare-assets action has detected some changed script dependencies between this branch and trunk. Please review and confirm the following are correct before merging.

Script Handle Added Removed
reviews-frontend.js react, wc-settings, wp-a11y, wp-api-fetch, wp-compose, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill ⚠️
all-products-frontend.js lodash, react, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
price-filter-frontend.js lodash, react, wc-blocks-data-store, wc-price-format, wc-settings, wp-data, wp-element, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-url ⚠️
attribute-filter-frontend.js lodash, react, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-blocks, wp-components, wp-data, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url ⚠️
stock-filter-frontend.js lodash, react, wc-blocks-data-store, wc-settings, wp-a11y, wp-data, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-url ⚠️
active-filters-frontend.js lodash, react, wc-blocks-data-store, wc-price-format, wc-settings, wp-data, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url ⚠️
cart-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-plugins, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
checkout-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-plugins, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
mini-cart-frontend.js wc-settings, wp-polyfill ⚠️
single-product-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
mini-cart-component-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-autop, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️

This comment was automatically generated by the ./github/compare-assets action.

- make old block deprecate more gracefully,
- update to typescript
- use Warning component to create cleaner experience of updating
the block
@github-actions
Copy link
Contributor

github-actions bot commented May 6, 2022

Script Dependencies Report

The compare-assets action has detected some changed script dependencies between this branch and trunk. Please review and confirm the following are correct before merging.

Script Handle Added Removed
product-search.js wp-data wc-settings, wp-components, wp-compose

This comment was automatically generated by the ./github/compare-assets action.

@Aljullu Aljullu removed their request for review June 1, 2022 11:53
@dinhtungdu dinhtungdu mentioned this pull request Jul 27, 2022
4 tasks
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.

Leaving a small comment here as I was reviewing this PR as part of #6761.

assets/js/blocks/product-search/index.tsx Outdated Show resolved Hide resolved
@dinhtungdu dinhtungdu self-assigned this Jul 28, 2022
Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
@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-6191.zip

@github-actions
Copy link
Contributor

Script Dependencies Report

The compare-assets action has detected some changed script dependencies between this branch and trunk. Please review and confirm the following are correct before merging.

Script Handle Added Removed
product-search.js wp-data ⚠️

This comment was automatically generated by the ./github/compare-assets action.

@github-actions
Copy link
Contributor

Script Dependencies Report

The compare-assets action has detected some changed script dependencies between this branch and trunk. Please review and confirm the following are correct before merging.

Script Handle Added Removed
product-search.js wp-data ⚠️

This comment was automatically generated by the ./github/compare-assets action.

@github-actions
Copy link
Contributor

Script Dependencies Report

The compare-assets action has detected some changed script dependencies between this branch and trunk. Please review and confirm the following are correct before merging.

Script Handle Added Removed
product-search.js wp-data ⚠️

This comment was automatically generated by the ./github/compare-assets action.

@github-actions
Copy link
Contributor

Script Dependencies Report

The compare-assets action has detected some changed script dependencies between this branch and trunk. Please review and confirm the following are correct before merging.

Script Handle Added Removed
product-search.js wp-data ⚠️

This comment was automatically generated by the ./github/compare-assets action.

@github-actions
Copy link
Contributor

github-actions bot commented Aug 1, 2022

Script Dependencies Report

The compare-assets action has detected some changed script dependencies between this branch and trunk. Please review and confirm the following are correct before merging.

Script Handle Added Removed
product-search.js wp-data ⚠️

This comment was automatically generated by the ./github/compare-assets action.

@dinhtungdu dinhtungdu added the needs: design The issue requires design input/work from a designer. label Aug 5, 2022
@vivialice
Copy link

Apologies on the delay on feedback @dinhtungdu 🙏

Can you please review the design of the deprecation notice and give me some feedback?

Are we required to use the term deprecated? I feel like it's too technical for the average user. I'd suggest something like This version of the Product Search block is outdated > Upgrade Block.

Re: the design, I think there's more we could do for this block - I'm going to check if there's another pattern other teams are using. Otherwise I agree with @Aljullu 's comment on the vertical alignment.

@dinhtungdu
Copy link
Member

@vivialice @Aljullu I updated the Warning component copy and spacing in c672048. Here is how it looks now:

image

@vivialice
Copy link

Alignment looks good! 😄 I think I need to change the copy slightly. To confirm: the product search block will not work if the user doesn't upgrade? Or will it still appear on the front end?

If so, I think we should update to This version of the Product Search block is outdated. Upgrade to continue using.

Also cc @sunyatasattva for copy alignment if required!

@dinhtungdu
Copy link
Member

dinhtungdu commented Aug 23, 2022

To confirm: the product search block will not work if the user doesn't upgrade? Or will it still appear on the front end?

@vivialice The legacy block will continue working until users upgrade. So I think Upgrade to continue using is not really accurate as users are still able to use the (old) search block. What do you think?

Update: Even the (old) search block works without users' action, I think we still should use Upgrade to continue using to encourage users to upgrade the block. They have to do it anyway to edit the block.

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.

LGTM :shipit:

Thanks @vivialice for the design feedback and @dinhtungdu for your work moving this forward. 👏

@dinhtungdu
Copy link
Member

@Aljullu I would like to pause merging this PR to think about the post-deprecation process.

Eventually, we want to remove the DeprecatedBlockEdit and the legacy Edit/Block component. So how will we do it?

My plan is we will just remove those components once WP 6.1 is released due to our L0 support policy. I'm wondering if there is any better alternative and if there is anything we can do now to make the transition easier.

@Aljullu
Copy link
Contributor

Aljullu commented Aug 23, 2022

That's a good point, thanks for raising this, @dinhtungdu!

Eventually, we want to remove the DeprecatedBlockEdit and the legacy Edit/Block component. So how will we do it?

I'm not sure if I agree to consider this a blocker, though. That component is only loaded in the editor, and its performance impact should be negligible, right?

However, I agree that it might be good to 'clean up the code at some point, I wonder if we could do something like what Gutenberg did with the Gallery block: WordPress/gutenberg#36191. I didn't take a deep look, but they seem to have deprecated several past versions.

How do you feel about doing a 1-day research spike to see if there is anything from that PR (or from other GB blocks) that we can reuse? Based on that, we can decide whether we merge this PR as-is or not. (Even though, if possible, I would prefer to merge this PR and work in an auto-migration in another PR)

@dinhtungdu
Copy link
Member

I'm not sure if I agree to consider this a blocker, though. That component is only loaded in the editor, and its performance impact should be negligible, right?

Yes, it's just a concern about code maintenance.

(Even though, if possible, I would prefer to merge this PR and work in an auto-migration in another PR)

@Aljullu I agree. Let's merge this one and create an issue to track the research and development of auto-migration. It may be the solution for not only the search block but filter blocks as well.

@dinhtungdu dinhtungdu merged commit 4ce5098 into trunk Aug 23, 2022
@dinhtungdu dinhtungdu deleted the try/product-search-as-variation branch August 23, 2022 16:06
@tarhi-saad tarhi-saad added type: enhancement The issue is a request for an enhancement. and removed status: ready to merge needs: design The issue requires design input/work from a designer. labels Aug 29, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: product search Issues related to the Product Search block. type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Update Search Block to register as Gutenberg Search Block variation
5 participants