New Block: Icon Block #71227
Open
New Block: Icon Block #71227
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ryanwelcher
added
New Block
Contributor
Author
|
The PR is very much a draft that is essentially the source code from @ndiego plugin with changes to work as a core block, pass linting, and display the icons mentioned here. |
Member
|
Thanks for doing the heavy lifting here @ryanwelcher. Excited to see this come to Gutenberg |
|
Great work, @ryanwelcher and @ndiego! Excited to dig into this. Happy to provide any resources, guidance, or context I can to help get this across the finish line. |
ryanwelcher
removed
[Type] Enhancement
… block implementation.
Contributor
Author
|
One thing that I have been thinking about how to handle SVG uploads. To be clear, I don't think we should enable SVG uploads in core - that's another conversation entirely and beyond the scope of this work. That being said, the existing code from the Icon Block plugin does a mime type check to see if SVG uploads have been enabled and provides the UI to upload them. IMO, this is a big win for extenders and I would love to see it stay in the block. |
|
Size Change: +31.9 kB (+1.57%) Total Size: 2.07 MB
ℹ️ View Unchanged
|
Contributor
Author
|
@t-hamano thanks for sharing those, in addition we're blocked by the lack of block supports for Width and Height controls. I'm working on this today and will focus on addressing the feedback from you and others on this PR and then trying to move these forward: |
Co-authored-by: Aki Hamano <[email protected]>
Co-authored-by: Aki Hamano <[email protected]>
Co-authored-by: Aki Hamano <[email protected]>
Co-authored-by: Aki Hamano <[email protected]>
…ex.js Co-authored-by: Aki Hamano <[email protected]>
…ex.js Co-authored-by: Aki Hamano <[email protected]>
…rg into feature/add-icon-block
…as causing inserter to crash.
Contributor
Adding width/height block support seems like it would require more discussion on the spec and UI. Personally, I think it's fine to add a width attribute to this icon for now. Furthermore, I'm not sure if the icon height needs to be resizable; I don't think many users would want a different icon aspect ratio. However, I think the implementation should wrap the icon in the |
Contributor
|
I'd also think a "size" value rather than different width/height properties may be better. That way you don't have to worry about the viewbox. |
|
Hi @ryanwelcher I would really appreciate it if you could share some insight on the same! 🙇🏻♀️ CC @t-hamano |
Contributor
|
To be honest, I feel like this PR isn't quite ready to ship in 6.9.
I very much appreciate the discussion and work that has been done here, but personally, I would prefer to ship a stable and robust icon registration API and Icon block for 7.0. Please let me know your honest opinions. Pinging 6.9 tech leads for visibility. @dream-encode @ellatrix @priethor |
Contributor
Author
|
I tend to agree with @t-hamano, I don't think this is ready for 6.9. |
Contributor
|
Let's punt this PR to 7.0. Perhaps it would be better to continue developing this block as an experimental block. gutenberg/packages/block-library/src/index.js Lines 261 to 264 in 1e155a5 |
t-hamano
moved this from 🔎 Needs Review
to 🦵 Punted to 7.0
in WordPress 6.9 Editor Tasks
Contributor
|
Catching up here, thanks for working on this one, it's a big one. It's on my mind that in addition to the ability to add icons, I wonder how we can maximize the utility of this block. I.e. I'd like to be able to use this for customizing the navigation block burger and close icons. I'd like to add next/prev icons to the next/prev blocks. I'd like to add an icon inside a navigation item, or a Button block. I'd like to use the icon block to add one for the "Home" link in navigation (i.e. #31688). I can do that using unicode glyphs. Can I/should I be able to do that with this icon block? I tried to test out the branch but couldn't compile it, so this may already be thought of, but it seems pertinent to address. Notably, we have an inline image block; it's not super discoverable, but it could be an angle. |
Contributor
@jasmussen, I believe this will be possible once the foundation for the SVG icon registration API is implemented. See the "Feature Plans" section in the description of #72215. Maybe a generic component like an icon picker might also be useful at some point. |
Member
We've build an icon picker component based on all the @wordpress/component work in our 10up/block-components package. https://github.com/10up/block-components/tree/develop/components/icon-picker Happy to share any learnings etc from there and or even contribute the code we have :) (We also have an icon registration API etc. in there) |
This was referenced Nov 5, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Closes #16484
This pull request adds a an icon block based on @ndiego Icon Block.
To be completed:
html-react-parserlibrary. Is this something we want to add to the project?