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

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

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

This is not the end of the world, but it would be nice not to have this wrapper around each paragraph of the text, at least for the sake of document semantics.

Now the bad and good news:

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

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

Here's the fix:

Step 1

Make sure you've upgraded your project to Wagtail version 2.10+

Step 2

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

{{ html|safe }}

This way, you override the default template for RichTextBlock.

Step 3

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