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

Cart i2: view switcher shared to children #4817

Merged
merged 5 commits into from Sep 24, 2021

Conversation

mikejolley
Copy link
Member

Implements __experimentalExposeToChildren so that the view switcher is passed down to all children toolbars. When switching, the view is changed and the parent is selected to avoid the selection of a non-visible block.

Fixes #4812

NOTE: Only the top 2 levels of inner blocks will show the toolbar item, unless you first implement WordPress/gutenberg#35078 This makes it so all levels show the toolbar item.

How to test the changes in this Pull Request:

  1. Insert Cart i2 Block
  2. Toggle between empty/full cart views
  3. Select inner blocks. Confirm toolbar item is visible.
  4. Toggle between empty/full cart views. Parent block should be selected after a switch.

@mikejolley mikejolley added status: needs review skip-changelog PRs that you don't want to appear in the changelog. labels Sep 23, 2021
@nerrad nerrad requested a review from a team September 23, 2021 10:22
@github-actions
Copy link
Contributor

github-actions bot commented Sep 23, 2021

Size Change: +52 B (0%)

Total Size: 1.23 MB

Filename Size Change
build/cart-i2.js 47.8 kB +43 B (0%)
build/checkout.js 52.6 kB +9 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.35 kB
build/active-filters.js 8.01 kB
build/all-products-frontend.js 23.1 kB
build/all-products.js 37 kB
build/all-reviews.js 9.56 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js 2.66 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button.js 1.81 kB
build/atomic-block-components/add-to-cart--atomic-block-components/image--atomic-block-components/title.js 332 B
build/atomic-block-components/add-to-cart-frontend.js 8.39 kB
build/atomic-block-components/add-to-cart.js 7.72 kB
build/atomic-block-components/button-frontend.js 1.74 kB
build/atomic-block-components/button.js 875 B
build/atomic-block-components/category-list-frontend.js 472 B
build/atomic-block-components/category-list.js 476 B
build/atomic-block-components/image-frontend.js 1.88 kB
build/atomic-block-components/image.js 1.35 kB
build/atomic-block-components/price-frontend.js 2.13 kB
build/atomic-block-components/price.js 2.11 kB
build/atomic-block-components/rating-frontend.js 563 B
build/atomic-block-components/rating.js 567 B
build/atomic-block-components/sale-badge-frontend.js 861 B
build/atomic-block-components/sale-badge.js 869 B
build/atomic-block-components/sku-frontend.js 392 B
build/atomic-block-components/sku.js 392 B
build/atomic-block-components/stock-indicator-frontend.js 612 B
build/atomic-block-components/stock-indicator.js 611 B
build/atomic-block-components/summary-frontend.js 908 B
build/atomic-block-components/summary.js 911 B
build/atomic-block-components/tag-list-frontend.js 467 B
build/atomic-block-components/tag-list.js 472 B
build/atomic-block-components/title-frontend.js 1.47 kB
build/atomic-block-components/title.js 1.29 kB
build/attribute-filter-frontend.js 18.6 kB
build/attribute-filter.js 12.2 kB
build/blocks-checkout.js 21.1 kB
build/cart-blocks/checkout-button-frontend.js 2.4 kB
build/cart-blocks/empty-cart-frontend.js 327 B
build/cart-blocks/express-payment--checkout-blocks/express-payment--checkout-blocks/payment-frontend.js 4.73 kB
build/cart-blocks/express-payment-frontend.js 1.58 kB
build/cart-blocks/filled-cart-frontend.js 781 B
build/cart-blocks/items-frontend.js 254 B
build/cart-blocks/line-items-frontend.js 5.52 kB
build/cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 3.69 kB
build/cart-blocks/order-summary-frontend.js 7.31 kB
build/cart-blocks/totals-frontend.js 269 B
build/cart-frontend.js 91.6 kB
build/cart-i2-frontend.js 52.5 kB
build/cart.js 46.6 kB
build/checkout-blocks/actions-frontend.js 1.47 kB
build/checkout-blocks/billing-address-frontend.js 2.64 kB
build/checkout-blocks/contact-information-frontend.js 3.88 kB
build/checkout-blocks/express-payment-frontend.js 1.92 kB
build/checkout-blocks/fields-frontend.js 290 B
build/checkout-blocks/order-note-frontend.js 1.56 kB
build/checkout-blocks/order-summary-frontend.js 12.7 kB
build/checkout-blocks/payment-frontend.js 4.58 kB
build/checkout-blocks/shipping-address-frontend.js 3.04 kB
build/checkout-blocks/shipping-methods-frontend.js 5.55 kB
build/checkout-blocks/terms-frontend.js 1.64 kB
build/checkout-blocks/totals-frontend.js 271 B
build/checkout-frontend.js 54.4 kB
build/featured-category.js 7.73 kB
build/featured-product.js 9.42 kB
build/handpicked-products.js 6.26 kB
build/mini-cart-component-frontend.js 36.5 kB
build/mini-cart-frontend.js 2.35 kB
build/mini-cart.js 2.34 kB
build/price-filter-frontend.js 14.3 kB
build/price-filter.js 9.63 kB
build/price-format.js 1.37 kB
build/product-best-sellers.js 6.61 kB
build/product-categories.js 3.38 kB
build/product-category.js 7.49 kB
build/product-new.js 6.77 kB
build/product-on-sale.js 7.13 kB
build/product-search.js 2.66 kB
build/product-tag.js 6.58 kB
build/product-top-rated.js 6.74 kB
build/products-by-attribute.js 7.7 kB
build/reviews-by-category.js 11.5 kB
build/reviews-by-product.js 13 kB
build/reviews-frontend.js 8.96 kB
build/single-product-frontend.js 26.2 kB
build/single-product.js 9.77 kB
build/stock-filter-frontend.js 8.76 kB
build/stock-filter.js 7.81 kB
build/vendors--atomic-block-components/add-to-cart--cart-blocks/order-summary--checkout-blocks/billing-ad--c5eb4dcd-frontend.js 16.2 kB
build/vendors--atomic-block-components/add-to-cart-frontend.js 4.77 kB
build/vendors--atomic-block-components/price--cart-blocks/line-items--cart-blocks/order-summary--checkout--8a3571de-frontend.js 5.71 kB
build/vendors--cart-blocks/line-items--checkout-blocks/order-summary-frontend.js 3.1 kB
build/vendors--cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/order-summary---eb4d2cec-frontend.js 5.02 kB
build/wc-blocks-data.js 11.3 kB
build/wc-blocks-editor-style-rtl.css 15.6 kB
build/wc-blocks-editor-style.css 15.6 kB
build/wc-blocks-google-analytics.js 1.98 kB
build/wc-blocks-middleware.js 1.47 kB
build/wc-blocks-registry.js 3.71 kB
build/wc-blocks-shared-context.js 1.54 kB
build/wc-blocks-shared-hocs.js 1.75 kB
build/wc-blocks-style-rtl.css 20.4 kB
build/wc-blocks-style.css 20.4 kB
build/wc-blocks-vendors-style-rtl.css 1.37 kB
build/wc-blocks-vendors-style.css 1.37 kB
build/wc-blocks-vendors.js 254 kB
build/wc-blocks.js 3.5 kB
build/wc-payment-method-bacs.js 806 B
build/wc-payment-method-cheque.js 806 B
build/wc-payment-method-cod.js 898 B
build/wc-payment-method-paypal.js 839 B
build/wc-payment-method-stripe.js 12.2 kB
build/wc-settings.js 2.91 kB

