[wp-trac] [WordPress Trac] #65038: Shortcode block adds empty <p> tags around block output in widget/footer areas

[WordPress Trac]

#65038: Shortcode block adds empty <p> tags around block output in widget/footer
areas
-----------------------------+------------------------------
 Reporter:  frauinga         |       Owner:  (none)
     Type:  defect (bug)     |      Status:  new
 Priority:  normal           |   Milestone:  Awaiting Review
Component:  General          |     Version:  6.9.4
 Severity:  normal           |  Resolution:
 Keywords:  has-screenshots  |     Focuses:
-----------------------------+------------------------------
Description changed by sabernhardt:

Old description:

> In WordPress 6.9.4, using a Blocksy child theme, I’m seeing empty <p>
> tags around the output of shortcodes when they are placed in a Shortcode
> block or widget block inside the footer.
>
> The shortcode returns valid block‑level HTML (e.g. <ul class="widget-
> terminliste"> ... </ul>), but in the frontend it is rendered as:
>
> <div class="widget_block">
>     <p><ul class="widget-name"> ... </ul></p>
> </div>
>
> This results in invalid HTML, since a <ul> must not be a direct child of
> <p>. The browser repairs this by creating an empty <p> element, which
> shows up in the DOM inspector as <p></p> and causes unnecessary vertical
> spacing, especially in the footer where layout is tight.
>
> **Steps to reproduce**
>
> 1. WordPress 6.9.4 with the Blocksy theme and a child theme based on it.
> 2. Add a Shortcode block (or “Shortcode” widget) in the footer widget
> area (or any footer block region).
> 3. Insert a shortcode that returns block‑level HTML, e.g. <ul>, <div>, or
> similar.
> 4. View the page in the browser and inspect the HTML.
>     You will see something like <p><ul> ... </ul></p> and, in the DOM
> tree, an empty <p>.
>
> **Expected behavior**
>
> - The shortcode output should be rendered without extra <p> tags around
> it.
> - The HTML should be valid (e.g. <ul> not inside <p>).
> - No empty <p> elements should appear in the DOM.
>
> **Actual behavior**
> - WordPress wraps the shortcode output in a <p> in the widget/footer
> context.
> - This leads to invalid HTML and an empty <p> in the DOM, causing layout
> issues.
>
> **Environment**
>
> - WordPress version: 6.9.4
> - Theme: Blocksy
> - Child theme: yes
> - Context: footer widget / shortcode block
>
> **Notes**
>
> - The same behavior occurs with different shortcodes, including Blocksy’s
> own example shortcodes, so it does not seem to be related to a specific
> theme function.
> - A CSS workaround (hiding p:empty or p containing .widget-terminliste)
> is possible, but the root cause lies in shortcode/block rendering in
> widget/footer contexts and should be handled in core or Gutenberg.
> - The site is still under construction

New description:

 In WordPress 6.9.4, using a Blocksy child theme, I’m seeing empty `<p>`
 tags around the output of shortcodes when they are placed in a Shortcode
 block or widget block inside the footer.

 The shortcode returns valid block‑level HTML (e.g. `<ul class="widget-
 terminliste"> ... </ul>`), but in the frontend it is rendered as:
 {{{
 <div class="widget_block">
     <p><ul class="widget-name"> ... </ul></p>
 </div>
 }}}

 This results in invalid HTML, since a `<ul>` must not be a direct child of
 <p>. The browser repairs this by creating an empty `<p>` element, which
 shows up in the DOM inspector as `<p></p>` and causes unnecessary vertical
 spacing, especially in the footer where layout is tight.

 **Steps to reproduce**

 1. WordPress 6.9.4 with the Blocksy theme and a child theme based on it.
 2. Add a Shortcode block (or “Shortcode” widget) in the footer widget area
 (or any footer block region).
 3. Insert a shortcode that returns block‑level HTML, e.g. `<ul>`, `<div>`,
 or similar.
 4. View the page in the browser and inspect the HTML. \\
    You will see something like `<p><ul> ... </ul></p>` and, in the DOM
 tree, an empty `<p>`.

 **Expected behavior**

 - The shortcode output should be rendered without extra `<p>` tags around
 it.
 - The HTML should be valid (e.g. `<ul>` not inside `<p>`).
 - No empty `<p>` elements should appear in the DOM.

 **Actual behavior**
 - WordPress wraps the shortcode output in a `<p>` in the widget/footer
 context.
 - This leads to invalid HTML and an empty `<p>` in the DOM, causing layout
 issues.

 **Environment**

 - WordPress version: 6.9.4
 - Theme: Blocksy
 - Child theme: yes
 - Context: footer widget / shortcode block

 **Notes**

 - The same behavior occurs with different shortcodes, including Blocksy’s
 own example shortcodes, so it does not seem to be related to a specific
 theme function.
 - A CSS workaround (hiding `p:empty` or `p` containing `.widget-
 terminliste`) is possible, but the root cause lies in shortcode/block
 rendering in widget/footer contexts and should be handled in core or
 Gutenberg.
 - The site is still under construction

--

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/65038#comment:1>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform