Repository navigation
HTML block has a visual space on gutenberg #79716
Description
Description
I have created these separators in vector graphics using html.
They works perfect. But on gutenberg i can see a black space under it, which is not really present in the code.
Step-by-step reproduction instructions
- Create a HTML block
- Paste the following:
<svg style="margin-bottom:-10px; margin-top:-1px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none">
<rect x="0" y="0" width="1000" height="100" fill="var(--wp--preset--color--accent-5)"></rect>
<path fill="#198be8" d="M0,0h1000c-.07,19.72.07,39.9,0,59.61-137.89-39.69-249.32-45.15-323.62-42.92C389.89,25.31,193.08,155.29,49.97,50.85,24.82,32.49,8.74,12.2,0,0Z"></path>
</svg>
- Save and publish.
- It should look fine in the front end, but in gutenberg you'll have a blank space
Screenshots, screen recording, code snippet
Environment info
wordpress 7.0
chrome 150
theme 2025
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
Activity
talldan commentedon Jul 1, 2026
@TheRadicalDreamer I couldn't reproduce this, so a reproduction might be dependent on your theme or style settings.
For me I get a gap above the HTML block, which correlates to block spacing, and it's consistent in the editor and frontend.
I can get rid of it by putting the HTML block in a group and then changing the following on a group:
TheRadicalDreamer commentedon Jul 3, 2026
Are you using theme twenty twenty five??
Can you show me how you see it?
Can you get rid of the block spacing? and show me?
i am trying to get what makes that blank gap, but i cannot see any indicators.
only i can see is that space is for the HTML block, but it is not generated by the code inside it.
talldan commentedon Jul 6, 2026
Can you look at the 'computed' styles tab to see if there's margin on the html block, or if it's from another element?
Here's how it looks in a template with a pattern before and after the html block:
Space above, which from the CSS I can see comes from this block spacing css rule:
To solve it I put the HTML block in a group and then with the group selected switch off 'Inner blocks use content width' (makes the html block full width):
Set the group block's margin to
0:After that there's no gap:
TheRadicalDreamer commentedon Jul 17, 2026
I still get the same issue.
But when i edit the CSS of the block with browser inspection, i can get it right
TheRadicalDreamer commentedon Jul 17, 2026
I have my margins set to zero to the whole theme
github-actions commentedon Aug 2, 2026
Help us move this issue forward. This issue is being marked stale since it has no activity after 15 days of requesting more information. Please add info requested so we can help move the issue forward. Note: The triage policy is to close stale issues that need more info and no response after 2 weeks.
TheRadicalDreamer commentedon Aug 4, 2026
i cannot repro what you did.
Are you using twenty twenty five theme??
TheRadicalDreamer commentedon Aug 4, 2026
I tried on the playground and i still get the same issue:
It has something to do with the DIV of the HTML block
talldan commentedon Aug 4, 2026
Can you identify the style that causes it?
TheRadicalDreamer commentedon Aug 4, 2026
To be honest, no. i cannot
I find that there are 2 elements that creates that space
Here is the playground link. Go edit the Sample Page:
https://playground.wordpress.net/#%7B%22landingPage%22:%22/wp-admin/admin.php?page=wc-admin%22,%22preferredVersions%22:%7B%22php%22:%228.0%22,%22wp%22:%22latest%22%7D,%22phpExtensionBundles%22:%5B%22kitchen-sink%22%5D,%22features%22:%7B%22networking%22:true%7D,%22steps%22:%5B%7B%22step%22:%22installPlugin%22,%22pluginData%22:%7B%22resource%22:%22url%22,%22url%22:%22https://playground.wordpress.net/plugin-proxy.php?org=woocommerce&repo=woocommerce&workflow=Build%20Live%20Branch&artifact=plugins-30803029089&pr=67056%22%7D,%22options%22:%7B%22activate%22:true%7D%7D,%7B%22step%22:%22installPlugin%22,%22pluginData%22:%7B%22resource%22:%22url%22,%22url%22:%22https://github.com/woocommerce/woocommerce/releases/download/wc-beta-tester-3.0.0/woocommerce-beta-tester.zip%22%7D,%22options%22:%7B%22activate%22:true%7D%7D,%7B%22step%22:%22setSiteOptions%22,%22options%22:%7B%22woocommerce_onboarding_profile%22:%7B%22skipped%22:true%7D%7D%7D,%7B%22step%22:%22login%22,%22username%22:%22admin%22,%22password%22:%22password%22%7D%5D,%22plugins%22:%5B%5D%7D
talldan commentedon Aug 5, 2026
I can repro with that playground link, but I can't see what it is either. I see that the iframe is given a
heightattribute, which can account for some of the gap, but you're right that the wrapperdivof the html block also has some empty space as well. 🤔sanketio commentedon Aug 24, 2026
This looks fixed on trunk. Tested the SVG from the report in a Custom HTML block — no gap in the editor, and the block box is 61px against the SVG's 65px, so the negative margins apply as intended.
The iframe you spotted is gone. #79115 moved the block from the sandboxed
PreviewtoInnerContent, so the content renders inline in the canvas:That landed in
50ddbc1f6edon 2026-06-29. It was a feature PR, so it didn't reference this issue. The Playground link in the thread pins an older Gutenberg, which is why it still reproduces there.TheRadicalDreamer commentedon Aug 24, 2026
on which version will be available?
So i can check when it comes?
skorasaurus commentedon Sep 8, 2026
This was included on Gutenberg 23.6 and it should be also included on WordPress 7.1
Please reopen if you are still able to reproduce this in Gutenberg 23.6 or newer versions.