Spacer block: broken UX in clearing its "fixed" width/height input when inside a row/stack

[hanneslsm]

Description

Upon clearing the input, it inserts a 0 instantly and if the unit is other than px it’s changed back to px.

Step-by-step reproduction instructions

1. Add a spacer inside a Row/Stack
2. set unit to "vh" or other than "px"
3. remove the values, so that you can add a new value
4. a 0 gets automatically added and the unit jumps back to px

Screenshots, screen recording, code snippet

Screen.Recording.2023-06-18.at.09.54.34.mp4

Environment info

• WP 6.2.2
• GB 16

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

[ndiego]

Thanks for reporting @hanneslsm, I am able to confirm as well.

[hanneslsm]

I just saw this happens also in the dimension controls (padding) for a button in the global styles. I guess this is not an issue of the spacer then but of the input field.
I'm going to rename the title. @ndiego Could you please change the label? Thanks! (Maybe even a ticket for the UX & Polish Board? :) )

[Mayank-Tripathi32]

I just saw this happens also in the dimension controls (padding) for a button in the global styles. I guess this is not an issue of the spacer then but of the input field. I'm going to rename the title. @ndiego Could you please change the label? Thanks! (Maybe even a ticket for the UX & Polish Board? :) )

I fixed the spacer block height/width issue in packages/block-editor/src/components/child-layout-control/index.js. It seems the layout styles issue may not be directly related, but I will investigate further. Additionally, I’m opening a draft PR to test the spacer block fix.

I found a better fix for the spacer block height/width issue.

The root cause was in packages/components/src/unit-control/index.tsx, where the unit was dropped when the value was empty.

Before

onChangeProp?.( '', changeProps );

After

onChangeProp?.( `0${unit}`, changeProps );

This change ensures the unit is preserved, preventing it from resetting when the value is empty.

cc: @mikachan @hanneslsm

[stokesman]

I'm unable to reproduce this with WP 6.7.1 and Gutenberg trunk. I’ve tried the with the controls for the spacer and the padding in global styles and others besides that.

Can anyone confirm if this is still reproducible?

[hanneslsm]

Can anyone confirm if this is still reproducible?

Yes.
Just testet it on 6.7.1 with and without Gutenberg 20 with a spacer block

It does not occur on the input for the margin but the height.

[Mayank-Tripathi32]

@stokesman Try this

1. Add a stack then
2. Add a spacer
3. set unit to vh
4. remove the values, so that you can add a new value a 0 gets automatically added and the unit jumps back to px

Original instructions dont mention it.

[stokesman]

@Mayank-Tripathi32, thank you! I can reproduce it now. This seems isolated to the Spacer block inside a flex layout. If I put other blocks inside the row/stack and try the same thing I cannot reproduce it. That makes me doubt the issue is with UnitControl or even FlexControls (the component used for dimensions of all blocks in flex layouts like row/stack).

It looks like the culpable code is part of an effect here:

gutenberg/packages/block-library/src/spacer/edit.js

