Open
Description
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
- Create a basic block with innerBlocks, and with layout and blockGap (spacing) support.
- Add one of the two above code snippets in the support object of your block.json.
- Build the block.
- Create a new page.
- Add your block and notice the default blockGap in the editor.
- 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