[Table Block] Improve existing table icons

[javierarce]

While working on improving the Table Block I noticed that the icons we use to insert and remove rows and columns were obsolete (for example, they don't use the current border-radius… and even more, they don't appear in the WordPress Design Library).

I also thought that we could improve the icons so users can read them faster. Compare, for instance, the insert column/row before/after icons in the image below. In my version, the weight of the elements indicates direction (before or after), while the current icons use the + symbol.

Besides this work, I also created new icons for (hopefully) some upcoming cell operations, like split & merge.

Here's my last iteration of these icons:

And here's a comparison between the new and the current version of the icons:

Finally, although this is out of the scope for this issue, here's how those icons could be integrated into the Table Block toolbar using three categories: insert, delete, and cell operations:

Finally, I also discovered that we are currently using the table-edit icon in the toolbar when a nicer and more "on brand" version: the block-table.

Figma page with the icons

[paaljoachim]

Awesome job, @javierarce !

In general this is a nice refresh! Symbols are nice and clear!

I do want to point the logic of the Comparison between versions overview.

Example before: Insert row before we see a + sign and the row that follows after the + sign.

This tells me that clicking the + sign I will get a row before the existing row.

Example After:

Insert row before we see a row and a + sign after the row.

This tells me that clicking the + sign I will get a row after the existing row. (Because I see a row and I see a + symbol after the row.)

In general looking at the Comparison between versions overview the insert row and column icons have one logic in the before and the opposite logic in the after. In general the + sign signals a new block/row/column/etc will be added where the + sign is seen (Similar to the in page + inserter icon works today). I believe it would be helpful to adjust the logic in the After icons: Insert row before, Insert row after, Insert column before and Insert column after to use the Before logic.

[javierarce]

Thanks for the analysis, @paaljoachim!

That change of direction with the plus symbol was precisely one of the things I wanted to share and open for debate. As I pointed out in my first comment regarding my new icons, the weight of the elements is responsible for indicating where the action will happen. In my opinion, that allows reading those icons faster.

That said, I totally understand the current logic (the plus symbol marks where the action will take place). My problem is that I can see both options as correct 😅

[buzztone]

The change of direction with the plus symbol works as intended for me. I found the previous icons not at all helpful. I had no idea what they actually meant until I read the accompanying text. The new icons by contrast quickly gelled with me. I knew what each one meant.

I suspect people will have differing initial interpretations on the position of plus symbol. However with some use, all icons will become logical & familiar for most users.

[pablohoneyhoney]

Looking really good. Nice to see this new language expanding in such tangled cases. Kudos Javier!

The logic felt a bit uncanny at first, but could be tried if everyone understands it well. I also wonder if without the plus could be understood. Having both could add to the confusion of order or direction?

I know we are in tight spaces, bu there are some moments of friction or tension that could be alleviated with a bit more separation, even if the icon grows a bit in footprint. It's especially obvious in:

Another tiny detail, the plus (8 height) and the cross (5.6 height) are different in scale, is that intentional?

[javierarce]

Looking really good. Nice to see this new language expanding in such tangled cases. Kudos Javier!

Thanks!

Another tiny detail, the plus (8 height) and the cross (5.6 height) are different in scale, is that intentional?

It was an oversight 😅… I'll fix it and I'll also see if they work with more separation.