Twenty Twenty: High input fields are misaligned in Firefox

[aljullu]

Steps to reproduce:

1. Create a post and add a Custom HTML block.
2. Add this code:

   <input type="text" style="height: 120px;" placeholder="Test" />
   

3. Preview it and notice the placeholder appears too high in Firefox.

That's caused by these lines in the theme CSS:

​https://github.com/WordPress/twentytwenty/blob/master/style.css#L769-L779

[aljullu]

Left: Firefox / Right: Chrome

[ianbelanger]

I can confirm this issue, although it only occurs when you add the inline style height: 120px;. Marking as good-first-bug

[subratamal]

Added browsers supporting line-height revert to reset a property to the value established by the user-agent stylesheet

[ianbelanger]

I can confirm that 48876.patch does fix the issue with no unforeseen negative affects. Marking for commit

[ianbelanger]

In 46851:

Bundled Themes: Misaligned input placeholder text Twenty Twenty.

This fixes placeholder misalignment in Firefox when a height is added as an inline style to the input field.

Props aljullu, subratamal.
Fixes #48876.

[ianbelanger]

Reopening for backport to 5.3

[SergeyBiryukov]

In 46854:

Twenty Twenty: Adjust the comment in [46851] per the documentation standards.

See #48876.

[SergeyBiryukov]

In 46855:

Bundled Themes: Misaligned input placeholder text Twenty Twenty.

This fixes placeholder misalignment in Firefox when a height is added as an inline style to the input field.

Props aljullu, subratamal, ianbelanger.
Merges [46851], [46854] to the 5.3 branch.
Fixes #48876.