Skip to content

Default blockGap via __experimentalStyle and/or __experimentalDefault does not work #70310

Open
@bsf-zanev

Description

@bsf-zanev

Description

When trying to set a default blockGap for a custom block, both __experimentalDefault and __experimentalStyle do not work as expected.

This is the current layout of the test block I've created:

"layout": {
	"default": {
		"type": "flex",
		"justifyContent": "stretch",
		"verticalAlignment": "center",
		"flexWrap": "nowrap",
		"orientation": "vertical"
	}
}

__experimentalStyle

__experimentalStyle applies padding and margin on both the editor and front-end, while it applies blockGap only in the editor and does not work on the front-end (for all themes).

Code Snippet:

"__experimentalStyle": {
	"spacing": {
		"padding": "5rem 2.5rem",
		"blockGap": "0"
	}
}

__experimentalDefault

__experimentalDefault for blockGap does not work in the editor for all themes, and only works on the front-end for the GeneratePress theme.

Code Snippet:

"spacing": {
	"margin": true,
	"padding": true,
	"blockGap": {
		"__experimentalDefault": "0"
	}
}

Note

Tested with all plugins deactivated except for a custom plugin with just a single block to replicate this issue.

Step-by-step reproduction instructions

  1. Create a basic block with innerBlocks, and with layout and blockGap (spacing) support.
  2. Add one of the two above code snippets in the support object of your block.json.
  3. Build the block.
  4. Create a new page.
  5. Add your block and notice the default blockGap in the editor.
  6. Save the page and notice the default blockGap on the front-end.

Screenshots, screen recording, code snippet

Demo for __experimentalStyle

blockgap-experimentalstyle.mp4

Demo for __experimentalDefault

blockgap-experimentaldefault.mp4

Environment info

  • WordPress Setup
    • WordPress: 6.8.1
    • Gutenberg: Not Installed
    • Theme: Twenty Twenty-Five (Also tested with Astra, GeneratePress, Neve, Ollie, Twenty Twenty-Four, and Twenty Twenty-One)
  • Browser: Chrome
  • Device: MacBook Air with macOS Sequoia 15.5

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

Please confirm which theme type you used for testing.

  • Block
  • Classic
  • Hybrid (e.g. classic with theme.json)
  • Not sure

Metadata

Metadata

Assignees

No one assigned

    Labels

    Global StylesAnything related to the broader Global Styles efforts, including Styles Engine and theme.json[Feature] LayoutLayout block support, its UI controls, and style output.[Type] BugAn existing feature does not function as intended

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions