Block supports: margin/padding controls not showing in the Block Editor when enabled at theme.json settings block level.

[ramonjd]

Description

Setting customMargin and/or customPadding to true in settings.blocks[ $block_name ].spacing in theme.json has no effect in the Block Editor when trying to enable spacing block supports.

Step-by-step reproduction instructions

Enable margin and padding spacing support for the Group Block in packages/block-library/src/group/block.json, e.g.,

"supports": {
        ...
	"spacing": {
		"padding": true,
		"margin": true
	},

Enable block supports specifically for Group Block in theme.json, e.g.,

"settings": {
   ...
   "spacing": {
	"customMargin": false,
	"customPadding": false,
	"units": [ "px", "em", "rem", "vh", "vw", "%" ]
   },
    ...
    "blocks": {
        "core/group": {
		"spacing": {
			"customMargin": true,
			"customPadding": true
			}
		},

Note that we've disabled customMargin and customPadding at the root level of settings.

In the Block Editor, insert a Group Block, then toggle the spacing controls under the Dimensions Panel.

See that padding/margin controls are enabled, but they don't appear when toggling using the Tools Panel.

Screenshots, screen recording, code snippet

I haven't backtraced everything fully yet, but I suspect that we're not merging the block-level settings somewhere correctly (?)

Environment info

WordPress 5.8
Gutenberg 11.5
TT1 Blocks and Twenty Twenty One

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

[ramonjd]

cc @oandregal who might just know what's going on off the top of his head! 😆

also cc @aaronrobertshaw who noticed this problem as well and helped me test.

[aaronrobertshaw]

I can't yet speak to what the exact issue or cause is but I can add some extra details around what I've seen so far.

• I believe the settings within the block editor store are correct
• Logging out the block specific values from useSetting begins as true then flips to false
• This change appears to be because we lose the blockName from the block edit context and end up with a malformed path
• This could be due to the current approach injecting the controls into the dimensions panel via a slot that doesn't bubble virtually.
• I've not replicated the issue yet while testing with a separate PR working to make the dimensions panel slot bubble virtually.

I'll continue debugging and testing this tomorrow if no one finds a solution before then.

[ramonjd]

I've not replicated the issue yet while testing with a separate PR working to make the dimensions panel slot bubble virtually.

Aside from the reducing spacing around the input controls, it works as expected using #34725

This could be due to the current approach injecting the controls into the dimensions panel via a slot that doesn't bubble virtually.

Sounds like you're on to something. When I set bubblesVirtually to true on the InspectorControls.Slot the Tools Panel Item hook kicks in and starts wanting to use ToolsPanelContext properties.

[aaronrobertshaw]

Aside from the reducing spacing around the input controls, it works as expected using #34725

There is a separate component for the virtual bubbling Slot which introduces a <div> so it can apply refs etc. This div breaks the layout for the ToolsPanel as shown in your screenshot. For a quick fix, I'll work on updating the ToolsPanel to handle that div.

[ramonjd]

Retested now that #34725 is merged. I can no longer replicate. 👍