Row Block not spacing inner blocks properly within editor

[maddisondesigns]

Description

- When you try to remove a Row Block it says "Remove Group". It's completely irrelevant whether you're inserting a Group Block in the actual code. As far as a regular user is concerned the "Row Block" is just another type of block. It's annoying and incredibly confusing when you have options like "Remove Group" on a Block that is called a "Row". You do this on multiple blocks because I've mentioned this problem on multiple issues.

---

- The alignment is all messed up in the editor but displays ok on the front-end
Editor

Front-end

---

- After you've entered a number in the Padding field, you can't remove it. When you delete the text and move away from the field, the same text reappears.

Gutenberg.Row.Block.mp4

Step-by-step reproduction instructions

• Add Row Block
• Add 3 paragraph blocks with dummy text
• Set alignment to "Space between items"
• View the messed up alignment
• Add a number in the Padding field and navigate away from field
• Highlight previously added number in Padding field and press delete/backspace to remove it and clear the field
• See number reappear when you navigate away from field

Screenshots, screen recording, code snippet

No response

Environment info

WP 5.9.1
Twenty Twenty One
Firefox 97.0.1
macOS 12.2.1
No Gutenberg plugin, core only

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[Mamaduka]

Thanks for contributing, @maddisondesigns.

The last issue might not be related to the Group/Row block but a general bug with Dimensions control. I can reproduce the same bug on the Code block.

cc @aaronrobertshaw, @ciampo

[ciampo]

I'm probably not the better-suited person to have a look at this, and I think that Aaron is not going to be around next week. Cc'ing @andrewserong @ramonjd @glendaviesnz

[maddisondesigns]

Another issue to add to the list:

When you turn off Allow to wrap to multiple lines, blocks start overlapping each other.

[andrewserong]

Thanks for the ping @ciampo (and for reporting the usability issues @maddisondesigns!)

• After you've entered a number in the Padding field, you can't remove it. When you delete the text and move away from the field, the same text reappears.

For this one, you can currently commit the change by pressing ENTER before tabbing or clicking out of the field, but I agree, the behaviour here doesn't feel intuitive to me, either. I've opened up a PR (#39109) to look at the behaviour of clearing out an InputControl field that has isPressEnterToChange, which should then resolve the issue with the padding and margin controls 🤞.

[ramonjd]

It's annoying and incredibly confusing when you have options like "Remove Group" on a Block that is called a "Row". You do this on multiple blocks because I've mentioned this problem on multiple issues.

I've taken a stab at displaying the block display title in the remove "Remove x block" label over at #39110

A "block display title" might be a specific block variation title, or a reusable block group name.

[skorasaurus]

Thanks for reporting all of these issues; a couple of have been reportedly been fixed since issue was made, the two issues that you've said are:

• The alignment is all messed up in the editor but displays ok on the front-end

• When you turn off Allow to wrap to multiple lines, blocks start overlapping each other.

I'm not able to reproduce either of these in WordPress 6.0 and Gutenberg 13.5 activated; it appears like the following which isn't aesthetically pleasing but the image is resized smaller to prevent overlap.

Could you share if you're still experiencing this currently and give more detail about the alignment issue?

The block markup that I'm using is https://gist.github.com/skorasaurus/bd4f2caa9b18ffad7d232db183ccc2b2

[maddisondesigns]

@skorasaurus I've just checked these issues...

• The alignment issue is still there (see the second green row in screenshot below)
• You can now remove the padding and tab (or click) away from the field and it stays removed 👍
• The "remove" label has been changed to "Remove Row" instead of "Remove Group" 👍
• The overlapping blocks issue appears to be fixed now as well 👍

I tested this with WP6.0 and Gutenberg 13.5.1

[skorasaurus]

Thanks for the update: Took me a second to figure out that you applied wide width to the block; I'm able to reproduce this as well;
the issue being that in the editor; the row block does not properly space out inner blocks under certain conditions, which I specify below. The inner blocks are spaced out properly on the front-end.

So, to reproduce:

1. install a theme.json-less theme like twentytwentyone
2. create row block, apply wide or full width to it; and set justification to equal spacing
3. create 3 blocks (paragraph or headers) inside row block

@maddisondesigns if you could update the issue's title so others could find it easier, that'd be great.

(EDIT: Corrected my notes as mentioned by @maddisondesigns )

[maddisondesigns]

@skorasaurus I think you have that around the wrong way. The issue is that the row block doesn't properly space out inner blocks in the Editor (this does happen on the front-end). i.e. it displays properly on the front-end but not in the editor.

I've also updated this issues title for better clarity.

[Mamaduka]

It looks like this lists a couple of issues, and I believe most were fixed.

@maddisondesigns, can you update the issue description and only leave the remaining one(s)?

[maddisondesigns]

@Mamaduka I think this one can probably be closed now. All the issues that I mentioned seemed to have been fixed, or at the very least, Gutenberg has changed enough so that they no longer apply.

[Mamaduka]

Thanks for the update, @maddisondesigns!