WordPress Block Editor Tutorial

  •  
  •  
  •  
  •  
  •  
  •  

Last Updated on

I’m teaching you how can you use the new WordPress block editor tutorial. WordPress has launched a new text editor on the newest version and its called block editor. Earlier was a classic editor. However, the classic editor is also there but block editor is more effective than the old one. So, I have created a tutorial on “WordPress block editor tutorial“.

Gutenberg WordPress Editor 

This new style of block editor also called Gutenberg wordpress editor. It is named after Johannes Gutenberg, who invented a printing press with movable type more than 500 years ago. It’s idea because to make easier website building for who are not much familiar with HTML/CSS or PHP or any other programming language.

Keep Learning

Learn how to create a website

Top 2 amazingly easy ways to learn the WordPress block editor.

You will learn whole process so that will make easy to use wordpress block editor.

1. Add Title

Wordpress Block Editor Tutorial

In this section of block editor, add your page or post title whatever your page or post about. Title should be SEO favorable. it will help to rank your website on search engine. Title is also relate to the link name that will automatically created by wordpress.

2. Use Blocks to add content

After adding the title of your page/post, now move to add details text, image video, etc. In the latest version of WordPress, there is a block system to add your content to the page or post. blocks are divided into many categories so you can use as per content type like for using quote there is a block called quote block.

3 easy steps to add the block to a new WordPress block editor.

wordpress block editor tutorial

There are 3 ways to add block to add content to the page/post.

1. As you will move mouse nearer to “start writing or type/or choose block” as the + sign will appear as in the above image. click on that + icon and block list will open and choose your choice block.

2. There is + sign on top of block editor as you saw in the above image in section 2. click on that + cion and block list will display and choose what you like to add.

new wordpress block editor

3. Click on “writing or typing/or choose block” and by default paragraph block will activate. type slash from your keyword and as soon as you will type a slash, block lists will open to take the choice from the list. See in the above picture.

5 amazing wordpress blocks tutorials

WordPress defined blocks in 5 major categories.

1. Common Blocks

1.Paragraph Block: this block, there is the first item which is a paragraph. as you will select paragraph block then you can add content in the form paragraph and use alignment, bold, italic, etc. formatting.

wordpress paragraph block

2.Image Block: In this block you can insert image and formatting option for image is there. like alignment alt text etc.

wordpress image block

3.Heading Block: In this block, you can add headings to the page or post. There are 6 heading options from H1 to H6. This is important that add headings to the content. so it will readable by the search engine. So your ranking will improve more.

wordpress heading block

4.Gallery Block: Here you can UPLOAD multiple images to make a gallery to your content page.

wordpress gallery block

5.List Block: Use bullets on your content to make more effective to read. There are numeric or round circle bullet option. Also you can format text.

wordpress list block

6.Quote Block: Here you will write quote lines and make it more attractive.

wordpress quote block

7.Audio Block: Add audio to the content from this block option.

wordpress audio block

8.Video Block: If you have video, you can add that with help of this block.

wordpress video block

9.Cover Block: Add an image or video with a text overlay — great for headers.

wordpress cover block

10.File Block: Here you can add option to upload a file on your website.

wordpress file block

2. Formatting Block

1.Classic Editor: you can use classic editor which was in earlier version of wordpress.

wordpress classic editor

2. Code Block: Display code snippets that respect your spacing and tabs.

wordpress code block

3. Customer HTML Block: Add custom HTML code and preview it as you edit.

wordpress custom html block

4. Formatted Block: Add text that respects your spacing and tabs, and also allows styling.

wordpress formatted block

5. Pullquote Block: Give special visual emphasis to a quote from your text.

wordpress pullquote block

6.Table Block: Insert a table — perfect for sharing charts and data.

wordpress table blcok

7. Verse Block: Insert poetry. Use special spacing formats. Or quote song lyrics.

wordpress verse block

3. Layout Elements Block

1.Media and text block: Set media and words side-by-side for a richer layout.

wordpress media block

2.Button Block: Prompt visitors to take action with a button-style link.

wordpress button block

3.Column Block: Add a block that displays content in multiple columns, then add whatever content blocks you’d like.

wordpress column block

4.More Block: Content before this block will be shown in the excerpt on your archives page.

wordpress more block

5.Page Break Block: Separate your content into a multi-page experience.

wordpress page break block

6.Separator Block: Create a break between ideas or sections with a horizontal separator.

wordpress separator block

7.Spacer Block: Add white space between blocks and customize its height.

wordpress spacer block

4.Widgets Block

1.Shortcode Block: Insert additional custom elements with a WordPress shortcode.

wordpress shortcode block

2.Archives Block: Display a monthly archive of your posts.

wordpress archives block

3.Calendar Block: A calendar of your site’s posts.

wordpress calendar block

4.Categories block: Display a list of all categories.

wordpress category block

5.Latest comments block: Display a list of your most recent comments.

wordpress latest comments block

6.Latest Post block: Display a list of your most recent posts.

wordpress latest post

7.RSS Block: Display entries from any RSS or Atom feed.

wordpress rss block

8.Search block: Help visitors find your content.

wordpress search block

9.Tag Cloud Block: A cloud of your most used tags.

wordpress tag cloud block

5. Embeds Block

wordpress embeds block

In this block you can embed youtube video, Facebook post, Instagram post, a tweet etc.

WordPress block editor tutorial will help you to use block editor in easy way.

Conclusion

I have tried to describe all the blocks of wordpress block editor. So, you can edit your post or page without any worry.

Block editor is effective than classic editor.

Every block editor have advance settings which you can see on right side bar of wordpress editor where you can make changes like text color, text size etc.

Cheers,

Suriya

214

  •  
  •  
  •  
  •  
  •  
  •  

Add a Comment

Your e-mail address will not be published. Required fields are marked *