search

henrikhb / wp-block-description-list

A wordpress gutenberg block plugin for description lists.
17 stars 3 forks source link

Improve UI to make it more clean. #3

Open lassemt opened 5 years ago

lassemt commented 5 years ago

Like mentioned in the issue #2 the UI gets a bit messy with all the inner-blocks.

There is probably not much we can do about the heights of the blocks, but we can try to indent the

more. We also need to find a way that "shows" and make the
and
more clickable.

hacknug commented 5 years ago

Maybe using Wordpress' button classes would improve the add buttons? I usually like it better when things look native.

I removed the SVG's in order to save me 30 seconds of writing some custom CSS for that. Maybe there's some example somewhere in the admin UI that shows how they deal with icon buttons?

captura de pantalla 2018-12-14 a las 18 26 27

EDIT: ACF and Admin Columns simply add a + character inside the button's content. EDIT 2: Also Admin Columns adds icons as pseudo-elements.

captura de pantalla 2018-12-14 a las 18 36 31
lassemt commented 5 years ago

@hacknug Nice idea with the buttons!

I believe I can use the native Button and ButtonGroup for that. I'm logging of for the night now, I'll implement next time I'm working on this.

For better highlighting of the different items (<dt> and <dd>). I think maybe having a slightly grey background color to the items might help a bit. This example is quite hideous because of the spacing, but something similar could maybe work: screen shot 2018-12-14 at 23 04 55

hacknug commented 5 years ago

Should hide both buttons when the block's not focused.

lassemt commented 5 years ago

Take a look now @hacknug 🎁🎅🏼

hacknug commented 5 years ago

Some more UI inspiration, this time via codrops https://github.com/coblocks/coblocks/pull/311