Apply consistent font sizes and spacing in checkout (shipping and billing blocks) #59754

straku · 2025-07-17T20:06:06Z

Submission Review Guidelines:

I have followed the WooCommerce Contributing Guidelines and the WordPress Coding Standards.
I have checked to ensure there aren't other open Pull Requests for the same update/change.
I have reviewed my code for security best practices.
Following the above guidelines will result in quick merges and clear and detailed feedback when appropriate.

Changes proposed in this Pull Request

Continuation of work tracked in #59787 ("long" lived branch synced with trunk)
Intro post: pfHfG4-1iC-p2
Designs: fpl1YUEIW7suBFO09qymA2-fi-1212_50897

Covers shipping and billing blocks; they include a bunch of components used throughout checkout:

TextInput (powers all of our form fields)
Checkbox
Select (powers country selector)

Screenshots or screen recordings

Used the Twenty Twenty Four theme for the screenshots. Notice that in all cases the "After" screenshot has a lower height.

Address card

Before	After

Shipping/billing section

Before	After

All expanded

Before	After

Mobile

Font size is increased on mobile to 16px to accommodate for mobile Safari auto-zooming on inputs with font size smaller than 16px.

Before	After

How to test the changes in this Pull Request:

Add some products to your cart
Go to checkout
Verify whether it matches the expectation described in this PR (you can cross-check with Figma too), try covering all possible states for these blocks:
- test with address card (provide address and then refresh the page to see card instead of full form)
- test with different shipping/billing address (to have two forms and cards)
- test with additional address field (apartment, etc.)
Verify that the animation for the label input (when you focus on the input it transitions above the editable area) works correctly (it's positioned absolutely, so changes to sizing require new positioning)
If you can, test on the mobile Safari browser (real device or emulator), we're looking for verification that you don't observe browser zooming on inputs when you focus them

Note

If you want to quikcly spot which components were adjusted within this PR, you can go to global styles of the site and vastly increase the general size of the text in typography settings (Global Styles -> Typography -> Text -> Size -> XXL). Texts that will stay small after the change will be the one modified here, the rest is coming in follow-up PRs.

Testing that has already taken place:

The above.

Changelog entry

Automatically create a changelog entry from the details below.

This Pull Request does not require a changelog entry. (Comment required below)

Changelog Entry Details

Significance

Patch
Minor
Major

Type

Fix - Fixes an existing bug
Add - Adds functionality
Update - Update existing functionality
Dev - Development related task
Tweak - A minor adjustment to the codebase
Performance - Address performance issues
Enhancement - Improvement to existing functionality

Message

Changelog Entry Comment

Comment

Targeting a different branch than trunk. The final PR will include changelog.

straku · 2025-07-17T20:06:41Z

plugins/woocommerce/client/blocks/packages/components/checkbox-control/index.tsx

@@ -85,7 +85,6 @@ export const CheckboxControl = forwardRef<
 					<svg
 						className="wc-block-components-checkbox__mark"
 						aria-hidden="true"
-						xmlns="http://www.w3.org/2000/svg"


Noticed it while doing style changes to the component. For inline SVGs in React this attribute is not needed.

straku · 2025-07-17T20:08:27Z

plugins/woocommerce/client/blocks/packages/components/text-input/style.scss

-	&:only-child {
-		margin-top: 1.5em;
-	}


Went through all usages of the component; it is being displayed on its own only in a few places, and in all of them some additional styles are applied modifying the base margin.

It is also a safer default; the parent should be controlling the space around this component, not the component itself.

straku · 2025-07-23T11:47:17Z

plugins/woocommerce/client/blocks/assets/js/base/components/select/style.scss

+		top: 1px + $gap-smaller;
+		left: 1px + $gap-small;
+
+		color: $universal-body-low-emphasis;


Aligned color with what we use for text input component

straku · 2025-07-23T11:47:52Z

plugins/woocommerce/client/blocks/assets/js/blocks/checkout/address-card/index.tsx

Did a tiny refactoring of the component

straku · 2025-07-23T11:49:38Z

plugins/woocommerce/client/blocks/packages/components/text-input/style.scss

@@ -79,20 +71,59 @@
 		}
 	}

+	input[type="number"] {
+		appearance: textfield;


Apart from moving a bit lower in the file I've added appearance here. Commenting as it might be hard to spot in the diff.

straku · 2025-07-23T11:51:08Z

plugins/woocommerce/client/blocks/assets/js/blocks/attribute-filter/style.scss

Scoped these styles properly; they were messing up checkboxes globally. A different question is why they were loaded on checkout, but I don't have the answer yet.

github-actions · 2025-07-23T11:52:16Z

Testing Guidelines

Hi @ralucaStan ,

Apart from reviewing the code changes, please make sure to review the testing instructions (Guide) and verify that relevant tests (E2E, Unit, Integration, etc.) have been added or updated as needed.

Reminder: PR reviewers are required to document testing performed. This includes:

🖼️ Screenshots or screen recordings.
📝 List of functionality tested / steps followed.
🌐 Site details (environment attributes such as hosting type, plugins, theme, store size, store age, and relevant settings).
🔍 Any analysis performed, such as assessing potential impacts on environment attributes and other plugins, conducting performance profiling, or using LLM/AI-based analysis.

⚠️ Within the testing details you provide, please ensure that no sensitive information (such as API keys, passwords, user data, etc.) is included in this public issue.

github-actions · 2025-07-23T11:55:48Z

Size Change: -61 B (0%)

Total Size: 5.91 MB

_{compressed-size-action}

github-actions · 2025-07-23T11:58:58Z

Test using WordPress Playground

The changes in this pull request can be previewed and tested using a WordPress Playground instance.
WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Test this pull request with WordPress Playground.

Note that this URL is valid for 30 days from when this comment was last updated. You can update it by closing/reopening the PR or pushing a new commit.

ralucaStan

I've tested this following the testing steps; Also tested on mobile Safari.

I found some visual bugs so I am requesting some changes. Outside of what I commented, I didn't find anything else.

...mmerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/style.scss

ralucaStan · 2025-07-23T13:37:22Z

plugins/woocommerce/client/blocks/packages/components/text-input/style.scss

@@ -1,25 +1,28 @@
 .wc-block-components-form .wc-block-components-text-input,
 .wc-block-components-text-input {
 	position: relative;
-	margin-top: $gap;


Not sure where this is coming from, but the Text inputs now have a content jump when I focus them.

Screen.Recording.2025-07-23.at.15.36.32.mov

It's because I removed explicit height for both text-input and select components. Without it height is increased by 1px in the focused state because of the decision to use different border width there. There are more clever solutions for this, but I don't think this is the best PR to explore them.

I've brought back the height, this time with a pretty lengthy comment explaining why it's needed.

ralucaStan · 2025-07-23T13:39:55Z

plugins/woocommerce/client/blocks/packages/components/checkbox-control/style.scss

 		pointer-events: none;

 		.has-dark-controls & {
 			fill: $input-text-dark;
 		}
 	}
-
-	> span,


do you remember why this was needed?

Previously the height of the checkbox itself was not aligned with the height of the label, so there was a need for vertical alignment. Now, both the checkbox and the label have a height of 20px, so we don't need to do anything to get perfect vertical alignment.

ralucaStan

I can no longer replicate the bugs I mentioned.

Things work as expected.
I only wanted to mention this behaviour that is also on trunk: on input fields with value, when focusing, the content moves a bit horizontally.
If you'd have a quick fix for that it would be great to fix it as well in a followup PR.

I'm approving

straku · 2025-07-25T13:50:24Z

on input fields with value, when focusing, the content moves a bit horizontally

I tried tracking this down, unsuccessfully yet. I will create a ticket in Linear within the project to take another look. Thanks for your attention to detail.

github-actions bot added the plugin: woocommerce Issues related to the WooCommerce Core plugin. label Jul 17, 2025

straku commented Jul 17, 2025

View reviewed changes

Base automatically changed from wooplug-4908-apply-consistent-font-sizes-and-spacing-in-checkout to straku/optimized-checkout-typography-and-spacing July 18, 2025 14:53

straku force-pushed the straku/optimized-checkout-typography-and-spacing branch from ed937f2 to 109fba0 Compare July 18, 2025 14:56

straku force-pushed the wooplug-5059-apply-consistent-font-sizes-and-spacing-in-checkout-shipping branch from b9b2d69 to 012b561 Compare July 23, 2025 09:30

straku commented Jul 23, 2025

View reviewed changes

straku marked this pull request as ready for review July 23, 2025 11:51

straku requested a review from a team as a code owner July 23, 2025 11:51

straku requested review from ralucaStan and removed request for a team July 23, 2025 11:51

woocommercebot requested a review from a team July 23, 2025 11:51

This comment was marked as resolved.

Sign in to view

ralucaStan requested changes Jul 23, 2025

View reviewed changes

straku requested a review from ralucaStan July 24, 2025 21:46

straku force-pushed the straku/optimized-checkout-typography-and-spacing branch from a2d03c9 to 62d3f4b Compare July 25, 2025 09:41

straku added 8 commits July 25, 2025 11:42

Remove unnecessary xmlnx attribute

80dc427

Change checkbox styles

51a2bfb

TextInput 😌

aeafa0b

Update snapshots

0485f52

Country select

6ce99bd

Don't use global styles in attribute filter block

1201c2e

Smaller horizontal gap between form elements

a76f8c2

Reset line-height for checkbox

b532250

straku added 9 commits July 25, 2025 11:42

Comment that actually makes sense

e8191e9

Modify address card

4689792

Move phone to the same line as address in address block

42f7c9f

Apply 16px font-size in text input for mobile

126c489

Reset line-height for select container element

dc27ad0

Be consistent with comments

78af9f4

Fix misaligned select component

38fc9f6

Bring back explicit height for text-input and select components

da70f55

Remove duplicated height declaration

7ce46ee

straku force-pushed the wooplug-5059-apply-consistent-font-sizes-and-spacing-in-checkout-shipping branch from 579b69e to 7ce46ee Compare July 25, 2025 09:42

ralucaStan approved these changes Jul 25, 2025

View reviewed changes

straku merged commit 0343ce3 into straku/optimized-checkout-typography-and-spacing Jul 25, 2025
33 checks passed

straku deleted the wooplug-5059-apply-consistent-font-sizes-and-spacing-in-checkout-shipping branch July 25, 2025 13:50

Apply consistent font sizes and spacing in checkout (shipping and billing blocks) #59754

Apply consistent font sizes and spacing in checkout (shipping and billing blocks) #59754

Uh oh!

Conversation

straku commented Jul 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Submission Review Guidelines:

Changes proposed in this Pull Request

Screenshots or screen recordings

Address card

Shipping/billing section

All expanded

Mobile

How to test the changes in this Pull Request:

Testing that has already taken place:

Changelog entry

Significance

Type

Message

Comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Jul 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Testing Guidelines

Uh oh!

github-actions bot commented Jul 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Jul 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Test using WordPress Playground

Uh oh!

This comment was marked as resolved.

ralucaStan left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ralucaStan left a comment

Choose a reason for hiding this comment

Uh oh!

straku commented Jul 25, 2025

Uh oh!

Uh oh!

Uh oh!

straku commented Jul 17, 2025 •

edited

Loading

github-actions bot commented Jul 23, 2025 •

edited

Loading

github-actions bot commented Jul 23, 2025 •

edited

Loading

github-actions bot commented Jul 23, 2025 •

edited

Loading