Lines 259 to 298 in be5ce8a

	if (
	isFlexLayout &&
	selfStretch !== 'fill' &&
	selfStretch !== 'fit' &&
	! flexSize
	) {
	if ( inheritedOrientation === 'horizontal' ) {
	// If spacer is moving from a vertical container to a horizontal container,
	// it might not have width but have height instead.
	const newSize =
	getCustomValueFromPreset( width, spacingSizes ) ||
	getCustomValueFromPreset( height, spacingSizes ) ||
	'100px';
	setAttributes( {
	width: '0px',
	style: {
	...blockStyle,
	layout: {
	...layout,
	flexSize: newSize,
	selfStretch: 'fixed',
	},
	},
	} );
	} else {
	const newSize =
	getCustomValueFromPreset( height, spacingSizes ) ||
	getCustomValueFromPreset( width, spacingSizes ) ||
	'100px';
	setAttributes( {
	height: '0px',
	style: {
	...blockStyle,
	layout: {
	...layout,
	flexSize: newSize,
	selfStretch: 'fixed',
	},
	},
	} );

It gets executed anytime the value in the fixed width input is falsy, so an empty string triggers it. From what I gather it shouldn’t be triggered from changes in the input. I tried this little change and it seems to fix the issue:

diff --git a/packages/block-library/src/spacer/edit.js b/packages/block-library/src/spacer/edit.js
index 1e0ffb9700..af84edf7ba 100644
--- a/packages/block-library/src/spacer/edit.js
+++ b/packages/block-library/src/spacer/edit.js
@@ -260,7 +260,7 @@ const SpacerEdit = ( {
 			isFlexLayout &&
 			selfStretch !== 'fill' &&
 			selfStretch !== 'fit' &&
-			! flexSize
+			flexSize === undefined
 		) {
 			if ( inheritedOrientation === 'horizontal' ) {
 				// If spacer is moving from a vertical container to a horizontal container,

That could use more testing to make sure it doesn’t interfere with what the effect is supposed to be doing but I’d opt to try that before the approach in your linked PR.

[Mayank-Tripathi32]

@Mayank-Tripathi32, thank you! I can reproduce it now. This seems isolated to the Spacer block inside a flex layout. If I put other blocks inside the row/stack and try the same thing I cannot reproduce it. That makes me doubt the issue is with UnitControl or even FlexControls (the component used for dimensions of all blocks in flex layouts like row/stack).

Hey @stokesman , This also is present in style tab,

Try to see if you get same behaviour in padding and margin here.

[stokesman]

Try to see if you get same behaviour in padding and margin here.

I find it’s different with a similarity. The difference is that the 0 doesn’t appear in the input until it’s no longer focused. The similarity is the unit does switch. It’s notable that it only happens with controls that have a preset value like vertical padding and not horizontal. The "block spacing" control makes a good comparison. It behaves the same generally—specifically though, the value and unit reset to their presets, not 0 and px. To me it seems to be a separate issue and the only actual problem is the unit resetting while the input is focused.

[Mayank-Tripathi32]

Try to see if you get same behaviour in padding and margin here.

I find it’s different with a similarity. The difference is that the 0 doesn’t appear in the input until it’s no longer focused. The similarity is the unit does switch. It’s notable that it only happens with controls that have a preset value like vertical padding and not horizontal. The "block spacing" control makes a good comparison. It behaves the same generally—specifically though, the value and unit reset to their presets, not 0 and px. To me it seems to be a separate issue and the only actual problem is the unit resetting while the input is focused.

I see, maybe this could fix the issue? #68734

[stokesman]

I see, maybe this could fix the issue? #68734

I take it you mean the PR linked to that issue. That issue looks distinct—it involves a range input whereas this issue does not. I suppose that linked PR might happen to fix this but I don’t think it’s right approach for either issue. The UnitControl component doesn’t seem to need changes because the issue is not reproducible with that component in isolation.

[Mayank-Tripathi32]

flexSize === undefined

@stokesman This does seems to be the problem, Should I change the approach in PR?

I find it’s different with a similarity. The difference is that the 0 doesn’t appear in the input until it’s no longer focused. The similarity is the unit does switch. It’s notable that it only happens with controls that have a preset value like vertical padding and not horizontal. The "block spacing" control makes a good comparison. It behaves the same generally—specifically though, the value and unit reset to their presets, not 0 and px. To me it seems to be a separate issue and the only actual problem is the unit resetting while the input is focused.

I will explore on this and see.

[stokesman]

This does seems to be the problem, Should I change the approach in PR?

I do suggest a changed approach. It’s up to you if you want to revamp your PR or make a new one 🙇.

[Mayank-Tripathi32]

This does seems to be the problem, Should I change the approach in PR?

I do suggest a changed approach. It’s up to you if you want to revamp your PR or make a new one 🙇.

Got it, I will open another PR/Issue for this problem.

Additional Test: (Expected)

1. Go to Global Styles settings.
2. Select the Button block.
3. Adjust padding/margin values and clear the input fields.
4. Ensure the unit remains consistent and doesn’t default to px.