Project

General

Profile

Actions

Support #14767

closed

Kadence Block Plugin Icons not working

Added by Laurie Hurson about 1 year ago. Updated 5 months ago.

Status:
Resolved
Priority name:
Normal
Assignee:
-
Category name:
WordPress Plugins
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

Actions #1

Updated by Laurie Hurson about 1 year ago

  • Tracker changed from Feature to Support
Actions #2

Updated by Laurie Hurson about 1 year ago

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

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.

Actions #4

Updated by Laurie Hurson about 1 year 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.

Actions #5

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">
<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>

Actions #6

Updated by Laurie Hurson about 1 year ago

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

Actions #7

Updated by Boone Gorges 5 months ago

  • Category name set to WordPress Plugins
  • Status changed from New to Resolved
  • Target version set to Not tracked

I'm going to close this as resolved, based on Scott's workaround. Thanks!

Actions

Also available in: Atom PDF