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

Fix express button display in the Cart block #10534

Merged
merged 2 commits into from
Aug 14, 2023

Conversation

ralucaStan
Copy link
Contributor

@ralucaStan ralucaStan commented Aug 10, 2023

This PR fixes a regression introduced in #8601;

The above PR set a grid display for the express payments area for the Checkout block; that component was reused in the Cart block as well leading to visual bugs

This PR sets the grid layout only for the Checkout block

Fixes #10528

Accessibility

Other Checks

  • This PR has either a [type] label or a [skip-changelog] label.
  • This PR adds/removes a feature flag & I've updated this doc.
  • This PR adds/removes an experimental interfaces and I've updated this doc.
  • I tagged two reviewers because this PR makes queries to the database or I think it might have some security impact.

Screenshots

Before After
Screenshot 2023-08-10 at 17 45 54

Testing

Automated Tests

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

User Facing Testing

  1. activate 2 different express payment options: I used Stripe and PayPal (see instructions) and make sure they are active
  2. add a product to cart
  3. visit the Cart block and make sure buttons are stacked
  4. go to the Checkout block and make sure buttons are in a grid
  5. repeat the testing in the editor as well
  6. repeat the steps with different screen sizes
  7. Mini cart does not display express payments so it does not need testing
  • Do not include in the Testing Notes
  • Should be tested by the development team exclusively

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Performance Impact

Changelog

Fix Express Payments buttons display in the Cart block

@ralucaStan ralucaStan requested a review from nielslange August 10, 2023 15:49
@ralucaStan ralucaStan added the status: blocker Used on issues or pulls that block work from being released. label Aug 10, 2023
@woocommercebot woocommercebot requested a review from a team August 10, 2023 15:50
@ralucaStan ralucaStan added this to the 10.9.0 milestone Aug 10, 2023
@ralucaStan ralucaStan added the type: bug The issue/PR concerns a confirmed bug. label Aug 10, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Aug 10, 2023

The release ZIP for this PR is accessible via:

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

Script Dependencies Report

The compare-assets action has detected some changed script dependencies between this branch and trunk. Please review and confirm the following are correct before merging.

Script Handle Added Removed
reviews-frontend.js wc-settings, wp-a11y, wp-api-fetch, wp-compose, wp-element, wp-i18n, wp-is-shallow-equal, wp-polyfill ⚠️
active-filters-frontend.js wc-blocks-data-store, wc-price-format, wc-settings, wp-data, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url ⚠️
all-products-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-style-engine, wp-url, wp-warning, wp-wordcount ⚠️
attribute-filter-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning ⚠️
cart-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-blocks, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-plugins, wp-polyfill, wp-primitives, wp-style-engine, wp-url, wp-warning, wp-wordcount ⚠️
checkout-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-plugins, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
filter-wrapper-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-style-engine, wp-url, wp-warning ⚠️
mini-cart-frontend.js wc-price-format, wc-settings, wp-i18n, wp-polyfill ⚠️
price-filter-frontend.js react, wc-blocks-data-store, wc-price-format, wc-settings, wp-data, wp-element, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-url ⚠️
rating-filter-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning ⚠️
stock-filter-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning ⚠️
mini-cart-component-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-autop, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-style-engine, wp-url, wp-warning, wp-wordcount ⚠️
product-button-interactivity-frontend.js lodash, wc-blocks-data-store, wc-interactivity, wp-a11y, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-warning ⚠️

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

TypeScript Errors Report

  • Files with errors: 476
  • Total errors: 2255

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Aug 10, 2023

Size Change: +12 B (0%)

Total Size: 1.42 MB

Filename Size Change
build/cart-rtl.css 9.71 kB +2 B (0%)
build/cart.css 9.69 kB +2 B (0%)
build/checkout-rtl.css 9.08 kB +2 B (0%)
build/wc-all-blocks-style-rtl.css 29.1 kB +3 B (0%)
build/wc-all-blocks-style.css 29.1 kB +3 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.57 kB
build/active-filters-rtl.css 1.99 kB
build/active-filters-wrapper--mini-cart-contents-block/cart-button--mini-cart-contents-block/checkout-but--e791dc6c-style.js 929 B
build/active-filters-wrapper-frontend.js 7.58 kB
build/active-filters-wrapper-rtl.css 1.85 kB
build/active-filters-wrapper.css 1.85 kB
build/active-filters.css 1.99 kB
build/active-filters.js 7.5 kB
build/add-to-cart-form-rtl.css 355 B
build/add-to-cart-form.css 354 B
build/all-products-frontend.js 9.95 kB
build/all-products-rtl.css 4.39 kB
build/all-products.css 4.38 kB
build/all-products.js 41.3 kB
build/all-reviews-rtl.css 1.79 kB
build/all-reviews.css 1.79 kB
build/all-reviews.js 7.77 kB
build/attribute-filter-frontend.js 22.9 kB
build/attribute-filter-rtl.css 4.14 kB
build/attribute-filter-wrapper-frontend.js 8.01 kB
build/attribute-filter-wrapper-rtl.css 4.01 kB
build/attribute-filter-wrapper.css 4.01 kB
build/attribute-filter.css 4.14 kB
build/attribute-filter.js 13.1 kB
build/blocks-checkout.js 35.1 kB
build/breadcrumbs-rtl.css 232 B
build/breadcrumbs.css 232 B
build/breadcrumbs.js 2.15 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.34 kB
build/cart-blocks/cart-accepted-payment-methods-style.js 137 B
build/cart-blocks/cart-cross-sells-frontend.js 250 B
build/cart-blocks/cart-cross-sells-products--product-price-frontend.js 2.89 kB
build/cart-blocks/cart-cross-sells-products-frontend.js 3.73 kB
build/cart-blocks/cart-cross-sells-products-style.js 137 B
build/cart-blocks/cart-cross-sells-style.js 250 B
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5 kB
build/cart-blocks/cart-express-payment-frontend.js 711 B
build/cart-blocks/cart-express-payment-style.js 137 B
build/cart-blocks/cart-items-frontend.js 284 B
build/cart-blocks/cart-items-style.js 218 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.34 kB
build/cart-blocks/cart-line-items-frontend.js 1.04 kB
build/cart-blocks/cart-line-items-style.js 137 B
build/cart-blocks/cart-order-summary-frontend.js 1.24 kB
build/cart-blocks/cart-order-summary-style.js 319 B
build/cart-blocks/cart-totals-frontend.js 287 B
build/cart-blocks/cart-totals-style.js 228 B
build/cart-blocks/empty-cart-frontend.js 343 B
build/cart-blocks/empty-cart-style.js 335 B
build/cart-blocks/filled-cart-frontend.js 651 B
build/cart-blocks/filled-cart-style.js 310 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.57 kB
build/cart-blocks/order-summary-coupon-form-style.js 136 B
build/cart-blocks/order-summary-discount-frontend.js 2.04 kB
build/cart-blocks/order-summary-discount-style.js 137 B
build/cart-blocks/order-summary-fee-frontend.js 271 B
build/cart-blocks/order-summary-fee-style.js 137 B
build/cart-blocks/order-summary-heading-frontend.js 325 B
build/cart-blocks/order-summary-heading-style.js 325 B
build/cart-blocks/order-summary-shipping-frontend.js 12 kB
build/cart-blocks/order-summary-shipping-style.js 177 B
build/cart-blocks/order-summary-subtotal-frontend.js 271 B
build/cart-blocks/order-summary-subtotal-style.js 136 B
build/cart-blocks/order-summary-taxes-frontend.js 433 B
build/cart-blocks/order-summary-taxes-style.js 177 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.41 kB
build/cart-blocks/proceed-to-checkout-style.js 1.09 kB
build/cart-frontend.js 29.7 kB
build/cart.js 45 kB
build/catalog-sorting-rtl.css 256 B
build/catalog-sorting.css 256 B
build/catalog-sorting.js 1.71 kB
build/checkout-blocks/actions--checkout-blocks/terms-style.js 485 B
build/checkout-blocks/actions-frontend.js 1.81 kB
build/checkout-blocks/actions-style.js 680 B
build/checkout-blocks/billing-address-frontend.js 4.3 kB
build/checkout-blocks/billing-address-style.js 533 B
build/checkout-blocks/contact-information-frontend.js 2.03 kB
build/checkout-blocks/contact-information-style.js 606 B
build/checkout-blocks/express-payment-frontend.js 1.12 kB
build/checkout-blocks/fields-frontend.js 301 B
build/checkout-blocks/fields-style.js 249 B
build/checkout-blocks/order-note-frontend.js 1.1 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.64 kB
build/checkout-blocks/order-summary-cart-items-style.js 136 B
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.73 kB
build/checkout-blocks/order-summary-coupon-form-style.js 137 B
build/checkout-blocks/order-summary-discount-frontend.js 2.22 kB
build/checkout-blocks/order-summary-discount-style.js 136 B
build/checkout-blocks/order-summary-fee-frontend.js 274 B
build/checkout-blocks/order-summary-fee-style.js 137 B
build/checkout-blocks/order-summary-frontend.js 1.24 kB
build/checkout-blocks/order-summary-shipping-frontend.js 12 kB
build/checkout-blocks/order-summary-shipping-style.js 138 B
build/checkout-blocks/order-summary-style.js 318 B
build/checkout-blocks/order-summary-subtotal-frontend.js 272 B
build/checkout-blocks/order-summary-subtotal-style.js 137 B
build/checkout-blocks/order-summary-taxes-frontend.js 433 B
build/checkout-blocks/order-summary-taxes-style.js 176 B
build/checkout-blocks/payment-frontend.js 9.13 kB
build/checkout-blocks/payment-style.js 461 B
build/checkout-blocks/pickup-options-frontend.js 4.13 kB
build/checkout-blocks/pickup-options-style.js 439 B
build/checkout-blocks/shipping-address-frontend.js 4.28 kB
build/checkout-blocks/shipping-address-style.js 475 B
build/checkout-blocks/shipping-method-frontend.js 2.59 kB
build/checkout-blocks/shipping-method-style.js 1.35 kB
build/checkout-blocks/shipping-methods-frontend.js 5.68 kB
build/checkout-blocks/shipping-methods-style.js 416 B
build/checkout-blocks/terms-frontend.js 1.51 kB
build/checkout-blocks/terms-style.js 672 B
build/checkout-blocks/totals-frontend.js 333 B
build/checkout-blocks/totals-style.js 276 B
build/checkout-frontend.js 31.6 kB
build/checkout.css 9.06 kB
build/checkout.js 47.7 kB
build/combobox-control-style-rtl.css 585 B
build/combobox-control-style.css 585 B
build/custom-select-control-style-rtl.css 479 B
build/custom-select-control-style.css 479 B
build/customer-account-rtl.css 388 B
build/customer-account.css 387 B
build/customer-account.js 3.18 kB
build/featured-category-rtl.css 971 B
build/featured-category.css 970 B
build/featured-category.js 14.9 kB
build/featured-product-rtl.css 1.02 kB
build/featured-product.css 1.02 kB
build/featured-product.js 15.1 kB
build/filter-wrapper-frontend.js 14.1 kB
build/filter-wrapper-rtl.css 375 B
build/filter-wrapper.css 375 B
build/filter-wrapper.js 2.39 kB
build/form-token-field-style-rtl.css 1.23 kB
build/form-token-field-style.css 1.22 kB
build/handpicked-products.js 7.96 kB
build/legacy-template-rtl.css 238 B
build/legacy-template.css 238 B
build/legacy-template.js 8.15 kB
build/mini-cart-component-frontend.js 30.7 kB
build/mini-cart-contents-block/cart-button--mini-cart-contents-block/checkout-button--mini-cart-contents---358acf4e-style.js 249 B
build/mini-cart-contents-block/cart-button--mini-cart-contents-block/checkout-button--mini-cart-contents---a5b7fa58-style.js 930 B
build/mini-cart-contents-block/cart-button-frontend.js 1.69 kB
build/mini-cart-contents-block/cart-button-style.js 382 B
build/mini-cart-contents-block/checkout-button-frontend.js 1.77 kB
build/mini-cart-contents-block/checkout-button-style.js 463 B
build/mini-cart-contents-block/empty-cart-frontend.js 358 B
build/mini-cart-contents-block/empty-cart-style.js 356 B
build/mini-cart-contents-block/filled-cart-frontend.js 267 B
build/mini-cart-contents-block/filled-cart-style.js 267 B
build/mini-cart-contents-block/footer-frontend.js 3.77 kB
build/mini-cart-contents-block/footer-rtl.css 400 B
build/mini-cart-contents-block/footer-style.js 2.35 kB
build/mini-cart-contents-block/footer.css 400 B
build/mini-cart-contents-block/items-frontend.js 228 B
build/mini-cart-contents-block/items-style.js 228 B
build/mini-cart-contents-block/products-table--product-image--product-title-style.js 316 B
build/mini-cart-contents-block/products-table-frontend.js 549 B
build/mini-cart-contents-block/products-table-rtl.css 2.12 kB
build/mini-cart-contents-block/products-table-style.js 5.32 kB
build/mini-cart-contents-block/products-table.css 2.11 kB
build/mini-cart-contents-block/shopping-button-frontend.js 487 B
build/mini-cart-contents-block/shopping-button-style.js 395 B
build/mini-cart-contents-block/title-frontend.js 1.86 kB
build/mini-cart-contents-block/title-items-counter-frontend.js 1.58 kB
build/mini-cart-contents-block/title-items-counter-style.js 302 B
build/mini-cart-contents-block/title-label-frontend.js 1.51 kB
build/mini-cart-contents-block/title-label-style.js 301 B
build/mini-cart-contents-block/title-style.js 438 B
build/mini-cart-contents-rtl.css 2.66 kB
build/mini-cart-contents.css 2.65 kB
build/mini-cart-contents.js 17.6 kB
build/mini-cart-frontend.js 2.79 kB
build/mini-cart-rtl.css 2.56 kB
build/mini-cart.css 2.56 kB
build/mini-cart.js 6.34 kB
build/packages-style-rtl.css 3.55 kB
build/packages-style.css 3.55 kB
build/price-filter-frontend.js 14.5 kB
build/price-filter-rtl.css 2.67 kB
build/price-filter-wrapper-frontend.js 8.57 kB
build/price-filter-wrapper-rtl.css 2.53 kB
build/price-filter-wrapper.css 2.53 kB
build/price-filter.css 2.67 kB
build/price-filter.js 8.51 kB
build/price-format.js 1.15 kB
build/product-add-to-cart--product-average-rating--product-button--product-image--product-price--product---1d132d69.js 271 B
build/product-add-to-cart--product-button--product-rating--product-rating-counter--product-rating-stars.js 150 B
build/product-add-to-cart--product-image--product-title.js 319 B
build/product-add-to-cart-frontend.js 8.5 kB
build/product-add-to-cart-rtl.css 1.35 kB
build/product-add-to-cart.css 1.36 kB
build/product-add-to-cart.js 8.55 kB
build/product-average-rating--product-button--product-image--product-price--product-rating--product-ratin--e23975b5.js 933 B
build/product-average-rating-frontend.js 1.71 kB
build/product-average-rating.js 400 B
build/product-best-sellers.js 8.32 kB
build/product-button-frontend.js 4.87 kB
build/product-button-interactivity-frontend.js 9.51 kB
build/product-button-rtl.css 1.1 kB
build/product-button.css 1.1 kB
build/product-button.js 3.88 kB
build/product-categories-rtl.css 651 B
build/product-categories.css 649 B
build/product-categories.js 2.71 kB
build/product-category.js 9.29 kB
build/product-collection.js 13.8 kB
build/product-details-rtl.css 394 B
build/product-details.css 391 B
build/product-gallery-large-image-rtl.css 295 B
build/product-gallery-large-image.css 295 B
build/product-gallery-large-image.js 2.02 kB
build/product-gallery-rtl.css 371 B
build/product-gallery-thumbnails-rtl.css 272 B
build/product-gallery-thumbnails.css 271 B
build/product-gallery-thumbnails.js 3.91 kB
build/product-gallery.css 373 B
build/product-gallery.js 6.02 kB
build/product-image-frontend.js 2.65 kB
build/product-image-gallery-rtl.css 304 B
build/product-image-gallery.css 303 B
build/product-image-rtl.css 922 B
build/product-image.css 920 B
build/product-image.js 1.51 kB
build/product-new.js 8.6 kB
build/product-on-sale.js 8.6 kB
build/product-price-frontend.js 247 B
build/product-price-rtl.css 667 B
build/product-price.css 665 B
build/product-price.js 1.65 kB
build/product-query-rtl.css 347 B
build/product-query.css 347 B
build/product-query.js 12.8 kB
build/product-rating-counter-frontend.js 2.01 kB
build/product-rating-counter.js 687 B
build/product-rating-frontend.js 2.35 kB
build/product-rating-rtl.css 244 B
build/product-rating-stars-frontend.js 2.25 kB
build/product-rating-stars-rtl.css 895 B
build/product-rating-stars.css 897 B
build/product-rating-stars.js 938 B
build/product-rating.css 244 B
build/product-rating.js 1.04 kB
build/product-results-count-rtl.css 228 B
build/product-results-count.css 228 B
build/product-results-count.js 1.66 kB
build/product-reviews-rtl.css 456 B
build/product-reviews.css 455 B
build/product-sale-badge-frontend.js 1.8 kB
build/product-sale-badge-rtl.css 369 B
build/product-sale-badge.css 370 B
build/product-sale-badge.js 671 B
build/product-search-rtl.css 415 B
build/product-search.css 415 B
build/product-search.js 2.63 kB
build/product-sku-frontend.js 1.84 kB
build/product-sku-rtl.css 237 B
build/product-sku.css 237 B
build/product-sku.js 522 B
build/product-stock-indicator-frontend.js 2.02 kB
build/product-stock-indicator-rtl.css 229 B
build/product-stock-indicator.css 229 B
build/product-stock-indicator.js 709 B
build/product-summary-frontend.js 2.18 kB
build/product-summary-rtl.css 546 B
build/product-summary.css 546 B
build/product-summary.js 919 B
build/product-tag.js 8.78 kB
build/product-template-rtl.css 418 B
build/product-template.css 418 B
build/product-template.js 3.43 kB
build/product-title-frontend.js 2.21 kB
build/product-title-rtl.css 688 B
build/product-title.css 689 B
build/product-title.js 965 B
build/product-top-rated.js 8.87 kB
build/products-by-attribute.js 9.63 kB
build/rating-filter-frontend.js 21.4 kB
build/rating-filter-rtl.css 4.2 kB
build/rating-filter-wrapper-frontend.js 6.62 kB
build/rating-filter-wrapper-rtl.css 4.07 kB
build/rating-filter-wrapper.css 4.07 kB
build/rating-filter.css 4.19 kB
build/rating-filter.js 6.88 kB
build/reviews-by-category-rtl.css 1.79 kB
build/reviews-by-category.css 1.79 kB
build/reviews-by-category.js 12 kB
build/reviews-by-product-rtl.css 1.79 kB
build/reviews-by-product.css 1.79 kB
build/reviews-by-product.js 13.1 kB
build/reviews-frontend.js 7.06 kB
build/single-product-rtl.css 375 B
build/single-product.css 375 B
build/single-product.js 11.2 kB
build/snackbar-notice-style-rtl.css 672 B
build/snackbar-notice-style.css 671 B
build/stock-filter-frontend.js 21.6 kB
build/stock-filter-rtl.css 4.01 kB
build/stock-filter-wrapper-frontend.js 6.82 kB
build/stock-filter-wrapper-rtl.css 3.88 kB
build/stock-filter-wrapper.css 3.88 kB
build/stock-filter.css 4.01 kB
build/stock-filter.js 7.61 kB
build/store-notices.js 1.69 kB
build/vendors--active-filters-wrapper--attribute-filter-wrapper--mini-cart-contents-block/cart-button--mi--d6bb29e6-style.js 606 B
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js 6.84 kB
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 8.31 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js 5.28 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.55 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 19.4 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping--checkout-block--24d3fc0c-frontend.js 8.22 kB
build/vendors--cart-blocks/proceed-to-checkout-style.js 178 B
build/vendors--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 5.6 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12.4 kB
build/vendors--checkout-blocks/shipping-method-style.js 11.7 kB
build/vendors--mini-cart-contents-block/products-table--price-filter-wrapper--product-price-style.js 5.27 kB
build/vendors--mini-cart-contents-block/products-table-style.js 3.16 kB
build/vendors--product-add-to-cart-frontend.js 7.52 kB
build/wc-blocks-classic-template-revert-button-style-rtl.css 237 B
build/wc-blocks-classic-template-revert-button-style.css 236 B
build/wc-blocks-classic-template-revert-button.js 1.53 kB
build/wc-blocks-data.js 21.9 kB
build/wc-blocks-editor-style-rtl.css 6.39 kB
build/wc-blocks-editor-style.css 6.39 kB
build/wc-blocks-google-analytics.js 1.55 kB
build/wc-blocks-middleware.js 934 B
build/wc-blocks-registry.js 3.19 kB
build/wc-blocks-rtl.css 2.46 kB
build/wc-blocks-shared-context.js 1.1 kB
build/wc-blocks-shared-hocs.js 1.63 kB
build/wc-blocks-vendors-style-rtl.css 1.95 kB
build/wc-blocks-vendors-style.css 1.95 kB
build/wc-blocks-vendors.js 65.5 kB
build/wc-blocks.css 2.46 kB
build/wc-blocks.js 2.62 kB
build/wc-interactivity.js 10.8 kB
build/wc-payment-method-bacs.js 817 B
build/wc-payment-method-cheque.js 813 B
build/wc-payment-method-cod.js 914 B
build/wc-payment-method-paypal.js 852 B
build/wc-settings.js 2.68 kB
build/wc-shipping-method-pickup-location.js 30.4 kB

compressed-size-action

Copy link
Member

@nielslange nielslange 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, @ralucaStan. The fix works as expected.

While reviewing this PR, I did notice the following things:

That said, as the fix itself is working as expected, I'm preapproving this PR.

@ralucaStan ralucaStan added block: cart Issues related to the cart block. block: checkout Issues related to the checkout block. labels Aug 11, 2023
@ralucaStan ralucaStan force-pushed the fix/cart-express-payments-display branch 2 times, most recently from d9b9626 to 1e1841a Compare August 11, 2023 13:21
When multiple buttons are displayed they don't appear stacked. This PR fixes a regression;
@ralucaStan ralucaStan force-pushed the fix/cart-express-payments-display branch from 1e1841a to bb68d53 Compare August 11, 2023 15:01
@ralucaStan ralucaStan requested a review from nielslange August 11, 2023 15:06
@ralucaStan
Copy link
Contributor Author

ralucaStan commented Aug 11, 2023

@nielslange thank you for checking the PR description 👏 I updated that.

Screenshot 2023-08-11 at 16 56 30 Could you also retest the buttons in the editor? I found a bug in the editor that I just fixed in a second commit.

Aparently moving the class decreased the specificity and the ul tag received some editor padding

@nielslange
Copy link
Member

Could you also retest the buttons in the editor? I found a bug in the editor that I just fixed in a second commit.
Aparently moving the class decreased the specificity and the ul tag received some editor padding

Can you tell me with which theme the padding issue appeared? I'm asking as I didn't see the padding issue during my initial review.

@ralucaStan
Copy link
Contributor Author

ralucaStan commented Aug 14, 2023

I was using Storefront, without Gutenberg

@nielslange
Copy link
Member

nielslange commented Aug 14, 2023

I was using Storefront, without Gutenberg

While the PR works as expected when using the Storefront theme, when using the Twenty Twenty-Three theme, the Express Checkout inner block shows an error, both when Gutenberg is activated and deactivated.

Screenshot 2023-08-14 at 11 03 45

The console shows the following error message:

TypeError: Cannot read properties of undefined (reading 'driver')
    at O (checkout-block.js:242:48)
    at wt (react-dom.min.js?ver=18.2.0:10:47637)
    at vr (react-dom.min.js?ver=18.2.0:10:56452)
    at js (react-dom.min.js?ver=18.2.0:10:121453)
    at wl (react-dom.min.js?ver=18.2.0:10:88659)
    at bl (react-dom.min.js?ver=18.2.0:10:88587)
    at yl (react-dom.min.js?ver=18.2.0:10:88450)
    at il (react-dom.min.js?ver=18.2.0:10:85274)
    at ol (react-dom.min.js?ver=18.2.0:10:83831)
    at v (react.min.js?ver=18.2.0:10:3385)

@ralucaStan
Copy link
Contributor Author

@nielslange This PR only introduces CSS changes. Can you replicate this issue with trunk as well?

@ralucaStan
Copy link
Contributor Author

ralucaStan commented Aug 14, 2023

As I've mentioned outside of this PR I can't replicate the issue

Screenshot 2023-08-14 at 12 32 20 Screenshot 2023-08-14 at 12 31 12

If you can't replicate the error on trunk as well then it means the issue is coming from this branch and I would need detailed replication steps to be able to understand your setup better.

Copy link
Contributor

@opr opr 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! Minor nitpick on the comment on line 8 is that it should start with a capital letter and end with a full stop, sorry 😬

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. block: checkout Issues related to the checkout block. status: blocker Used on issues or pulls that block work from being released. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Cart Block: Express Payments appear on 1 row resulting in visual bug
3 participants