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

Refactor View Switcher to use Block Attributes #8006

Merged
merged 13 commits into from
Dec 22, 2022

Conversation

mikejolley
Copy link
Member

Originally we implemented the cart view switcher using Context, with the hope being we could get a change made in Gutenberg so that the Inner Blocks would also show the view switcher with minimal effort (WordPress/gutenberg#35078). This, however, has not been merged, so this is an alternative solution.

The proposed system in this PR removes the state/context and instead uses Block Attributes. Attributes can be accessed and updated by any block in the hierarchy using the Block Client IDs, so we can work our way up the hierarchy looking for editorViews, and, if found, render the switcher. The switcher is rendered via a filter/hook, so it applies to all children.

Fixes #6985

Testing

User Facing Testing

  1. Go to the page containing the Cart Block
  2. Click the Cart Block/Inner Blocks within the Cart Block
  3. Check that the view switcher is visible
  4. Change to "empty cart" view
  5. View should change and the parent cart block should be selected in the UI
  6. Repeat to switch back to the filled cart view

After testing the cart block, repeat the above tests for the mini cart block. With a block-based theme go here:

wp-admin/site-editor.php?postType=wp_template_part&postId=woocommerce%2Fwoocommerce%2F%2Fmini-cart
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Show cart view switcher when inner blocks are selected

@mikejolley mikejolley added status: needs review block: cart Issues related to the cart block. block: mini-cart Issues related to the Mini-Cart block. labels Dec 21, 2022
@mikejolley mikejolley self-assigned this Dec 21, 2022
@woocommercebot woocommercebot requested review from a team and opr and removed request for a team December 21, 2022 14:49
@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-8006.zip

@github-actions
Copy link
Contributor

TypeScript Errors Report

Files with errors: 438
Total errors: 2092

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

assets/js/base/context/hooks/cart/use-store-cart.ts

assets/js/blocks/cart-checkout-shared/view-switcher/index.tsx

assets/js/blocks/cart-checkout-shared/view-switcher/switcher.tsx

assets/js/blocks/cart/edit.js

assets/js/blocks/checkout/edit.tsx

assets/js/blocks/mini-cart/mini-cart-contents/edit.tsx

assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/edit.tsx

@github-actions
Copy link
Contributor

github-actions bot commented Dec 21, 2022

Size Change: +1.43 kB (0%)

Total Size: 1 MB

Filename Size Change
build/active-filters-frontend.js 7.74 kB -1 B (0%)
build/active-filters-wrapper-frontend.js 6.01 kB -1 B (0%)
build/active-filters.js 7.32 kB +2 B (0%)
build/all-products-frontend.js 11.3 kB -2 B (0%)
build/all-products.js 33.3 kB +17 B (0%)
build/all-reviews.js 7.65 kB -1 B (0%)
build/attribute-filter-frontend.js 22.7 kB +4 B (0%)
build/attribute-filter-wrapper-frontend.js 7.67 kB +2 B (0%)
build/attribute-filter.js 12.3 kB -3 B (0%)
build/blocks-checkout.js 39.5 kB -1 B (0%)
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.37 kB -1 B (0%)
build/cart-blocks/cart-cross-sells-products-frontend.js 9.52 kB -49 B (-1%)
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.08 kB -2 B (0%)
build/cart-blocks/cart-express-payment-frontend.js 720 B -58 B (-7%)
build/cart-blocks/cart-items-frontend.js 299 B +1 B (0%)
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.29 kB -4 B (0%)
build/cart-blocks/cart-line-items-frontend.js 1.07 kB +1 B (0%)
build/cart-blocks/cart-order-summary-frontend.js 1.23 kB -2 B (0%)
build/cart-blocks/cart-totals-frontend.js 322 B +1 B (0%)
build/cart-blocks/empty-cart-frontend.js 343 B -3 B (-1%)
build/cart-blocks/filled-cart-frontend.js 783 B +3 B (0%)
build/cart-blocks/order-summary-discount-frontend.js 2.13 kB -51 B (-2%)
build/cart-blocks/order-summary-heading-frontend.js 455 B -1 B (0%)
build/cart-blocks/order-summary-shipping-frontend.js 14.6 kB +5 B (0%)
build/cart-frontend.js 28.1 kB +831 B (+3%)
build/cart.js 46.3 kB +441 B (+1%)
build/checkout-blocks/actions-frontend.js 1.86 kB +2 B (0%)
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 3.86 kB -4 B (0%)
build/checkout-blocks/contact-information-frontend.js 2 kB -5 B (0%)
build/checkout-blocks/express-payment-frontend.js 1.14 kB +2 B (0%)
build/checkout-blocks/fields-frontend.js 343 B +1 B (0%)
build/checkout-blocks/order-note-frontend.js 1.14 kB -3 B (0%)
build/checkout-blocks/order-summary-cart-items-frontend.js 3.67 kB -4 B (0%)
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB -1 B (0%)
build/checkout-blocks/order-summary-fee-frontend.js 275 B -1 B (0%)
build/checkout-blocks/order-summary-frontend.js 1.24 kB -2 B (0%)
build/checkout-blocks/order-summary-shipping-frontend.js 14.6 kB +4 B (0%)
build/checkout-blocks/payment-frontend.js 8.34 kB -2 B (0%)
build/checkout-blocks/shipping-address-frontend.js 1.11 kB +1 B (0%)
build/checkout-blocks/shipping-methods-frontend.js 4.56 kB -5 B (0%)
build/checkout-blocks/totals-frontend.js 324 B -1 B (0%)
build/checkout-frontend.js 29.4 kB +216 B (+1%)
build/checkout.js 40.3 kB +223 B (+1%)
build/featured-category.js 13.1 kB +2 B (0%)
build/featured-product.js 13.3 kB +5 B (0%)
build/filter-wrapper-frontend.js 13.8 kB +2 B (0%)
build/filter-wrapper.js 2.4 kB +2 B (0%)
build/handpicked-products.js 7.21 kB +1 B (0%)
build/legacy-template.js 2.85 kB +1 B (0%)
build/mini-cart-component-frontend.js 20 kB +3 B (0%)
build/mini-cart-contents-block/products-table-frontend.js 591 B +2 B (0%)
build/mini-cart-contents-block/shopping-button-frontend.js 313 B +1 B (0%)
build/mini-cart-contents.js 16.6 kB -418 B (-2%)
build/mini-cart.js 4.26 kB -4 B (0%)
build/price-filter-frontend.js 13.6 kB -2 B (0%)
build/price-filter-wrapper-frontend.js 7.01 kB -2 B (0%)
build/price-filter.js 8.37 kB +3 B (0%)
build/product-add-to-cart-frontend.js 6.71 kB -1 B (0%)
build/product-add-to-cart.js 8.47 kB +7 B (0%)
build/product-best-sellers.js 7.58 kB +2 B (0%)
build/product-button-frontend.js 2.17 kB -2 B (0%)
build/product-button.js 3.85 kB +9 B (0%)
build/product-categories.js 2.36 kB -1 B (0%)
build/product-category-list.js 504 B +2 B (0%)
build/product-category.js 8.57 kB +1 B (0%)
build/product-image-frontend.js 2.16 kB -4 B (0%)
build/product-image.js 3.94 kB +14 B (0%)
build/product-new.js 7.58 kB +2 B (0%)
build/product-on-sale.js 7.9 kB +1 B (0%)
build/product-price-frontend.js 2.16 kB -2 B (0%)
build/product-query.js 5.94 kB -1 B (0%)
build/product-rating-frontend.js 1.48 kB -2 B (0%)
build/product-sale-badge-frontend.js 1.39 kB -1 B (0%)
build/product-search.js 2.62 kB -1 B (0%)
build/product-sku.js 375 B -1 B (0%)
build/product-stock-indicator-frontend.js 1.26 kB -4 B (0%)
build/product-summary-frontend.js 1.53 kB -1 B (0%)
build/product-tag-list-frontend.js 1.13 kB -1 B (0%)
build/product-tag-list.js 497 B -1 B (0%)
build/product-tag.js 8.06 kB +2 B (0%)
build/product-title-frontend.js 1.59 kB +3 B (0%)
build/product-title.js 3.31 kB +7 B (0%)
build/product-top-rated.js 7.81 kB +1 B (0%)
build/products-by-attribute.js 8.5 kB -1 B (0%)
build/rating-filter-frontend.js 21.2 kB +5 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/reviews-frontend.js 6.88 kB +2 B (0%)
build/single-product-frontend.js 17.3 kB -6 B (0%)
build/single-product.js 9.97 kB +8 B (0%)
build/stock-filter-frontend.js 20.8 kB +5 B (0%)
build/stock-filter-wrapper-frontend.js 5.85 kB -1 B (0%)
build/stock-filter.js 8.12 kB -1 B (0%)
build/vendors--attribute-filter-wrapper--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary--cde4eab5-frontend.js 6.86 kB -1 B (0%)
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 7.7 kB +1 B (0%)
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.1 kB -1 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.82 kB +2 B (0%)
build/wc-blocks-data.js 21.1 kB +240 B (+1%)
build/wc-blocks-registry.js 2.92 kB -2 B (0%)
build/wc-blocks-shared-hocs.js 1.72 kB +3 B (0%)
build/wc-blocks-vendors.js 62.7 kB +1 B (0%)
build/wc-settings.js 2.6 kB +1 B (0%)
ℹ️ View Unchanged
Filename Size
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.78 kB
build/cart-blocks/order-summary-fee-frontend.js 273 B
build/cart-blocks/order-summary-subtotal-frontend.js 273 B
build/cart-blocks/order-summary-taxes-frontend.js 436 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.24 kB
build/checkout-blocks/billing-address-frontend.js 1.12 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.93 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/order-summary-taxes-frontend.js 436 B
build/checkout-blocks/terms-frontend.js 1.56 kB
build/general-style-rtl.css 1.29 kB
build/general-style.css 1.29 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.81 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/title-frontend.js 368 B
build/mini-cart-frontend.js 1.88 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 225 B
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 151 B
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 441 B
build/product-button--product-image--product-rating--product-sale-badge--product-title.js 302 B
build/product-category-list-frontend.js 1.14 kB
build/product-price.js 1.54 kB
build/product-rating.js 814 B
build/product-sale-badge.js 815 B
build/product-sku-frontend.js 629 B
build/product-stock-indicator.js 645 B
build/product-summary.js 917 B
build/rating-filter-wrapper-frontend.js 6.19 kB
build/rating-filter.js 7.38 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--product-add-to-cart-frontend.js 7.53 kB
build/vendors--checkout-blocks/shipping-methods-frontend.js 9.48 kB
build/wc-blocks-editor-style-rtl.css 5.22 kB
build/wc-blocks-editor-style.css 5.23 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 931 B
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-style-rtl.css 24.5 kB
build/wc-blocks-style.css 24.5 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

compressed-size-action

@github-actions
Copy link
Contributor

github-actions bot commented Dec 21, 2022

The release ZIP for this PR is accessible via:

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

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-i18n, wp-is-shallow-equal, wp-polyfill ⚠️
all-products-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 ⚠️
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-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 ⚠️
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-block-editor, wp-blocks, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning ⚠️
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-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.

TypeScript Errors Report

  • Files with errors: 429
  • Total errors: 2063

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

assets/js/base/context/hooks/cart/use-store-cart.ts

assets/js/blocks/cart-checkout-shared/view-switcher/switcher.tsx

assets/js/blocks/cart/edit.js

assets/js/blocks/checkout/edit.tsx

assets/js/blocks/mini-cart/mini-cart-contents/edit.tsx

assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/edit.tsx

comments-aggregator

Copy link
Contributor

@opr opr left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good Mike, just a note about the styling on the switcher itself, is it possible to add a little more gap between the icon and text?
image

Besides this and my TS comments this looks fine. Approving because the changes I suggested are minor.

@mikejolley
Copy link
Member Author

e2e fails caused by this change should now be resolved. The remaining fails seem unrelated and are being investigated by the fse team.

@mikejolley mikejolley merged commit e078e0d into trunk Dec 22, 2022
@mikejolley mikejolley deleted the add/inner-block-cart-view-switcher branch December 22, 2022 14:35
@imanish003 imanish003 added this to the 9.3.0 milestone Jan 2, 2023
@imanish003 imanish003 added the type: task The issue is an internally driven task (e.g. from another A8c team). label Jan 2, 2023
@tarunvijwani tarunvijwani mentioned this pull request Jan 5, 2023
14 tasks
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: cart Issues related to the cart block. block: mini-cart Issues related to the Mini-Cart block. type: task The issue is an internally driven task (e.g. from another A8c team).
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Display view switcher for Cart Block when selecting inner blocks
3 participants