Skip to content

Keep the footer subscribe field readable for logged-in users - #3695

Open
muneeb-ashraf wants to merge 1 commit into
WordPress:trunkfrom
muneeb-ashraf:fix/3525-subscribe-field-logged-in
Open

muneeb-ashraf wants to merge 1 commit into
WordPress:trunkfrom
muneeb-ashraf:fix/3525-subscribe-field-logged-in

Conversation

@muneeb-ashraf

Copy link
Copy Markdown

Fixes #3525.

What

For logged-in users, the Jetpack Subscriptions block in the footer prefills the email field with the account email and disables it. Jetpack's inline block CSS then applies this rule:

.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline form input[type="email"]:disabled {
	color: currentcolor;
	opacity: 0.5;
}

In Learn's dark footer, currentcolor is white, so the field becomes white text on a white box at half opacity. That reads as an empty grey bar with no placeholder and no visible email, which is what the issue describes.

This adds a rule in src/style/_jetpack.scss for the disabled state only. It restores the form text color and full opacity, and uses the light form background (--wp--custom--form--search--color--background) so the field still reads as not editable. The logged-out field is unchanged.

Testing

On https://learn.wordpress.org/ while logged in, I injected the compiled rule through DevTools and checked the computed styles of the footer email field:

Text color Opacity Background
Before rgb(255, 255, 255) 0.5 white at 50% over the dark footer
After rgb(30, 30, 30) 1 rgb(246, 246, 246)

With the rule, the prefilled email is legible next to the Subscribe button. The placeholder rule that shares Jetpack's selector list still applies as before for logged-out visitors.

I ran stylelint on the file with the wporg-repo-tools config. The only error is the existing line 3, whose disable comment still uses the old max-line-length rule name. I didn't touch it here.

I didn't attach screenshots because the logged-in state shows my account email. To check after deploy, log in and look at the "Sign up for updates" field in the footer.

AI assistance
  • AI assistance: Yes
  • Tool: Claude Code
  • Model: Claude Opus 5.5
  • Used for: Investigating the cause and writing the CSS. I reviewed it and checked it on the live site.

🤖 Generated with Claude Code

https://claude.ai/code/session_01W6LxjEQnP4PPgXXvAM3M2F

Jetpack prefills the email field for logged-in users and disables it. Its
disabled styles use currentcolor at half opacity, which renders as an empty
grey box with invisible text in Learn's dark footer. Restore the form text
color and full opacity, with the light background used for read-only fields.

Fixes WordPress#3525.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01W6LxjEQnP4PPgXXvAM3M2F
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Feedback - Email subscription input field has incorrect styling when user is logged in

1 participant