Each Gutenberg post is composed of blocks. Blocks are the elements of content that you use to build a page or post in the Gutenberg editor. There are various types of blocks that can be added to the main column of the post. In fact, this paragragh you are reading is a block.
For a demonstration how to work with blocks, watch this short video.
Below you will find examples of the most common Gutenberg blocks used when creating a blog post.
Block Examples
Paragraph Block
This is Paragraph block. It supports text formatting, such as bold, italic, and highlighted text. To start a new a new paragraph…
…hit Enter.
Watch Demo VideoList Block
Unordered List Block
- List Item 1
- List Item 2
- List Item 3
Ordered List Block
- List Item 1
- List Item 2
- List Item 3
Heading Block
The Heading block adds headline text and gives you the option of six levels of headline text (h1 through h6).
Important:
- An “h1” heading should never be used in the post content. WordPress automatically uses the post title as the h1 heading, and a post should never have more than a single h1 heading. Any heading added to the post content should be h2 or lower.
- Headings are used to structure the post content for search engines and screen readers, so it is very important to use a strict hierarchical structure when adding headings. A good rule of thumb to follow when adding a new heading to a page is to make sure the new heading is either a higher level, the same level, or no more than 1 level lower than the previous heading. Example: Let’s say the previous heading is an h3 heading. That means the next heading added to the page should only be one of the following: An h2 (higher level), another h3 (the same level), or an h4 (one level lower). Following an h3 with an h5 or h6 would break the content structure.
Examples of heading blocks:
H3 Heading Block
H4 Heading Block
H5 Heading Block
H6 Heading Block
Watch Demo VideoQuote Block
Watch Demo VideoThis a Quote block. It consists of a quotation paragraph and an optional citation that appears below the quote. It extends beyond the margins of the main column, and is a good way to call out quotable content.
Barrett Cox
Image Block
The Image block allows you to insert an image the post content.
Examples:
To float the Image block and allow text to wrap around it, you can set the block alignment to “Align left” or “Align right”. You can also set an optional caption that will appear below the image.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna id volutpat lacus laoreet non curabitur gravida. In vitae turpis massa sed elementum tempus egestas. Nisl purus in mollis nunc sed id semper risus. Urna porttitor rhoncus dolor purus non enim. Enim nunc faucibus a pellentesque sit amet porttitor eget dolor. Egestas sed sed risus pretium quam vulputate dignissim suspendisse in. Lorem mollis aliquam ut porttitor leo a. Integer feugiat scelerisque varius morbi enim. Consequat id porta nibh venenatis cras sed felis. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Purus gravida quis blandit turpis. Dolor morbi non arcu risus quis varius quam quisque id. Sollicitudin tempor id eu nisl nunc.
Vitae congue mauris rhoncus aenean vel elit scelerisque mauris. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Sit amet cursus sit amet. Risus feugiat in ante metus dictum at tempor commodo. Neque sodales ut etiam sit amet. Tortor aliquam nulla facilisi cras fermentum. Eleifend donec pretium vulputate sapien. Ornare quam viverra orci sagittis eu volutpat odio facilisis mauris. Augue eget arcu dictum varius duis at consectetur lorem. Sodales ut eu sem integer vitae justo eget magna fermentum. Mauris a diam maecenas sed enim ut sem. Urna molestie at elementum eu facilisis. Sapien pellentesque habitant morbi tristique senectus et. Turpis egestas sed tempus urna et pharetra. A diam sollicitudin tempor id eu nisl nunc. Amet risus nullam eget felis eget nunc lobortis mattis. Nec sagittis aliquam malesuada bibendum.
If you set the image resolution to “Large” or “Full size” on an image that is aligned left or right, then the image will appear offset and extend into the margin.
A diam maecenas sed enim ut sem viverra. Pellentesque nec nam aliquam sem et tortor. Pellentesque eu tincidunt tortor aliquam. Purus sit amet luctus venenatis lectus magna fringilla. Vitae aliquet nec ullamcorper sit amet risus. Augue neque gravida in fermentum et sollicitudin ac. Interdum consectetur libero id faucibus nisl. Quis vel eros donec ac. Purus semper eget duis at. Ut aliquam purus sit amet. Fames ac turpis egestas maecenas.
Enim diam vulputate ut pharetra sit amet aliquam id. Gravida neque convallis a cras semper. Proin fermentum leo vel orci porta non. Sed risus ultricies tristique nulla aliquet enim tortor. Neque sodales ut etiam sit amet nisl. Sed enim ut sem viverra aliquet eget sit. Turpis egestas sed tempus urna et pharetra pharetra massa massa. Nec feugiat in fermentum posuere urna nec. Sit amet facilisis magna etiam tempor orci. Orci phasellus egestas tellus rutrum. Aliquam ultrices sagittis orci a scelerisque purus semper eget duis. Posuere sollicitudin aliquam ultrices sagittis. Ipsum faucibus vitae aliquet nec ullamcorper sit amet risus nullam. Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Maecenas pharetra convallis posuere morbi leo urna molestie at. Pulvinar mattis nunc sed blandit.
Facilisi cras fermentum odio eu feugiat pretium nibh ipsum consequat. Eget nullam non nisi est. Enim ut sem viverra aliquet eget sit amet tellus cras. Posuere urna nec tincidunt praesent semper. Eget nunc scelerisque viverra mauris in aliquam sem fringilla ut. Sit amet cursus sit amet dictum. Consequat mauris nunc congue nisi vitae suscipit. Arcu non odio euismod lacinia at quis risus sed vulputate. Elementum pulvinar etiam non quam lacus suspendisse faucibus. Nulla facilisi morbi tempus iaculis. Ultrices sagittis orci a scelerisque purus semper.
If the Image block has no alignment or center alignment, then it will span the full width of the column.
