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

Aug 17, 2020 · by Tim Kamanin

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

html

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

It's 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 how to do this:

Make sure you've upgraded your project to Wagtail version 2.10+
In the main templates folder of your project, create a wagtailcore/shared/richtext.html file with the following contents:
html
```
{{ html|safe }}
```
That way, you override the default template for RichTextBlock.
Restart the server, and enjoy clean RichTextBlock's output in your Wagtail templates!