Extend theme.json to provide spacing size presets

What problem does this address?

On the above issue, there was some consensus that there would be value in extending theme.json to allow spacing size presets to be added, which gives users a set of preset size tokens to select from as well as/or instead of just adding custom spacing values.

This blog post provides a good introduction to some of the reasons for this.

This is intended to be a top-level issue for some of the initial discussions, as well as tracking the ongoing work needed to implement this.

The block UI will need to allow people to select from the presets (e.g. padding value Medium) in addition to the "absolute value" settings (e.g typing "23px"), and also allow for theme authors to disable the option to add absolute values.

Update

Summary of discussion and suggested way forward

Todo

Add UI to Global styles to allow managing spacing presets #61986
Add UI for adding fluid values at the block level. Ensure that [mobile requirements]
Look at disabling core scale with false or null as well as by setting steps:0
Investigate adding of utility classes instead of inline styles (needs to work conditionally based on current blocks or too many classes will be generated)
Add nearest fallback options if the current theme does include a currently assigned preset

Done

@Azragh

Which bug do you mean?

Sorry @Azragh, I forgot to add the link in the previous comment #44435 - 🤞 the fix here will resolve this for you. You could try the 14.3 release candidate to confirm that.

@glendaviesnz

@glendaviesnz Sorry for the late response - works as it should. 😁

Do we have a general consensus of how margin/padding are going to work in the future for different screen sizes?

clamp() seems to work OK, but I think it would be better to have greater control of spacingSizes at different breakpoints. Maybe a minimum width or a range?

"spacingSizes": [
  {
	  "name": "X-Small",
	  "size": "20px",
	  "slug": "x-small"
  },
  {
	  "name": "Small",
	  "size": "clamp(30px, 4vw, 40px)",
	  "slug": "small"
  },
  {
	  "name": "Medium",
	  "size": "clamp(40px, 6vw, 60px)",
	  "slug": "medium"
  },
  {
	  "name": "Large",
	  "size": "clamp(50px, 8vw, 80px)",
	  "slug": "large"
  },
  {
	  "name": "X-Large",
	  "size": "clamp(60px, 10vw, 100px)",
	  "slug": "x-large"
  }
]

Given these spacing sizes, On mobile (<400px) I might want 20px of padding on something (X-Small) and Desktop (>=1024) I might want 100px of padding (X-Large).

Removing from 6.4 -- still lots to design and figure out with only 4 weeks remaining ahead of 6.4 beta 1.

I'd like to get more eyes on this, and font size presets. Theme designers (and users of their themes) should be able to configure all presets of a theme from Global Styles.

There's currently a major issue with the way presets work inside the spacer block: #54084

Do we have a general consensus of how margin/padding are going to work in the future for different screen sizes?

clamp() seems to work OK, but I think it would be better to have greater control of spacingSizes at different breakpoints. Maybe a minimum width or a range?
"spacingSizes": [
  {
	  "name": "X-Small",
	  "size": "20px",
	  "slug": "x-small"
  },
  {
	  "name": "Small",
	  "size": "clamp(30px, 4vw, 40px)",
	  "slug": "small"
  },
  {
	  "name": "Medium",
	  "size": "clamp(40px, 6vw, 60px)",
	  "slug": "medium"
  },
  {
	  "name": "Large",
	  "size": "clamp(50px, 8vw, 80px)",
	  "slug": "large"
  },
  {
	  "name": "X-Large",
	  "size": "clamp(60px, 10vw, 100px)",
	  "slug": "x-large"
  }
]
Given these spacing sizes, On mobile (<400px) I might want 20px of padding on something (X-Small) and Desktop (>=1024) I might want 100px of padding (X-Large).

I am hoping for an implementation that follows how fluid fontSizes are defined in theme.json, for example:

"spacing": {
  "fluid": true,
  "spacingSizes": {
    {
      "name": "Example",
      "slug": "example",
      "size": "1rem",
      "fluid": {
        "min": "0.5rem",
        "max": "1.5rem"
      }
    },
    // ...
  }
}

With #41527 merged, is there any work left to do on this issue? Given its title is Extend theme.json to provide spacing size presets and that has now been done, might it be better to open new issues for any follow-up tasks?

@tellthemachines

This appears resolved by #41527 (merged), which added the spacingScale/spacingSizes theme.json settings this issue requested. The feature is live in trunk today — see lib/theme.json's spacingScale default and the spacing-sizes-control component in @wordpress/block-editor. As @tellthemachines noted above, the original ask has been done; any remaining follow-up ideas from this long thread (fluid/responsive spacing, mobile-specific values, utility classes, etc.) would be better tracked as their own focused issues. Closing as fixed, but please reopen if I was a bit eager here!

Navigation Menu

Repository navigation

Extend theme.json to provide spacing size presets #39371

What problem does this address?

Update

Todo

Done

109 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Extend theme.json to provide spacing size presets #39371

Description

What problem does this address?

Update

Todo

Done

Activity

eric-michel commented on Mar 11, 2022

cbirdsong commented on Mar 21, 2022

eric-michel commented on Mar 21, 2022

mrwweb commented on Mar 22, 2022

cbirdsong commented on Mar 23, 2022

eric-michel commented on Mar 23, 2022

cbirdsong commented on Mar 23, 2022

eric-michel commented on Mar 23, 2022

cbirdsong commented on Mar 23, 2022

eric-michel commented on Mar 23, 2022

bradhogan commented on Apr 1, 2022

109 remaining items

glendaviesnz commented on Oct 5, 2022

Azragh commented on Oct 7, 2022

wnolfm commented on Feb 13, 2023

annezazu commented on Aug 31, 2023

richtabor commented on Mar 25, 2024

cbirdsong commented on Mar 25, 2024

cr0ybot commented on Sep 10, 2024

tellthemachines commented on Apr 20, 2026

jasmussen commented on Aug 26, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions