Add a gap between multiple shipping package panels in the Checkout Block

[opr]

This PR increases the gap between shipping package panels. It is a simple fix implemented in CSS.

Please note I used $gap-larger because $gap did not leave enough space to show the packages were clearly separate.

Fixes #6467

Screenshots

Before	After

Testing

Automated Tests

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

User Facing Testing

1. Install the "Multiple Packages for WooCommerce" plugin
2. Navigate to WooCommerce -> Settings -> Multiple Packages
3. Adjust the settings to work based on "Per Product"
4. Add two/three/four different products to the cart and typically need shipping.
5. Go the checkout page and look at the shipping options.
6. Disable the plugin and reload the Checkout Block, ensure the shipping section still looks OK.

• Do not include in the Testing Notes

WooCommerce Visibility

• WooCommerce Core
• Feature plugin
• Experimental

Changelog

Fix the spacing between separate shipping packages in the Checkout Block.

[rubikuserbot]

The release ZIP for this PR is accessible via:

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

[github-actions]

Size Change: +32 B (0%)

Total Size: 873 kB

Filename	Size	Change
build/wc-blocks-style-rtl.css	22.1 kB	+16 B (0%)
build/wc-blocks-style.css	22.1 kB	+16 B (0%)

ℹ️ View Unchanged

Filename	Size
build/active-filters-frontend.js	7.34 kB
build/active-filters.js	8 kB
build/all-products-frontend.js	18.1 kB
build/all-products.js	33.5 kB
build/all-reviews.js	7.8 kB
build/attribute-filter-frontend.js	25.1 kB
build/attribute-filter.js	14.4 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.07 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	430 B
build/cart-blocks/cart-order-summary-frontend.js	1.11 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	782 B
build/cart-blocks/order-summary-coupon-form-frontend.js	2.62 kB
build/cart-blocks/order-summary-discount-frontend.js	2.12 kB
build/cart-blocks/order-summary-fee-frontend.js	273 B
build/cart-blocks/order-summary-heading-frontend.js	455 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	274 B
build/cart-blocks/order-summary-taxes-frontend.js	434 B
build/cart-blocks/proceed-to-checkout-frontend.js	1.16 kB
build/cart-frontend.js	45.6 kB
build/cart.js	44.2 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	890 B
build/checkout-blocks/contact-information-frontend.js	2.83 kB
build/checkout-blocks/express-payment-frontend.js	5.36 kB
build/checkout-blocks/fields-frontend.js	345 B
build/checkout-blocks/order-note-frontend.js	1.08 kB
build/checkout-blocks/order-summary-cart-items-frontend.js	3.67 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js	2.78 kB
build/checkout-blocks/order-summary-discount-frontend.js	2.25 kB
build/checkout-blocks/order-summary-fee-frontend.js	276 B
build/checkout-blocks/order-summary-frontend.js	1.11 kB
build/checkout-blocks/order-summary-shipping-frontend.js	604 B
build/checkout-blocks/order-summary-subtotal-frontend.js	274 B
build/checkout-blocks/order-summary-taxes-frontend.js	433 B
build/checkout-blocks/payment-frontend.js	7.67 kB
build/checkout-blocks/shipping-address-frontend.js	991 B
build/checkout-blocks/shipping-methods-frontend.js	4.72 kB
build/checkout-blocks/terms-frontend.js	1.22 kB
build/checkout-blocks/totals-frontend.js	326 B
build/checkout-frontend.js	47.9 kB
build/checkout.js	45.4 kB
build/featured-category.js	13.2 kB
build/featured-product.js	13.5 kB
build/handpicked-products.js	7.38 kB
build/legacy-template.js	2.8 kB
build/mini-cart-component-frontend.js	16.6 kB
build/mini-cart-contents-block/empty-cart-frontend.js	364 B
build/mini-cart-contents-block/filled-cart-frontend.js	229 B
build/mini-cart-contents-block/footer--mini-cart-contents-block/products-table-frontend.js	4.68 kB
build/mini-cart-contents-block/footer-frontend.js	5.75 kB
build/mini-cart-contents-block/items-frontend.js	237 B
build/mini-cart-contents-block/products-table-frontend.js	289 B
build/mini-cart-contents-block/shopping-button-frontend.js	288 B
build/mini-cart-contents-block/title-frontend.js	367 B
build/mini-cart-contents.js	22.9 kB
build/mini-cart-frontend.js	1.72 kB
build/mini-cart.js	6.62 kB
build/price-filter-frontend.js	13.1 kB
build/price-filter.js	9.04 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	564 B
build/product-add-to-cart-frontend.js	6.96 kB
build/product-add-to-cart.js	6.63 kB
build/product-best-sellers.js	7.71 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.85 kB
build/product-button.js	1.09 kB
build/product-categories.js	2.78 kB
build/product-category-list-frontend.js	921 B
build/product-category-list.js	502 B
build/product-category.js	8.69 kB
build/product-image-frontend.js	1.84 kB
build/product-image.js	1.08 kB
build/product-new.js	7.72 kB
build/product-on-sale.js	8.04 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	730 B
build/product-sale-badge-frontend.js	1.09 kB
build/product-sale-badge.js	680 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	917 B
build/product-tag-list-frontend.js	915 B
build/product-tag-list.js	496 B
build/product-tag.js	8.09 kB
build/product-title-frontend.js	1.29 kB
build/product-title.js	911 B
build/product-top-rated.js	7.96 kB
build/products-by-attribute.js	8.64 kB
build/reviews-by-category.js	11.2 kB
build/reviews-by-product.js	12.3 kB
build/reviews-frontend.js	7.02 kB
build/single-product-frontend.js	21.4 kB
build/single-product.js	10 kB
build/stock-filter-frontend.js	7.39 kB
build/stock-filter.js	7.3 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.74 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js	19.1 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-editor-style-rtl.css	5.04 kB
build/wc-blocks-editor-style.css	5.04 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.26 kB
build/wc-blocks-vendors-style.css	1.26 kB
build/wc-blocks-vendors.js	58.8 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

_{compressed-size-action}

[nielslange]

LGTM! Let's ⛴ it!