What?

This PR fixes the issues discovered in this comment:

One thing to note if folks are testing with TT4 theme, is that it sets a single value for the Buttons block's blockgap: "blockGap": "0.7rem". As a result the UI defaults to a single control at the Buttons block level in global styles:

If we remove that value from the theme.json file, then the axial controls are available:

Why?

Whether the UI, i.e. the SpacingSizesControl, supports the axial gap is evaluated using both the sides prop and the values ​​prop:

If a theme defines a single string as a block gap, the splitGapValue() function converts it to an object with only a top property:

As a result, a SpacingSizeControl component that receives these props will assume that the axial gap is not supported, even if the block itself supports it.

How?

• Update the splitGapValue() function so that if the argument is a string, it converts it to an object with explicit top, right, bottom, and left properties.
• If the block doesn't support the axial gap, extract just the top property from this object and pass it as the values ​​prop.

Testing Instructions

Define a theme.json for each scenario and check out the block spacing UI in the global styles. This PR fixes the second and fourth scenarios.

Has Spacing Size Presets

{
	"version": 3,
	"settings": {
		"appearanceTools": true,
		"layout": {
			"contentSize": "840px"
		}
	}
}

2. The theme defines the block gap for blocks

{
	"version": 3,
	"settings": {
		"appearanceTools": true,
		"layout": {
			"contentSize": "840px"
		}
	},
	"styles": {
		"blocks": {
			"core/columns": {
				"spacing": {
					"blockGap": "2em"
				}
			},
			"core/group": {
				"spacing": {
					"blockGap": "2em"
				}
			}
		}
	}
}

This is the scenario that this PR solves. Blocks that support the axial gap (such as the Columns block) will show axial controls instead of a single control if the string is defined in theme.json.

Before	After
Cell

No Spacing Size Presets

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

{
	"version": 3,
	"settings": {
		"appearanceTools": true,
		"layout": {
			"contentSize": "840px"
		},
		"spacing": {
			"defaultSpacingSizes": false,
			"spacingSizes": []
		}
	},
	"styles": {
		"blocks": {
			"core/columns": {
				"spacing": {
					"blockGap": "2em"
				}
			},
			"core/group": {
				"spacing": {
					"blockGap": "2em"
				}
			}
		}
	}
}