Skip to content

Undefined spacing presets in theme.json cause zero spacing when are in pattern markup #60129

@miksansegundo

Description

@miksansegundo

Related to #39371

What problem does this address?

Developers have a lot of flexibility when creating a spacing scale for a theme. This is great.

For instance, TT4 uses a 10-60 scale, and TT3 uses a 30-80 scale.

However, when a spacing preset is in a pattern markup (maybe copied from a public library or another theme) but is not defined in the theme.json of the active theme, the result is zero spacing.

The following is an example of the preset --wp--preset--spacing--20 being used in a pattern while it is not defined:

image

The editor only creates CSS variables for the presets defined in theme.json, resulting in zero spacing.

Screenshot 2567-03-22 at 18 20 12

What is your proposed solution?

We could avoid this issue by defaulting to the variable --wp--style--block-gap when a spacing preset is not defined.

Screenshot 2567-03-22 at 18 20 59

Here is a possible implementation for the default 20-80 spacing scale:

:body {
  --wp--preset--spacing--20: var(--wp--style--block-gap);
  --wp--preset--spacing--30: var(--wp--style--block-gap);
  --wp--preset--spacing--40: var(--wp--style--block-gap); 
  --wp--preset--spacing--50: var(--wp--style--block-gap);
  --wp--preset--spacing--60: var(--wp--style--block-gap);
  --wp--preset--spacing--70: var(--wp--style--block-gap);    
  --wp--preset--spacing--80: var(--wp--style--block-gap);  
}

For reference: What is blockGap and how can I use it?

cc: @richtabor @annezazu

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Feature] ThemesQuestions or issues with incorporating or styling blocks in a theme.[Type] EnhancementA suggestion for improvement.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions