How to remove 'rich-text' div from RichTextBlock template output in Wagtail CMS
Aug 17, 2020 · by Tim KamaninWhen 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:
<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 awagtailcore/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!