Saving a spacer block without a height value causes a block validation error

[carolinan]

Description

If you delete the value of the height option and save, and then refresh the page (or leave and return to edit the content later), there is a block validation error.

I only tested this with block themes that have a theme.json. I tested with the default spacing presets and with custom presets.

When there is a custom spacing preset that uses clamp, like in Twenty Twenty-Five, there is one more issue.
If you select a spacing preset, then toggle the "use size preset" button so that the size input and unit input options show again, and then change the unit but not the size, then the size is also missing and the same block validation error shows.

Step-by-step reproduction instructions

Insert a spacer block.
Delete the value of the height option and save, and then refresh the page.

Screenshots, screen recording, code snippet

Environment info

WordPress 6.7.1 with and without Gutenberg trunk.

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

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[himanshupathak95]

Hey @carolinan, I could see the same behavior after following the steps mentioned -

Screen.Recording.2025-01-22.at.09.57.25.mov

I am looking further for the cause and possible fix.

[carolinan]

Hi @himanshupathak95 May I suggest that additional testing is mainly needed for issues that has the label "needs testing".

[Mamaduka]

I'm seeing at least three recent PRs fixing Spacer block controls, but are linked to different issues. I wonder if they're related.

[Mayank-Tripathi32]

I'm seeing at least three recent PRs fixing Spacer block controls, but are linked to different issues. I wonder if they're related.

#68819
#68818
#68815

All 3 may look the same but are addressing different problems related to spacer blocks.

[carolinan]

Note: I did not test the width. I forgot that setting even existed.

[yogeshbhutkar]

Note: I did not test the width. I forgot that setting even existed.

There wouldn't be any block validation error when setting up the width as there's no default value provided in the block.json for width, so it's unlikely that this value will be overridden to the default value to cause the validation error. (Ref. Context)

However, I've noticed two minor bugs (maybe out of the scope of this issue) with the way the width control works within spacer:
I. The control accepts negative values: Although, there are other controls, like the font-size control that also accept these negative values, in the width control one can use cmd + mouse wheel or cmd + arrow key to sort of scroll up to the negative values. In other controls (font size), it stops at zero and doesn't go below that. Also, the negative values are automatically set to 0 on save in the other controls, however, that's not the case with the width control.

Screen.Recording.2025-01-22.at.5.49.28.PM.mov

ii. The 0 always stays and is not clearable (not the case with other controls).
For example, if I want the width to be 50px, then I'd need to write 50 after 0 and then use the arrow keys to navigate back to 0 and then remove it just because it's not clearable. This sounds like a small bug, but it might confuse the users.

Screen.Recording.2025-01-22.at.5.57.56.PM.mov

I believe it's best to create a combined separate issue for the width control.

[carolinan]

Thank you for checking.

[stokesman]

ii. The 0 always stays and is not clearable (not the case with other controls).

That was #51616 and closed by #68815.