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

Show three Express Payments buttons in-line #8601

Merged

Conversation

nielslange
Copy link
Member

@nielslange nielslange commented Mar 2, 2023

Fixes #8600

In p1677558681155729/1677282265.770279-slack-C02TS23QJ1X, @pierorocca suggested focusing on displaying 3 to 4 buttons in one line for now. In woocommerce/woocommerce#42464, @stephendharmadi shared designs that show that maximum three Express Payment buttons should be shown next to each other.

Screenshots

Before:

Screenshot 2023-03-02 at 14 26 14
After:

Screenshot 2023-03-02 at 14 38 36

This PR also introduces spacing between the Express Payment buttons. In case a merchant shows more than three Express Payment buttons, they now contain spacing:

Before:

Screenshot 2023-03-02 at 14 26 14
After:

Screenshot 2023-03-02 at 15 03 59

Testing

User Facing Testing

  1. Create a WordPress.com site using the eCommerce plan.
  2. Install and activate the Tsubaki theme.
  3. Install and activate WooCommerce Blocks using this ZIP file.
  4. Install and activate WooCommerce Payments.
  5. Install and activate WooCommerce Stripe Gateway.
  6. Activate Express Payment both for WooCommerce Payments and WooCommerce Stripe Gateway.
  7. Add a product to the cart and open the checkout page (which should use the Checkout block).
  8. Verify that up to three Express Payment buttons are next to each other.
  9. Simulate viewing the page with a mobile device by making the page smaller and verify that the three Express Payment buttons appear stacked.
  10. Install and activate the Storefront theme.
  11. Repeat steps 8. and 9. to verify that this change did not introduce a regression.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Fix: Show up to three Express Payments buttons next to each other.

cc: @pierorocca

@nielslange nielslange added type: bug The issue/PR concerns a confirmed bug. block: checkout Issues related to the checkout block. focus: global styles Issues that involve styles/css/layout structure. labels Mar 2, 2023
@nielslange nielslange self-assigned this Mar 2, 2023
@woocommercebot woocommercebot requested review from a team and tarhi-saad and removed request for a team March 2, 2023 07:29
@github-actions
Copy link
Contributor

github-actions bot commented Mar 2, 2023

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-8601.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: 2334

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Mar 2, 2023

Size Change: +31 B (0%)

Total Size: 1.11 MB

Filename Size Change
build/wc-blocks-style-rtl.css 26.7 kB +15 B (0%)
build/wc-blocks-style.css 26.7 kB +16 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.98 kB
build/active-filters-wrapper-frontend.js 5.99 kB
build/active-filters.js 7.33 kB
build/all-products-frontend.js 11.7 kB
build/all-products.js 36.4 kB
build/all-reviews.js 7.67 kB
build/attribute-filter-frontend.js 22.4 kB
build/attribute-filter-wrapper-frontend.js 7.08 kB
build/attribute-filter.js 12.4 kB
build/blocks-checkout.js 41.2 kB
build/breadcrumbs.js 2.04 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.71 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 299 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.35 kB
build/cart-blocks/cart-line-items-frontend.js 1.06 kB
build/cart-blocks/cart-order-summary-frontend.js 1.24 kB
build/cart-blocks/cart-totals-frontend.js 322 B
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/filled-cart-frontend.js 655 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/cart.js 47.5 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 345 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 276 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.28 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 324 B
build/checkout-frontend.js 30.5 kB
build/checkout.js 44.2 kB
build/customer-account.js 3.08 kB
build/featured-category.js 13.5 kB
build/featured-product.js 13.7 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.24 kB
build/legacy-template.js 5.29 kB
build/mini-cart-component-frontend.js 28 kB
build/mini-cart-contents-block/empty-cart-frontend.js 366 B
build/mini-cart-contents-block/filled-cart-frontend.js 268 B
build/mini-cart-contents-block/footer-frontend.js 2.86 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 589 B
build/mini-cart-contents-block/shopping-button-frontend.js 313 B
build/mini-cart-contents-block/title-frontend.js 367 B
build/mini-cart-contents.js 16.6 kB
build/mini-cart-frontend.js 2 kB
build/mini-cart.js 4.3 kB
build/price-filter-frontend.js 13.8 kB
build/price-filter-wrapper-frontend.js 6.99 kB
build/price-filter.js 8.39 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.71 kB
build/product-add-to-cart.js 8.61 kB
build/product-best-sellers.js 7.59 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-button.js 3.99 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 8.58 kB
build/product-image-frontend.js 2.23 kB
build/product-image.js 4.09 kB
build/product-new.js 7.58 kB
build/product-on-sale.js 7.91 kB
build/product-price-frontend.js 2.32 kB
build/product-price.js 1.58 kB
build/product-query.js 6.6 kB
build/product-rating-frontend.js 1.65 kB
build/product-rating.js 920 B
build/product-results-count.js 1.65 kB
build/product-sale-badge-frontend.js 1.45 kB
build/product-sale-badge.js 816 B
build/product-search.js 2.63 kB
build/product-sku-frontend.js 629 B
build/product-sku.js 378 B
build/product-stock-indicator-frontend.js 1.31 kB
build/product-stock-indicator.js 645 B
build/product-summary-frontend.js 1.58 kB
build/product-summary.js 920 B
build/product-tag-list-frontend.js 1.18 kB
build/product-tag-list.js 497 B
build/product-tag.js 8.07 kB
build/product-title-frontend.js 1.65 kB
build/product-title.js 3.46 kB
build/product-top-rated.js 7.82 kB
build/products-by-attribute.js 8.52 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.2 kB
build/reviews-by-product.js 12.3 kB
build/reviews-frontend.js 7.14 kB
build/single-product-frontend.js 17.9 kB
build/single-product.js 9.94 kB
build/stock-filter-frontend.js 21.1 kB
build/stock-filter-wrapper-frontend.js 5.85 kB
build/stock-filter.js 8.14 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.74 kB
build/wc-blocks-editor-style.css 5.75 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

