Show other widgets outputs in the page editing block area

Hi @vsalvans

Is this happening with multiple plugins or just one?

It happens with multiple plugins that somehow add content at the bottom of the page.

For instance if the WPML language switcher is configured to be at the bottom of the page like “english spanish french” those links appear also right after the metaslider preview in the block editing area.

I use Woocommerce plugin and Storefront theme if this info helps.

Where exactly does this show? It’s not very clear from your screenshot.

Does everything work correctly on the preview from the slideshow settings page?

The metaslider works fine on the website, but if you edit the page where the slider is at, the slider preview “iframe” loads (wp loading icon appears) and then it shows the slider properly but in the same “iframe”, right after the slider other plugin content appear.

In the screenshot example is the content of the EU Cookie Consent plugin that it appears at the bottom of all pages of the entire site. The same content appears when editing a page in every single block (wordpress visual editor) that contains a metaslider widget.

When I enter to edit the page where slider is and it’s still loading
https://ibb.co/q0G8YPy

When it loads and shows the slider preview
https://ibb.co/Yj3MkPy

Okay I see now, can you link to two plugins that cause the issue? The EU cookie consent plugin and one other? As far as I know plugins shouldn’t be loading content there but if I can reproduce it I can take a look if there’s an obvious fix. Thanks

Sure!

The EU Cookie consent link is : https://es.www.ads-software.com/plugins/cookie-law-info/

The other plugin is actually a custom code that injects a script from a function that is hooked like this:

function custom_plugin_hook_javascript_footer() {
  ?> ... some script to add the zendesk widget .. <?php
}

add_action('wp_footer', 'custom_plugin_hook_javascript_footer');

I guess the first plugin is doing something similar as it place content after the “footer” tag.

I hope all your scripts you need don’t need that hook or action.

Thanks

• This reply was modified 5 years, 6 months ago by vsalvans.
• This reply was modified 5 years, 6 months ago by vsalvans.

Hi @vsalvans

We use wp_footer() in the preview so we can load in all our scripts properly. I feel like a plugin should be adding a class to the body, then loading a script if the class is present, but that might not be ideal.

I’ll have to look into this more but there might not be a good solution other than providing a workaround.

We have a filter there so you can add some additional CSS. Could you hide the elements?

add_filter('metaslider_preview_styles', function($css) {
  // add the css to the end of $css
  return $css;
});

This will only load in the context of a preview.

It worked!

This the code I used:

add_filter('metaslider_preview_styles', function($styles) {
	ob_start();
		?>
		#cookie-law-info-bar,
		#cookie-law-info-again,
		.cli-modal,
		.zopim {
			display:none!important;
		}
	<?php
	return ob_get_clean();
});

Thank you very much for your help! I’ve already “five-rated” it ??

Hi @vsalvans

Thanks for the review ??

Does this code still work in the MetaSlider preview area? I feel like you will need to also return what’s in $string.

I’ll mark this as resolved for now but feel free to reply.

Hi @kbat82,

Yeah it works fine in the preview.

The custom CSS is returned by the ob_get_clean() call I make inside the function, rather that assign a normal string to a variable and return it, because for me, is more clear to see the CSS as I posted i the previous comment.

Thanks!