Short code introduces closing paragraph tags

[johnlai2004]

Description

Short codes print broken paragraph tags in the final output of block themes. Others have confirmed this issue in this thread here:

https://wordpress.org/support/topic/shortcode-causes-broken-paragraphs/

Step-by-step reproduction instructions

Paste this code into wp-content/themes/twentytwentythree/templates/single.html

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

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

Paste this code into wp-content/plugins/wl/wl.php

/*
 * 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');

Turn on the Hello plugin and activate the TT3 theme.

Go to a web browser and view source.

Notice the resulting html:

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

</main>

Notice there is a </p> even though no where in our above code did we specify a p tag.

DESIRED RESULT: I do no want automatic injections of </p> into the output of the shortcode.

OTHER NOTES: This issue does not happen with classic themes

Screenshots, screen recording, code snippet

No response

Environment info

Wordpress 6.3.1 TwentyTwentyThree theme Ubuntu 22.04, Apache, PHP 8.1, MySQL 8 FireFox on Windows 10

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[johnlai2004]

I worked around my problem by minifying my html in my plugin. So I made a function called wl_minify_html(String $htmlString) (which I found on stack overflow answer somewhere). Here's what my plugin looks like now:

<?php
/*
 * Plugin Name: Hello
 * Description: World
 */

function wl_minify_html($htmlString) {

    $search = array(
        '/\>(\s)+\</s',     // strip white space between tags
        '/\>[^\S ]+/s',     // strip whitespaces after tags, except space
        '/[^\S ]+\</s',     // strip whitespaces before tags, except space
        '/(\s)+/s',         // shorten multiple whitespace sequences
        '/<!--(.|\s)*?-->/' // Remove HTML comments
    );

    $replace = array(
        '><',
        '>',
        '<',
        '\\1',
        ''
    );

    $buffer = preg_replace($search, $replace, $htmlString);

    return $buffer;
}

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

[DAreRodz]

Hey, @johnlai2004 👋 I'm able to reproduce the issue. The cause seems to be that the Shortcode block is calling wpautop() to process the content you're yielding from wl_event_head().

https://github.com/WordPress/gutenberg/blob/62953f6e1b047a75c21eba748d01e39521302899/packages/block-library/src/shortcode/index.php#L16-L18

Not sure if that's the expected behavior for block themes (I guess not). I'm wondering if it would've been better to add a render_block_core/shortcode filter to make it possible to remove the wpautop call if needed. 🤔 In any case, another alternative to your workaround would be to write your HTML code without any line breaks in between.

PS: pinging @danielbachhuber as he developed the PHP code for the Shortcode block in https://github.com/WordPress/gutenberg/pull/8077. 🙂

[chairmanbrando]

There exists a function since WP v2.9 meant to deal with this: shortcode_unautop. Maybe it ought to be involved. 🙃