Add cart view switcher

[tarunvijwani]

Work in progress

Fixes #6985

Accessibility

• I've tested using only a keyboard (no mouse)
• I've tested using a screen reader
• All animations respect prefers-reduced-motion
• All text has at least a 4.5 color contrast with its background

Other Checks

• This PR adds/removes a feature flag & I've updated this doc.
• This PR adds/removes an experimental interfaces and I've updated this doc.
• I tagged two reviewers because this PR makes queries to the database or I think it might have some security impact.

Screenshots

Before	After

Testing

Automated Tests

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

User Facing Testing

• Do not include in the Testing Notes

WooCommerce Visibility

• WooCommerce Core
• Feature plugin
• Experimental

Performance Impact

Changelog

Add suggested changelog entry here.

[github-actions]

The release ZIP for this PR is accessible via:

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

[github-actions]

Size Change: +383 B (0%)

Total Size: 992 kB

Filename	Size	Change
build/active-filters.js	7.44 kB	-1 B (0%)
build/all-products-frontend.js	26.5 kB	+10 B (0%)
build/all-products.js	33.7 kB	+43 B (0%)
build/attribute-filter.js	12.4 kB	+1 B (0%)
build/cart-frontend.js	54.5 kB	+11 B (0%)
build/cart.js	47.6 kB	+89 B (0%)
build/checkout-frontend.js	56.7 kB	+15 B (0%)
build/checkout.js	41.3 kB	+53 B (0%)
build/featured-category.js	13.2 kB	+3 B (0%)
build/featured-product.js	13.5 kB	+4 B (0%)
build/filter-wrapper.js	2.39 kB	-1 B (0%)
build/handpicked-products.js	7.33 kB	+4 B (0%)
build/mini-cart-component-frontend.js	20.2 kB	+13 B (0%)
build/mini-cart-contents.js	16.9 kB	+61 B (0%)
build/product-add-to-cart--product-button--product-image--product-title.js	2.71 kB	+44 B (+2%)
build/product-add-to-cart.js	6.48 kB	+2 B (0%)
build/product-categories.js	2.36 kB	-1 B (0%)
build/product-category.js	8.69 kB	+2 B (0%)
build/product-on-sale.js	8.01 kB	+1 B (0%)
build/product-search.js	2.62 kB	+2 B (0%)
build/product-title.js	936 B	-1 B (0%)
build/products-by-attribute.js	8.62 kB	+3 B (0%)
build/reviews-by-category.js	11.3 kB	+1 B (0%)
build/reviews-by-product.js	12.4 kB	+2 B (0%)
build/single-product-frontend.js	32.3 kB	+14 B (0%)
build/single-product.js	10.1 kB	+5 B (0%)
build/wc-blocks-vendors.js	62.4 kB	+4 B (0%)

ℹ️ View Unchanged

Filename	Size
build/active-filters-frontend.js	7.73 kB
build/active-filters-wrapper-frontend.js	6 kB
build/all-reviews.js	7.79 kB
build/attribute-filter-frontend.js	22.5 kB
build/attribute-filter-wrapper-frontend.js	7.04 kB
build/blocks-checkout.js	17.5 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.64 kB
build/cart-blocks/cart-cross-sells-products-frontend.js	4.67 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js	5.1 kB
build/cart-blocks/cart-express-payment-frontend.js	786 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.31 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	2.73 kB
build/cart-blocks/order-summary-discount-frontend.js	2.16 kB
build/cart-blocks/order-summary-fee-frontend.js	272 B
build/cart-blocks/order-summary-heading-frontend.js	455 B
build/cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping-frontend.js	6.61 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/checkout-blocks/actions-frontend.js	1.78 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js	4.98 kB
build/checkout-blocks/billing-address-frontend.js	954 B
build/checkout-blocks/contact-information-frontend.js	3.02 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	2.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.86 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.64 kB
build/checkout-blocks/totals-frontend.js	323 B
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.83 kB
build/mini-cart-contents-block/empty-cart-frontend.js	367 B
build/mini-cart-contents-block/filled-cart-frontend.js	230 B
build/mini-cart-contents-block/footer-frontend.js	2.98 kB
build/mini-cart-contents-block/items-frontend.js	236 B
build/mini-cart-contents-block/products-table-frontend.js	590 B
build/mini-cart-contents-block/shopping-button-frontend.js	287 B
build/mini-cart-contents-block/title-frontend.js	367 B
build/mini-cart-frontend.js	1.71 kB
build/mini-cart.js	4.57 kB
build/price-filter-frontend.js	13.6 kB
build/price-filter-wrapper-frontend.js	6.95 kB
build/price-filter.js	8.47 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	227 B
build/product-add-to-cart-frontend.js	1.25 kB
build/product-best-sellers.js	7.7 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js	433 B
build/product-button--product-image--product-rating--product-sale-badge--product-title.js	301 B
build/product-button-frontend.js	1.89 kB
build/product-button.js	1.58 kB
build/product-category-list-frontend.js	881 B
build/product-category-list.js	502 B
build/product-image-frontend.js	1.91 kB
build/product-image.js	1.62 kB
build/product-new.js	7.69 kB
build/product-price-frontend.js	1.92 kB
build/product-price.js	1.53 kB
build/product-query.js	2.46 kB
build/product-rating-frontend.js	1.18 kB
build/product-rating.js	773 B
build/product-sale-badge-frontend.js	1.15 kB
build/product-sale-badge.js	817 B
build/product-sku-frontend.js	380 B
build/product-sku.js	380 B
build/product-stock-indicator-frontend.js	997 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	877 B
build/product-tag-list.js	497 B
build/product-tag.js	8.05 kB
build/product-title-frontend.js	1.34 kB
build/product-top-rated.js	7.93 kB
build/rating-filter-frontend.js	7.09 kB
build/rating-filter-wrapper-frontend.js	5.34 kB
build/rating-filter.js	6.26 kB
build/reviews-frontend.js	7.01 kB
build/stock-filter-frontend.js	7.73 kB
build/stock-filter-wrapper-frontend.js	5.99 kB
build/stock-filter.js	6.65 kB
build/vendors--attribute-filter-wrapper--mini-cart-contents-block/footer-frontend.js	6.86 kB
build/vendors--attribute-filter-wrapper-frontend.js	8.21 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.3 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	932 B
build/wc-blocks-registry.js	2.93 kB
build/wc-blocks-shared-context.js	1.52 kB
build/wc-blocks-shared-hocs.js	1.72 kB
build/wc-blocks-style-rtl.css	24.2 kB
build/wc-blocks-style.css	24.1 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.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}

[github-actions]

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-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-blocks, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning		⚠️
stock-filter-frontend.js	lodash, react, wc-blocks-checkout, 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		⚠️
rating-filter-frontend.js	lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-data, wp-element, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-url		⚠️
cart-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-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		⚠️
filter-wrapper-frontend.js	lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-block-editor, wp-blocks, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning		⚠️
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.

[github-actions]

This PR has been marked as stale because it has not seen any activity within the past 7 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.

[tarunvijwani]

Marking this PR on hold for further discussion: pca54o-4DS-p2

[tarunvijwani]

Fixed in #8006