Blocks

This page demonstrates all the site’s available blocks. Blocks are fundamental building pieces within the WordPress Block Editor. For a detailed lesson in using blocks, see the WordPress documentation article, Work with blocks.

---

Text Blocks

This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. I am a text link. Aliquam quis accumsan ante. Mauris faucibus ipsum vehicula velit pellentesque fringilla. Quisque tempor dolor sed lectus bibendum, et iaculis dolor iaculis.

Accessible headings: please see this W3C guide to Headings. It’s important to not skip heading levels, as they serve as waypoints in the page for screen readers and indicate content hierarchy. If you need a smaller heading, use the typography settings to adjust the size.

H2 Heading Lorem Ipsum Dolor

H3 Heading Sit Amet Consecetur

H4 Heading Adipiscing Elit Aliquam

H5 Heading Quis Accumsan Ante

H6 Heading Mauris Faucibus Ipsum

Heading with Background Fill

The Background Fill heading style is intended for use in top-level content areas on landing pages, such as news and event feeds.

Heading with Flower Icon

Use the Flower Icon option sparingly to help visually define sections or add color to a dull page.

---

Lists

• Bullet list item one
• List item two
• List item three is quite long and may wrap to a second line, especially on smaller screens. Lorem ipsum dolor sit amet, consectetur adispicing elit.
• List item four

• Bullet list with “No Disc” option: no bullets/dots but maintains structure as a list.
• List item two
• List item three is quite long and may wrap to a second line, especially on smaller screens. Lorem ipsum dolor sit amet, consectetur adispicing elit.
• List item four

• Bullet list with “Tighten Items” style variant: no space between/below list items.
• List item two
• List item three is quite long and may wrap to a second line, especially on smaller screens. Lorem ipsum dolor sit amet, consectetur adispicing elit.
• List item four

1. Ordered / Numbered list item one
2. List item two
3. List item three is quite long and may wrap to a second line, especially on smaller screens. Lorem ipsum dolor sit amet, consectetur adispicing elit.
4. List item four

1. Ordered list with “No Disc” option: no numbers but maintains structure as a list.
2. List item two
3. List item three is quite long and may wrap to a second line, especially on smaller screens. Lorem ipsum dolor sit amet, consectetur adispicing elit.
4. List item four

1. Ordered list with “Tighten Items” style variant: no space between/below list items.
2. List item two
3. List item three is quite long and may wrap to a second line, especially on smaller screens. Lorem ipsum dolor sit amet, consectetur adispicing elit.
4. List item four

Quote Block for emphasizing quotations from an article.

Code Block for demonstrating code.

Details Summary

This content is hidden when the details block is collapsed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia, orci eget maximus bibendum, ex eros ullamcorper nibh, eu interdum lacus libero sit amet lectus. Praesent nec libero volutpat, suscipit risus non, gravida magna. Nullam quis magna in est aliquet lacinia. Cras volutpat ex sit amet purus tempus, vel fringilla lacus euismod. Vivamus vulputate ullamcorper ipsum vitae viverra. Mauris vel dolor ut eros luctus rutrum in non neque.

Details Summary

This content is hidden when the details block is collapsed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia, orci eget maximus bibendum, ex eros ullamcorper nibh, eu interdum lacus libero sit amet lectus. Praesent nec libero volutpat, suscipit risus non, gravida magna. Nullam quis magna in est aliquet lacinia. Cras volutpat ex sit amet purus tempus, vel fringilla lacus euismod. Vivamus vulputate ullamcorper ipsum vitae viverra. Mauris vel dolor ut eros luctus rutrum in non neque.

Details Summary

This content is hidden when the details block is collapsed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia, orci eget maximus bibendum, ex eros ullamcorper nibh, eu interdum lacus libero sit amet lectus. Praesent nec libero volutpat, suscipit risus non, gravida magna. Nullam quis magna in est aliquet lacinia. Cras volutpat ex sit amet purus tempus, vel fringilla lacus euismod. Vivamus vulputate ullamcorper ipsum vitae viverra. Mauris vel dolor ut eros luctus rutrum in non neque.

Raw preformatted text

Pullquote with Citation, lorem ipsum dolor sit amet.

This is the citation, Jane Doe

Table with Rows & Columns	Use me to display data
Lorems	3
Ipsums	5
Dolors	6
Total	14

Verse block for poetry or lyrics.
Lorem ipsum dolor sit amet.

---

Media Blocks

Image

Images with Duotone Filters

Duotone filters are available in the Block Styles Editor. Filters using theme colors have been pre-defined.

Gallery

Audio

Cover

File

Media & Text

Video

Icon

Additional custom SVG icons can be added on request. How to add custom icons (please submit as pull request).

---

Design Blocks

Buttons

Button Contextual Styles

When inside blocks with background colors applied, button styles will change contextually:

Columns

Use block spacing to control the space between columns.

Group

Row

Rows are groups of blocks arranged on a single row horizontally.

Stack

Stacks are groups of blocks arranged in a single column vertically.

Grid

More

Page Break

Separator

Spacer

Carousel

Carousels are generated using the Carousel Slider Block plugin.

• Any content can go in carousels — not just images. Use the Group block to create individual slides with mixed content.
• Carousel navigation arrows (previous/next) do not appear in the editor, but will be visible on the published page.
• Horizontal scrollbar appears when editing carousels, to allow editors to see the entire slide set. They will not appear on the published page.

Events List

Event list feed from The Events Calendar plugin.

Styled Event Feed: to apply styles to the widget, add mdh–tribe-event-feed in Advanced > Additional CSS Classes on a parent block, such as a Group shown in this example below.