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

Cart i2 Express Payment Method Spacing #4974

Merged
merged 1 commit into from
Oct 20, 2021
Merged

Conversation

mikejolley
Copy link
Member

@mikejolley mikejolley commented Oct 20, 2021

Styling changes to improve the spacing between express payment blocks in cart i2.

Fixes #4960

Screenshots

Spacing after these changes, editor + frontend:

Screenshot 2021-10-20 at 11 32 21
Screenshot 2021-10-20 at 11 32 38

Testing

For testing, use the cart i2 block and confirm the style of the sidebar matches the above. You'll need Stripe active in order to see the express payment methods, and on the frontend, a supported browser (chrome).

@mikejolley mikejolley added skip-changelog PRs that you don't want to appear in the changelog. block: cart Issues related to the cart block. labels Oct 20, 2021
@mikejolley mikejolley self-assigned this Oct 20, 2021
@rubikuserbot rubikuserbot requested review from a team and nielslange and removed request for a team October 20, 2021 10:35
@mikejolley mikejolley changed the title Styling (margin and padding) tweaks Cart i2 Express Payment Method Spacing Oct 20, 2021
@github-actions
Copy link
Contributor

Size Change: +222 B (0%)

Total Size: 1.23 MB

Filename Size Change
build/active-filters-frontend.js 8.35 kB -1 B (0%)
build/atomic-block-components/add-to-cart-frontend.js 8.51 kB -2 B (0%)
build/atomic-block-components/button-frontend.js 1.74 kB -3 B (0%)
build/atomic-block-components/category-list-frontend.js 468 B +2 B (0%)
build/atomic-block-components/image-frontend.js 1.88 kB +3 B (0%)
build/atomic-block-components/price-frontend.js 2.13 kB -2 B (0%)
build/atomic-block-components/stock-indicator-frontend.js 611 B -1 B (0%)
build/attribute-filter-frontend.js 18.8 kB -2 B (0%)
build/cart-blocks/checkout-button-frontend.js 1.21 kB -1 B (0%)
build/cart-blocks/express-payment--checkout-blocks/express-payment--checkout-blocks/payment-frontend.js 4.73 kB -1 B (0%)
build/cart-blocks/express-payment-frontend.js 1.58 kB -1 B (0%)
build/cart-blocks/filled-cart-frontend.js 802 B +1 B (0%)
build/cart-blocks/order-summary-frontend.js 7.3 kB -3 B (0%)
build/cart-frontend.js 91.6 kB -3 B (0%)
build/cart-i2-frontend.js 52.4 kB +8 B (0%)
build/checkout-blocks/actions-frontend.js 1.47 kB -2 B (0%)
build/checkout-blocks/contact-information-frontend.js 3.88 kB +4 B (0%)
build/checkout-blocks/order-note-frontend.js 1.56 kB -1 B (0%)
build/checkout-blocks/order-summary-frontend.js 12.7 kB -6 B (0%)
build/checkout-blocks/payment-frontend.js 4.58 kB +3 B (0%)
build/checkout-blocks/shipping-address-frontend.js 3.04 kB -2 B (0%)
build/checkout-blocks/terms-frontend.js 1.64 kB +1 B (0%)
build/checkout-blocks/totals-frontend.js 270 B -1 B (0%)
build/mini-cart-component-frontend.js 36.8 kB -2 B (0%)
build/reviews-frontend.js 8.96 kB +2 B (0%)
build/stock-filter-frontend.js 8.77 kB +2 B (0%)
build/wc-blocks-editor-style-rtl.css 15.6 kB +2 B (0%)
build/wc-blocks-style-rtl.css 20.6 kB +112 B (+1%)
build/wc-blocks-style.css 20.6 kB +116 B (+1%)
ℹ️ View Unchanged
Filename Size
build/active-filters.js 8.02 kB
build/all-products-frontend.js 23.1 kB
build/all-products.js 37.2 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.69 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 333 B
build/atomic-block-components/add-to-cart.js 7.85 kB
build/atomic-block-components/button.js 875 B
build/atomic-block-components/category-list.js 470 B
build/atomic-block-components/image.js 1.35 kB
build/atomic-block-components/price.js 2.11 kB
build/atomic-block-components/rating-frontend.js 562 B
build/atomic-block-components/rating.js 567 B
build/atomic-block-components/sale-badge-frontend.js 859 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.js 611 B
build/atomic-block-components/summary-frontend.js 908 B
build/atomic-block-components/summary.js 913 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.js 12.3 kB
build/blocks-checkout.js 21.1 kB
build/cart-blocks/accepted-payment-methods-frontend.js 1.38 kB
build/cart-blocks/empty-cart-frontend.js 327 B
build/cart-blocks/items-frontend.js 254 B
build/cart-blocks/line-items-frontend.js 5.53 kB
build/cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 3.69 kB
build/cart-blocks/totals-frontend.js 268 B
build/cart-i2.js 48.3 kB
build/cart.js 46.6 kB
build/checkout-blocks/billing-address-frontend.js 2.64 kB
build/checkout-blocks/express-payment-frontend.js 1.92 kB
build/checkout-blocks/fields-frontend.js 290 B
build/checkout-blocks/shipping-methods-frontend.js 5.55 kB
build/checkout-frontend.js 54.4 kB
build/checkout.js 53.1 kB
build/featured-category.js 7.73 kB
build/featured-product.js 9.41 kB
build/handpicked-products.js 6.27 kB
build/mini-cart-frontend.js 2.29 kB
build/mini-cart.js 2.34 kB
build/price-filter-frontend.js 14.3 kB
build/price-filter.js 9.67 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.69 kB
build/product-tag.js 6.58 kB
build/product-top-rated.js 6.73 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/single-product-frontend.js 26.2 kB
build/single-product.js 9.77 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.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-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.49 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

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.

Overall this is looking good but it seems to have caused a small regression in mobile.

This PR
Screen Shot 2021-10-20 at 14 38 18

Trunk:
image

@senadir
Copy link
Member

senadir commented Oct 20, 2021

I'm seeing conflict with styles coming from Cart i1. How about we merge this and handle styles in the migration PR?

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.

Apart from the extra styles (that we can fix in a follow up) this is looking good.

@github-actions github-actions bot added this to the 6.2.0 milestone Oct 20, 2021
@senadir senadir merged commit 2204176 into trunk Oct 20, 2021
@senadir senadir deleted the fix/express-spacing-in-cart-i2 branch October 20, 2021 16:02
jonny-bull pushed a commit to jonny-bull/woocommerce-gutenberg-products-block that referenced this pull request Dec 14, 2021
jonny-bull pushed a commit to jonny-bull/woocommerce-gutenberg-products-block that referenced this pull request Dec 16, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: cart Issues related to the cart block. 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: Extra spacing after Express Payment button
2 participants