Sidebar styles tab crashes block when theme has >= 8 spacing values

[ryelle]

Description

Multiple blocks crash ("This block has encountered an error and cannot be previewed.") when clicking on the "styles" tab in the post editor, when the current theme has >= 8 spacing values.

The console is full of errors like:

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `SpacingInputControl`.

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `SpacingInputControl`.

Step-by-step reproduction instructions

1. With a theme with 8+ values in settings.spacing.spacingSizes in theme.json
2. Create or edit a post
3. Add a group, or buttons, or anything with dimension controls
4. Click the "styles" tab in the sidebar
5. The block crashes

Blocks with the dimension control just in the sidebar (no tabs), like Quote, just crash immediately on adding.

Screenshots, screen recording, code snippet

I tested this with the emptytheme theme in gutenberg, updating the theme.json to the following to give me 8 spacing values.

theme.json

{
	"$schema": "../../schemas/json/theme.json",
	"version": 3,
	"settings": {
		"appearanceTools": true,
		"layout": {
			"contentSize": "840px",
			"wideSize": "1100px"
		},
		"spacing": {
			"spacingSizes": [
				{
					"name": "1",
					"size": "10px",
					"slug": "10"
				},
				{
					"name": "2",
					"size": "20px",
					"slug": "20"
				},
				{
					"name": "3",
					"size": "30px",
					"slug": "30"
				},
				{
					"name": "4",
					"size": "40px",
					"slug": "40"
				},
				{
					"name": "5",
					"size": "50px",
					"slug": "50"
				},
				{
					"name": "6",
					"size": "60px",
					"slug": "60"
				},
				{
					"name": "7",
					"size": "70px",
					"slug": "70"
				},
				{
					"name": "8",
					"size": "80px",
					"slug": "80"
				}
			]
		}
	},
	"customTemplates": [
		{
			"name": "custom-template",
			"title": "Custom",
			"postTypes": [ "post" ]
		}
	],
	"patterns": [ "short-text-surrounded-by-round-images", "partner-logos" ]
}

The issue seems to be when it tries to fall back to the select control, when there are too many values for the range slider.

Environment info

• WP trunk
• Gutenberg 18.9 (works on 18.8 & below)
• I've reproduced on Firefox & Chrome on Mac.

Initially reported to me on wordpress.org here WordPress/wporg-main-2022#433 (comment), and https://core.trac.wordpress.org/ticket/61820

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

[ndiego]

I can confirm using TT4. You just need to modify the theme.json file to add two more spacing levels.

[ndiego]

@aaronrobertshaw @andrewserong @t-hamano figured one of you might know what's causing this in 18.9. Any ideas? 😅

[ramonjd]

This smells like a module import issue. I'll see if I can track it down.

[ramonjd]

Also this line:

gutenberg/packages/block-editor/src/components/spacing-sizes-control/utils.js

Line 15 in 75d0173

export const RANGE_CONTROL_MAX_SIZE = 8;

Bumping that will remove the error. So I think there's a condition that relies on the max value to render a component that can't handle the incoming props.

Or something.

Edit: Not sure if the Legacy component was ever exported again #63190

[ramonjd]

So I think #63258 removed the custom legacy component that the spacing sizes component relied on when there were >= 8 sizes.

I have a fix up here:

• Spacing controls: using CustomSelectControlV2 for >= 8 spacing sizes #64284

cc @ciampo for confirmation