search

Automattic / jetpack

Security, performance, marketing, and design tools — Jetpack is made by WordPress experts to make WP sites safer and faster, and help you grow your traffic.
https://jetpack.com/
Other
1.58k stars 797 forks source link

Form Block: Line Breaks Removed from Live Version #20292

Open NoHopeRadio opened 3 years ago

NoHopeRadio commented 3 years ago

Steps to reproduce the behavior

  1. Create a Form Block on a simple site
  2. Click within any of the title fields (name, email, etc.)
  3. Press enter.
  4. A linebreak will form, but if a field is marked as Required, that item will stay higher in the block.
  5. Preview or publish post, the line breaks are removed.

What I expected to happen

A) I expected the (Required) reminder to show after the content, and it does in the published version, but not in the editor. B) I expected regular line breaks in these sections, and for the content in the editor to match the finished version.

What actually happened

In editor: image On page: image

Context

Found during empathy testing.

Browser / OS version

Chrome Version 91.0.4472.114 (Official Build) (x86_64), macOS 11.4 (20F71)

Is this specific to the applied theme? Which one?

Does this happen on simple or atomic sites or both?

I think both.

Is there any console output or error text?

No.

Level of impact (Does it block purchases? Does it affect more than just one site?)

One could just have a paragraph block in between these sections of the form, but I can imagine a case where someone would want to have an explanation of a form between the title and the input field, like

Email (required) We'll need this to write you back!

and this is not possible to create currently without other customizations.

Reproducibility (Consistent, Intermittent) Leave empty for consistent.

I have tried a few themes across a few sites and it seems consistent.

Robertght commented 3 years ago

Thank you for reporting this @NoHopeRadio !

This is a Jetpack block. I've noticed the content of the form labels is a <label> one and it doesn't seem to output the line breaks in the HTML structure at all. I'm not sure if this is a bug right now as it seems to be the intended behavior but there's definitely room for improvement.

Also asked here for a confidence check: p1625646279062900-slack

jeherve commented 3 years ago

That is indeed an issue with the Form block available in Jetpack.