Project

General

Profile

Support #14767

Kadence Block Plugin Icons not working

Added by Laurie Hurson about 1 month ago. Updated 29 days ago.

Status:
New
Priority name:
Normal
Assignee:
-
Category name:
-
Target version:
-
Start date:
2021-09-13
Due date:
% Done:

0%

Estimated time:

Description

Hi All,

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.

Thanks!
Laurie

History

#1 Updated by Laurie Hurson about 1 month ago

  • Tracker changed from Feature to Support

#2 Updated by Laurie Hurson about 1 month ago

  • Subject changed from Kadence Bloack Plugin Icons not working to Kadence Block Plugin Icons not working

#3 Updated by Boone Gorges about 1 month 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.

#4 Updated by Laurie Hurson about 1 month ago

  • Category name deleted (WordPress Plugins)
  • Target version deleted (1.18.19)

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.

#5 Updated by scott voth about 1 month 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">
<div style="text-align:center">
<i class="fas fa-concierge-bell fa-2x"></i>
</div>
<div style="text-align:center">
<h3 style="color:red">WHEN</h3>
<p>Every other Friday, Sept. 17, Oct. 1 & 15 <br>12:00 PM – 1:00 PM</p></div>
</div>

#6 Updated by Laurie Hurson 29 days ago

Thanks for this Scott! Will pass the workaround idea on to the user.

Also available in: Atom PDF