Improve BNPL PMME and icon placement in shortcode checkout #9993
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
gpressutto5
force-pushed
the
improve-pmme-placement-shortcode
branch
from
7f7225a to
18ce08a
Compare
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: +1.02 kB (0%) Total Size: 1.39 MB
ℹ️ View Unchanged
|
gpressutto5
requested review from
a team and
frosso
and removed request for
a team
gpressutto5
changed the title
frosso
approved these changes
Dec 19, 2024
There was a problem hiding this comment.
Very nice! I like the solution you have on the spacer 💯 very clever!
Although this is essentially reworking the label rendering with more JS, which is what @brettshumaker is spiking on in this ticket 😬 #9819
I don't know if this is going to be digging us in a trench or if the escape hatch is ez enough.
Despite the possible overlap (and performance implications), this seems to be working as expected 💯
Comment on lines
+193
to
+194
|
|
||
| let spacer = targetLabel.querySelector( 'span.spacer' ); |
There was a problem hiding this comment.
I think it would be helpful for our future selves to add a comment here to indicate that the spacer has been added because WC Core adds the , and the spacer is useful to ensure all labels are vertically aligned properly
|
@gpressutto5 ope, sorry - this is Twenty Twenty Three: Without these changes this is how it looked without these changes - it just seems less "broken" (the labels aren't pushed up): Is there any chance we can improve on this? I'm just concerned that there might be other themes behaving differently |
frosso
approved these changes
Dec 20, 2024
| // Unfortunately, there is no direct way to detect the existence of pseudo-elements like ::before using CSS selectors, | ||
| // so we use the theme class to add the necessary styles. | ||
| .theme-storefront, | ||
| .theme-twentytwentythree { |
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 #9817
Changes proposed in this Pull Request
This PR enhances the alignment of the PMME, the logos, and the radio button in the shortcode checkout. It wraps the inner html of the label in a woopayments-inner-label so we can have the same behavior we had with the rich labels that were removed in #9800.
Storefront behaves different than most themes so we also added CSS specific for it.
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