Hi @dumel
Can you share a link to a page or post where this is occurring so that we can analyse it and advise on what to do to prevent this? Thanks.
Regards,
Elvis
Thread Starter
Dumel
(@dumel)
Hi Elvis
I’m now using the Elementor Pro Tabs widget (that comes standard with Elementor Pro) to display a dynamic ACF field. In this rich text ACF field I added text and a FooGallery shortcode. Everything works except that some raw CSS styles are visible:
https://pemburytours.com/tour/11-day-east-africa-adventure/
This page is not meant to be public yet so I hope that your next response doesn’t also take so long because I don’t really want Google to index it yet 🙂
Hi @dumel
I had a look and it looks like the widget is stripping the style tags from our gallery output which results in the CSS code showing. I am not sure why that is happening.
I tested the tabs built into Elementor, and it showed the gallery without this problem, so I think it has something to do with the way you have setup ACF with the shortcode.
Please can you explain your config setup with ACF in more detail, so I can reproduce the issue on my end, and ultimately find a solution for you?
@dumel just an update on my testing…
I setup ACF with a page field called FooGallery, and then I edited my page with the tabs and set that value to a justified gallery I had already created. I then added a text editor to the tab content with a dynamic field and set it to my foogallery ACF field.
Then for the dynamic field under advanced, I set Before to [foogallery id="
Then I set After to "]
And it showed the dynamic gallery without any issues. So my next guess as to why it’s a problem on your side is a plugin that is doing some form of minification or caching when it comes to the inline styles. To test this theory, disable CSS minification in your caching/speed plugin and see if you still have the problem
Thread Starter
Dumel
(@dumel)
@bradvin. Thank you for the quick reply.
If I change the ACF field to text or textarea with [foogallery id=” before and “] after, then my gallery also works. Even if I use the full shortcode eg [foogallery id=”28353”], the gallery still works. It also works if I add text before and after the full shortcode.
The problem comes in where I change the ACF field to WYSIWYG so that I can format my text. The problem is that I need to have text and galleries intermingled, and the text need to be formatted into level headings etc. so the ACF field needs to be WYSIWYG.
My caching plugin is not minifying.
Thread Starter
Dumel
(@dumel)
@bradvin Just wondering if you’ve had a chance to look at this again? I’m quite anxious to go live with new page layouts 🙂
hi @dumel
I dug into the elementor code to see how it was handling ACF wysiwyg fields. Elementor calls
echo wp_kses_post( $value );
For the ACF wysiwyg field, which strips the style tags that we generate for a gallery. To get around this, the fix is quite elegant. All you need to do is override the built in allowed_html tags that wp_kses_post uses and then the tag is no longer stripped. You will need to add this custom code to your functions.php or code snippet or similar:
/**
* Overrides the allowed html tags used for wp_kses_post.
*/
add_filter( 'wp_kses_allowed_html', function( $tags, $context ) {
if ( 'post' === $context ) {
$tags['style'] = true;
}
return $tags;
}, 99, 2 );
I have tested this locally and it no longer strips the tag, so you no longer see the CSS output on the page.
I also want to point out that this is not a bug with FooGallery. This is not even a bug in Elementor or ACF – they are doing what they should be doing. This was an unfortunate outcome from plugins trying to do the right thing (strip unwanted HTML from the output) and the gallery output (which includes style tags) was being caught in the middle.
Thread Starter
Dumel
(@dumel)
@bradvin – This is such a relief, thank you very much for finding a solution. Your code didn’t work for me but put me on the right track and this did the trick for me:
add_filter( 'wp_kses_allowed_html', function( $tags, $context ) {
$tags['style'] = true;
return $tags;
}, 99, 2 );
