Learn Gutenberg 2: Types of blocks

As we talked about in the previous article «Learn Gutenberg 1: What is Gutenberg?", the new WordPress editor "Gutenberg" works through what it calls as "Blocks«.  

These blocks allow us to be able to layout our entries in infinite ways since we can add the block that best suits us. The blocks allow us so much flexibility that we can even create our own blocks with the right knowledge.

We can install plugins that contain blocks that expand the functionality and our range of blocks to use.

Block types

When we install Gutenberg it brings us a list of default blocks that gives us a wide list of features to be able to layout our pages/posts.

common blocks

• Paragraphs: It is the most basic block that we will use with which we can write a paragraph. Every time we press enter (line break) we will create a new paragraph
• Subscriber lists: This block will create a list (ordered or unordered) like the one I'm using right now.
• Headers: Allows us to write titles from H1 to H6
• Image: This block allows us to add an image, we can upload it from our computer directly or take it from the media in WordPress.
• Gallery: It allows us to create an image gallery, in the same way we can select the images from our computer or media
• Quote: This block allows us to add a quote from another author.
• Audio: The audio block gives us the possibility to add an audio player. For this we must add the URL where the audio we want to play or upload the file to media is located. This audio must be in our uploaded media repository. To use external audios we will use the «Blocks of embedded«.
• Background image: This curious block allows us to add a background image on which we can add a text (this text is placed with a label not like headers , , etc).
• Archive: This block allows us to link all types of files such as .pdf, .zip, etc., which we can view or download. A download button appears right next to the name that is placed as a link.
• Video: It allows us to add a video that we have uploaded in the media, to add a video from You Tube or another web page we will use the «embedded blocks«.

format blocks

• Classic: The classic block adds a block that contains the TinyMCE editor (the classic WordPress editor). When we pass our old posts written in the classic editor to the Gutenberg editor, it places all the content in this block. 
• Custom code: This block allows us to write code and make it appear in a readable way.
• Custom HTML: With this block we can add HTML in the entry/page.
• preformatted: This block adds preformatted text (with labels ).
• Quote: Although this block is called the same as the previous one of "date» presents different styles as it contains a different CSS class. This allows us to play with the styles of one and the other.
• Panel: With this block we can create HTML tables, when we create the block it asks us how many rows and columns we want and it will create a table with the specifications we have chosen.
• To: This block is intended for poetry and allows us to control line breaks.

Layout Blocks

• Button: This block allows us to add a button which we can modify at will (text, url, colors).
• More: With this block we can shorten the content when it is displayed on the cover and the "button" will appearRead more» just in the place where we have placed it. This will not be displayed inside the post.
• line break: This block allows us to create pages within our entry. This will divide the content into different pages and with a navigation menu we can navigate between the content of the entry.
• Separator: This block adds a separation line (what creates us is a ).
• Spacer: This element creates a white space to which we can indicate the number of pixels that we want for the separation height.

Widget Blocks

• shortcode: This block lets us add a shortcode.
• File: It shows us the list by months of the entries of our blog.
• Category: Shows us the list of categories used in our blog.
• Last comments: Shows us the last comments of our blog.
• Latest Posts: Shows us the latest posts from our blog.

embedded blocks

These types of blocks allow us to add content from other platforms such as YouTube videos, Instagram photos, Spotify music, etc.

We currently have a great list for embedded content:

Youtube, Twitter, Instagram, Spotify, Kickstarter, Facebook, WordPress, SoundCloud, Flickr, Vimeo, Animoto, Cloudup, CollegeHumor, Dailymotion, Funny or Die, Hulu, Imgur, Issuu, Meetup.com, Mixcloud, Photobucket, Polldaddy, Reddit, ReverbNAtion, Screencast, Scribd, Slideshare, SmugMug, Speaker, TED, Tumblr, VideoPress, and WordPress.tv.

If the content is from another platform that is not on the list, we have a block to embed from any website.

You can continue learning Gutenberg at Learn Gutenberg 3 – Common Blocks.