Gutenberg: Polish design of Button block, and redesign link input

Created on 1 Nov 2017  路  4Comments  路  Source: WordPress/gutenberg

Issue Overview

The Button block could use a bit of love given recent Gutenberg changes. Here's what it looks like now:

screen shot 2017-11-01 at 08 46 35

The Blue is a Gutenberg blue, not one from the theme. The link toolbar covers content, both the block itself and succeeding content. Given how cool this block can be, let's look at some polish.

Mockups

Unselected:

button

It shows a "Button" label. It also uses the same font and font-size as body text, making the appearance simpler. It defaults to currentColor as the background, with white text on top of it, which further reduces the visual footprint. Remember, you can still change colors in the inspector.

Selected

If we lean into the principles we laid out in the design doc, we can show controls on a selected block _after_ the block itself. Just like how the caption field makes the Image block take up more vertical space when selected, so, perhaps, can we do with the button block:

button selected

In this design, a minimal link input field sits below the button, ready to be pasted into. It's no longer a toolbar (even if it is the same component), so it doesn't cover anything.

Thoughts?

CC: @karmatosed

Needs Design Feedback [Feature] Blocks

All 4 comments

we can show controls on a selected block after the block itself.

In this design, a minimal link input field sits below the button, ready to be pasted into. It's no longer a toolbar (even if it is the same component), so it doesn't cover anything.

This makes the link experience feel __very__ intuitive. This idea looks really thoughtful, and feels like a step in the right direction.

Really great. I was just thinking of this concept for the permalink, glad to see you had the same approach here. 馃憣

a minimal link input field sits below the button

Just a quick reminder: any input field or editable element needs to be properly labeled (at least with an aria-label attribute). Placeholders are not replacements for labels.

I really like this. Can we roll it out on the cover image block when the button is added too?

Was this page helpful?
0 / 5 - 0 ratings