3
votes
Advanced Heading Inline icon
Right now we can include an SVG icon after or before an advanced heading text. I would be great if we could also add icons inline the heading block. For example: “I would like this sentence to have an [icon] and a [icon] to be able to decorate my headings” instead of only being able to put it before or after the heading.
Solved Another Way
Joost Adams shared this idea
Joost Adams shared this idea
One Comment
Leave a Reply
You must be logged in to post a comment.
Thanks for the request!
The way that the rich text block works in Gutenberg you can add an inline image (which can be an svg) but regardless it doesn’t give you much control because it’s a inline element instead of a block item and an image instead of an inline svg. This means color can’t be changed etc.
We will probably not support this in the near term because of technical reasons. Here is why:
Our icons are inline svgs and the core WP team has firmly decided not to support inline svg in the post content, if you are an author role or on a multisite those get striped from the post content. This means we have to have our icons save as something other then an inline SVG which we can do when we control the content but we don’t control the content inside of a rich text area, that is user controlled content. We made a large switch in blocks 3.0 to make it so none of our icons are part of the “post content” but instead are rendered dynamically so there wouldn’t be any issues with svg content being striped from the post content.
All that to say our icons are not like an icon font where all the icons are loaded on every page and they allow for accessible features like labeling the icons. This however makes it technically very difficult to support inside of a rich text input like the Advanced text block. That is why the option is to place it before or after the rich text content of the block.
Workaround Options:
1. You can use a section block, set to align horizontally and then add a series of blocks like the advanced text block and then an icon block and then another advanced text block.
2. You can use this plugin: https://wordpress.org/plugins/jvm-rich-text-icons/ (it uses the icon font method but if you set the icon set to custom and only load what you need it’s a very good option).
I hope that helps!