How Do I Wagtail?

How Do I Wagtail?

Block Types

Last Updated: July 19, 2023

Where page types are set templates, wagtail streamfield blocks (hereafter known simply as ‘blocks’) are where you get to build and customize your page.

Glossary of available blocks:

  1. Accordion
  2. Airtable
  3. Block with Aside
  4. Blog Set
  5. Card Grid
  6. Datawrapper
  7. Group Listing
  8. Iframe
  9. Image
  10. Image Feature
  11. Image Grid
  12. Image Teaser
  13. Image Text
  14. Image Text Mini
  15. Linkbutton
  16. Listing
  17. Paragraph
  18. Profiles
  19. Profile By Id
  20. Profile Listing
  21. Profile Directory
  22. Pulse Listing
  23. Quote
  24. Recent Blog Entries
  25. Spacer
  26. Text Only Teaser
  27. Video

Special Notes:

Article Page Types have a selection of blocks only available to them (see below). If these look like they might interest you please see Publications.

  • 2x Images
  • Callout
  • Table and Advanced Table
  • Wide Image

Blog Page Types have the following two blocks unique to them:


Accordion

Accordion heading goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris diam odio, posuere nec arcu vel, imperdiet bibendum enim. Etiam interdum diam vitae magna interdum, vitae semper risus auctor. Integer ut viverra nibh. Phasellus a tincidunt mauris, quis varius velit. Fusce a sagittis augue. Quisque arcu mauris, dignissim ut dapibus vitae, lacinia ut augue. Nam non dui at ante ultrices scelerisque. Aenean nibh enim, auctor vel feugiat non, iaculis vel felis. Cras sed venenatis arcu. Nunc dictum dolor vitae quam vulputate porta. Vivamus porttitor, leo ut ultricies dictum, nunc dolor bibendum quam, porttitor suscipit tortor mauris eu ligula. Cras mattis arcu felis, sed gravida leo tristique nec. Nullam tempor nisl a laoreet porttitor. Nulla nisi massa, egestas id semper vel, dignissim nec ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Accordion heading with image in expanded content
illustration

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris diam odio, posuere nec arcu vel, imperdiet bibendum enim. Etiam interdum diam vitae magna interdum, vitae semper risus auctor. Integer ut viverra nibh. Phasellus a tincidunt mauris, quis varius velit. Fusce a sagittis augue. Quisque arcu mauris, dignissim ut dapibus vitae, lacinia ut augue. Nam non dui at ante ultrices scelerisque. Aenean nibh enim, auctor vel feugiat non, iaculis vel felis. Cras sed venenatis arcu. Nunc dictum dolor vitae quam vulputate porta. Vivamus porttitor, leo ut ultricies dictum, nunc dolor bibendum quam, porttitor suscipit tortor mauris eu ligula. Cras mattis arcu felis, sed gravida leo tristique nec. Nullam tempor nisl a laoreet porttitor. Nulla nisi massa, egestas id semper vel, dignissim nec ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus.


Airtable

The Airtable block allows you to embed a table (from Airtable) onto your page.

Live projects using this component:


Block with Aside

Highlight information or a call out on the right side of the page. This works best for wide page layouts.

Paragraph text in main body sed vitae nisi ut risus malesuada venenatis. Donec id neque eget risus tincidunt fermentum. Phasellus gravida metus eu sapien mollis, non efficitur arcu viverra. Aenean nec euismod lectus. Suspendisse id pharetra tellus. Morbi vel vulputate leo. Vivamus non placerat sapien, eleifend condimentum nisi. Nulla tempor ut leo non aliquet. Suspendisse malesuada sollicitudin consequat.


Audio

*Note: The Audio stream field block is only available on Blog Page Types

The Audio block allows you to embed a sound clip onto your page.

Live projects using this component:

Audio block


Blog Set

The Blog set block allows you to pick and choose different blog posts to feature on your page via styled cards.

Live projects using this component:


Card Grid

The Card grid block allows you to customize multiple cards with an image, text and link of your choice.

Live projects using this component:

Card Image 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Optional Link

Card Image 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas luctus lacus nec placerat.

Card Image 3

Convallis quis erat nec, dictum rhoncus velit. Maecenas luctus lacus nec placerat lobortis.


Datawrapper

Use the Datawrapper block to add an interactive chart.

Learn how to use Datawrapper.


Group Listing

Add multiple cards to give users an overview of information. Card have an optional link to internal or external pages.

