Wagatil multi styled paragraph

Question

What is the preferred way to achieve a multi style text paragraph (without a fixed structure)?

I was thinking about extending the RichTextField with a b and c classes?

p {
  font-size: 20px;
}

.a {
  font-size: 200%;
  color: red;
  font-wight: bold;
}

.b {
  font-size: 80%;
  color: blue;
}

.c {
  font-size: 140%;
  color: green
}

<p>
  <span class="a">Multi</span>style
  <span class="b">Site</span>
  <span class="c">claim</span>
  are terrible, but necessary.
</p>

You can create a Paragraph StuctBlock and use it in a streamfield. Someting like: https://github.com/wagtail/bakerydemo/blob/master/bakerydemo/base/blocks.py#L22 — allcaps, Feb 22 '18 at 12:26
Ok, thanks. So IIUC, I have to create 3 blocks to make `a` `b` and `c` styles, and then a paragraph block which can accept an arbitrary number of `a` `b` and `c`. — carloratm, Feb 23 '18 at 08:45
Sorry, you want classes on span. I didn't read correctly, i thought you needed custom classes on the paragraph itself. Don't know how to do that. — allcaps, Feb 23 '18 at 12:50
Wagtail 2 comes with Draftail richtext editor. It lets you extend the editor and add inline styles. See: http://docs.wagtail.io/en/latest/advanced_topics/customisation/extending_draftail.html — allcaps, Mar 04 '18 at 21:36
I am almost there, thank you! Inline styles are nice, but generally I prefer to separate styles from the python code, so adding a class instead of inline styles would be awesome! — carloratm, Mar 09 '18 at 07:51

score 0 · Answer 1 · answered Feb 04 '19 at 02:50

I believe you are looking for a StructBlock. However, I would make sure to ask: what are you using these different colored text fields for? Wagtail might already have a predefined field for your use case, such as a BlockQuoteBlock. If not, you can make your own block.

In your app model, you would add a block class that looks something like this:

class ParagraphBlock(blocks.StructBlock):
    red_paragraph = blocks.TextBlock(required=False)
    blue_paragraph = blocks.TextBlock(required=False)
    green_paragraph = blocks.TextBlock(required=False)

    class Meta:
       icon = 'text'
       # if desired, you can add a block template
       # template = 'paragraph_block.html'

If you need more customization, you can also create a custom template for the block.

See also the answer to this question, which is similar to what you are looking for.

Wagatil multi styled paragraph

1 Answers1