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

Product grid client side transitions with filters #7201

Closed

Conversation

gigitux
Copy link
Contributor

@gigitux gigitux commented Sep 22, 2022

Screen.Capture.on.2022-09-22.at.11-33-56.1.mp4

This is a WIP PR. This is experimental about client-side transitions and filters. This PR also contains code that is still not merged in trunk (#7162 #7186).

The code that I added to support client side transitions with filters, it is in the commit 1eea968

gigitux and others added 21 commits September 12, 2022 12:16
Product Query - Add support for the Filter By Price Block
Product Query - Add support for the Filter By Attributes block
@github-actions
Copy link
Contributor

Replace regular expression with WP_HTML_Walker when avail...

Replace regular expression with WP_HTML_Walker when available.


// TODO: Replace regular expression with WP_HTML_Walker when available.
$block_content = preg_replace(
'/([ "])wp-block-query([ "])/',
'$1wp-block-query woo-product-query query-id-' . $block['attrs']['queryId'] . '$2',
$block_content
);
}
return $block_content;
}
/**

🚀 This comment was generated by the automations bot based on a todo comment in 1eea968 in #7201. cc @gigitux

@github-actions
Copy link
Contributor

Move this to the HTML once WP_HTML_Walker is available.

Move this to the HTML once WP_HTML_Walker is available.


// TODO: Move this to the HTML once WP_HTML_Walker is available.
const clientNavigationClassNames = [
'wp-block-query-pagination-next',
'wp-block-query-pagination-previous',
'page-numbers',
];
const old = options.vnode;
options.vnode = ( vnode ) => {
if ( vnode.type === 'a' ) {
clientNavigationClassNames.forEach( ( className ) => {
if ( vnode.props.class?.includes( className ) ) {
vnode.props.wp = {

🚀 This comment was generated by the automations bot based on a todo comment in 1eea968 in #7201. cc @gigitux

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

@github-actions
Copy link
Contributor

Size Change: +29.9 kB (+3%)

Total Size: 923 kB

Filename Size Change
build/active-filters-frontend.js 11.8 kB +4.22 kB (+55%) 🆘
build/active-filters.js 9.1 kB +815 B (+10%) ⚠️
build/all-products-frontend.js 18.2 kB +9 B (0%)
build/all-products.js 34 kB -1 B (0%)
build/all-reviews.js 7.78 kB -10 B (0%)
build/attribute-filter-frontend.js 26.6 kB +4.29 kB (+19%) ⚠️
build/attribute-filter.js 14.1 kB +798 B (+6%) 🔍
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.17 kB +1 B (0%)
build/cart-blocks/cart-cross-sells-frontend.js 252 B -1 B (0%)
build/cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 5.44 kB +4 B (0%)
build/cart-blocks/cart-cross-sells-products-frontend.js 4.65 kB -3 B (0%)
build/cart-blocks/cart-express-payment-frontend.js 5.08 kB +8 B (0%)
build/cart-blocks/cart-items-frontend.js 298 B -1 B (0%)
build/cart-blocks/cart-order-summary-frontend.js 1.1 kB -2 B (0%)
build/cart-blocks/cart-totals-frontend.js 321 B -1 B (0%)
build/cart-blocks/empty-cart-frontend.js 346 B +1 B (0%)
build/cart-blocks/filled-cart-frontend.js 782 B +1 B (0%)
build/cart-blocks/order-summary-coupon-form-frontend.js 2.65 kB +5 B (0%)
build/cart-blocks/order-summary-discount-frontend.js 2.15 kB +1 B (0%)
build/cart-blocks/order-summary-fee-frontend.js 274 B +1 B (0%)
build/cart-blocks/order-summary-heading-frontend.js 455 B +1 B (0%)
build/cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping-frontend.js 6.37 kB -1 B (0%)
build/cart-blocks/order-summary-shipping-frontend.js 428 B +1 B (0%)
build/cart-blocks/order-summary-taxes-frontend.js 436 B +2 B (0%)
build/cart-frontend.js 48 kB -3 B (0%)
build/cart.js 50.3 kB +1 B (0%)
build/checkout-blocks/actions-frontend.js 1.42 kB +5 B (0%)
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.12 kB +1 B (0%)
build/checkout-blocks/billing-address-frontend.js 889 B -1 B (0%)
build/checkout-blocks/express-payment-frontend.js 5.38 kB +10 B (0%)
build/checkout-blocks/fields-frontend.js 343 B -2 B (-1%)
build/checkout-blocks/order-note-frontend.js 1.07 kB -1 B (0%)
build/checkout-blocks/order-summary-cart-items-frontend.js 3.67 kB +3 B (0%)
build/checkout-blocks/order-summary-coupon-form-frontend.js 2.8 kB +5 B (0%)
build/checkout-blocks/order-summary-discount-frontend.js 2.27 kB +5 B (0%)
build/checkout-blocks/order-summary-fee-frontend.js 275 B -1 B (0%)
build/checkout-blocks/order-summary-frontend.js 1.1 kB -2 B (0%)
build/checkout-blocks/order-summary-shipping-frontend.js 602 B +2 B (0%)
build/checkout-blocks/order-summary-subtotal-frontend.js 274 B -1 B (0%)
build/checkout-blocks/payment-frontend.js 7.69 kB +8 B (0%)
build/checkout-blocks/shipping-address-frontend.js 1.03 kB +1 B (0%)
build/checkout-frontend.js 49.9 kB -8 B (0%)
build/checkout.js 43.7 kB +5 B (0%)
build/featured-category.js 13.2 kB +6 B (0%)
build/featured-product.js 13.4 kB +1 B (0%)
build/handpicked-products.js 7.33 kB +1 B (0%)
build/mini-cart-component-frontend.js 16.9 kB +4 B (0%)
build/mini-cart-contents-block/filled-cart-frontend.js 230 B +1 B (0%)
build/mini-cart-contents-block/footer--mini-cart-contents-block/products-table-frontend.js 4.69 kB +2 B (0%)
build/mini-cart-contents-block/footer-frontend.js 7.39 kB +2 B (0%)
build/mini-cart-contents-block/shopping-button-frontend.js 287 B -1 B (0%)
build/mini-cart-contents.js 23.4 kB -4 B (0%)
build/mini-cart-frontend.js 1.72 kB -1 B (0%)
build/mini-cart.js 4.57 kB +1 B (0%)
build/price-filter-frontend.js 17.7 kB +4.29 kB (+32%) 🚨
build/price-filter.js 10.2 kB +845 B (+9%) 🔍
build/product-add-to-cart--product-button--product-category-list--product-image--product-price--product-r--a0326d00.js 225 B -1 B (0%)
build/product-add-to-cart--product-button--product-image--product-title.js 2.69 kB +2 B (0%)
build/product-add-to-cart-frontend.js 2.62 kB +14 B (+1%)
build/product-add-to-cart.js 6.88 kB +3 B (0%)
build/product-best-sellers.js 7.7 kB +3 B (0%)
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 439 B +7 B (+2%)
build/product-button-frontend.js 1.88 kB -2 B (0%)
build/product-button.js 1.58 kB -3 B (0%)
build/product-categories.js 2.36 kB +2 B (0%)
build/product-category-list-frontend.js 881 B +2 B (0%)
build/product-category.js 8.69 kB +3 B (0%)
build/product-image-frontend.js 1.91 kB -1 B (0%)
build/product-image.js 1.61 kB +2 B (0%)
build/product-new.js 7.69 kB +1 B (0%)
build/product-price-frontend.js 1.91 kB +1 B (0%)
build/product-price.js 1.53 kB +1 B (0%)
build/product-query.js 647 B +1 B (0%)
build/product-rating-frontend.js 1.18 kB +3 B (0%)
build/product-sale-badge-frontend.js 1.14 kB +1 B (0%)
build/product-sale-badge.js 815 B -1 B (0%)
build/product-search.js 2.62 kB +3 B (0%)
build/product-stock-indicator-frontend.js 995 B +3 B (0%)
build/product-summary.js 919 B -1 B (0%)
build/product-tag-list-frontend.js 876 B +3 B (0%)
build/product-tag-list.js 498 B +1 B (0%)
build/product-title-frontend.js 1.34 kB -1 B (0%)
build/product-title.js 936 B -2 B (0%)
build/product-top-rated.js 7.93 kB +3 B (0%)
build/products-by-attribute.js 8.62 kB +4 B (0%)
build/reviews-by-category.js 11.3 kB -5 B (0%)
build/reviews-by-product.js 12.4 kB -1 B (0%)
build/reviews-frontend.js 7.01 kB -6 B (0%)
build/single-product-frontend.js 21.5 kB +11 B (0%)
build/single-product.js 10.1 kB -5 B (0%)
build/stock-filter-frontend.js 11.9 kB +4.26 kB (+56%) 🆘
build/stock-filter.js 8.37 kB +810 B (+11%) ⚠️
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 6.91 kB -4 B (0%)
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.14 kB -1 B (0%)
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--5b8feb0b-frontend.js 4.85 kB +2 B (0%)
build/vendors--mini-cart-contents-block/footer-frontend.js 6.86 kB -1 B (0%)
build/wc-blocks-style-rtl.css 23.9 kB +73 B (0%)
build/wc-blocks-style.css 23.9 kB +74 B (0%)
build/wc-blocks-vendors.js 57.9 kB +3.42 kB (+6%) 🔍
build/product-query-frontend.js 5.92 kB +5.92 kB (new file) 🆕
ℹ️ View Unchanged
Filename Size
build/blocks-checkout.js 17.5 kB
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 430 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/contact-information-frontend.js 2.84 kB
build/checkout-blocks/order-summary-taxes-frontend.js 435 B
build/checkout-blocks/shipping-methods-frontend.js 4.75 kB
build/checkout-blocks/terms-frontend.js 1.23 kB
build/checkout-blocks/totals-frontend.js 325 B
build/general-style-rtl.css 1.29 kB
build/general-style.css 1.29 kB
build/legacy-template.js 2.84 kB
build/mini-cart-contents-block/empty-cart-frontend.js 366 B
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 290 B
build/mini-cart-contents-block/title-frontend.js 367 B
build/price-format.js 1.19 kB
build/product-button--product-image--product-rating--product-sale-badge--product-title.js 302 B
build/product-category-list.js 503 B
build/product-on-sale.js 8.02 kB
build/product-rating.js 771 B
build/product-sku-frontend.js 380 B
build/product-sku.js 380 B
build/product-stock-indicator.js 623 B
build/product-summary-frontend.js 1.28 kB
build/product-tag.js 8.05 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--04fe80d1-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/wc-blocks-data.js 9.9 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.7 kB
build/wc-blocks-shared-context.js 1.51 kB
build/wc-blocks-shared-hocs.js 1.71 kB
build/wc-blocks-vendors-style-rtl.css 1.95 kB
build/wc-blocks-vendors-style.css 1.95 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

@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 30, 2022
@gigitux
Copy link
Contributor Author

gigitux commented Nov 28, 2023

I'm closing this PR, given that it is no longer valid.

@gigitux gigitux closed this Nov 28, 2023
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. team: Kirigami & Origami
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants