Gutenberg: Button Block: Newly added block is too narrow

[aduth]

__Steps to Reproduce:__

1. Navigate to Gutenberg -> New Post
2. Insert a Button block

__Expected result:__

A button block is appended and shown with placeholder text visible.

__Actual result:__

The button block is appended, but only with enough space for the padding. The placeholder is cropped.

__Solution ideas:__

• Ideally the button width would be enough to fit the placeholder text, regardless of what the text contains (i.e. not a fixed value width)
• Alternatively, a minimum fixed value width on the button could be sufficient

[paaljoachim]

I just looked at the CSS and added a width of 150px to it.

.blocks-button {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    display: inline-block;
    text-decoration: none;
    font-size: 18px;
    margin: 0;
    padding: 0 24px;
    height: 46px;
    line-height: 46px;
    cursor: default;
    border-radius: 23px;
    white-space: nowrap;
    background: #33B3DB;
    color: #fff;
    vertical-align: top;
    position: relative;
    width: 150px;
}

The result with the added 150px now look like this:

There should of course be button options on the right side but that is another matter, and there should not be so many overlapping toolbars.

[abaicus]

Maybe giving it a min-width as long as the button still has the placeholder?

[jasmussen]

I agree we should have a min width, somehow, but I believe the reason we didn't add this was that we were hoping that the placeholder text itself could define the size of the button. This would also help with translations requiring different min widths. Cc @iseulde, I think you may have some context.

[georgeolaru]

That could be easily improved if the position: absolute is removed from the .blocks-editable__tinymce[data-is-empty="true"]:before CSS rule:

[jasmussen]

Nice @georgeolaru! @iseulde can you tell if removing the abs positioning would have any negative side effects on the placeholder text?

[abaicus]

@jasmussen I think that the only downside to this would be that when you focus the input, the marker would be blipping at the end of the placeholder. It empties itself only when you start typing. Otherwise I think it's ok.

[ellatrix]

Fixed in #1477.