Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add additional checks for cart and checkout blocks for script handles #8329

Merged
merged 3 commits into from
Mar 5, 2024

Conversation

bborman22
Copy link
Contributor

@bborman22 bborman22 commented Mar 5, 2024

Fixes #8328

Changes proposed in this Pull Request

This fix just adds some conditionals to enqueuing the payment method script handles to account for pages that have the cart or checkout block on them. In #8259 we limited the enqueuing of scripts to only the relevant pages, but when testing a page that wasn't officially set as the cart page in WC Settings, it was discovered that some styles were missing.

This applied to both the WooPay button and Stripe Link button.

The fix was just to use the has_block check in addition to the is_cart or is_checkout checks.

Testing instructions

  1. Use the latest build of WooPayments (or develop branch).
  2. Enable WooPay and add the button to display on cart and checkout.
  3. Add pages for cart and checkout blocks if they don't already exist.
  4. Make sure that those pages are not set as the WC Cart and Checkout pages.
  5. Add an item to the cart and go cart.
  6. Confirm on the cart block page, the WooPay button renders correctly.
  7. Confirm on the checkout block page, the WooPay button renders correctly.
  8. In settings disable WooPay and enable Stripe Link.
  9. Go to checkout block page and enter an email address and tab off email.
  10. Confirm Stripe Link button is displayed properly.

Before
Screenshot 2024-03-05 at 3 33 19 PM
Screenshot 2024-03-05 at 3 33 27 PM

After
Screenshot 2024-03-05 at 3 35 37 PM
Screenshot 2024-03-05 at 3 35 29 PM


  • Run npm run changelog to add a changelog file, choose patch to leave it empty if the change is not significant. You can add multiple changelog files in one PR by running this command a few times.
  • Covered with tests (or have a good reason not to test in description ☝️)
  • Tested on mobile (or does not apply)

Post merge

@bborman22 bborman22 marked this pull request as ready for review March 5, 2024 21:14
@botwoo
Copy link
Collaborator

botwoo commented Mar 5, 2024

Test the build

Option 1. Jetpack Beta

  • Install and activate Jetpack Beta.
  • Use this build by searching for PR number 8329 or branch name fix/8328-button-styles-on-custom-block-page in your-test.site/wp-admin/admin.php?page=jetpack-beta&plugin=woocommerce-payments

Option 2. Jurassic Ninja - available for logged-in A12s

🚀 Launch a JN site with this branch 🚀

ℹ️ Install this Tampermonkey script to get more options.


Build info:

  • Latest commit: 457518a
  • Build time: 2024-03-05 21:24:59 UTC

Note: the build is updated when a new commit is pushed to this PR.

Copy link
Contributor

github-actions bot commented Mar 5, 2024

Size Change: 0 B

Total Size: 1.26 MB

ℹ️ View Unchanged
Filename Size
release/woocommerce-payments/assets/css/admin.css 1.06 kB
release/woocommerce-payments/assets/css/admin.rtl.css 1.06 kB
release/woocommerce-payments/assets/css/success.css 158 B
release/woocommerce-payments/assets/css/success.rtl.css 158 B
release/woocommerce-payments/dist/blocks-checkout-rtl.css 1.89 kB
release/woocommerce-payments/dist/blocks-checkout.css 1.89 kB
release/woocommerce-payments/dist/blocks-checkout.js 85.6 kB
release/woocommerce-payments/dist/checkout-rtl.css 400 B
release/woocommerce-payments/dist/checkout.css 400 B
release/woocommerce-payments/dist/checkout.js 36.9 kB
release/woocommerce-payments/dist/index-rtl.css 37.3 kB
release/woocommerce-payments/dist/index.css 37.3 kB
release/woocommerce-payments/dist/index.js 291 kB
release/woocommerce-payments/dist/multi-currency-analytics.js 1.05 kB
release/woocommerce-payments/dist/multi-currency-rtl.css 3.25 kB
release/woocommerce-payments/dist/multi-currency-switcher-block.js 59.4 kB
release/woocommerce-payments/dist/multi-currency.css 3.25 kB
release/woocommerce-payments/dist/multi-currency.js 54.4 kB
release/woocommerce-payments/dist/order-rtl.css 707 B
release/woocommerce-payments/dist/order.css 708 B
release/woocommerce-payments/dist/order.js 41.6 kB
release/woocommerce-payments/dist/payment-gateways-rtl.css 1.19 kB
release/woocommerce-payments/dist/payment-gateways.css 1.19 kB
release/woocommerce-payments/dist/payment-gateways.js 38.4 kB
release/woocommerce-payments/dist/payment-request-rtl.css 153 B
release/woocommerce-payments/dist/payment-request.css 153 B
release/woocommerce-payments/dist/payment-request.js 12.4 kB
release/woocommerce-payments/dist/product-details-rtl.css 149 B
release/woocommerce-payments/dist/product-details.css 149 B
release/woocommerce-payments/dist/product-details.js 1.19 kB
release/woocommerce-payments/dist/settings-rtl.css 10.2 kB
release/woocommerce-payments/dist/settings.css 10.2 kB
release/woocommerce-payments/dist/settings.js 230 kB
release/woocommerce-payments/dist/subscription-edit-page.js 669 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal-rtl.css 519 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.css 519 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.js 19.4 kB
release/woocommerce-payments/dist/subscription-product-onboarding-toast.js 710 B
release/woocommerce-payments/dist/subscriptions-empty-state-rtl.css 117 B
release/woocommerce-payments/dist/subscriptions-empty-state.css 117 B
release/woocommerce-payments/dist/subscriptions-empty-state.js 18.5 kB
release/woocommerce-payments/dist/tos-rtl.css 230 B
release/woocommerce-payments/dist/tos.css 231 B
release/woocommerce-payments/dist/tos.js 21 kB
release/woocommerce-payments/dist/woopay-direct-checkout.js 3.54 kB
release/woocommerce-payments/dist/woopay-express-button-rtl.css 153 B
release/woocommerce-payments/dist/woopay-express-button.css 153 B
release/woocommerce-payments/dist/woopay-express-button.js 52.6 kB
release/woocommerce-payments/dist/woopay-rtl.css 4.18 kB
release/woocommerce-payments/dist/woopay.css 4.19 kB
release/woocommerce-payments/dist/woopay.js 71 kB
release/woocommerce-payments/includes/subscriptions/assets/css/plugin-page.css 622 B
release/woocommerce-payments/includes/subscriptions/assets/js/plugin-page.js 812 B
release/woocommerce-payments/vendor/automattic/jetpack-assets/build/i18n-loader.js 2.43 kB
release/woocommerce-payments/vendor/automattic/jetpack-assets/src/js/i18n-loader.js 1.01 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-ajax.js 522 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-callables.js 581 B
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/babel.config.js 160 B
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.css 2.37 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.js 13.5 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.rtl.css 2.37 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/about.css 1.03 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-empty-state.css 291 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-order-statuses.css 403 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin.css 3.6 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/checkout.css 299 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/modal.css 742 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/view-subscription.css 572 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/wcs-upgrade.css 411 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin-pointers.js 544 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin.js 9.4 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.js 6.8 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.min.js 3.83 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-coupon.js 544 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-subscription.js 2.52 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.js 22.1 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.min.js 11.6 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/payment-method-restrictions.js 1.29 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/wcs-meta-boxes-order.js 502 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/payment-methods.js 355 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/single-product.js 429 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/view-subscription.js 1.38 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/wcs-cart.js 781 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/modal.js 1.1 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/wcs-upgrade.js 1.27 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.css 392 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.js 3.05 kB

compressed-size-action

@bborman22 bborman22 requested a review from brettshumaker March 5, 2024 21:23
Copy link
Contributor

@brettshumaker brettshumaker 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 flagging this!

@bborman22 bborman22 enabled auto-merge March 5, 2024 21:26
@bborman22 bborman22 added this pull request to the merge queue Mar 5, 2024
Merged via the queue into develop with commit 0e85f83 Mar 5, 2024
24 of 26 checks passed
@bborman22 bborman22 deleted the fix/8328-button-styles-on-custom-block-page branch March 5, 2024 21:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

WooPay Button styles aren't being applied
3 participants