Update checkout textarea to use global text colour for placeholder by opr · Pull Request #63539 · woocommerce/woocommerce

opr · 2026-03-04T18:00:06Z

Changes proposed in this Pull Request:

Checkout textarea placeholder text does not inherit the global text color from WordPress theme styles. Regular input placeholders were updated in PR #46362 to pull in global styles, but textarea placeholders were missed.

The textarea component hardcoded its color to $input-text-light, preventing ::placeholder from inheriting the theme's text color. This fix changes the textarea to use color: inherit so the placeholder picks up the global color, then resets typed text back to $input-text-light via :not(:placeholder-shown).

Closes WOOPRD-1577

Screenshots or screen recordings:

Before	After

How to test the changes in this Pull Request:

Using a block theme, apply a style variation with a non-default text color
Edit the checkout page and ensure the checkout block does not have "Dark mode inputs" enabled.
Go to the Checkout block on the front end and check "Add a note to your order" to reveal the textarea.
Verify the "placeholder" text inherits the theme's text color
Type some text into the textarea and verify the typed text uses the standard dark input color (#2b2d2f), matching other input fields.
Enable "Dark mode inputs" on the checkout block and confirm the textarea still works correctly with white text and placeholder.

Testing that has already taken place:

Milestone

Automatically assign milestone for the next WooCommerce version

Note: Check the box above to have the milestone automatically assigned when merged.
Alternatively (e.g. for point releases), manually assign the appropriate milestone.

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

github-actions · 2026-03-04T18:03:23Z

Testing Guidelines

Hi @mikejolley ,

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.

coderabbitai · 2026-03-04T18:03:57Z

📝 Walkthrough

Walkthrough

Patch update: textarea styles for checkout changed so placeholders inherit global text color on light themes (using currentColor); typed text and focus visuals adjusted via :not(:placeholder-shown) and explicit input-text tokens.

Changes

Cohort / File(s)	Summary
Changelog Entry `plugins/woocommerce/changelog/wooprd-1577-checkout-textarea-fields-do-not-inherit-global-text-color`	Adds patch changelog noting textarea placeholder color inheritance fix for checkout on light themes.
Textarea Styling `plugins/woocommerce/client/blocks/packages/components/textarea/style.scss`	Reworks placeholder and text color strategy: placeholder uses `currentColor` to inherit parent color; base text set to `inherit` with `&:not(:placeholder-shown)` applying `$input-text-light` for typed content; focus state and borders use explicit `$input-text-light`/box-shadow rules; dark-controls placeholder uses `currentColor` and dark text tokens retained.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: updating checkout textarea to use global text color for placeholder, which aligns with the primary purpose of the changeset.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description check	✅ Passed	The PR description clearly explains the issue (textarea placeholder not inheriting global text color), the root cause (hardcoded color), and the solution (using color: inherit with :not(:placeholder-shown)). It includes testing steps and screenshots demonstrating the before/after behavior.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings (stacked PR)
📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch wooprd-1577-checkout-textarea-fields-do-not-inherit-global-text-color

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

github-actions · 2026-03-04T18:04:47Z

Size Change: +83 B (0%)

Total Size: 5.98 MB

_{compressed-size-action}

github-actions · 2026-03-04T18:09:02Z

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.

mikejolley

Its a bit confusing how sometimes placeholders/labels use theme color, and sometimes not light vs dark but thats not within the scope of this PR. For this one, yes, I confirmed the placeholder matches other inputs so LGTM 👍🏻

opr · 2026-03-06T12:38:54Z

Its a bit confusing how sometimes placeholders/labels use theme color, and sometimes not light vs dark but thats not within the scope of this PR. For this one, yes, I confirmed the placeholder matches other inputs so LGTM 👍🏻

Yes I believe the long-term plan is to normalise all these forms so they can be controlled directly by global styles, for now trying to fix the discrepancy is not recommended as we don't know what impact this will have on existing stores.

Thanks Mike.

…63539) * Make textareas show placeholder text the same as regular inputs * Add changelog * Remove opacity and show placeholder at full opacity * Update CSS to preserve placeholder colour on focus

opr added 3 commits March 4, 2026 17:15

Make textareas show placeholder text the same as regular inputs

30dac1e

Add changelog

37d3afb

Remove opacity and show placeholder at full opacity

aff942e

opr self-assigned this Mar 4, 2026

opr added Checkout Issues related to checkout page. Rubik Store API checkout endpoints, Mini-Cart, Cart and Checkout related issues labels Mar 4, 2026

github-actions Bot added the plugin: woocommerce Issues related to the WooCommerce Core plugin. label Mar 4, 2026

woocommercebot requested review from a team and mikejolley and removed request for a team March 4, 2026 18:02

opr changed the title ~~Wooprd 1577 checkout textarea fields do not inherit global text color~~ Update checkout textarea to use global text colour for placeholder Mar 4, 2026

Update CSS to preserve placeholder colour on focus

32c45a9

mikejolley approved these changes Mar 6, 2026

View reviewed changes

opr merged commit 2362406 into trunk Mar 6, 2026
46 of 48 checks passed

opr deleted the wooprd-1577-checkout-textarea-fields-do-not-inherit-global-text-color branch March 6, 2026 12:39

github-actions Bot added this to the 10.7.0 milestone Mar 6, 2026

github-actions Bot added the needs: documentation The issue/PR requires documentation to be added. label Mar 6, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update checkout textarea to use global text colour for placeholder#63539

Update checkout textarea to use global text colour for placeholder#63539
opr merged 4 commits intotrunkfrom
wooprd-1577-checkout-textarea-fields-do-not-inherit-global-text-color

opr commented Mar 4, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Mar 4, 2026

Uh oh!

coderabbitai Bot commented Mar 4, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Uh oh!

github-actions Bot commented Mar 4, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Mar 4, 2026 •

edited

Loading

Uh oh!

mikejolley left a comment

Uh oh!

opr commented Mar 6, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

opr commented Mar 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes proposed in this Pull Request:

Screenshots or screen recordings:

How to test the changes in this Pull Request:

Testing that has already taken place:

Milestone

Changelog entry

Significance

Type

Message

Comment

Uh oh!

github-actions Bot commented Mar 4, 2026

Testing Guidelines

Uh oh!

coderabbitai Bot commented Mar 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Uh oh!

github-actions Bot commented Mar 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Mar 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Test using WordPress Playground

Uh oh!

mikejolley left a comment

Choose a reason for hiding this comment

Uh oh!

opr commented Mar 6, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

opr commented Mar 4, 2026 •

edited

Loading

coderabbitai Bot commented Mar 4, 2026 •

edited

Loading

github-actions Bot commented Mar 4, 2026 •

edited

Loading

github-actions Bot commented Mar 4, 2026 •

edited

Loading