search

pixelgrade / gridable

The Missing WordPress Grid Content Editor
GNU General Public License v3.0
9 stars 2 forks source link

UI issues/complaints #74

Closed pryley closed 4 years ago

pryley commented 7 years ago

Good UI should be self-explanatory. Gridable UI is not quite there yet.

  1. hovering over a row should outline the entire row like Gutenburg does, this visually shows the user that it is a row/column element and a separate block of content. Without this it can be confusing to a new user as to what it is.

  2. A column resize handle should visually differentiate itself. Having a column-resize cursor is a good first step, however it becomes confusing when you hover over the first column and see the same left-border which doesn't resize. This is especially the case when you hover over the first column and see the left-border, and then hover over the next column and see it also has a left-column. It doesn't immediately register to a user that it is a column resize handle, it just confuses them.

  3. The problem with using a pseudo selector for the column resize handle is that CSS does not allow pseudo selectors to have a hover state. See the screencast below for what a hover state on the resize handle could look like.

  4. Clicking on the row handle makes it disappear. For what reason? Yes, it gives a border around the row, but now that the handle is gone it is not clear how to move the row within the editor content. In contrast, when a Gutenburg row is highlighted, all row controls are visible until the row is deselected.

  5. There should be no external visual distractions (i.e. blinking cursor) when resizing a column.

Here is a screencast that shows what it could like with all the issues above fixed: https://www.dropbox.com/s/3z99tu6c1y1hy3j/screencast%202017-07-10.mp4?dl=0

You can see all these changes at: https://github.com/geminilabs/gridable

I also started adding a column resize handle element, but then I saw that Gridable originally had this but it was removed when merging the refactor-resize branch. I decided that instead of maintaining my own fork, a better solution would be to post a detailed issue.

georgeolaru commented 4 years ago

@pryley Thanks for the suggestions and all the work involved!

We will leave it as it is for now and focus towards the new Gutenberg Editor implementation and to our Nova Blocks plugin.