[Resolved] Can’t Remove P tags getting automatically created with custom html block

[Priyanka Gupta]

Hi,

I’m using a hook to create custom shortcodes. But the generated html is automatically wrapped inside p tags.

To get rid of the p tags, I’m using the following code,

remove_filter(‘the_content’, ‘wpautop’);
remove_filter(‘the_excerpt’, ‘wpautop’);

This function is only working for post content not for footer and sidebar widgets.

P tags are also getting generated for Block Elements with html block. I also want to remove those p tags from there.

Please let me know.

Thanks for your help,
Priyanka

[Elvin]

Hi Priyanka,

Are the contents you’re pertaining to added through Block(Gutenberg) Editor?

If yes, wpautop won’t work as the default text box for writing contents in the editor are Paragraph blocks which are <p> tags.

Custom shortcodes being wrapped in <p> is unusual though. Can you let us check the site’s frontend and admin dashboard to investigate a bit?

You can use the private information text field to provide the details. 🙂

[Priyanka Gupta]

Hi Elvin,

Thanks.

1. I’m using Gutenberg. That paragraph block thing you said makes sense. Then what do you say is the right way to escape paragraph tags in Gutenberg blocks generated through hooks?

2. Providing you the login details.

[Priyanka Gupta]

Hi,

Any help would be appreciated here. Thanks.

[Elvin]

For #1:
It’s not doable w/ the text content as that’s the default wrapper automatically created for text strings.

If you wish to avoid Paragraph blocks you can do some kind of a workaround by writing your content within a Custom HTML block. This block will not create a <p> block. It directly outputs what is written inside it. But I imagine this can be tedious.

For #2:
Can you provide the login URL as well? (incase it was changed)

[Priyanka Gupta]

I’ve added the login URL in the private section

[Priyanka Gupta]

I have created shortcodes like this –

add_shortcode('my-shortcode', function() {
    ob_start();
    echo '<div>Some html here</div><div>Some more html here</div>';
    return ob_get_clean();
});

I’m using this shortcode at various places, in my posts content, footer widgets, sidebar widgets etc. as a Gutenberg short code block.

[my-shortcode]

It’s working fine inside the post content (not wrapping the div tag within p tags, but not for widgets inside sidebar and footer. Those are being wrapped in p tags. How do I fix this problem?

[Elvin]

Since the account isn’t an admin account, we’re unable to investigate the backend. But I assume that I won’t have to if the Custom HTML workaround suffices?

P tags are also getting generated for Block Elements with html block. I also want to remove those p tags from there.

I see that you’ve mentioned this but I can’t verify if this is a fact or something was missed. I can confirm that this isn’t WordPress default behavior for Custom HTML block. You can check my demo here – https://dev-generate-press.pantheonsite.io/custom-html-block-test/ – the This is a Custom HTML Block. Inspect this element. text on the page is added through a Custom HTML block and you’ll see if you inspect that it’s not wrapped in <p>.

It’s working fine inside the post content (not wrapping the div tag within p tags, but not for widgets inside sidebar and footer. Those are being wrapped in p tags. How do I fix this problem?

Sidebar widgets also use Block editor to text content added to it will be added though the default Paragraph block. The workaround Custom HTML block is applicable to this as well if you wish to bypass Paragraph block.

[Priyanka Gupta]

Please try logging into the account again, it should work now.

I’m not sure I understand. Can I render custom shortcodes inside of an html block? Wouldn’t it be better to use the shortcode block itself?

[Elvin]

Ah I see what you mean. It’s an old WordPress issue. It’s replicable.

But yes the Custom HTML workaround works on shortcodes as well. Here’s a demo screenshot – https://share.getcloudapp.com/4guPoQ4N

[Priyanka Gupta]

Thanks Elvin, this workaround works. It just seems strange though that wordpress forces you to put a shortcode inside a html block to avoid paragraph tags wrapping on the generated output. I do have a couple of concerns regarding this –

1. If I go to my widgets section and change all these blocks in the sidebar/footer etc from a shortcode block to an html block, it works fine, but when I come back to the widgets page or simply refresh the page, all the shortcodes inside the gutenberg block editor render with a wrapping p tag (Please check the widgets section on the admin dashboard) but on the frontend it still renders fine, which is confusing.

2. Is my approach to create shortcodes even correct? I’m new to wordpress, and from what I understand you can create a execute php functions either by placing them in your theme’s functions.php file, or by creating a custom plugin. However, since GeneratePress had the option to create custom hooks and allow php execution, I decided to use this approach instead. I’ve selected the wp_head hook. Do let me know if this wasn’t the right way to create these shortcodes, or for that matter execute any other php function.

[Elvin]

For #1:

Another WordPress issue.

Try wrapping the shortcodes with <div>

For #2:

It’s fine. But if you don’t plan on having to do dynamic text values then I think having shortcodes to display text is unnecessary. 🙂 You may be better of just typing things in Custom HTML block.

[Priyanka Gupta]

Hi Elvin,

1. Wrapping in div tags worked.

2. I see your point. I know these shortcodes don’t take any attributes for dynamic behavior right now, but the reason I decided to make it a shortcode was to allow re-using the same html snippets everywhere, in the posts/pages/widgets etc. I didn’t want to create copies of the same custom html block everywhere, that would make it difficult to update anything it in the future.

Thanks for all the support!

[Elvin]

for 2#)

If you’ll only use this on areas that use Block editor, consider making Reusable blocks instead.
https://wordpress.com/support/wordpress-editor/blocks/reusable-block/

But I see how this make senses considering the context of how your site is structured as you may have to use this on parts that use both Classic and Block editor. (Reusable blocks are strictly block editor)

No problem. 😀

[Priyanka Gupta]

Yep, you’re right. I still have multiple posts and pages built on the old classic editor, so I cannot use the reusable block feature everywhere even though technically that would have been better. Creating a shortcode seemed like the next best thing, and it also has the flexibility to allow making the output dynamic in the future with minimal effort.

[Author]

Posts