How to remove 'rich-text' div from RichTextBlock template output in Wagtail CMS

When Wagtail renders RichTextBlock in a template, it by default wraps the contents of the block with the <div class="rich-text">. The resulting markup may look like this:

<div class="rich-text">
  <p>I'm a paragraph that's cold, so I'm wrapped up</p>
</div>

It's not the end of the world, but it would be nice not to have that wrapper around every paragraph, at least for the semantics of the document.

Now the bad news and the good news:

The bad news is that before Wagtail 2.10, getting rid of this wrapper was not easy. You had to hack in a few places, and it felt dirty.

The good news is that Wagtail 2.10 is finally out, and now we can remove the wrapper <div class="rich-text"> from the RichTextBlock template.

Here's how to do it:

Step 1

Make sure you've updated your project to Wagtail 2.10+.

Step 2

In the main templates folder of your project, create a file wagtailcore/shared/richtext.html with the following content:

{{ html|safe }}

This way, you will override the default template for RichTextBlock.

Step 3

Restart the server, and enjoy the clean output of RichTextBlock's in your Wagtail templates!