Copy link
Contributor

@tarhi-saad tarhi-saad left a comment

Choose a reason for hiding this comment

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

Thank you! It works great! 🚀

@github-actions github-actions bot added this to the 9.8.0 milestone Mar 2, 2023
@nielslange nielslange merged commit 710cc23 into trunk Mar 2, 2023
@nielslange nielslange deleted the update/8600-show-three-Express-Payment-buttons-inline branch March 2, 2023 12:47
@nielslange
Copy link
Member Author

Thanks a lot for your review, @tarhi-saad!

@nielslange nielslange modified the milestones: 9.8.0, 9.7.1 Mar 3, 2023
nielslange added a commit that referenced this pull request Mar 3, 2023
* Empty commit for release pull request

* Empty commit for release pull request

* Update readme.txt

* Show three Express Payments buttons in-line (#8601)

* Add testing notes

* Bumping version strings to new version.

* Bumping version strings to new version.

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Niels Lange <info@nielslange.de>
Aljullu pushed a commit that referenced this pull request Mar 3, 2023
Co-authored-by: Saad Tarhi <saad.trh@gmail.com>
gigitux added a commit that referenced this pull request Mar 17, 2023
* Empty commit for release pull request

* Add changelog to readme.txt

* Unset default customer state if it doesn't match country (#8460)

* Unset default state

* add controller for customers

* rename validation file

* explain fix inline

* address feedback

* revert back state logic

* Update src/StoreApi/Utilities/ValidationUtils.php

Co-authored-by: Mike Jolley <mike.jolley@me.com>

---------

Co-authored-by: Mike Jolley <mike.jolley@me.com>

* Update readme.txt

* Add testing notes

* Update testing notes

* Fix Customer account sidebar link incorrect margin in WP 6.2 (#8437)

* Fix Customer account sidebar link incorrect margin in WP 6.2

* Update class name to match the guidelines

* Prevent cart from breaking when item_data contains an array (#8440)

* Ensure array item data is removed

* Remove unused key

* Clean up code and add comments

* Check for null instead of empty

* Use plain foreach to filter and map arrays

* Add minimum height to Mini Cart Contents block in the Style Book (#8458)

* Update testing notes zip file

* Update testing notes

* Update testing notes file

* Bumping version strings to new version.

* Empty commit for release pull request

* Empty commit for release pull request

* disable compatibilty layer (#8507)

* update changelog and testing instructions

* add zip link

* Bumping version strings to new version.

* Empty commit for release pull request

* Empty commit for release pull request

* Add changelog in readme.txt

* Add testing notes

* Remove change from testing notes

This requires AvaTax credentials for testing. So, we'll test for
regressions instead

* Check for null session before going forward (#8537)

* Fix Payment Options settings crash in the editor (#8535)

* Ensure express payment buttons are visible next to each other (#8548)

* Update ZIP file

* Bumping version strings to new version.

* Empty commit for release pull request

* Empty commit for release pull request

* Update readme.txt

* Show three Express Payments buttons in-line (#8601)

* Add testing notes

* Bumping version strings to new version.

* Empty commit for release pull request

* Empty commit for release pull request

* Add changelog in readme.txt

* Undo dirty prop removal on error (#8633)

Co-authored-by: Saad Tarhi <saad.trh@gmail.com>

* Add testing notes

* fix 404 error (#8445)

* Empty commit for release pull request

* add testing instruction

* update zip link

* fix version

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Saad Tarhi <saad.trh@gmail.com>
Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com>
Co-authored-by: Mike Jolley <mike.jolley@me.com>
Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>
Co-authored-by: Luigi Teschio <gigitux@gmail.com>
Co-authored-by: Niels Lange <info@nielslange.de>
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: checkout Issues related to the checkout block. focus: global styles Issues that involve styles/css/layout structure. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Show up to three Express Payment buttons in one row
2 participants