Fix Link button alignment in the Checkout block #7994
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
mdmoore
requested review from
a team and
frosso
and removed request for
a team
Test the buildOption 1. Jetpack Beta
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:
Note: the build is updated when a new commit is pushed to this PR. |
|
Size Change: -222 B (0%) Total Size: 1.27 MB
ℹ️ View Unchanged
|
frosso
approved these changes
Jan 9, 2024
client/checkout/utils/upe.js
Outdated
Comment on lines
325
to
332
| stripeLinkButton.style.display = 'none'; | ||
| if ( emailInput.value !== '' ) { | ||
| const linkButtonTop = | ||
| emailInput.offsetTop + ( emailInput.offsetHeight - 40 ) / 2; | ||
| stripeLinkButton.style.display = 'inline-block'; | ||
| stripeLinkButton.style.top = `${ linkButtonTop }px`; | ||
| } | ||
|
|
There was a problem hiding this comment.
This seems to be working well! Have you considered using plain CSS for the positioning, instead of relying on JS?
I applied this CSS to the button.wcpay-stripelink-modal-trigger selector in client/checkout/blocks/style.scss, and it seems to be providing the same effect:
top: 50%;
transform: translateY(-50%);I thought of using plain CSS so that there would be less JS for the browser to execute 🤷
There was a problem hiding this comment.
Yeah, this is much better. Thank you for pointing it out! I had to add some specificity because the blocks checkout stylesheet is loaded on shortcode checkout which causes problems with the link button there.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #7929
Changes proposed in this Pull Request
This ensures that the Stripe Link button is correctly aligned to the middle of the email input when viewing the Checkout block.
Before
After
Testing instructions
npm run changelogto add a changelog file, choosepatchto 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.Post merge