Polish design of Button block, and redesign link input

[jasmussen]

Issue Overview

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

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:

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:

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

[rileybrook]

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.

[hedgefield]

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

[afercia]

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.

[karmatosed]

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