Spacer block bug retrieving spacing.spacingSizes presets.

[Humanify-nl]

Description

Before 6.3 update, I used the spacer block with 4 block variations for preset sizes (with a js filter). But, when I updated to 6.3 it showed the spacing.spacingSizes that I had specified for gaps & margin! Super nice!

I was very happy to see that these are now used for the spacer block. At least... I thought so. Because, after I removed all the variations and worked on some other things, the spacer presets are gone again.

For some reason, the spacer blocks that existed before 6.2 and after updating to 6.3 did have the presets. But, adding a new spacer block does not have the presets.

Looking at the source code of the block I see that spacing.spacingSizes is actually retrieved.

https://github.com/WordPress/gutenberg/blob/1c09fae498d2bf073975454d66a4c89bc3ede8d8/packages/block-library/src/spacer/controls.js#L28C1-L28C60

But somehow they are not working! I have tried setting the spacingSizes specifically on settings.blocks.core/spacer

This is how I load variables in theme.json (the supplied var(--spacing--token--1) are processed with media queries, this has never given me issues before).

"spacing": {
       "blockGap": true,
	"units": [
		"%",
		"px",
		"rem"
	],
	"customSpacingSize": false,
	"spacingScale": {
		"steps": 0
	},
	"spacingSizes": [
		{
			"size": "var(--spacing--token--1)",
			"slug": "1",
			"name": "1"
		},
		{
			"size": "var(--spacing--token--2)",
			"slug": "2",
			"name": "2"
		},
		{
			"size": "var(--spacing--token--3)",
			"slug": "3",
			"name": "3"
		},
		{
			"size": "var(--spacing--token--4)",
			"slug": "4",
			"name": "4"
		},
		{
			"size": "var(--spacing--token--5)",
			"slug": "5",
			"name": "5"
		}
	]
  }

Step-by-step reproduction instructions

I suppose:

• Add spacer blocks to a WP 6.2 site
• Add settings.spacing.spacingSizes (2-3 presets will do)
• Inspect the spacer blocks (no preset tokens)
• Update WP to 6.3
• Inspect the spacer blocks (do they have preset tokens or not?) -- in my case YES
• Remove the spacer block. Add a new one.
• Inspect the spacer blocks (do they have preset tokens or not?) -- in my case NO

Screenshots, screen recording, code snippet

Edit: I found another theme that was still in 6.2 and can now demonstrate this weird behavior, just after update to 6.3:

Environment info

• WordPress 6.3(.1)
• No gutenberg plugin
• Default TT3 theme with customized theme.json

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

[Humanify-nl]

Referencing: #39371 I know @richtabor, @mrwweb, @cbirdsong have been on this, not sure if they still work on it.

[Humanify-nl]

Additional testing showed that it is not related to updating from 6.2 to 6.3. As this occured again on a fresh 6.3 site.

What seems to be very strange behavior (sometimes it shows custom size with pixels, sometimes it shows tokens) appears to be the following phenomenon:

• When clicking the spacer block, the resizer seems to be triggered (my mouse has high sensitivity), reverting the sizes back to pixels (token presets are gone).
• After this occured, there is no way to go back to the token presets, except for deleting and adding a spacer block again.

So indeed; we have a bug here.

My advice would be:

If settings.spacing.spacingSizes exists, custom value input or dragging the block to resize should not be accessible to the user. (It defeats the purpose of having presets if the user can just change them anytime).

If there is a use-case for it that I can't see, I suppose we might need a setting in the block.json to enable custom values for this block (which then removes spacingSizes)

NB. Apologies for the comments and edits, but this seems like an important issue, as spacers are used in so many layouts.

[mrwweb]

I've been unable to get the spacer block working with the spacing scale and have also noticed issues with it reverting back to px sizing on any mouse resizing/interaction.

If settings.spacing.spacingSizes exists, custom value input or dragging the block to resize should not be accessible to the user. (It defeats the purpose of having presets if the user can just change them anytime).

💯

[cbirdsong]

I could imagine dragging the handle snapping up/down to the next preset, but it seems like "customSpacingSize": false in theme.json should make it impossible to apply a custom value to the spacer block?

[tresorama]

I don't know if it is related but some days ago i faced a similar problem with spacer.

---

I wanted to show only the spacing preset in every blocks to ensure client cannot enter values.
So i disable the setting globally to all blocks by setting settings.spacing.customSpacingSize = false in theme.json.

Every other block i tried show the expected behavior, but spacer does the opposite, showing only the input where to insert custom values.
Adding settings.blocks.core/spacer.spacing.customSpacingSize= false does nothing (it seems ignored).
The only way i found is to re-enable settings.spacing.customSpacingSize = true, which is the opposite meaning of what i wanted to do.

The react code that is think is related to this issue is

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

Lines 91 to 94 in 0792221

	const disableCustomSpacingSizes = useSelect( ( select ) => {
	const editorSettings = select( blockEditorStore ).getSettings();
	return editorSettings?.disableCustomSpacingSizes;
	} );

because in the return jsx there is

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

Lines 339 to 348 in 0792221

	return (
	<>
	<View
	{ ...useBlockProps( {
	style,
	className: classnames( className, {
	'custom-sizes-disabled': disableCustomSpacingSizes,
	} ),
	} ) }
	>

---

I suggest also to rename disableCustomSpacingSizes to enableCustomSpacingSize and invert the boolean logic. Positive names are easier to reason about when used in expression (!disableCustomSpacingSizes is same as enableCustomSpacingSize but less readable)

[cbirdsong]

Confirming this remains very broken with disableCustomSpacingSizes enabled, but I'm not sure the issue name is accurate. By default, when you add a spacer block it starts out with "100px" as the default value and you get a little button to switch over to the presets:

CleanShot.2024-01-29.at.17.38.02.mp4

On a theme with custom spacing sizes disabled, it still adds a block with "100px" as the default value, and the only way to get to the presets is:

1. Empty out the custom value.
2. Deselect the block.
3. Re-select the block, probably using the list view sidebar since the block is now extremely narrow and also invisible.
4. Use the now-visible preset picker.
5. Never accidentally resize it by touching the drag handle, which takes you back to step one.

CleanShot.2024-01-29.at.17.45.46.mp4

So, in my estimation, these things need to happen:

• Disable the drag handle and related interactions when disableCustomSpacingSizes is true.
• Replace the default "100px" value with one of the stock presets.

---

@Humanify-nl Can you share the code you used to register those variations? If you can register one with a null/empty value, then it may just show the presets by default.