Top 13 Most Popular HTML Block Types in WordPress Gutenberg

If you ever used WordPress, you’ll know that the “new” WordPress editor Gutenberg is a block-based editor where you can insert each piece of content (text, images, quotes, etc.) as individual blocks.

If you want to programmatically insert content or you’re just curious, this article is for you because it answers the question: How exactly does the HTML of the new Gutenberg block-based approach look like and which type of blocks exist?

Let’s get right into it! 👇

Paragraph Block

A paragraph block is used for normal text in your post or page content. It’s the most basic and frequently used block where you’ll type most of your content. It supports various text formatting options, such as bold, italics, hyperlinks, and more.

In terms of the HTML structure of a block, it generally looks something like this:

<!-- wp:paragraph -->
<p>This is a paragraph block!</p>
<!-- /wp:paragraph -->

The <!-- wp:paragraph --> and <!-- /wp:paragraph --> tags are the Gutenberg block comments that identify the type of block used.

This particular example is a paragraph block, which is why you see paragraph after wp:. The content of the block is enclosed within these comments, and in this case, it’s a simple HTML paragraph tag with some text.

Heading Block

The heading block allows you to add headings (H1-H6) to your content. Headings are useful for structuring your content and making it easier to read. They’re also important for SEO (Search Engine Optimization).

Here’s another example, this time with a heading block:

<!-- wp:heading -->
<h2>This is a heading block!</h2>
<!-- /wp:heading -->

Image Block

The image block is used to add a single image to your content. It offers options to align the image, add a caption, and link the image to a custom URL or the image file itself.

And here’s an example with an image block:

<!-- wp:image {"id":1,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large">
<img src="path_to_image.jpg" alt="" class="wp-image-1"/></figure>
<!-- /wp:image -->

Here’s an example image block:

In the image block example, you can see that the comment for the block includes some additional data in JSON format. This is used to specify certain settings or attributes of the block.

Quote Block

The quote block allows you to add quotations or highlights to your content. It provides a visually distinct style to make quotes stand out. It often includes citation text along with the actual quote.

<!-- wp:quote -->
<blockquote class="wp-block-quote">
  <p>This is a quote block!</p>
  <cite>- Source</cite>
</blockquote>
<!-- /wp:quote -->

Here’s an example quote block:

🌹 “To be, or not to be: that is the question.”

Shakespeare “Hamlet” Act 3, Scene 1

List block

The list block is used to create lists of items, either ordered (numbered) or unordered (bulleted). This block is useful for displaying a collection of items or instructions in your content.

<!-- wp:list -->
<ul class="wp-block-list">
  <li>List item 1</li>
  <li>List item 2</li>
</ul>
<!-- /wp:list -->

Here’s how this example list looks like:

• List item 1
• List item 2

Gallery Block

The gallery block lets you display multiple images in a grid layout. This block is handy when you want to showcase a collection of images together and offer customization options for columns and cropping.

<!-- wp:gallery {"ids":[1,2]} -->
<figure class="wp-block-gallery columns-2 is-cropped">
  <ul class="blocks-gallery-grid">
    <li class="blocks-gallery-item">
      <figure><img src="image1.jpg" alt="" data-id="1" /></figure>
    </li>
    <li class="blocks-gallery-item">
      <figure><img src="image2.jpg" alt="" data-id="2" /></figure>
    </li>
  </ul>
</figure>
<!-- /wp:gallery -->

Here’s an example Gallery:

Cover Block

The cover block allows you to add an image or video with a text overlay. This block is often used for headers or sections with a visual background, and it supports full-width display and dimming of the background media.

<!-- wp:cover {"url":"image.jpg","id":1} -->
<div class="wp-block-cover has-background-dim" style="background-image:url(image.jpg)">
  <p class="wp-block-cover-text">This is a cover block!</p>
</div>
<!-- /wp:cover -->

An example:

This Is a Cover Block

Code Block

The code block is used to display code snippets in a non-executing, preformatted way. It’s perfect for developers writing tutorials or any situation where you need to showcase HTML, CSS, JavaScript, or other code within your content.

<!-- wp:code -->
<pre class="wp-block-code">
  <code>
    // This is a code block!
    function helloWorld() {
      console.log('Hello, world!');
    }
  </code>
</pre>
<!-- /wp:code -->

This is also a great example of how a code block looks like for the user! 👆 🧑‍💻

Button Block

This block is used to add a button to your post or page. The button can be linked to another post, page, or a URL, and can be customized with different colors and styles.

<!-- wp:button {"backgroundColor":"vivid-green-cyan","textColor":"very-dark-gray"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-very-dark-gray-color has-background" style="background-color:vivid-green-cyan">Click me</a></div>
<!-- /wp:button -->

An example button on the Finxter blog:

Pullquote Block

This block is used to emphasize a quotation or excerpt from the text. This block often formats text in a distinctive way and can include a citation.

<!-- wp:pullquote -->
<figure class="wp-block-pullquote">
  <blockquote>
    <p>This is a pullquote block!</p>
    <cite>Citation here</cite>
  </blockquote>
</figure>
<!-- /wp:pullquote -->

Here’s an example pullquote:

Verse Block

This block is used for writing poetry or song lyrics. This block maintains spaces and line breaks, unlike the paragraph block, which combines multiple spaces into one and ignores line breaks.

<!-- wp:verse -->
<pre class="wp-block-verse">This is a verse block!
It preserves whitespace and empty lines.</pre>
<!-- /wp:verse -->

Here’s an example verse block in WordPress:

🌹 A Poem on Unrequited Love

Upon a heart, desire did once alight,
Unseen, unheard, like whisper in the night.
Affection’s seed did in the shadow sprout,
Yet love’s return was ever filled with doubt.

Fair Cupid’s arrow, aimed with careful art,
Did strike its mark, and pierce one lonely heart.
Yet cruel fate, in jest or careless play,
Left t'other heart to wander far astray.

“Thine eyes do shine like stars in heaven's vault,"
Cried one, his voice a tremulous assault.
Yet silence met his words of fervent plea,
Love unreturned, as shore untouched by sea.

O bittersweet the taste of love unshared,
A feast untouched, a song unheard, unpaired.
Yet in this sorrow, find solace we might,
For unrequited love still bears love's light.

One heart may sing a lonely serenade,
Yet in its song, true love is ne’er betrayed.
A dance for one, a solitary dove,
Still bears the grace and beauty of true love.

So sing, O heart, your love song soft and sweet,
And in its echo may you find some peace.
For even love unreturned has its place,
In the grand sonnet of the human race.

Columns Block

This block is used to add flexible multi-column layouts to your page or post. Each column can contain other blocks (like paragraphs, images, or even other columns).

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
  <div class="wp-block-column">
    <!-- wp:paragraph -->
    <p>Column 1</p>
    <!-- /wp:paragraph -->
  </div>
  <!-- /wp:column -->

  <!-- wp:column -->
  <div class="wp-block-column">
    <!-- wp:paragraph -->
    <p>Column 2</p>
    <!-- /wp:paragraph -->
  </div>
  <!-- /wp:column --></div>
<!-- /wp:columns -->

Here’s an example with three random columns:

This block is used to add flexible multi-column layouts to your page or post. Each column can contain other blocks (like paragraphs, images, or even other columns).

This block is used to add flexible multi-column layouts to your page or post. Each column can contain other blocks (like paragraphs, images, or even other columns).

Embed Block

This block is used to embed external content from websites that WordPress supports, like YouTube, Twitter, Instagram, etc. You just need to provide the URL, and WordPress takes care of the embedding.

<!-- wp:embed { "url":"https://www.youtube.com/watch?v=dQw4w9WgXcQ","type":"video","providerNameSlug":"youtube","responsive":true,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio" } -->
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio">
  <div class="wp-block-embed__wrapper">
    <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" allowfullscreen></iframe>
  </div>
</figure>
<!-- /wp:embed -->

I’ll embed a YouTube video here:

Remember that the attributes inside the comment tags (<!-- wp:blocktype -->) can vary depending on the properties and options set for that block.