WordPress: The 2021 Block Editor Tutorial

Blocks within WordPress can seem a little hard to use at first, but it’s really not that bad, because in this updated 2021 guide…I’ll show you exactly how to fully customize your content today.

I’m going to include information on how to use, and key differences that will surely put a smile on your face.

Let’s begin…

What Is The Block Editor?

First of all, it used to be called the Gutenberg editor, but now it has a slighty different name. The WordPress block editor.

The significance of this 2018 update had a dramatic effect on the ease of creating a drag ad drop experience for even total beginners. Because if you are a complete beginner, it’s going to be completely necessary for you to have all of your questions answered in the best way possible.

It’s a whole new, updated experience. I find it incredibly easy to use, and after this tutorial…so will you.

In short, Gutenberg is a total revamp of the WordPress editor.

Users of all experience levels can benefit from using blocks in WordPress. However if you need any more information that I have provided here today, I would ask that you voice your opinion to me in the comments section so I can better serve you in the future…sound good?

What’s A Block?

Blocks are like little packages containing content. You can place them wherever you like, and create something quite marvelous. In addition to unlimited customization, you have many resources to help you make the great content you are producing, even better.

With blocks, you can insert, rearrange, and style content in WordPress. What types of content? Here’s a small sampling (we’ll go over all of them later):

• Tables and graphs
• Images and gifs
• Videos with smooth playback
• Paragraphs of text
• Quotes from famous people
• Social media embeds
• Widgets

You can even create tables, if you are comparing stats or listing things off. Here’s what it looks like. Now of course this will all be very easy for you to learn even if you are a complete beginner.

It’s fair to say that you have entered a fully customizable world. You can arrange anything however you like. And you can add them faster and easier.

Remember, have fun and make beautiful content. People can tell when you write like you talk, compared to trying to simply sound more intelligent than you. Once you pour your heart and soul into this customizable process, people will start to take notice…

How Can I Customize Blocks?

Your a few clicks away from fully customizing your WordPress site with blocks. And just like very other area of customization…remember to include good SEO practices. Because if you dont know the good practices, it wont matter how nice your site looks, if nobody ever know that it exists…

1. Navigation

So what you’re looking at is the + button. It allows you to add any sort of block you desire. Furthermore, there are many various options to choose from, a you will soon find out in this article.

Now you know that the top left area is where to select the + button. How lets see what it look like when you select a block.

Check it out, there’s how you select a pic from your computer to add to the block. However if you dont have any sweet pictures ready to upload or transfer over…you can get some here.

And there’s your beautiful image nicely placed and visible. If it isn’t centered…make sure to hit this button…because all can be for nothing if your presentation looks lazy o not well put together.

If you want your image to be clickable, add a link! However if you ad a link, make sure to stay on top of 404 errors to prevent you from losing credibility with your viewers.

Your one right click+ one left click away from doing that. Good job so far. Once you learn these fundamental abilities of using WordPress, you will be so many steps ahead of your competition who has to pay others to make it happen. In addition, that means you save money.

Sidebar Navigation

