Kadence Block Plugin Icons not working
The Digital Portfolios Specialist at The SLU Writing Center is working on building out a site for student portfolios at SLU here: https://sludigitalportfolios.commons.gc.cuny.edu/
She is currently using the plugin Kadence blocks to build some of the pages including the workshops page here: https://sludigitalportfolios.commons.gc.cuny.edu/workshops/2021-fall/
On this workshops page, there should be icons for "when" and "where" and the three blocks below this info however, the icons are not displaying on the site (though they can be viewed in the editor when you "attempt to recover the block").
I believe these icons are not displaying due to the HTML filter in place on the Commons because it is a WordPress multi-site with HTML filters in place. See more from the support forums here: https://wordpress.org/support/topic/kadence-blocks-icons-not-working/
At the end of this support forum post the Kadence developers offer a PHP file add-on to allow the icons to display on html-filtered sites. The downloadable file appears to contain a PHP file and txt file. Would it be possible to use this workaround to allow the icons display on the SLU portfolio site?
Or, any other workarounds that you all think would be better are fine too - we are just hoping to allow the icons to display.
Updated by Boone Gorges about 1 year ago
- Category name set to WordPress Plugins
- Target version set to 1.18.19
Hi Laurie - Thank you very much for researching this issue.
We cannot allow the unfiltered-mu plugin, for security reasons.
I've had a look at the Kadence author's custom plugin. I have to say that it's pretty bonkers. First, it adds svg attributes to the allowlist for permitted HTML (this part is not so weird). Then, it uses a hash-based trick to work around WordPress's security filter at the time that content is saved. It's clever, but it defeats the purpose of having these security issues in place. It would be easy for me to write some malicious code that would take advantage of this workaround. So I'm very wary of installing it.
It's certainly none of my business how the Kadence author writes plugins, but it seems to me that this problem could be mitigated by inserting the SVG into the post content via filter/shortcode/JS/render-callback rather than inserting it into the post content. Many WP blocks use custom render callbacks for this very purpose.
I may be able to write a small plugin that uses a content filter to detect the class names (like kt-info-svg-icon-fe_calendar) and then inserts the SVG. I'll take a bit of time in the upcoming weeks to see how labor-intensive it'll be. In the meantime, my only idea for a workaround is to avoid using the icons.
Updated by Laurie Hurson about 1 year ago
- Category name deleted (
- Target version deleted (
Thanks for this insight Boone, super helpful.
Yes, I was worried about the developer plugin too. I understand your concerns with the plugin and it sounds like it can't be used on the Commons.
I wonder if a plugin like Atomic blocks has icons and if switching to this plugin might solve this issue. I think I am meeting with her tomorrow and if she decides to use another plugin, i will report back here so you don't spend too much time looking into another workaround for Kadence.
I have added Scott on this ticket as a watcher in case he knows a bit more about the icon and page building options available through atomic blocks.
Updated by scott voth about 1 year ago
I think as a workaround, the member could install "Font Awesome" plugin, use the column block, and for each column, add a custom HTML block with something like this (picking an appropriate icon from https://fontawesome.com/v5.15/icons?d=gallery&p=2):
<div style="background-color:#f1f1f2;padding:10px;border-radius:30px 30px">
<i class="fas fa-concierge-bell fa-2x"></i>
<p>Every other Friday, Sept. 17, Oct. 1 & 15 <br>12:00 PM – 1:00 PM</p></div>