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

Fix: Empty Mini Cart Contents view in editor is not vertically centered on WP 6.0 #6379

Merged
merged 8 commits into from
May 6, 2022
Merged

Fix: Empty Mini Cart Contents view in editor is not vertically centered on WP 6.0 #6379

merged 8 commits into from
May 6, 2022

Conversation

dinhtungdu
Copy link
Member

@dinhtungdu dinhtungdu commented May 5, 2022 •
edited
Loading

Fixes #6375

This PR updates the editor style of the Mini Cart Contents block to handle editor updates in WP 6.0 which breaks the styling of the Mini Cart Contents empty view.

Screenshots

Before After
Screen Shot 2022-05-05 at 14 01 49 image

Testing

Automated Tests

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

User Facing Testing

  1. Upgrade to WP 6.0 beta version or activate the latest version of Gutenberg.
  2. With a block theme like 2022, Go to Edit Site > Template Parts > Mini Cart.
  3. Switch to the Empty Mini Cart Contents view.
  4. See the content is aligned center as expected.
  5. Roll back to WP 5.9.3 or deactivate the Gutenberg plugin.
  6. Go to Edit Site > Template Parts > Mini Cart.
  7. Switch to the Empty Mini Cart Contents view.
  8. See no regression introduced by this PR:
  • Add the All Products block to the empty view.
  • Resize the browser to make the content of the empty view overflow.
  • See the empty view is scrollable both in the editor and on the front end.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Performance Impact

Changelog

Fix: Align Empty Mini Cart Contents block center in the Site Editor.

@dinhtungdu dinhtungdu self-assigned this May 5, 2022
@dinhtungdu dinhtungdu added status: needs review type: bug The issue/PR concerns a confirmed bug. block: mini-cart Issues related to the Mini-Cart block. labels May 5, 2022
@rubikuserbot rubikuserbot requested review from a team and tjcafferkey and removed request for a team May 5, 2022 09:33
@github-actions
Copy link
Contributor

github-actions bot commented May 5, 2022 •
edited
Loading

Size Change: +54 B (0%)

Total Size: 872 kB

Filename Size Change
build/mini-cart-component-frontend.js 16.6 kB -2 B (0%)
build/mini-cart-contents-block/empty-cart-frontend.js 364 B +36 B (+11%) ⚠️
build/wc-blocks-editor-style-rtl.css 4.95 kB +1 B (0%)
build/wc-blocks-editor-style.css 4.95 kB +5 B (0%)
build/wc-blocks-style-rtl.css 22.1 kB +7 B (0%)
build/wc-blocks-style.css 22.1 kB +7 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 6.59 kB
build/active-filters.js 7.41 kB
build/all-products-frontend.js 18.1 kB
build/all-products.js 33.4 kB
build/all-reviews.js 7.8 kB
build/attribute-filter-frontend.js 17.7 kB
build/attribute-filter.js 13.7 kB
build/blocks-checkout.js 17.4 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.16 kB
build/cart-blocks/cart-express-payment-frontend.js 5.24 kB
build/cart-blocks/cart-items-frontend.js 299 B
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 433 B
build/cart-blocks/cart-order-summary-frontend.js 1.1 kB
build/cart-blocks/cart-totals-frontend.js 322 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.81 kB
build/cart-blocks/order-summary-discount-frontend.js 2.31 kB
build/cart-blocks/order-summary-fee-frontend.js 273 B
build/cart-blocks/order-summary-heading-frontend.js 454 B
build/cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping-frontend.js 6.34 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.15 kB
build/cart-frontend.js 45.5 kB
build/cart.js 44.3 kB
build/checkout-blocks/actions-frontend.js 1.41 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.12 kB
build/checkout-blocks/billing-address-frontend.js 889 B
build/checkout-blocks/contact-information-frontend.js 2.83 kB
build/checkout-blocks/express-payment-frontend.js 5.53 kB
build/checkout-blocks/fields-frontend.js 345 B
build/checkout-blocks/order-note-frontend.js 1.07 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.67 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 2.96 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.43 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 432 B
build/checkout-blocks/payment-frontend.js 7.84 kB
build/checkout-blocks/shipping-address-frontend.js 995 B
build/checkout-blocks/shipping-methods-frontend.js 4.71 kB
build/checkout-blocks/terms-frontend.js 1.22 kB
build/checkout-blocks/totals-frontend.js 326 B
build/checkout-frontend.js 47.7 kB
build/checkout.js 45.6 kB
build/featured-category.js 12.8 kB
build/featured-product.js 11.2 kB
build/handpicked-products.js 7.11 kB
build/legacy-template.js 2.2 kB
build/mini-cart-contents-block/filled-cart-frontend.js 230 B
build/mini-cart-contents-block/footer--mini-cart-contents-block/products-table-frontend.js 4.69 kB
build/mini-cart-contents-block/footer-frontend.js 5.63 kB
build/mini-cart-contents-block/items-frontend.js 225 B
build/mini-cart-contents-block/products-table-frontend.js 289 B
build/mini-cart-contents-block/shopping-button-frontend.js 287 B
build/mini-cart-contents-block/title-frontend.js 366 B
build/mini-cart-contents.js 22.7 kB
build/mini-cart-frontend.js 1.72 kB
build/mini-cart.js 6.1 kB
build/price-filter-frontend.js 12.5 kB
build/price-filter.js 8.73 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 223 B
build/product-add-to-cart--product-button--product-image--product-title.js 2.65 kB
build/product-add-to-cart--product-button.js 565 B
build/product-add-to-cart-frontend.js 6.96 kB
build/product-add-to-cart.js 6.64 kB
build/product-best-sellers.js 7.38 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 500 B
build/product-button-frontend.js 1.84 kB
build/product-button.js 1.08 kB
build/product-categories.js 2.78 kB
build/product-category-list-frontend.js 924 B
build/product-category-list.js 500 B
build/product-category.js 8.49 kB
build/product-image-frontend.js 1.84 kB
build/product-image.js 1.07 kB
build/product-new.js 7.68 kB
build/product-on-sale.js 8 kB
build/product-price-frontend.js 1.94 kB
build/product-price.js 1.5 kB
build/product-rating-frontend.js 1.15 kB
build/product-rating.js 736 B
build/product-sale-badge-frontend.js 1.09 kB
build/product-sale-badge.js 678 B
build/product-search.js 2.18 kB
build/product-sku-frontend.js 380 B
build/product-sku.js 382 B
build/product-stock-indicator-frontend.js 1.03 kB
build/product-stock-indicator.js 621 B
build/product-summary-frontend.js 1.33 kB
build/product-summary.js 918 B
build/product-tag-list-frontend.js 918 B
build/product-tag-list.js 495 B
build/product-tag.js 7.81 kB
build/product-title-frontend.js 1.3 kB
build/product-title.js 909 B
build/product-top-rated.js 7.91 kB
build/products-by-attribute.js 8.38 kB
build/reviews-by-category.js 11.2 kB
build/reviews-by-product.js 12.2 kB
build/reviews-frontend.js 7.02 kB
build/single-product-frontend.js 21.5 kB
build/single-product.js 10 kB
build/stock-filter-frontend.js 6.87 kB
build/stock-filter.js 6.93 kB
build/vendors--cart-blocks/cart-line-items--cart-blocks/cart-order-summary--cart-blocks/order-summary-shi--c02aad66-frontend.js 5.26 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.75 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 20.5 kB
build/vendors--mini-cart-contents-block/footer-frontend.js 6.86 kB
build/vendors--product-add-to-cart-frontend.js 7.53 kB
build/wc-blocks-data.js 9.87 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 930 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-vendors.js 71.4 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

Aljullu
Aljullu approved these changes May 5, 2022
View reviewed changes
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.

LGTM

@github-actions github-actions bot added this to the 7.6.0 milestone May 5, 2022
@dinhtungdu
Copy link
Member Author

Found a regression with overflow content. Converting this PR to draft.

@dinhtungdu dinhtungdu marked this pull request as draft May 5, 2022 10:46
@dinhtungdu dinhtungdu requested a review from Aljullu May 6, 2022 00:33
@dinhtungdu dinhtungdu marked this pull request as ready for review May 6, 2022 00:33
@dinhtungdu
Copy link
Member Author

@Aljullu I fixed the overflow issue and updated the testing instruction. This is ready to review again : ).

tjcafferkey
tjcafferkey approved these changes May 6, 2022
View reviewed changes
Copy link
Contributor

@tjcafferkey tjcafferkey 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 fixing that alignment issue so quickly! This looks good to me and tests well!

@dinhtungdu dinhtungdu merged commit 9dd3ac8 into trunk May 6, 2022
@dinhtungdu dinhtungdu deleted the fix/6375 branch May 6, 2022 11:05
@opr opr mentioned this pull request May 10, 2022
Merged
@github-actions github-actions bot mentioned this pull request Jun 15, 2022
Closed
This was referenced Jul 4, 2022
Closed
Closed
Closed
Closed
Closed
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@tjcafferkey tjcafferkey tjcafferkey approved these changes

@Aljullu Aljullu Awaiting requested review from Aljullu

Assignees

@dinhtungdu dinhtungdu

Labels
block: mini-cart Issues related to the Mini-Cart block. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Milestone
7.6.0
Development

Successfully merging this pull request may close these issues.

The Empty Mini Cart Contents view in editor is not vertically centered on WP 6.0
3 participants
@dinhtungdu @Aljullu @tjcafferkey