Automattic / Automattic/jetpack

Forms: general styling issues editor vs. published view - differences in styling between editor and published rendering

Open
#28,316 5 comments 0 reactions 0 assignees View on GitHub
[Block] Form [Feature] Forms [Pri] Normal [Status] Auto-allocated Bug Triaged
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

A simple example:

Label styling, input field styling (line-heights) ... are often not the same.

![Image](https://user-images.githubusercontent.com/5120357/207427424-23c001a5-6434-41c8-a147-e2225b0fead4.png)

For certain themes the differences are more drastic, example TwentyTwentyOne theme:

![Image](https://user-images.githubusercontent.com/5120357/212059652-1f778a2e-b1a9-4670-bf44-d0e6e7637cf6.png)

Also discussed in:

https://github.com/Automattic/jetpack/pull/27837#issuecomment-1379442858
https://github.com/Automattic/jetpack/pull/27837#issuecomment-1380097034

Contributor guide

Open the contributing guide

Research direction

No source files or tests are named. Start by reproducing the form in the editor and published view, including the TwentyTwentyOne theme, then review the linked pull request discussion; done means the relevant labels and input styling render consistently across both views and themes.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, php, wordpress
Domain
design, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.