Additional CSS class(es): Text input field shall get multiline textarea.

porg commented 1 year ago

Reproduction

Select a block
Inspector Panel → Block → Additional CSS class(es)
Currently this is a <input type=text>, the width allowing to show ca. 30-35 characters

Is ok for 1-2 short classnames
Usability problem: As soon as you have 1 long class name, or 2-3+ average long class names, they won't fit, and you will need to scroll quite uncomfortably to read/correct/append your classnames.
- With your arrow keys or the keys to jump to line start/end.
- On touch devices even less comfortably move the cursor with long press, then move left/right.

Transform this into a textarea
- By default 1 line high
- As soon as the text doesn't fit any more, auto-expand to e.g. 2.5 lines height
- It then is a multi line text area with soft text wrapping
- Manual drag handle to set custom height.
Nothing new must be implemented, WordPress Core already offers the needed functionality
- e.g. in the Alternative Text in the Media Modal
- Linebreak sanitation inclusive!
- You can insert manual linebreaks (to mentally structure it if you want) or by coincidence possibly
- But this lives only in your session
- To the database this gets persisted as a single string without line breaks so this can be piped into class="string here" without any issues.

AKSHAT2802 commented 2 weeks ago

Hey @porg Thanks for the enhancement suggestion. Implemented it in the PR Link

porg commented 2 weeks ago

Thank you for implementing! Hope the PR and its review goes fine!