Advent of Gutenberg – 4

• Advent of Gutenberg 1 – Introduction
• Advent of Gutenberg 2 – Text
• Advent of Gutenberg 3 – Media
• Advent of Gutenberg 4 – Block fiesta
• Advent of Gutenberg 5 – UI Overview
• Advent of Gutenberg 6 – Block Sharing
• Advent of Gutenberg 7 – Keyboard Efficiency

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.

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

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

Here's how I designed the new WordCamp Speakers block for the new WordPress editor, Gutenberg. https://t.co/HqvjDTjYJT pic.twitter.com/pbUY5bpUFd

— Mel Choyce-Dwan (@melchoyce) November 30, 2018

Quote Block

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

-Edwin Cromley

Gallery Block

• 

• 

• 

• 

• 

• 

Cover Block

Audio Block

File Block

Video Block

Pullquote Block

Pull quotes are extra special fancy!

-Anonymous 2018

Table Block

Number of Gutenberg Blocks Used so far	35
Number of Gutenberg Advent posts written so far	4

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

HTML Block

Basic Text Input

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

Button Block

Columns Block

Media & Content Block

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

• January 2024
• February 2021
• April 2020
• December 2018
• November 2018
• October 2018
• January 2018
• September 2017
• August 2017
• January 2017
• December 2016
• November 2016
• June 2016

Categories Block

• Beginner
• Docker
• Elixir
• GraphQL
• Gutenberg
• JavaScript
• Koinonia
• Learning
• Social Networking
• Thoughts
• Uncategorized
• WordPress
• WordPress Rest API

Comments Block

1. 

   Hey Daniel, The future posts will definitely have more visual media. Thank you for the GitHub comments as well, I…

2. 

   Great post, Edwin! In case you didn’t get the email notification, I left a couple of comments on the GitHub…

3. 

   We are using Vue for a large Laravel based projects and love it. As many do in the Laravel and…

4. 

   Thank you, good sir. The work you have done on Gutenberg is truly great!

5. 

   Great post. And thank you for being part of the team that made this happen in 4 months. Your contributions,…

Posts Block

• WordPress, the power of Community, and a vision of a new connected WordPress
• Learning Docker – A WordPress set up
• Learning Docker – Starting with the basics
• Learning Elixir
• Advent of Gutenberg – 7

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

We Called it Gutenberg for a Reason

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.