Input field: Additional Class as a textarea

[daveloodts]

I started out with Tailwind; and it's amazing.

But the input field for additional classes in Gutenberg blocks is so small; i hope this input field could be a textarea field to have a better overview of entered classes.

Valid feature request?

[youknowriad]

I think the field is an input because new lines are not allowed in HTML classnames.

[daveloodts]

Probably, but there are PHP solutions for it, i guess.
Since i brought up this issue, i hear a few other people complaint too that the class field is way to small.

[StevenDufresne]

I wonder if tags would make for a better experience, either within a textarea or under the input.

[daveloodts]

@StevenDufresne ; exactly this is even better. Take a look at how Editorskit plugin handles the Class field; it's amazingly good. Even more if we can add class suggestions, which add to the autocompletion.

Last week on a WordPress Meetup, i dropped this idea and someone made this autocomplete field:

I've been toying around adding @tailwindcss support to #Gutenberg after last night's meetup at @wpantwerp. Quite easy to work with, actually! pic.twitter.com/lVarpVv0m4

— Koen Van den Wijngaert (@vdwijngaert) February 18, 2020

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

In this strange are of Gutenberg, where every other Gutenberg plugin makes it's own standard; the class field can play a huge role in getting the right standard way sooner. It will not be a non-tech user feature, but it would make a foundation for it. When custom Gutenberg features spit out classes; which can be viewed over there.

[richtabor]

We chatted about this in today's design meeting (Slack link). We discussed that it'd be an interesting idea to explore, as this would improve readability of individual classes added.

It's worth noting that this is an advanced usage area, that not many folks will use - but those who do use it would like to see what classes they've applied to the block. In its current form it's quite difficult to see the applied classes, as they're in a singular input field.

Let's move forward with mockups to start feeling it out. 💪

[daveloodts]

Fantastic!

[mapk]

Alrighty, a little prettier UI for classnames.

After building this in Figma, I took a look at how tags are presented. It's very similar:

[mapk]

Tags recently took on a similar design.

[paaljoachim]

What needs to be done here to move this issue onward?

[mapk]

@paaljoachim if there's a bit of consensus on the design proposal, we can relabel this with "needs dev" and move it on.

[paaljoachim]

It looks like a good idea to move forward with. I adjusted the labels.

[coreyworrell]

In case this ever gets traction, I've done some testing and I feel that the typical "token" or "tag" style input field is not super easy to use for adding classes. I sometimes like to add classes in a logical order, or to change a suffix (ie: justify-content-between to justify-content-around or something), and having to delete the entire class and type it all again with different suffix was annoying. So the input should allow backspace to "enter into" the token to edit instead of deleting it altogether, and allow to place cursor in-between other tokens to add a new token, or insert cursor inside an existing token to modify.