empty paragraph in richtext renders as 0px height content on page

It looks like the template for paragraphs in the richtextfield render as <p></p> rather than as <p>&nbsp;</p>, which makes the empty paragraph show up in the richtextfield in the admin, but does not get reflected in the page content, as <p></p> is considered a kind of “non-content” by the DOM, and is rendered as if it’s not even there. The template for this block probably needs a fix that injects   if the block’s value is empty.

[thibaudcolas]

My idea is to allow control over this with CSS, and an :empty selector. Would that work for you, eg. setting a height for those blocks? This way your writers would get what they expect.

Of course having some control over the HTML itself would be even better, but we’re not there yet.

[Pomax]

Note that <br> isn’t any better than just leaving the <p></p>, as the br element is intended for introducing a line break inside of text content, rather than being used between paragraph elements. Leaving the empty paragraph is actually semantically preferred, and then folks can still make it look however they want by adding custom CSS for .richtext p:empty.

But, it would be even better if there was a post-processing step that added a class that effects extra spacing below the preceding paragraph while removing the <p></p> altogether, so that:

<p>p with no content</p>
<p></p>
<p>p with nbsp:</p>

becomes something like:

<p class="gap-after">p with no content</p>
<p>p with nbsp:</p>

With default styling along the lines of:

.root {
  /* ... */
  --paragraph-margin-top: ...;
  --paragraph-margin-bottom: ...;
  /* ... */
}

...

.richtext p.gap-after {
  --t: var(--paragraph-margin-top);
  --b: var(--paragraph-margin-bottom);
  margin-bottom: calc(var(--t) + 2 * var(--b));
}

Essentially making sure that the paragraph uses the bottom margin it’s supposed to plus an extra paragraph worth or top and bottom margin.