Skip to content

Icon block: Fix icons becoming too small when padding is applied - #76295

Closed
kannan-ravi wants to merge 1 commit into
WordPress:trunkfrom
kannan-ravi:fix/icon-svg-sizing
Closed

kannan-ravi wants to merge 1 commit into
WordPress:trunkfrom
kannan-ravi:fix/icon-svg-sizing

Conversation

@kannan-ravi

Copy link
Copy Markdown
Contributor

What?

Closes #76288
Fix icons becoming too small when padding is applied to the icon block by changing SVG box-sizing from border-box to content-box.

Why?

When users added padding to icon blocks, the SVG icons would become too small because they were using border-box sizing, which included the wrapper's padding in the size calculation.

How?

Changed SVG box-sizing from border-box to content-box in .wp-block-icon svg.

Testing Instructions

  1. Open a post or page.
  2. Insert an Icon block.
  3. Add padding to the icon block using the padding dimensions controls
  4. Verify the icon maintains proper size

Screenshots or screencast

Before

Before.mp4

After

After.mp4

@github-actions

github-actions Bot commented Mar 8, 2026 •

Copy link
Copy Markdown

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: [Status] Blocked, [Package] Block library, First-time Contributor, [Block] Icon.

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 github-actions Bot added the [Package] Block library /packages/block-library label Mar 8, 2026
@github-actions

github-actions Bot commented Mar 8, 2026 •

Copy link
Copy Markdown

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: kannan-ravi <kannanravi@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: webmandesign <webmandesign@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

github-actions Bot commented Mar 8, 2026

Copy link
Copy Markdown

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @kannan-ravi! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

@github-actions github-actions Bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Mar 8, 2026
@t-hamano t-hamano added the [Block] Icon Affects the Icon block label Mar 9, 2026
@t-hamano

t-hamano commented Mar 9, 2026

Copy link
Copy Markdown
Contributor

Thanks for the PR!

Before moving forward with this PR, let's discuss whether the current behavior is truly a bug. See #76288 (comment)

@t-hamano t-hamano added the [Status] Blocked Used to indicate that a current effort isn't able to move forward label Mar 9, 2026
@aaronrobertshaw

Copy link
Copy Markdown
Contributor

+1 to holding off on this PR until the discussion over on #76288 (comment) runs its course.

Especially given that the user still has full control on the width and presentation of the Icon block for the moment. By that I mean, if a user sets a width on a block, then adds too much padding or border width to eat up that space, they can adjust the width to suit.

I suspect the issue is more with the scenario that the user has just accepted the default width and not made an active selection.

@t-hamano

Copy link
Copy Markdown
Contributor

@kannan-ravi, I'd like to close this PR based on #76288 (comment), but thanks for your efforts!

@t-hamano t-hamano closed this Mar 10, 2026
@kannan-ravi
kannan-ravi deleted the fix/icon-svg-sizing branch March 11, 2026 17:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Block] Icon Affects the Icon block First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository [Package] Block library /packages/block-library [Status] Blocked Used to indicate that a current effort isn't able to move forward

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Icon block: Padding applied on SVG is pushing paths out of viewBox, rendering an empty icon

3 participants