Advent of Gutenberg – 4

So far we have looked at some of the fundamental content types, text and media. In this post we are going to do a very quick overview of all of the blocks available by default in WordPress. We can see all of the blocks available via the block inserter. By default you can access this via the plus icon in the top left of the screen.

Gutenberg block inserter

Now for every block!

Heading Block!

Above is the heading block, this is a paragraph block.

List Block

  • The list block by default is a unordered list.
  • It supports sub items
    • Like this
    • And this
  • We can also use a list block to do ordered lists.
  1. Within the lists we still have our rich text controls
  2. So we can do bold text
  3. As well as italic and links!

Image Block

image of a pier with birds flying
This is an image block with a caption.

Code Block

 * Sometimes, when dealing with the web, you might want to share a code 
 * snippet. Luckily we have a code block!

function gutenbergIsGreat( opinion ) {
  return opinion;

share( gutenbergIsGreat( true ) );

The code block is not much different than the preformatted text block.

Preformatted Block

With preformatted text,
We can do Poetry or other artsy versions of text.
Text that depends on custom whitespace is a great fit for a

Preformatted text block.

Next up is our friendly twitter embed!

Verse Block

Verse block
Is pretty much the same as preformatted text.
It happens to use the main font family instead of a monospace font.

Embed Block

Choyce Design; check it out!

Quote Block

Check out the great post above. This is a quote block. Next is a gallery

-Edwin Cromley

Gallery Block

Cover Block

Cover image block here

Audio Block

File Block

Video Block

My Daughter’s first music video! Please subscribe she needs to get to 100 subscribers!

Pullquote Block

Pull quotes are extra special fancy!

-Anonymous 2018

Table Block

Number of Gutenberg Blocks Used so far35
Number of Gutenberg Advent posts written so far4

There is some really cool stuff I have in store for tables! Stay tuned for future posts!

HTML Block

Even though we see a form on the front end, when creating this block we simply add in HTML. Oila!

Button Block

Columns Block

We can get two columns as well. Columns allow us to nest blocks within other blocks. Pretty neat!

Content, layout is going to be a future focus for the Gutenberg editor, and columns block will most likely play an integral role in that.

Media & Content Block

flowers and a dock


Separator Block

Spacer Block

On a project recently, whitespace was critical to the marketing team for whatever reason. Down the exact pixel. There was no real way to accommodate the client, with Gutenberg however, they could have added a spacer block and set the height. I am not excited about this, but it is still very cool to have, and illustrates the creativity that Gutenberg enables.

Above is a 60px spacer block.

Archives Block

Categories Block

Comments Block

Posts Block

Shortcode Block

Embed Blocks

There is an insane amount of embeds out of the box available to WordPress, and these all use the Embed Block as their base. This was already possible in the classic WordPress editor, but now it is just clear that we can post content from:

  • Youtube
  • Twitter
  • Instagram
  • Flickr
  • Soundcloud
  • Spotify
  • Flickr
  • Animoto
  • Funny Or Die
  • Hulu
  • TED
  • PollDaddy
  • Many more…
  • And most importantly WordPress

Phew! That’s a lot of blocks. It will be very important in the coming future to figure out how to create more baseline blocks, and compose new blocks out of existing blocks. We do not want to create some ridiculous proliferation of blocks overwhelming us with options. The embed block is maybe my favorite block so far. One block that allows us to embed any content from the web directly into our posts. Great stuff.

Wrapping up

Now that we see the various content that Gutenberg makes readily available out of the box, next up we will do a more thorough overview of the editor interface, from both a technology perspective and usability perspective. As always, stay tuned! Drop a comment to share your thoughts on Gutenberg so far.

Leave a Reply

%d bloggers like this: