Try a different design for blocks in inserter

[jasmussen]

This makes the blocks bigger touch targets. It should also let long lines wrap more gracefully.

Screenshot:

[mtias]

I like this version, as it handles i18n better. Also has room for bigger icons if we wanted.

[mtias]

Not so sure about the centered category names:

[afercia]

Was going to say the same thing... I tend to miss the centered group titles. Left aligned, they drive my attention instead. Before and after:

Embeds tab before and after:

[mtias]

Trying sticky headings:

I think it could still be left aligned in this case.

[moorscode]

On the embed tabs

When the same icon is used for different items, but is used as the main identifier it is a lot harder to find what I need. This is true for a couple of video icons at least.

There is a slight preference for the more compact version, because the spacing between the icon and the text is reduced, which makes it much more clear when an element starts and ends.
Making it much more scannable.

I find the different weight of the icons being visually less appealing when comparing the '-' separator to the '[ ]' button examples in the screenshot.

My preference is for the compact version, as the icon and label are of the same order.

[afercia]

@mtias sticky is not supported in IE11 and Edge: http://caniuse.com/#search=sticky

[jasmussen]

I dig the sticky. I also think it's okay that it's not functioning in Edge/IE11, as the fallback, if I remember correctly, is "no change". So it's sort of a progressive enhancement.

[moorscode]

The sticky looks very sexy to me.

It is reducing the available screen-estate, but the added grouping context being visible all the time seems to make up for that.

[mtias]

@moorscode yes, I think we could make the whole thing a bit larger now since each individual block item takes more space.

[hedgefield]

+1 for sticky headers! Nice. Mostly the borders of the headers do a good job separating the categories. Without them it was very chaotic.

[afercia]

I'm sorry but this is what I get with some basic keyboard testing. Just tabbing forwards and backwards through the items. On the left: two titles. On the right: items partially hidden by the title (common issue with fixed elements when tabbing backwards).

I'm not sure this can be solved without hacks that would make the whole thing too fragile. I feel like we're really overcomplicating the inserter without solving the real issue: too many things in a too small space.

[ellatrix]

Personally I find centring the icons and text more chaotic looking, and harder to scan through.

[jdevalk]

Agree with@iseulde. Don’t see why this is an improvement to be honest...

[mtias]

Don’t see why this is an improvement to be honest...

Longer text in other languages breaks badly and doesn't look very nice.

[jasmussen]

@moorscode

When the same icon is used for different items, but is used as the main identifier it is a lot harder to find what I need. This is true for a couple of video icons at least.

See also WordPress/dashicons#203

[jasmussen]

I think we should revisit this branch. I understand the reluctance, but it brings some much needed touch target improvements to mobile. And with the slash command possibly arriving soon (see #2284), it seems sensible to have a larger more expansive look for the top inserter. It would also fix #1497.

[jasmussen]

Closing this in favor of #3080.