Mixin nested in paragraph

Question

I am currently trying to bring a figure into a block of text, however I run into the following issue:

mixin figure
  figure(style="float:right" width="50%")
    img(src="image.jpeg" alt="Alttext")
    figcaption Caption

block content
  div(class="content-width")
    h1 Heading
    p.
      #[+figure]
      Lorem ipsum dolor sit amet, 

evaluates to

<div class="content-width">
<h1>Heading</h1>
<p></p>
<figure>[...]</figure>
Lorem ipsum dolor sit amet,

I would have expected to get the following result:

<div class="content-width">
<h1>Heading</h1>
<p>
<figure>[...]</figure>
Lorem ipsum dolor sit amet,
</p>

Is this behavior correct and I'm using Pug wrong? Or have I stumbled into a bug?

Answer 1

Edit:

Figure elements are block-level elements, and are not permitted to be children of paragraph elements in HTML. The output you're seeing is likely the browser trying to correct the invalid HTML by closing the unclosed paragraph tag as soon as it encounters the figure element.

---

Previous Answer:

The #[] syntax is strictly for tag interpolation, not for mixins.

Instead, use the dot block syntax after the mixin, like this—

block content
  div(class="content-width")
    h1 Heading
    p
      +figure
      .
        Lorem ipsum dolor sit amet, 

—or use the piped text syntax, like this:

block content
  div(class="content-width")
    h1 Heading
    p
      +figure
      | Lorem ipsum dolor sit amet,