foundation.mozilla.org: Add more styling options to `Callout` block

Description

Currently the Callout block only allows for bold text but more styling options would be helpful.

At the very least, it would be the best to add:

  • Bullet list
  • Links

Nice to have would be:

  • Different heading styles

Screen cap of Callout block: Screenshot 2023-01-18 at 4 32 54 PM

Screenshot 2023-01-18 at 4 33 20 PM

@nancyt1 can you please review this, is this what is needed for the ADG playbook?

Before adding ACs, I would like input from a dev on what styling options make sense to add from their perspective.

Acceptance criteria

  • As an editor, I can add italic text to the callout block richtext
  • As an editor, I can add links to the callout block richtext (using Wagtails link functionality similar to what is in Paragraph links - Internal link using page chooser, external link, Email link, Phone link, and Anchor link)
  • As an editor, I can add numbered lists to the callout block richtext
  • As an editor, I can add bulleted lists to the callout block richtext
  • As an editor, I can add headings to the callout block richtext of levels H2 - H4
  • As a page visitor, I see the callout block content render the same as other richtext on the site
  • As an editor, I don’t loose any functionality that is currently on production (i.e. can still use Bold text)
  • As a page visitor, I don’t loose any styling that is currently on production (i.e. grey background box and grid/width remain the same)

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Comments: 18

Most upvoted comments

Thanks Claudia! I didn’t realize we were so close to Feb already! It is not urgent. Content entry will begin then but it won’t launch until later so next sprint works.

Agree during daily huddle that @danielfmiranda will be picking up this ticket today with the aim to do a prod push tomorrow.

ACs have been updated! I also added a couple to make sure we don’t loose any of the existing styling or functionalit but let me know if that is overkill.

@kristinashu We don’t really have any context to answer “Before adding ACs, I would like input from a dev on what styling options make sense to add from their perspective.”

We can activate any of the standard richtext options. They should render like in any other richtext field.

True, although the boldness of body-large might be a bigger issue with our styles https://foundation.mozilla.org/style-guide/#paragraphs.

@mtdenton @cdanfon could this ticket be groomed at your next grooming meeting or is there a dev that could help scope it so it gets into next sprint?