That’s your right hand sidebar (You can also hide it by clicking the X on the top right.

Types Of  Blocks

You’ll need to know what kind of blocks exist, and how to use them. Because if you do not know them…you will be missing out potentially on the greatest features that the software has to offer.

• Paragraph Block

These are as basic as it gets. And it does not mean that they are not useful. In fact, common blocks are the most widely used. Would you like an example? The paragraph block

• Image Block

With an Image Block, you can easily insert an image by uploading it from your computer. However be careful what type of images you place in your blog content, because a dangerous file can wreak havoc on the work you have already done. In addition, you do have access to security measures provide by the software, which means you will likely just receive a notification saying the file is unusable.

You can also pick it from WordPress media library, or copying its URL.

The standard WordPress options for images are included: you can add a caption, adjust the image size, add alt text, and more. I’ll add a picture Block again. For example, I used a picture of one o our Blogs, Earn your backlinks 8X faster. Check it out.

• List Block

With a List Block, you can create a list of items ordered by bullets or numbers. For example, if I were to make a list of some of the services that RankBrew offers, it would look like this…

1. Advanced SEO services to rank you in top 3 or search results.
2. Website analysis to get yours running faster than ever.
3. Business strategy creation for unprecedented success and visibility.
4. Video Marketing.
5. Brand promotion.

• Quote Block

The Quote Block lets you add your favorite quotes in a beautiful, elegant style. You want a fast and elegant design, because it could be life of death for your engagement levels and bounce rate.

Write the text and its author, then format it just as you would in a Paragraph Block. Done

“RankBrew has over 1200+ returning clients, over the course of 3000 projects. This may be why 88 awards have been given to Rankbrew over the years“.

-Dakota Ryder

You should never believe something just because it is quoted. Make sure you see the proof, because anyone could jut tell you something made up…because of this…always use you gut instinct.

• Heading Block

Directly below is an example of a “Heading” block you can use to separate your paragraphs into organized zones. You will want to do this evenly, because if you go over 300 words per heading, you will get an angry notification about paragraph length.

Just kidding, it’s not angry, However it is strict.

With a Heading Block, you can start a new section inside your post. Want to change the size? Click the icon below. In addition to size, you can choose between italic and bold. However don’t go too crazy with these features, because in the beginning it can seem like a good idea to get ore attention.

If you want to give your viewers a file to have and download for themselves, do it this way. I’ll assume you know how to add a block now, so lets select + and type in file to get this little menu.

From there, just select a pic, video, or other file to place there. This is easy because it just opens up your file manger, and lets you choose an image of your liking.

• File Block

With File Blocks, you can add all sorts of files for your visitors to download: images, archives, docs, PDFs… you name it.

From the sidebar, you can choose to display a download button, open the file in a new tab, and link to either a media file or an attachment.

• Gallery Block

A Gallery Block is for when you want to add more than one image. It has the same features as the Image Block, but you can upload multiple images within the same block.

The gallery displays a nice grid layout. In the right sidebar, you can choose the number of columns in the gallery and each image’s destination page. However I would recommend not going over 3 columns, unless you really need to.

Captions are also allowed.

• Audio Block

Planning to feature music or a podcast interview on your site? You can use the Audio Block to upload and play audio files. For example, what we will be doing in soon-to-come Rankbrew posts…is adding audio playback of the entire Blog post, jus tin case you want to learn while driving, or learn without expensive video streaming rates.

The block will display a minimalist audio player. You can choose to play it automatically and/or in a loop. In addition to music, you can show off an audio testimonial to display authority.

Can’t find a block? Use the block search bar now.

• Video Block

Using the Video Block, you are able to upload videos. Obvious right? And video is taking over.

You have the option to autoplay and/or mute them. An awesome feature is you can upload a poster image for the thumbnail

Cover Block

Using a Cover Block, you can create an image or video with text overlay. You can use it as a featured image for a post or as a header.

You can also adjust the background color and opacity. Super cool.

• Code Block

This category groups blocks that focus on formatting content, such as pull quotes, tables, and verses.

Use the Code Block if you want to show your readers examples of code snippets.

The code won’t be executed; instead, it will display in a distinct style so it stands out to your readers.

• Verse Block

With Verse Blocks, you can add song lyrics or poetry verses.

When you press enter, you won’t be directed to a new block like in the Paragraph Block; instead, it will jump to a new row. You can write as many verses as you wish while remaining in the same block.

Do you have some audio? Launching a podcast? Check this out.

• Custom HTML Block

With Custom HTML Blocks, you’re able to write HTML code and quickly preview the changes.

• Layout Elements

Just search for whatever you need, to save yourself some time…

Blocks in this category help you beautify and arrange your post in a way that’s pleasing to the eye.

This includes blocks for adding colorful buttons, smart columns, media elements, and more.

• Button Block

Would you like an example? Here’s a button you’ll see again later…

A Button Block lets you add a button to your post. Customize it, let it lead somewhere like a landing page…it’s endless.

• Columns Block

If you need to present your text in columns (“newspaper” style) rather than in full width, the Columns Block lets you do it quickly and easily.

• Media & Text Block

In the classic editor, placing images and text side by side required some developer skills. With the Media & Text Block, you can do it in just a few clicks.

It’s really that easy, are you getting the hang of it? If not…re-read this Blog post.

• Lines and Separators Block

As its name implies, allows you to add spacers between one piece of content and another.

This includes page breaks, line separators, and more.

• Embeds

The Embeds category lets you add content from social media sites, platforms, or any site from which you want to share posts or files.

You can choose to add blocks for Twitter, YouTube, Spotify, Flickr, and more. Have a Youtube channel? Put it on blast.

If you choose “Facebook” from the above list of blocks and paste a Facebook URL…

…you’ll be able to embed the Facebook post directly inside your post:

• Widgets

With the Widgets category, your existing WordPress widgets (which were usually restricted to your blog’s sidebar or footer) can be easily added inside the body of your posts as blocks.

Want to display a search bar or the latest comments on your blog right inside your post? You can by using the applicable widget block.

That’s all your going to need to start using WordPress blocks without an issue! If I’ve missed anything or you would like me to clarify on anything, please….

Leave your thoughts below, where they are heard, appreciated, and acted upon.

---