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

Add border support to mini cart contents #8654

Merged
merged 5 commits into from
Mar 10, 2023
Merged

Conversation

albarin
Copy link
Contributor

@albarin albarin commented Mar 7, 2023

This PR adds support for adding border style controls to the Mini Cart overlay via the Mini Cart Contents block.

Fixes #6257

Screenshots

Before After
Screenshot 2023-03-08 at 15 41 35 Screenshot 2023-03-08 at 15 41 09
Screenshot 2023-03-08 at 15 40 26 Screenshot 2023-03-08 at 15 40 14

Testing

Automated Tests

User Facing Testing

  1. Enable a blocks theme, go to Site Editor, and add the Mini Cart block to the header.
  2. Go to Template Parts and open the Mini Cart template.
  3. Open the List View, select the Mini Cart contents block and check that in the settings sidebar you can see the Border controls.
  4. Click the + button and add a border and save the template.
  5. Go to the frontend, click on the Mini Cart button, and check you see the same border in the editor and in the frontend.
  6. Check that all the buttons in the mini cart modal are correctly displayed.
  7. Double check in different browsers and logged in/out of the admin.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Add border style controls to the Mini Cart block.

@github-actions
Copy link
Contributor

github-actions bot commented Mar 7, 2023

The release ZIP for this PR is accessible via:

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

Script Dependencies Report

There is no changed script dependency between this branch and trunk.

This comment was automatically generated by the ./github/compare-assets action.

TypeScript Errors Report

  • Files with errors: 486
  • Total errors: 2307

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Mar 7, 2023

Size Change: +95 B (0%)

Total Size: 1.12 MB

Filename Size Change
build/attribute-filter.js 13.1 kB -2 B (0%)
build/breadcrumbs.js 2.05 kB -1 B (0%)
build/cart.js 47.6 kB -4 B (0%)
build/legacy-template.js 5.31 kB -1 B (0%)
build/mini-cart-contents.js 16.6 kB +94 B (+1%)
build/product-button.js 3.99 kB +2 B (0%)
build/product-image.js 4.1 kB +1 B (0%)
build/product-sale-badge.js 819 B +1 B (0%)
build/product-title.js 3.46 kB +1 B (0%)
build/stock-filter.js 8.13 kB -2 B (0%)
build/wc-blocks-style-rtl.css 26.9 kB +2 B (0%)
build/wc-blocks-style.css 26.8 kB +4 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.97 kB
build/active-filters-wrapper-frontend.js 5.98 kB
build/active-filters.js 7.37 kB
build/all-products-frontend.js 11.7 kB
build/all-products.js 37.7 kB
build/all-reviews.js 7.66 kB
build/attribute-filter-frontend.js 22.5 kB
build/attribute-filter-wrapper--stock-filter-wrapper-frontend.js 3.36 kB
build/attribute-filter-wrapper-frontend.js 4.49 kB
build/blocks-checkout.js 41.2 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-frontend.js 9.74 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.19 kB
build/cart-blocks/cart-express-payment-frontend.js 720 B
build/cart-blocks/cart-items-frontend.js 301 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.36 kB
build/cart-blocks/cart-line-items-frontend.js 1.07 kB
build/cart-blocks/cart-order-summary-frontend.js 1.24 kB
build/cart-blocks/cart-totals-frontend.js 307 B
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/filled-cart-frontend.js 653 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.62 kB
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB
build/cart-blocks/order-summary-fee-frontend.js 274 B
build/cart-blocks/order-summary-heading-frontend.js 455 B
build/cart-blocks/order-summary-shipping-frontend.js 14.8 kB
build/cart-blocks/order-summary-subtotal-frontend.js 275 B
build/cart-blocks/order-summary-taxes-frontend.js 434 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.24 kB
build/cart-frontend.js 28.9 kB
build/catalog-sorting.js 1.7 kB
build/checkout-blocks/actions-frontend.js 1.85 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 3.92 kB
build/checkout-blocks/billing-address-frontend.js 1.18 kB
build/checkout-blocks/contact-information-frontend.js 2.05 kB
build/checkout-blocks/express-payment-frontend.js 1.13 kB
build/checkout-blocks/fields-frontend.js 330 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 1.79 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB
build/checkout-blocks/order-summary-fee-frontend.js 277 B
build/checkout-blocks/order-summary-frontend.js 1.24 kB
build/checkout-blocks/order-summary-shipping-frontend.js 14.9 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 275 B
build/checkout-blocks/order-summary-taxes-frontend.js 435 B
build/checkout-blocks/payment-frontend.js 8.43 kB
build/checkout-blocks/pickup-options-frontend.js 2.8 kB
build/checkout-blocks/shipping-address-frontend.js 1.14 kB
build/checkout-blocks/shipping-method-frontend.js 2.27 kB
build/checkout-blocks/shipping-methods-frontend.js 4.58 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 311 B
build/checkout-frontend.js 30.4 kB
build/checkout.js 44.2 kB
build/customer-account.js 3.16 kB
build/featured-category.js 14 kB
build/featured-product.js 14.2 kB
build/filter-wrapper-frontend.js 14.1 kB
build/filter-wrapper.js 2.39 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/handpicked-products.js 7.91 kB
build/mini-cart-component-frontend.js 28 kB
build/mini-cart-contents-block/empty-cart-frontend.js 360 B
build/mini-cart-contents-block/filled-cart-frontend.js 268 B
build/mini-cart-contents-block/footer-frontend.js 2.87 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 588 B
build/mini-cart-contents-block/shopping-button-frontend.js 573 B
build/mini-cart-contents-block/title-frontend.js 367 B
build/mini-cart-frontend.js 2.05 kB
build/mini-cart.js 4.29 kB
build/price-filter-frontend.js 13.9 kB
build/price-filter-wrapper-frontend.js 6.99 kB
build/price-filter.js 8.38 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 253 B
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 151 B
build/product-add-to-cart-frontend.js 6.69 kB
build/product-add-to-cart.js 8.61 kB
build/product-best-sellers.js 8.25 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 500 B
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-title.js 262 B
build/product-button-frontend.js 2.22 kB
build/product-categories.js 2.36 kB
build/product-category-list-frontend.js 1.19 kB
build/product-category-list.js 502 B
build/product-category.js 9.24 kB
build/product-image-frontend.js 2.22 kB
build/product-new.js 8.25 kB
build/product-on-sale.js 8.57 kB
build/product-price-frontend.js 2.38 kB
build/product-price.js 1.63 kB
build/product-query.js 10.8 kB
build/product-rating-frontend.js 1.65 kB
build/product-rating.js 919 B
build/product-results-count.js 1.65 kB
build/product-sale-badge-frontend.js 1.45 kB
build/product-search.js 2.63 kB
build/product-sku-frontend.js 707 B
build/product-sku.js 452 B
build/product-stock-indicator-frontend.js 1.32 kB
build/product-stock-indicator.js 645 B
build/product-summary-frontend.js 1.58 kB
build/product-summary.js 919 B
build/product-tag-list-frontend.js 1.19 kB
build/product-tag-list.js 498 B
build/product-tag.js 8.73 kB
build/product-title-frontend.js 1.65 kB
build/product-top-rated.js 8.49 kB
build/products-by-attribute.js 9.45 kB
build/rating-filter-frontend.js 20.9 kB
build/rating-filter-wrapper-frontend.js 5.61 kB
build/rating-filter.js 7.41 kB
build/reviews-by-category.js 11.9 kB
build/reviews-by-product.js 13 kB
build/reviews-frontend.js 7.13 kB
build/single-product-frontend.js 17.9 kB
build/single-product.js 10.6 kB
build/stock-filter-frontend.js 21.1 kB
build/stock-filter-wrapper-frontend.js 3.15 kB
build/store-notices.js 1.69 kB
build/vendors--attribute-filter-wrapper--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary--82e4ed06-frontend.js 6.86 kB
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 7.69 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js 5.26 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.4 kB
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 7.25 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.83 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12 kB
build/vendors--checkout-blocks/shipping-methods-frontend.js 8.84 kB
build/wc-blocks-data.js 21.5 kB
build/wc-blocks-editor-style-rtl.css 5.82 kB
build/wc-blocks-editor-style.css 5.82 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 933 B
build/wc-blocks-registry.js 3.15 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.73 kB
build/wc-blocks-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.96 kB
build/wc-blocks-vendors.js 64.4 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
build/wc-settings.js 2.6 kB
build/wc-shipping-method-pickup-location.js 29.7 kB
build/woo-directives-runtime.js 2.73 kB
build/woo-directives-vendors.js 7.91 kB

compressed-size-action

@albarin albarin added type: enhancement The issue is a request for an enhancement. focus: global styles Issues that involve styles/css/layout structure. block: mini-cart Issues related to the Mini-Cart block. labels Mar 8, 2023
@albarin albarin marked this pull request as ready for review March 8, 2023 14:50
@woocommercebot woocommercebot requested review from a team and gigitux and removed request for a team March 8, 2023 14:51
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.

LGTM! I'm not sure if we should use experimental API without the feature plugin flag.

@@ -41,6 +41,10 @@ const settings: BlockConfiguration = {
link: true,
},
lock: false,
__experimentalBorder: {
Copy link
Contributor

Choose a reason for hiding this comment

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

Is it correct that we enable this feature in WC Core too? I'm asking because it is an experimental API

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes, you are right, it shouldn't. I'll fix it. Thanks :)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Pushed the fix, can you have another look? @gigitux

@github-actions github-actions bot added this to the 9.8.0 milestone Mar 8, 2023
@albarin albarin marked this pull request as draft March 9, 2023 09:46
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.

Besides @gigitux's comment, everything else LGTM. I also tested that it didn't cause a regression with the testing steps from #8351.

Btw, I pushed a commit to make the admin bar height adapt to mobile and rebased this PR on trunk.

@albarin albarin marked this pull request as ready for review March 9, 2023 10:27
@woocommercebot woocommercebot requested a review from a team March 9, 2023 10:28
@albarin albarin requested a review from gigitux March 9, 2023 10:48
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.

LGTM

@albarin albarin merged commit 0e7855c into trunk Mar 10, 2023
@albarin albarin deleted the add/6257-border-support branch March 10, 2023 08:25
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. focus: global styles Issues that involve styles/css/layout structure. type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add border style controls to the Mini Cart overlay
3 participants