Wagtail Plugins

Colour Picker

Add the following to requirements/base.txt:

wagtail-color-panel==0.0.0

Wagtail Rich Text (alternative)

Tip

I am not using this, but it seems to work well for adding Tailwind classes to HTML elements.

An alternative Wagtail richtext filter

Add to requirements:

uv add wagtail-f-richtext

Add wagtail_f_richtext to THIRD_PARTY_APPS:

THIRD_PARTY_APPS = (
    # ...
    "wagtail_f_richtext",
)

Add the following to src/settings/base.html`:

# https://github.com/nm-packages/wagtail-f-richtext#example-for-adding-classes-to-html-tags
F_RICHTEXT_FRAMEWORK_CONFIG = {
    # target html tags
    "classes": {
        "b": "bg-gradient-to-tl from-primary-400 to-primary-200 bg-clip-text text-transparent",
    },
}

Update your RichTextBlock so text can only be made bold e.g:

introduction = blocks.RichTextBlock(features=["bold"], required=True)

Add the template tag:

{% load frichtext_tags %}

{{ self.introduction|f_richtext:"framework" }}

Tip

The F_RICHTEXT_FRAMEWORK_CONFIG settings links to framework in the template tag.

The generated HTML is as follows:

<b class="bg-gradient-to-tl from-primary-400 to-primary-200 bg-clip-text text-transparent">
  My text...
</b>