compressed-size-action

@mikejolley mikejolley self-assigned this Sep 23, 2021
Copy link
Member

@senadir senadir left a comment

Choose a reason for hiding this comment

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

Does what it says

Comment on lines 159 to 165
{
view: 'filledCart',
label: __( 'Filled Cart', 'woo-gutenberg-products-block' ),
icon: <Icon srcElement={ filledCart } />,
default: true,
},
]
Copy link
Member

Choose a reason for hiding this comment

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

Nitpick, given this is the default option, can it be the first one? When opening the switcher, the first item is focused, It makes it confusing because emptyCart is focused and looks like it's selected.

title: view.label,
onClick: () => {
setCurrentView( view );
selectBlock( clientId );
Copy link
Member

Choose a reason for hiding this comment

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

Can we not select the parent Cart block and just select the current one? So, filled or empty cart block?

Copy link
Member Author

Choose a reason for hiding this comment

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

How will we get the client ID?

Copy link
Member

Choose a reason for hiding this comment

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

selectBlock( getBlock( clientId ).innerBlocks.find(block => block.name === 'woocommerce/filled-cart-block').clientId )
But like prettier and not a single line.

@senadir
Copy link
Member

senadir commented Sep 24, 2021

Do you want me to pick up this issue @mikejolley ?

@mikejolley
Copy link
Member Author

@senadir nah Ill wrap it up soon.

@mikejolley mikejolley force-pushed the add/view-switcher-experimental-share branch from a9ee915 to df53745 Compare September 24, 2021 14:46
@mikejolley
Copy link
Member Author

@senadir do you want a final look? I made those changes and simplified the API a bit so we map view -> block Name. Makes selection easier too.

Copy link
Member

@senadir senadir left a comment

Choose a reason for hiding this comment

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

Works like a charm, thanks for working on this Mike.

@mikejolley mikejolley merged commit 5ea3a56 into trunk Sep 24, 2021
@mikejolley mikejolley deleted the add/view-switcher-experimental-share branch September 24, 2021 15:13
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
skip-changelog PRs that you don't want to appear in the changelog.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Cart i2: Try using __experimentalExposeToChildren to share view switcher component with all child blocks
2 participants