shortcode causes broken paragraphs

I’m learning how to use short codes but I don’t undrestand why WordPress keeps rendering broken paragraph tags.

I created a file called wp-content/themes/twentytwentythree/templates/single.html with the following content:

<main class="wp-block-group" style="margin-top:var(--wp--preset--spacing--50)">
<!-- wp:shortcode -->
[wl_event_head]

<!-- /wp:shortcode --> </main>

I then made a file called wp-content/plugins/wl/wl.php with the following contents:

/*
 * Plugin Name: Hello
 * Description: World
 */

function wl_event_head($att) {
  return '<section>
  <div>
    <h1>Hello WP</h1>
  </div>
</section>';
}

add_shortcode('wl_event_head', 'wl_event_head');

When I go to my webpage in firefox and look View Source, I see this:

<main class="wp-block-group" style="margin-top:var(--wp--preset--spacing--50)">
<section>
<div>
<h1>Hello WP</h1>
</p></div>
</section>

</main>

Why is there a closing p tag? I noticed that if I delete some spaces in my return string for function wl_event_head($att), then sometimes maybe the closing p tag goes away.

What am I doing wrong?

Note: I tried putting this code in my wp-content/themes/twentytwentythree/functions.php

remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );

It did not fix the problem.

• This topic was modified 2 years, 9 months ago by learningtechthings.