Heading Block

The heading block is used to separate content by topics and subtopics. We can direct attention to certain sections more than others by specifying a heading value, represented by H1 through H6. Note that a lower heading value is actually larger — H1 is larger than H2, which is larger than H3 and so forth. The heading block shares the same styling features as the paragraph block and the color can be changed, text can be linked, etc.

Heading 1 (H1)

Heading 2 (H2)

Heading 3 (H3)

Heading 4 (H4)

Heading 5 (H5)
Heading 6 (H6)
Accessibility Tip:

When using headings, be sure to keep your content hierarchy in mind. Use the rankings of the headings to form a document outline. This helps to communicate how your page is organized. Be sure to use meaningful titles or phrases to describe your sections.


To learn more about using the Heading block, see this CAEN Knowledge Base Article.

Paragraph Block

I am light font weight

The paragraph block is the simplest block in the Gutenberg editor. The text can be styled to have different colors or to have a background color, as well as text-specific styling such as bolding, italicizing, underlining, and adding hyperlinks. We can even add an inline image, which can be inserted anywhere. Paragraph blocks have spacing above and below them, so two adjacent paragraph blocks will inherently space out from each other. Tip: to add a new line to a paragraph block without creating a new paragraph, hold shift before pressing enter.

Hello, I’m a paragraph. I’m pretty flexible — I can have my text bolded, italicized, underlined, striked, marked, hyperlinked, and more. I can also have inline images inserted in the middle of my sentences.
I can now have 200 font weight.

I’m another paragraph with my text color and background color modified, and my font size increased.

When working with images, we also have the option of wrapping the paragraph around the image. See wrapping text around an image for details on how to do this.


List Block

The list block is used to list elements that share some commonality or need to be shown in sequence. Lists can be unordered or ordered, rendering as bullets and numbers respectively. Sub-elements are supported as pictured below. Once again, the text inside a list block shares the same styling features as the paragraph block.

  • Eggs
    • 2 cartons brown
    • 1 carton white
  • Milk
  • Cheese
  1. Go to the store
    1. Get in your car
    1. Turn it on
    2. Set directions for store
    3. Start driving
  2. Get the ingredients
  3. Check out
  4. Go home
  5. Done

To learn more about using the List block, see this CAEN Knowledge Base Article.

Quote & Pullquote Blocks

The quote & pullquote blocks can be used for quoting text from sources, providing testimonials, or simply relaying a spoken quote. The quote block provides less visual emphasis, and the pullquote block more. Text inside of these blocks shares the same styling features as the paragraph block, but lacks a custom font size option.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem Ipsum

To learn more about using the Quote & Pullquote blocks, see this CAEN Knowledge Base Article.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem Ipsum

Code Block

The code block is used for distinguishing code text from regular text on a page. It uses a monospace font so the text is aligned properly. The code block shares the same styling features as the paragraph block.

#include <iostream>

int main() {
    std::cout << "Hello World!";
    return 0;
}

To learn more about using the Code block, see this CAEN Knowledge Base Article.

Ready to view more Gutenberg Blocks?

Explore the various options for organising content or learn to embed a video in your page!