Gutenberg: Improve display of shortcode block in columns

[billerickson]

Describe the bug
The shortcode block label is floated to the left of the textarea. While this works well in larger contexts, inside the columns block this shrinks the texarea down to one character per line:

To Reproduce
Steps to reproduce the behavior:

1. Add the Columns block and set it to 3 columns
2. Add the Shortcode block to each column.

Expected behavior
The textarea should be larger and more usable. Float the label above the textarea and make them both full width.

Screenshots

[arunsathiya]

Can reproduce this as well on Gutenberg 4.1.1 with WordPress 4.9.8 on Google Chrome Version 70.0.3538.67 (Official Build) (64-bit). macOS 10.14 - Mac OS Mojave.

3 shortcode blocks inside the columns block

^{Image indicating how the shortcode block content region is small when the shortcode label is on the left}

On adding more text

^{Another image indicating how the shortcode block content region is small when the shortcode label is on the left}

Suggested format

I am going to take a stab at submitting a PR for this to bring it in the format shown below.

^{Image indicating the shortcode label at the top of the content, as opposed to being on the left}

[billerickson]

Can the fix be as simple as changing display: flex to display: block when in a column?

.wp-block-columns .wp-block-shortcode { display: block; }

[bobbingwide]

A temporary fix when you're editing a shortcode is to edit the CSS to
.wp-block-shortcode label { display: none; }

and/or do as Bill suggested and disable the padding as well.

For the front-end view see https://wordpress-seo.wp-a2z.org/

[bobbingwide]

With Gutenberg 5.5.0 I now get

This is due to a new problem. #15032

[ThornedRose]

I'm on Wordpress 5.2, and I still have the OP's behaviour with shortcodes (7 months after it was posted!).

Adding .wp-block-shortcode label { display: none; } or .wp-block-columns .wp-block-shortcode { display: block; } mostly works but as the shortcodes themselves are quite long, it still looks bizzare. Nor is this a solution to pass onto the non-profit clients I am doing this website for :(

[talldan]

This does look a bit better now:

The text area is wider and is properly multiline now. But I still feel there's room for improvement, i.e. making the text area take up the full-width. It seems unusual that there's an empty space down the right hand side.

Not sure this can be labelled a bug given the original issue has been improved considerably, so I'll stick with the existing Enhancement label and also label that it needs design feedback on the above suggestion.

[mapk]

I agree with @talldan here. The alignment issues have been resolved, but it would be good to set the textarea width to 100%.

Currently

Width at 100%