Example title

  • Meta data

    Card title one

    Convallis quis erat nec, dictum rhoncus velit. Maecenas luctus lacus nec placerat lobortis. Sed eros nibh, convallis quis erat nec, dictum rhoncus velit. Maecenas luctus lacus nec placerat lobortis.

  • Card title two

    Convallis quis erat nec, dictum rhoncus velit. Maecenas luctus lacus nec placerat lobortis. Sed eros nibh, convallis quis erat nec, dictum rhoncus velit. Maecenas luctus lacus nec placerat lobortis.

  • Card title two

    Convallis quis erat nec, dictum rhoncus velit. Maecenas luctus lacus nec placerat lobortis. Sed eros nibh, convallis quis erat nec, dictum rhoncus velit. Maecenas luctus lacus nec placerat lobortis.


Iframe

Use the iframe block with caution. Sites will appear as 404 error until it is white listed and embedded iframes may not be the best solution for your need. Please reach out to the engineering team.

Live projects using this component:


Image

Use the Image block to insert a JPEG, PNG or WEBP onto your page. Maximum file size is 10MB and you can select your choice of image width: normal, wide or full width.

Live projects using this component:

Image of person looking at a phone


Image Feature

Help highlight information with a large image and minimal text.

illustration

Example title

Sed eros nibh, convallis quis erat nec, dictum rhoncus velit. Maecenas luctus lacus nec placerat lobortis.


Image Grid

The Image grid block allows images and captions to be uploaded in a row, up to four in a row. On mobile, the arrangement will change to up to two in a row.

Live projects using this component:


Image Teaser

Add multiple cards with optional dividing lines and optional button.

Example title one

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas luctus lacus nec placerat lobortis.

url label
illustration

Example title two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas luctus lacus nec placerat lobortis.

url label
illustration


Image Text

The Image text block features an image on the left and a paragraph on the right, you can also choose to have top and bottom dividers. The image is also linkable.

Live projects using this component:

Example Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eros nibh, convallis quis erat nec, dictum rhoncus velit. Maecenas luctus lacus nec placerat lobortis. Sed eros nibh, convallis quis erat nec, dictum rhoncus velit. Maecenas luctus lacus nec placerat lobortis. Example link CTA.


Image Text Mini

The Image text mini block is similar to the Image text block but features a smaller image. It is commonly used for Call to Actions but can be remixed for whenever you want to use a smaller image (e.g. icons).

Live projects using this component:

Graphic of a camera

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eros nibh, convallis quis erat nec, dictum rhoncus velit. Maecenas luctus lacus nec placerat lobortis. Example CTA.


Linkbutton

The Linkbutton block allows you to create your own button by customizing the text, URL and style (choose from primary or secondary).

Live projects using this component:


Listing

The Listing block allows you to create cards (need a minimum of two) and can link internally or externally.


Paragraph

The Paragraph block allows you to enter rich text options. Examples:

Bold

Italicized

Large Body Text

Heading 2

Heading 3

Heading 4

Heading 5

Numbered List

  1. List Item 1
  2. List Item 2
  3. List Item 3

Bulleted List

  • Bullet One
  • Bullet Two
  • Bullet Three

Divider:


Link

Live projects using this component:

  • This page and this paragraph!


Profiles

Profile image and bios are pulled from Profile Snippets. Profile Snippets use the same photo and info here as they do for blog and report authors.

Mozilla Insights

The Insights team researches and develops recommendations on Trustworthy AI topics with a focus on Transparency, Data Governance and Equity fields. We highlight what can be done and who is working towards a healthier internet. Mozilla Insights is le…

Solana Larsen
Editor, Internet Health Report

Editor on the Mozilla Insights team. Editor of the annual Internet Health Report and other publications.

Brandi Geurkink
2022 Senior Mozilla Fellow

Brandi is a Senior Fellow at Mozilla where she comes up with new ways to hold the internet’s biggest platforms accountable for algorithms, online advertising, privacy, and other issues. She is the creator of the YouTubeRegrets campaign.


Profile by id

The Profile by id block allows you to show one or more specific Pulse profiles by their ID number.

  • To feature one profile enter the pulse ID number where the ‘##’ sign is: (mozillapulse.org/profile/[##]).
  • For multiple profiles, specify a comma separated list (e.g. 85,105,332).

Live projects using this component:

Abigail Cabunoc Mayes

Toronto, Canada

Leading Mozilla's developer-focused strategy around trustworthy AI and MozFest.

