Skip to content

Large list of spacing sizes causes var:preset|spacing|default value for other dimensions #52976

@wongjn

Description

@wongjn

Description

If a theme has more than 8 spacing size presets, when customizing a dimension for margin, padding or block gap in the block editor for a block, the other non-customized dimensions for that "dimension group" will have a value of var:preset|spacing|default which for most themes will not exist.

8 is the threshold for whether <SpacingInputControl> displays a range control or a dropdown control:

https://github.com/WordPress/gutenberg/blob/v16.1.2/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js#L60

It seems likely then that it could be a bug with the way the dropdown control is used to handle the default value.

Step-by-step reproduction instructions

  1. Edit wp-content/themes/twentytwentythree/theme.json to add 3 extra members in settings.spacing.spacingSizes:
    		"slug": "80",
    		"name": "6"
    +	},
    +	{
    +		"size": "1rem",
    +		"slug": "foo",
    +		"name": "foo"
    +	},
    +	{
    +		"size": "2rem",
    +		"slug": "bar",
    +		"name": "bar"
    +	},
    +	{
    +		"size": "3rem",
    +		"slug": "baz",
    +		"name": "baz"
     	}
     ],
     "units": [
     	"%",
  2. Enable Twenty Twenty-Three theme.
  3. Go into the Site Editor and edit the Footer template part.
  4. Edit the top padding of the top level core/group block.
  5. See that the left and right dimensions now lose their global padding and instead have the invalid var:preset|spacing|default value.

Screenshots, screen recording, code snippet

✅ With 8 or less spacing sizes

image

The other padding dimensions are not set when editing the top padding (commented formatted for readability):

<!-- wp:group {
  "style":{
    "spacing":{
      "padding":{
        "top":"var:preset|spacing|40"
      }
    }
  },
  "layout":{"type":"constrained"}
} -->

❌ With more than 9 spacing sizes

image

The other padding dimensions are set to var:preset|spacing|default when editing the top padding (commented formatted for readability):

<!-- wp:group {
  "style":{
    "spacing":{
      "padding":{
        "top":"var:preset|spacing|40",
        "right":"var:preset|spacing|default",
        "bottom":"var:preset|spacing|default",
        "left":"var:preset|spacing|default"
      }
    }
  },
  "layout":{"type":"constrained"}
} -->

Environment info

WordPress 6.3-RC2-56310

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

Metadata

Metadata

Assignees

Labels

Global StylesAnything related to the broader Global Styles efforts, including Styles Engine and theme.json[Package] Style Engine/packages/style-engine[Status] In ProgressTracking issues with work in progress[Type] BugAn existing feature does not function as intended

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions