SOLVED: Shortcodes in Rich Text element are rendered with surrounding empty p tags on frontend

Bricks Version: 1.6

Hi,

When I insert a shortcode in a rich text element, it is rendered with empty p tags before and after.

image

2 Likes

I noticed the same thing when using only {post_content} in a rich text field.

Hi Yan,
Thanks so much for your report!

Unfortunately, I cannot reproduce the issue. It might be different, depending on the shortcode :thinking: Do you see a <p> tag when you switch to the text tab? If not, please remove the shortcode from the visual tab and paste it into the text tab and see, if there is any difference.

Best regards,
timmse

Hi @timmse,

After hours tearing my hair, I finally arrived to the same conclusion as @aslotta: post content inclusion is responsible for this issue (I should have started with that!!!).

But this is oh, so strange…

  1. If I include post content either as post content element or dynamic field in a rich text element, it is surrounded with empty p tags.

image

  1. Then, if I add my shortcode in the same text element or a new one, it is surrounded with p tags as well.

image

  1. Finally, problem disappears when I remove the post content.

image

So I think this is the same issue I mentionned here: Rich Text element: Additional empty p tag with ACF wysiwyg field starting with heading

Also note that the issue doesn’t affect shortcode element:

image

And wow, if I edit the post content and remove the guntenberg comments (leading to a classic editor content), post content is still messed up, but the shortcode is OK!!!

image

One thing at a time:

1a) Post Content Element: no empty p-tags for me :x:
CleanShot 2022-12-19 at 19.12.09@2x

1b) { post_content} dynamic data tag inside the rich text element gets wrapped by empty p-tags :white_check_mark: However, this is not two pairs, but merely a p that is placed around the post content. The browser closes it at the top and opens it at the bottom - accordingly, it looks like two, since the h2 or the paragraph in my example are not allowed to be in a paragraph.

2/3) I think that the rich text element makes a blanket/blunt assumption that text is followed by text and not HTML, which probably explains the empty tags around the shortcode. Our devs will probably be able to say more about this. In any case, I have added the empty p-tags from 1b to your existing task. Let’s see if we can do anything about it.

Best regards,
timmse

Hey!

I think you’re right about 1a), I can’t seem to reproduce it any longer…
Maybe I was a bit tired :rofl:

About 2/3, how do you explain that the shortcode alone is OK?

image

Then if I add a post content element, the p tags appear in the rich text element output:

image

Same if I add a {post_content} dynamic field in rich text element:

image

It looks like there’s some kind of weird side effect :wink:

I am also seeing the blank p tags with both the basic text and rich text.

I am using dynamic data from Meta Box WYSIWYG field. Just text is entered

Hi guys,
This was a tricky one since the Rich text content is wrapped in a tag in any case. As far as we can see, however, we have found a solution.

Please try with Bricks 1.7 beta, now available as a manual download in your Bricks account:
https://bricksbuilder.io/account/?v=1.7-beta

Please let us know if you are still experiencing issues.

Best regards,
timmse

Solved with Rich Text - still present with basic text elements.

More infor - WIP: Meta Box WYSIWYG Editor field is added with additional unwanted <p> - #7 by dan

Might this have to do with WordPress’s wpautop() function?

have tried adding this to functions and still getting the same results.

EDIT - this may have solved it. Need to test on a blank install

Yes, but that’s a different bug :wink: WIP: Basic text element adds 2 extra paragraph