BoxControl: Unify input filed width whether linked or not

[t-hamano]

What?

This PR may be very minor, but it fixes the misalignment of the width of input fields inside the BoxControl component that occurs when the link state is changed in a narrow container.

Before	After
4fe05611b8dd976673b9346d7014237d.mp4	c960806b76f964acab77ac4d93de7060.mp4

This should also fix a misalignment in the block sidebar margin, padding, and block spacing UI (when there are no spacing presets), although results may vary depending on the OS and browser. Below is a comparison of the Columns Block Sidebar on Windows OS/Chrome:

Before	After

Why?

The row of the BoxControl component is composed of the AllInputControl, AxialInputControls, and InputControls components, but only the AllInputControl component has a different component configuration, as shown below:

// AllInputControl (isLinked)
<InputWrapper>
	<FlexedBoxControlIcon />
	<HStack>
		<StyledUnitControl />
		<FlexedRangeControl />
	</HStack>
</InputWrapper>

// AxialInputControls (! isLinked && splitOnAxis)
<InputWrapper>
	<FlexedBoxControlIcon />
	<Tooltip>
		<StyledUnitControl />
		<FlexedRangeControl />
	</Tooltip>
</InputWrapper>
<InputWrapper>
	<FlexedBoxControlIcon />
	<Tooltip>
		<StyledUnitControl />
		<FlexedRangeControl />
	</Tooltip>
</InputWrapper>

// InputControls (! isLinked && ! splitOnAxis)
<InputWrapper>
	<FlexedBoxControlIcon />
	<Tooltip>
		<StyledUnitControl />
		<FlexedRangeControl />
	</Tooltip>
</InputWrapper>
// ...

How?

Delete the wrapper HStack component from the AllInputControl component.

Testing Instructions

Storybook

• Start Storybook and access http://localhost:50240/?path=/story/components-experimental-boxcontrol--default.
• Narrow the browser width to about 260px.
• Change the link status.

Block Editor

Enable Empotytheme and update theme.json as follows. This is required to render spacing-related UI as hoge components:

theme.json

{
	"version": 3,
	"settings": {
		"appearanceTools": true,
		"layout": {
			"contentSize": "840px"
		},
		"spacing": {
			"spacingSizes": [],
			"defaultSpacingSizes": false
		}
	}
}

• Insert a Group or Columns block.
• Open the block sidebar and change the link status of the margin or padding or block spacing UI.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[tyxla]

Although this looks like an edge case, particularly difficult to reproduce, I'm OK with the proposed change.

LGTM 👍

[t-hamano]

@tyxla Thanks for the review!