SVG Support advanced settings trigger WP error under latest WP ver (PHP 8)

Hi there,

Thanks for your support and using my plugin ??
Also, sorry for the delay in getting back to you!

I have had a few reports of this, and I’m trying to reproduce now with no luck so far.

Can you please try with all other plugins deactivated and revert to default theme just to test and see if it still happens?

I just installed a fresh latest nightly build of WordPress in a PHP8 environment and it all works as expected with no warnings or errors…

I need to figure out how to reproduce this to troubleshoot it.

Thanks. And hopefully I can figure out what is going on.

Sure. I will take a look tomorrow though since I am about to sleep.

Note that I was running Elementor Pro and ACF at the time, on a very minimal setup and with my own theme, locally.

If there was a conflict, it would be maybe with one of those two.

No problem, thanks for this extra info ??
I think I know why now.
Apparently wp_localize_script needs an array as 3rd parameter or to be switched out with wp_add_inline_script. I’m not super familiar with this, so looking into it.
But this message was added in WP 5.7 so it’s likely something that needs to be changed for a future update even though it’s only a warning for now.

Next update of my plugin should address this.

So do you still need more assistance?

Hey @nazrinn
I’m still unable to reproduce the warnings on my test site unfortunately. Though I believe simply turning one of my strings into an array will fix the issue. But I need to be able to get the warning to then see if my fixes will work.

If you had it sorted on your end, and can reproduce the issue, then have it fixed, I could include the code based on your experience.

I have no clue why I can’t see the warnings, it’s really strange.

**I HAVE REPRODUCED THE BUG.**
I stumbled upon it again while doing testing for another thing.

I have seen it happen in the Elementor editor while editing a page template. I have double-checked. I have both Elementor free + Elementor Pro activated and installed (before I had SVG Support activated).

Also note that this is a WordPress Notice, not an actual “error” in the proper sense of the term.

Oh nice! I’ll try with Elementor. I don’t have the pro version, but I’ll see if the free one makes it appear for me.

Yeah, it is just a notice added to WP since 5.7. But I figure it is definitely worth fixing it up prior to it becoming an error. Especially if there’s these cases where the warnings do display!

I believe I know exactly what the issue is, I need to make a strong an array in wp_localize_script. But I can’t test it per se without getting the warnings myself ??

I’ll get there eventually!

Let me know!

For sure, will do.
Hopefully I can get it displaying the warnings, then test this change, then I’ll push the update.

@benbodhi While I know you have the best of intentions, it’s forum policy that you not ask users for admin or server access. Even staging servers.

Users on the forums aren’t your customers, they’re your open source collaborators, and requesting that kind of access can put you and them at high risk.

If they are paying customers (such as people who bought a premium service/product from you) then by all means, direct them to your official customer support system. But in all other cases, you need to help them here on the forums.

Thankfully are other ways to get information you need:

• Ask the user to install the Health Check plugin and get the data that way.
• Ask for a link to the https://pastebin.com/ or https://gist.github.com log of the user’s web server error log.
• Ask the user to create and post a link to their phpinfo(); output.
• Walk the user through enabling WP_DEBUG and how to log that output to a file and how to share that file.
• Walk the user through basic troubleshooting steps such and disabling all other plugins, clear their cache and cookies and try again (the Health Check plugin can do this without impacting any site vistors).
• Ask the user for the step-by-step directions on how they can reproduce the problem.

You get the idea.

We know volunteer support is not easy, and this guideline can feel needlessly restrictive. It’s actually there to protect you as much as end users. Should their site be hacked or have any issues after you accessed it, you could be held legally liable for damages. In addition, it’s difficult for end users to know the difference between helpful developers and people with malicious intentions. Because of that, we rely on plugin developers and long-standing volunteers (like you) to help us and uphold this particular guideline.

When you help users here and in public, you also help the next person with the same problem. They’ll be able to read the debugging and solution and educate themselves. That’s how we get the next generation of developers.

Thanks @jdembowski I totally understand and will stick to this going forward.

This fixed it for me

Change this in the plugin’s enqueue.php line 108

$css_target_array = array(
	'Bodhi' => $css_target,
	'ForceInlineSVG' => 'false'
);

Comment out the following line
wp_localize_script( 'bodhi_svg_inline', 'ForceInlineSVGActive', $force_inline_svg_active );

In svg-inline.js replace first occurrences of

ForceInlineSVGActive === 'true'
with
cssTarget.ForceInlineSVG && cssTarget.ForceInlineSVG !== 'false'

and replace

if ( ForceInlineSVGActive === 'true' ) {
    var target  = ( cssTarget.Bodhi !== 'img.' ? cssTarget.Bodhi : 'img.style-svg' );
} else {
    var target  = ( cssTarget !== 'img.' ? cssTarget : 'img.style-svg' );
}

with

var target = ( cssTarget.Bodhi !== 'img.' ? cssTarget.Bodhi : 'img.style-svg' );

If you are using WP blocks with svg images I recommend also changing the following

var $img = jQuery(this);

to

var $img = jQuery(this).is('figure') ? jQuery(this).find('img:first') : jQuery(this);

and setting “CSS Class to target” in the plugin with style-svg, figure.style-svg

Next be sure to set “Use Expanded JS?” to “Yes” in the plugin settings

Or even better, if you are also using widgets with the widgets classes plugin, change:

var $img = jQuery(this);
to

var $img = jQuery(this).is('img') ? jQuery(this) : jQuery(this).find('img:first');
if (!$img.length) { return }

and set the plugin setting “CSS Class to target” to
style-svg, figure.style-svg, section.style-svg