Spacer Block: Allow themes to define a default value theme.json

[kjellr]

It would be great if themes were able to define a default height value for the spacer block in theme.json. That would ensure a theme-consistent starting point when users insert a new spacer, and would allow themes to simplify the use of spacers in their templates.

Relevant conversation: WordPress/theme-experiments#120 (comment)

[mtias]

Related: #27809 (comment)

[mtias]

cc @oandregal @jorgefilipecosta

[oandregal]

Does it make sense that this new style/setting is part of the spacing group? We'd have: spacing.height for styles and spacing.customHeight for settings.

Thinking of what other blocks could benefit from this: the cover block has a custom min-height property (see dimensions panel), I wonder if it can be converted to this as well:

[jorgefilipecosta]

It seems we have an issue with how the space block was built. By default this is the markup produced:

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

If we wanted for example to change the default hardcoded height to 150px the current default space blocks would be invalid.

I think the default height should not be added as an inline style, adding the default height as an inline style is what makes it impossible for themes to control it (at least without using something like an important rule).

So I guess we could change the markup of the space block to not include the default height implementing the required deprecations. And then allowing changing the default using theme.json would be as simple as setting a height value style for the space block as we do now for color and fonts?

[colorful-tones]

I was about to try and create an Issue for this. Glad I stumbled upon this!

I agree and love the idea of being able to set customHeight: true/false for the Spacer block in theme.json.

I've seen a common pattern for developers to do the following in a theme to allow editors to have preset spacing options:

registerBlockStyle(
	'core/spacer', [
		{
			name  : 'responsive-small',
			label : 'Responsive Small',
		},
		{
			name      : 'responsive-medium',
			label     : 'Responsive Medium',
			isDefault : true,
		},
		{
			name  : 'responsive-large',
			label : 'Responsive Large',
		},
	],
);

However, the Spacer Settings (Height) is left as an interface for editors to truly mess with things. If we could then disable it with "customHeight": false in the theme.json then this would be icing on the cake. ❤️

I know that there is a lot of work being done for responsive features for 5.9 (including margin/padding for certain blocks), but this still seems like a great endeavor for Spacer block. Thanks!

[mike-sheppard]

100% agree with @colorful-tones on this, would be great if we could disable the slider (inc. inline height style) and provide a few style variations / presets 👍

[Resolution-Sam]

Has there been any further updates to support the removal of custom sizing for the spacer block using the theme.json file?

[mtias]

The spacer should also be able to work with the new spacing presets.

[samjonsmith]

+1

[bradhogan]

Is this not resolved yet? Seems like it should be pretty simple to allow theme authors to add something like this to the theme.json...

"core/spacer": {
  "default":"50px"
}