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

POC: remove the title from filter block #6907

Closed
wants to merge 14 commits into from

Conversation

dinhtungdu
Copy link
Member

@dinhtungdu dinhtungdu commented Aug 16, 2022

Releates #6845

This PR is a POC to test the approach of removing the title from the filter block. This PR experiments with the Active Filter block.

Screenshots

Screen.Recording.2022-08-16.at.15.59.30.mov

Testing

Automated Tests

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

User Facing Testing

  1. Add a Active filter block to the page before checking out this PR.
  2. Edit the page after checking this PR, see the prompt is a part of the Active Filter block.
  3. Click on the update button, see:
    • the prompt disappears
    • a heading block is inserted above the active filter block.
    • the heading of the active filter block disappears.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Performance Impact

Changelog

Add suggested changelog entry here.

@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-6907.zip

@github-actions
Copy link
Contributor

github-actions bot commented Aug 16, 2022

Size Change: +1.37 kB (0%)

Total Size: 869 kB

Filename Size Change
build/active-filters-frontend.js 7.31 kB -25 B (0%)
build/active-filters.js 8.4 kB +409 B (+5%) 🔍
build/all-products-frontend.js 18.1 kB -8 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 +36 B (0%)
build/cart-blocks/cart-express-payment-frontend.js 5.09 kB -2 B (0%)
build/cart-blocks/order-summary-taxes-frontend.js 434 B +1 B (0%)
build/cart-frontend.js 47 kB -1 B (0%)
build/cart.js 41.3 kB +7 B (0%)
build/checkout-blocks/express-payment-frontend.js 5.38 kB -3 B (0%)
build/checkout-blocks/order-summary-taxes-frontend.js 434 B +1 B (0%)
build/checkout-blocks/payment-frontend.js 7.7 kB -2 B (0%)
build/checkout-blocks/shipping-address-frontend.js 1.03 kB +1 B (0%)
build/checkout-blocks/shipping-methods-frontend.js 4.75 kB +1 B (0%)
build/checkout-frontend.js 49.3 kB +12 B (0%)
build/checkout.js 42.6 kB +4 B (0%)
build/mini-cart-component-frontend.js 16.8 kB -1 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-frontend.js 13.3 kB +88 B (+1%)
build/price-filter.js 9.2 kB +114 B (+1%)
build/product-add-to-cart--product-button--product-image--product-title.js 2.66 kB -1 B (0%)
build/product-add-to-cart-frontend.js 6.95 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-image-frontend.js 1.89 kB +3 B (0%)
build/product-price-frontend.js 1.9 kB +2 B (0%)
build/product-rating-frontend.js 1.16 kB +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-frontend.js 1.29 kB +1 B (0%)
build/product-summary.js 920 B -1 B (0%)
build/product-tag-list-frontend.js 873 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-frontend.js 21.4 kB -10 B (0%)
build/single-product.js 10 kB +2 B (0%)
build/stock-filter-frontend.js 7.51 kB -3 B (0%)
build/stock-filter.js 7.49 kB +35 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%)
build/wc-blocks-style-rtl.css 22.5 kB +109 B (0%)
build/wc-blocks-style.css 22.5 kB +111 B (0%)
ℹ️ View Unchanged
Filename Size
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-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/proceed-to-checkout-frontend.js 1.15 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/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/terms-frontend.js 1.23 kB
build/checkout-blocks/totals-frontend.js 325 B
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-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-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-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.js 1.59 kB
build/product-new.js 7.71 kB
build/product-on-sale.js 8.03 kB
build/product-price.js 1.51 kB
build/product-query.js 647 B
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-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/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-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

@tjcafferkey
Copy link
Contributor

Just raising here, my only concern with this approach is that it convolutes the code for this block. So I keep asking myself:

  • How long would this logic have to remain within this block? Could it eventually be removed?
  • Is there a way we can further abstract that logic further out of the block code?
  • Are there other ways which we haven't considered/tried which dont have this problem?

@dinhtungdu
Copy link
Member Author

How long would this logic have to remain within this block? Could it eventually be removed?

I'd say after (almost) all current filter blocks are upgraded. We can't tell when but we can choose a future release to remove the logic where the impact is minimal. After a major WC Blocks version? (just my wild guess).

Are there other ways which we haven't considered/tried which dont have this problem?

I'd love to explore more option as well. I don't feel good about adding something meant to be removed in the future too.

@vivialice
Copy link

Hey I just reviewed the video and tested on my own store. By the way, it looks like this to me (I know this is POC so I understand it isn't final but just in case it's useful)

Screenshot 2022-08-23 at 14 15 59

I think the CTA to upgrade the block makes sense but it's hard to understand what is happening; which block is outdated and what happens after to click the Upgrade button. In the other scenario recently with a deprecation notice, it replaces the block - can we do the same here?

Also, this is relevant for any existing circumstances of filter blocks, correct? So new users shouldn't experience these.

@tjcafferkey
Copy link
Contributor

@vivialice it's still a bit of a proof of concept so text and behaviours can be changed, we were just testing the approach from a technical standpoint.

Also, this is relevant for any existing circumstances of filter blocks, correct? So new users shouldn't experience these.

That is correct, new users wont see the prompt.

@github-actions
Copy link
Contributor

This PR has been marked as stale because it has not seen any activity within the past 60 days. Our team uses this tool to help surface pull requests that have slipped through review.

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label - otherwise it will automatically be closed after 10 days.

@github-actions github-actions bot added the status: stale Stale issues and PRs have had no updates for 60 days. label Sep 17, 2022
@dinhtungdu
Copy link
Member Author

Close in favor of #6978

@dinhtungdu dinhtungdu closed this Nov 1, 2022
@nielslange nielslange deleted the try/deprecate-filter-blocks-title branch April 19, 2023 23:47
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
status: stale Stale issues and PRs have had no updates for 60 days.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants