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

style Mini Cart block as inline to remove the experimental features usage. #6002

Merged
merged 3 commits into from
Mar 8, 2022

Conversation

dinhtungdu
Copy link
Member

@dinhtungdu dinhtungdu commented Mar 7, 2022

As discussed in #5985 (comment), #5985 (review) and #5985 (comment), in this PR, I try to remove the usage of the experimental features:

  • Styling Mini Cart block as an inline-block element.
  • Removing the alignment support.
  • Removing unnecessary style manipulation required by the former approach.

The pros: simpler codebase, simpler styling.

The cons: Lack of alignments (which can be provided by a <Group> or <Row> block).

My take: I prefer this approach. The button is an inline element by its nature. The Mini Cart button is also 'likely' to be put inside a row.

Testing

Automated Tests

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

Manual Testing

How to test the changes in this Pull Request:

  1. Add the Mini Cart block to the header using Site Editor.
  2. Don't see the alignment option in the block toolbar.
  3. See the Mini Cart button is on the left.
  4. Add a Row block and move the Mini Cart block there.
  5. Change the alignment of the Row block.
  6. See the Mini Cart position updated accordingly.
  7. Save changes, see it works on the front end.

User Facing Testing

These are steps for user testing (where "user" is someone interacting with this change that is not editing any code).

  • Same as above, or
  • See steps below.

@rubikuserbot rubikuserbot requested a review from a team March 7, 2022 09:38
@github-actions
Copy link
Contributor

github-actions bot commented Mar 7, 2022

Size Change: -521 B (0%)

Total Size: 863 kB

Filename Size Change
build/active-filters.js 6.95 kB -1 B (0%)
build/all-products.js 33.9 kB +11 B (0%)
build/all-reviews.js 8.03 kB +1 B (0%)
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/catego--90468e1a.js 223 B +2 B (+1%)
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js 2.64 kB +1 B (0%)
build/atomic-block-components/add-to-cart.js 7.49 kB +3 B (0%)
build/atomic-block-components/button--atomic-block-components/category-list--atomic-block-components/imag--f11cdc7a.js 500 B +1 B (0%)
build/atomic-block-components/button.js 2.3 kB -5 B (0%)
build/atomic-block-components/image.js 1.09 kB -1 B (0%)
build/atomic-block-components/price.js 1.51 kB +1 B (0%)
build/atomic-block-components/rating.js 717 B -1 B (0%)
build/atomic-block-components/stock-indicator.js 624 B -2 B (0%)
build/atomic-block-components/tag-list.js 498 B -1 B (0%)
build/atomic-block-components/title.js 932 B -2 B (0%)
build/attribute-filter.js 13 kB +6 B (0%)
build/cart.js 43.6 kB -2 B (0%)
build/checkout.js 44.8 kB -2 B (0%)
build/featured-category.js 8.64 kB +3 B (0%)
build/featured-product.js 9.74 kB +2 B (0%)
build/handpicked-products.js 7.11 kB -1 B (0%)
build/legacy-template.js 2.19 kB -1 B (0%)
build/mini-cart-contents.js 23.6 kB +26 B (0%)
build/mini-cart.js 6.33 kB -608 B (-9%)
build/price-filter.js 8.47 kB +6 B (0%)
build/product-best-sellers.js 7.39 kB -2 B (0%)
build/product-categories.js 3.17 kB +1 B (0%)
build/product-category.js 8.51 kB +1 B (0%)
build/product-new.js 7.69 kB +2 B (0%)
build/product-search.js 2.19 kB -1 B (0%)
build/product-tag.js 7.83 kB +1 B (0%)
build/product-top-rated.js 7.92 kB -1 B (0%)
build/products-by-attribute.js 8.4 kB +2 B (0%)
build/reviews-by-category.js 11.5 kB +1 B (0%)
build/reviews-by-product.js 12.6 kB -3 B (0%)
build/single-product.js 10 kB -5 B (0%)
build/wc-blocks-style-rtl.css 22.1 kB -59 B (0%)
build/wc-blocks-style.css 22.1 kB -111 B (-1%)
build/wc-blocks-vendors.js 69.6 kB +217 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 6.28 kB
build/all-products-frontend.js 18.6 kB
build/atomic-block-components/add-to-cart-frontend.js 7.01 kB
build/atomic-block-components/button-frontend.js 2.08 kB
build/atomic-block-components/category-list-frontend.js 922 B
build/atomic-block-components/category-list.js 500 B
build/atomic-block-components/image-frontend.js 1.86 kB
build/atomic-block-components/price-frontend.js 1.95 kB
build/atomic-block-components/rating-frontend.js 1.14 kB
build/atomic-block-components/sale-badge-frontend.js 1.1 kB
build/atomic-block-components/sale-badge.js 685 B
build/atomic-block-components/sku-frontend.js 385 B
build/atomic-block-components/sku.js 386 B
build/atomic-block-components/stock-indicator-frontend.js 1.04 kB
build/atomic-block-components/summary-frontend.js 1.34 kB
build/atomic-block-components/summary.js 923 B
build/atomic-block-components/tag-list-frontend.js 924 B
build/atomic-block-components/title-frontend.js 1.31 kB
build/attribute-filter-frontend.js 16.8 kB
build/blocks-checkout.js 17.4 kB
build/cart-blocks/accepted-payment-methods-frontend.js 1.14 kB
build/cart-blocks/checkout-button-frontend.js 1.15 kB
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/express-payment-frontend.js 5.2 kB
build/cart-blocks/filled-cart-frontend.js 767 B
build/cart-blocks/items-frontend.js 299 B
build/cart-blocks/line-items-frontend.js 5.5 kB
build/cart-blocks/order-summary-frontend.js 8.88 kB
build/cart-blocks/totals-frontend.js 320 B
build/cart-frontend.js 45.3 kB
build/checkout-blocks/actions-frontend.js 1.41 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.13 kB
build/checkout-blocks/billing-address-frontend.js 891 B
build/checkout-blocks/contact-information-frontend.js 2.84 kB
build/checkout-blocks/express-payment-frontend.js 5.5 kB
build/checkout-blocks/fields-frontend.js 344 B
build/checkout-blocks/order-note-frontend.js 1.13 kB
build/checkout-blocks/order-summary-frontend.js 11.3 kB
build/checkout-blocks/payment-frontend.js 7.78 kB
build/checkout-blocks/shipping-address-frontend.js 997 B
build/checkout-blocks/shipping-methods-frontend.js 4.73 kB
build/checkout-blocks/terms-frontend.js 1.22 kB
build/checkout-blocks/totals-frontend.js 323 B
build/checkout-frontend.js 47.5 kB
build/mini-cart-component-frontend.js 16.5 kB
build/mini-cart-contents-block/empty-cart-frontend.js 363 B
build/mini-cart-contents-block/filled-cart-frontend.js 222 B
build/mini-cart-contents-block/footer--mini-cart-contents-block/products-table-frontend.js 5.33 kB
build/mini-cart-contents-block/footer-frontend.js 5.63 kB
build/mini-cart-contents-block/items-frontend.js 206 B
build/mini-cart-contents-block/products-table-frontend.js 5.34 kB
build/mini-cart-contents-block/shopping-button-frontend.js 260 B
build/mini-cart-contents-block/title-frontend.js 348 B
build/mini-cart-frontend.js 1.72 kB
build/price-filter-frontend.js 12.5 kB
build/price-format.js 1.19 kB
build/product-on-sale.js 8 kB
build/reviews-frontend.js 7.34 kB
build/single-product-frontend.js 22 kB
build/stock-filter-frontend.js 6.5 kB
build/stock-filter.js 6.56 kB
build/vendors--atomic-block-components/add-to-cart--cart-blocks/order-summary--checkout-blocks/billing-ad--c5eb4dcd-frontend.js 19 kB
build/vendors--atomic-block-components/add-to-cart-frontend.js 7.51 kB
build/vendors--atomic-block-components/price--cart-blocks/line-items--cart-blocks/order-summary--checkout--194c50bf-frontend.js 5.26 kB
build/vendors--cart-blocks/line-items--checkout-blocks/order-summary--mini-cart-contents-block/products-table-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/order-summary---eb4d2cec-frontend.js 4.74 kB
build/vendors--mini-cart-contents-block/footer--mini-cart-contents-block/products-table-frontend.js 7.71 kB
build/wc-blocks-data.js 9.83 kB
build/wc-blocks-editor-style-rtl.css 4.84 kB
build/wc-blocks-editor-style.css 4.84 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 953 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.28 kB
build/wc-blocks-vendors-style.css 1.28 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.61 kB

compressed-size-action

@nielslange nielslange added the block: mini-cart Issues related to the Mini-Cart block. label Mar 7, 2022
@tomasztunik
Copy link
Contributor

tomasztunik commented Mar 8, 2022

I agree with the conclusion that Mini Cart Block is an element to be used within Layout/Container Blocks that should be responsible for positioning and spacing of elements, could be group, row, columns or some absolute/fixed layers.

If one day Gutenberg added context aware control for align/justify-self for when parent container/block supports it this would make sense but the way it was now I like the proposed approach more.

@gigitux
Copy link
Contributor

gigitux commented Mar 8, 2022

I agree with the conclusion that Mini Cart Block is an element to be used within Layout/Container Blocks that should be responsible for positioning and spacing of elements, could be group, row, columns or some absolute/fixed layers.

I agree with you!

If one day Gutenberg added context aware control for align/justify-self for when parent container/block supports it this would make sense but the way it was now I like the proposed approach more.

Yes! They are already working on this!

Copy link
Contributor

@gigitux gigitux left a comment

Choose a reason for hiding this comment

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

Thanks for working on this!

LGTM 🚢

@github-actions github-actions bot added this to the 7.2.0 milestone Mar 8, 2022
Copy link
Contributor

@Aljullu Aljullu 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 to me as well. Good job! :shipit:

@dinhtungdu dinhtungdu changed the title Try: Style whole Mini Cart block as inline to remove the experimental features usage. style Mini Cart block as inline to remove the experimental features usage. Mar 8, 2022
@dinhtungdu dinhtungdu merged commit dcda593 into try/new-mini-cart-icon Mar 8, 2022
@dinhtungdu dinhtungdu deleted the try/inline-button branch March 8, 2022 10:27
@mikejolley mikejolley modified the milestones: 7.2.0, 7.3.0 Mar 9, 2022
@tjcafferkey tjcafferkey added the type: enhancement The issue is a request for an enhancement. label Mar 28, 2022
@dinhtungdu dinhtungdu added the skip-changelog PRs that you don't want to appear in the changelog. label Mar 28, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: mini-cart Issues related to the Mini-Cart block. skip-changelog PRs that you don't want to appear in the changelog. type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants