This repository has been archived by the owner on Feb 23, 2024. It is now read-only.
Fix the Layout for Shipping and Billing Address Forms in the Checkout Block #11486
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
tarhi-saad
added
type: bug
|
The release ZIP for this PR is accessible via: Script Dependencies ReportThere is no changed script dependency between this branch and trunk. This comment was automatically generated by the TypeScript Errors Report
🎉 🎉 This PR does not introduce new TS errors. |
woocommercebot
requested review from
a team and
wavvves
and removed request for
a team
|
Size Change: -423 B (0%) Total Size: 1.54 MB
ℹ️ View Unchanged
|
|
@tarhi-saad This might exceed the scope of this PR, but I was wondering if we shouldn't consider displaying the address fields in the way locals would fill them out. For example, in Germany we use the following address format (on letters):
That's how we write the address on an envelope in Germany: Looking at https://www.parcelforce.com/help-and-advice/sending/address-formats-europe, this seems to be the standard for European countries. Yet, in the Checkout block, the country is located on the same line with the postal code and the city is located on the next line. To me, that's slightly confusing as that's not how I'd write an address in Europe.
While there might be a reason to provide the country first, I'd still keep cc: @ralucaStan and @pmcpinto |
|
Thank you for the suggestion, @nielslange. Should we aim to implement region-specific address formats (which might require a significant effort), or should we adopt the European format as a default standard? Since this is a product-centric decision, @ralucaStan, could you weigh in on this matter? |
|
The layout of the fields is already handled by the localization service. You can test this both in the Checkout block and shortcode. This is our source of truth. If I look at the shortcode when I enter Hungary this is how it looks. This order and layout should be reflected in the Checkout block. @tarhi-saad did you try to accomplish the same layout as the one in the shortcode? Were there any blockers that prevented achieving it? |
|
Thank you, @ralucaStan, for the insights. I hadn't realized that field layout localization for both the shortcode and Blocks versions of the Checkout is managed by a localization service. I'll investigate how this is implemented and determine why it's not functioning correctly in the Checkout Block. |
tarhi-saad
force-pushed
the
fix/10721-address-form-layout
branch
from
53486c9 to
d9fae2a
Compare
wavvves
approved these changes
Nov 6, 2023
I agree that this should be investigated and fixed, as it can create unnecessary friction in the block-based experience. |
|
I've tested this and it works as expected. @tarhi-saad I appreciate you explaining the changes in the PR description. Do you think we should comment inline as well to make sure the intention is understood just by reading the code? |
nielslange
approved these changes
Nov 9, 2023
There was a problem hiding this comment.
Thanks for working on this, @tarhi-saad. The PR works as expected, and you've solved it very elegant. Kudos for that. 🙌 Let's ⛴️ this improvement.
| .wc-block-components-state-input { | ||
| flex: 0 0 calc(50% - #{$gap-smaller}); | ||
| flex: 1 0 calc(50% - #{$gap-smaller}); // "flex-grow = 1" allows the input to grow to fill the space |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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.
What
In this PR, we want to remove any empty spaces that can appear in the address form of the Checkout Block. For example:
We also want to keep the same layout as the classic checkout (e.g., Japan, Hungary).
Fixes #10721
Why
We set the
flex-growproperty to1, which allows the item to grow if necessary. It means that the item can expand to occupy available space. Because of this property, we lost the gap between the fields, but thanks to thegapproperty, we can create consistent spacing between flex items (in this case, input fields).Testing Instructions
Please consider any edge cases this change may have, and also other areas of the product this may impact.
Hungary. Confirm there are no empty spaces in the form and the layout is the same in the classic checkoutJapan. Confirm the layout is similar to the classic checkoutScreenshots or screencast
WooCommerce Visibility
Required:
Checklist
Required:
[type]label or a[skip-changelog]label.Conditional:
[skip-changelog]label is not present).Changelog