Peter Bihr

Berlin, Germany

Mozilla Fellow. Co-founder of ThingsCon, a non-profit advocating the creation of a responsible IoT.

Media Artist + Media Design Lecturer at the University of the Arts London + Digital Art Producer. Curator of Mozilla Artists Open Web.

Becca Ricks

Cambridge, MA

I'm a Researcher on Mozilla's Advocacy team.


Profile Listing

The Profile listing block is used to grab a group of profiles. For example, Tech Policy Fellows.

  • Max results - set the number to appear on your page.
  • Profile type - type is set in the Pulse admin. These include "fellow", "staff", etc. Leave this empty to pull any type.
  • Program type - programs are set in the Pulse admin. These include "tech policy" etc. Leave this empty to pull any type.
  • Year - use this to limit your results to profile marked in Pulse Admin for a particular year. Used for fellow cohorts.
Stefania Koskova

Albania and Western Balkans

Mozilla Fellow working to develop collaborative solutions and effective policy responses to the threat of online radicalization

Chukwuyere Ebere Izuogu

Abuja, Nigeria

Mozilla Fellow. Conducting research on net neutrality and data protection regime in Nigeria. Senior Associate at Streamsowers & Kóhn.

Clara Tsao

Washington D.C., USA

Clara Tsao is a Mozilla Technology Policy Fellow researching the effectiveness of online tools to counter online disinformation.

Ayden Férdeline

Berlin, Germany

Ayden Férdeline is a Mozilla Tech Policy Fellow researching the ongoing development and harmonization of global privacy standards.


Profile Directory

Like the Profile listing block, the Profile Directory block allows you to grab a group of Pulse profiles. This block, however, lets you filter the profiles by year.

  • Max results - set the number to appear on your page.
  • Profile type - type is set in the Pulse admin. These include "fellow", "staff", etc. Leave this empty to pull any type.
  • Program type - programs are set in the Pulse admin. These include "tech policy" etc. Leave this empty to pull any type.
  • Year - use this to limit your results to profiles marked in Pulse Admin for a particular year. Used for fellow cohorts.
  • Filter values - use this to filter Pulse profiles by year

Live projects using this component:


Pulse Listing

The Pulse listing block allows you to pull projects from Pulse onto your page. It allows you to search by keywords and then filter by issue etc. The admin has these options:

  • Search - Use any word or phrase. This will search titles, descriptions, and tags. Test your search on Pulse first.
  • Max results - set the number to appear on your page. This is limited so we don't overwhelm visitors. If you want to show more, link them to a search URL on Pulse. Pulse allows them to favorite things, view creators, and discover more.
  • Display featured - check this to limit your results to things marked as featured by our moderators on Pulse. Leave unchecked to show all results.
  • Sort - show the latest stuff by default
  • Issues - use this to limit your results to items with an issue
  • Help - use this to limit your results to projects that need a particular kind of help from collaborators

Live projects using this component:


Quote

The Quote block allows you to add a stylized excerpt onto your page. You can enter the text and attribution.

Live projects using this component:

Of all the groups we work with regularly, very few have had the impact that our collaborations with Mozilla have had over the years…it’s absolutely a match made in heaven.

Jenny Toomey, Ford Foundation


Recent Blog Entries

The Recent blog entries block allows you to add blog post cards to your page via filters, either by tag or category. This is helpful if you want your cards to stay up-to-date without having to manually change them.

Live projects using this component:


Spacer

Is it feeling squishy on your page? Use the spacer block to create some breathing room between other blocks.

Live projects using this component:


Table

*Note: The Table stream field block is only available on Article Page Types

Use the Table block to add a table to your page.

Live projects using this component:

Screen shot of table block


Text Only Teaser

Text only feature cards. Minimum of three cards is required.

Heading one
Meta data lorem ipsum dolor sit amet

Optional body copy lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas luctus lacus nec placerat lobortis.

Heading two
Meta data lorem ipsum dolor sit amet

Optional body copy lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas luctus lacus nec placerat lobortis.

Heading three
Meta data lorem ipsum dolor sit amet

Optional body copy lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas luctus lacus nec placerat lobortis.


Typeform

Use the Typeform block to add a button that links to your Typeform. Note that a page can only contain a single Typeform embed.

Learn how to use Typeform.

Live projects using this component:


Video

Use the video block to embed a video (linked from elsewhere, for example, YouTube) on your page.

Live projects using this component: