Icon: Fix margin being applied twice in the editor

[jorgefilipecosta]

Fixes the Icon block applying margin twice in the editor.

The margin block support is serialized to the block wrapper, but in the editor the inner SVG element was also receiving the margin styles, because the full spacing styles were spread onto it. On the front end only padding is applied to the SVG, so a block with a margin looked considerably more spaced out in the editor canvas than on the published page. To fix this we pass only the padding to the spacing styles applied to the inner SVG element, matching the front-end output.

Screenshots

An Icon block with a background color, 24px padding and a 48px margin, placed inside a Group with a contrasting background, so the margin is visible as the purple space around the icon.

Before

The margin is applied on both the block wrapper and the inner SVG, so the editor renders 96px of extra space (2 × 48px) compared to the front end.

Editor	Front end

After

The editor matches the front end.

Editor	Front end

Testing Instructions

1. Insert a Group block, and give it a background color.
2. Insert an Icon block inside the group and choose an icon.
3. In the inspector, set a different background color for the icon, some padding, and a large margin (e.g., 48px).
4. Verify the space around the icon in the editor canvas matches the front end.
5. Verify padding and the other supports (colors, borders, width) still apply correctly in both.

AI usage disclosure: fix and description drafted with AI assistance and reviewed by me.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Required label: Any label starting with [Type].
• Labels found: [Package] Block library.

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

[github-actions]

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Required label: Any label starting with [Type].
• Labels found: [Package] Block library.

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

[github-actions]

Size Change: +16 B (0%)

Total Size: 7.82 MB

📦 View Changed

Filename	Size	Change
build/scripts/block-library/index.min.js	356 kB	+16 B (0%)

_{compressed-size-action}

[github-actions]

Flaky tests detected in 66f48dd.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/31134465609
📝 Reported tests:

should load styles added through enqueue_block_assets in /test/e2e/specs/editor/plugins/iframed-equeue-block-assets.spec.js, passed after 1 failed attempt.