On 6^th December 2018, WordPress released new version WordPress 5.0 and introduced new block editor to WordPress users. It replaced old classic editor with new block editor called Gutenberg.

New WordPress Block Editor provides a new and different way to create content in WordPress. In this article, let’s check How to Use New WordPress Block Editor to create posts and pages in WordPress.

What is WordPress Block Editor (Gutenberg)?

Gutenberg is the name of the new WordPress Block Editor which completely changes the editing experience by creating the content in blocks in WordPress.  It provides a simple way to add different types of content using blocks to your WordPress posts and pages.

Benefits of using WordPress Block Editor:

The WordPress new block editor uses blocks to transform the way from a single document to the collection of elements. This gives a page building experience with customizable visual elements.

The new Block Editor won’t change the view of your blog’s content. It lets you insert any type of multimedia in a moment and rearrange them easily.

In new Block Editor, so many blocks available for all kinds of content like

• Paragraph
• Headings
• Images
• Lists
• Table
• Quote
• Gallery
• Video
• Columns
• Audio
• Code
• List
• Button
• Heading
• Cover

When you upgrade to version 5.0 your new block editor looks like this. This editor is completely different from the old classic editor.

In the old classic editor, if you want to create a table on your post, you need to use a separate table plugin. With the new Block Editor, you can easily create a table by adding a table block and selecting the number of rows and columns.

You can also move content elements up and down with a single click and also use drag and drop option.

The best part is you can easily learn and use block editor and create rich content for your blog. Let’s check how to use the new WordPress block editor and create the content like a pro in detail.

Difference between Old Classic Editor and New WordPress Block Editor:

Block Editor looks different from the Old Classic Editor. The classic editor looks like a text editor with formatting buttons and Meta Boxes. Block Editor is more flexible to create the content layout with available blocks like Paragraph, Headings, Images, tables etc.

Although, Block Editor looks different from the Classic Editor you can do all things which you were able to do in the Classic Editor.

How to Launch New Block Editor:

After upgrading to version 5.0 your default classic editor replaced with the new block editor and you can start using the block editor right then.

Simply create new post or page to launch the New Block Editor and start creating the post or page for your WordPress blog.

Adding blocks in block editor:

There are so many block types are available to choose from which are organized in categories and by most recent use.

Each individual block comes with own formatting settings for greater control.

The first block in every post or page is title block. Click on “Add title” block and add your blog title.

By default, the next block is paragraph block. This lets you start creating the post right away. However, If you don’t want to start the post with paragraph and want to add a different outline, you can add any block by just clicking on the + button.

By clicking on the + button will display the block menu with a search bar. You can check block categories or search with a keyword in a search bar and add blocks.

Ways to add blocks:

There are multiple ways to add blocks in posts are pages.

1. Click on + at the left side of the top toolbar.
2. Click on + at the left side of the empty block.
3. Click on + at the top center of the existing block to add a block above it.
   
4. Clicking on 3 dots on the top toolbar lets you enter block before or after existing block.  The default block type is paragraph in this option. If you want to add any other block type you can use any option from above 3.
   

Block Categories:

There are so many block types available in new block editor. Let’s check how to add each block in a WordPress post or page which helps to create rich content.

Common Blocks:

• Paragraph
• List
• Image
• Heading
• Gallery
• Quote
• Audio
• Cover
• File
• Video

 Adding Paragraph Block:

You can add paragraph button where ever you want in your WordPress post. Simply click on the + button and click on paragraph block under common blocks section. This will add paragraph block to add content.

You can also find paragraph block under most used section also.

Each block has its own settings. To find the paragraph settings, just select a paragraph block to reveal the Toolbar at the top of the block. This toolbar includes formatting options and option to change block type.

Paragraph Toolbar:

The paragraph block toolbar offers below options.

• Convert Block Type: clicking this option you can convert paragraph to any other block type.
• Change text alignment to left, center or right: this allows you to change the paragraph text alignment
• Change text format to Bold or Italic: this allows you to change the paragraph text format
• Insert hyperlink: you can insert any other post link
• Strikethrough: you can insert Strikethrough
• More options
  • Hide block settings: this hides block settings in the left sidebar
  • Duplicate: clicking this option you can duplicate the paragraph
  • Insert before: this allows inserting paragraph block before the present paragraph.
  • Insert after: this allows inserting paragraph block after the present paragraph.
  • Edit as HTML: clicking this you can edit a paragraph in HTML mode
  • Add to reusable blocks: you can add this block to reusable blocks
  • Remove block: this removes the block

Block Settings:

Every block has the option to change the settings in the sidebar in addition to the block toolbar. This allows you to change the text settings, color settings and advanced settings.

Text Settings: By clicking the text settings, you can change the paragraph’s font size from normal to huge.

Drop cap: this allows you to add the large first letter in a paragraph.

Color Settings:  This allows you to add Background and text color to per block basis.

Advanced: the advanced tab lets you add additional custom CSS classes to the block.

Adding List Block:

This makes easy to organize the content into lists. To create a bulleted or numbered list, just click on the + button and select list block.

List Block toolbar:

Just like every block, list block has its own settings. To find the List settings, just select a List block to reveal the toolbar at the top of the block. This toolbar includes formatting options and option to change block type.

The List Block toolbar offers below options.

• Convert block type
• Convert to unordered list
• Convert to ordered list
• Outdent list item
• Indent list item
• Change text format to Bold or Italic:
• Insert hyperlink
• Strikethrough
• More options

Clicking on unordered list lets you convert the list items to the bulleted list and ordered list lets you convert the list items to numbered list.

You can use Outdent icons to outdent the list and Indent list item indent your list. The list can also have mixed orderings such as bullets followed by numbers and vice versa.

Turn Paragraphs into Lists:

You can also turn a set of paragraphs in an ordered or unordered list. Just select the paragraphs and click on convert block type and select list block. This will change the paragraphs to list.

Adding Image Block:

Clicking on the image block lets you add images to your blog post. You can drag and drop the image, upload a new image, select an image from an image library or can insert an image from an URL.

Image Block toolbar:

Image block has its own settings. To find the Image settings, just select an Image block to reveal the toolbar at the top of the block. This toolbar includes image alignment options and option to change block type.

The Image Block toolbar offers below options.

• Convert block type
• Align left
• Align center
• Align right
• Edit
• More options

Add captions to images:

You can add the caption to the image in block editor easily. Just add a caption in space below the image in the image editor and style it using the formatting buttons.

Edit image:

Simply click on Upload or media library to add media from your library or computer.  Clicking on edit option on toolbar lets you select a new image file, change the attachment details like Title, caption, alt text and description.

Image Block Settings:

Image block has the option to change the settings in the sidebar in addition to the block toolbar. This allows you to change the image settings, image dimensions, link settings and advanced settings.

Image settings: By clicking the Image settings, you can change the image alt text which is important for SEO.

Resizing images: Image dimensions let you resize the image by adjusting the width and height of the image. Alternatively, you can also change the image percentage to 25, 50, 75 and 100% to its original size.

Link settings:

Link setting lets you hyperlink your images. You can choose to open your image as an attachment page, original media file or a custom URL of your choice.

Adding Heading Block:

A heading helps to structure your content and makes more readable by humans and search engines as well.

In order to add a heading block, just click on the + button and select heading block.

Heading Block toolbar:

Heading block has its own settings and offers below options in the toolbar.

• Convert block type
• H2, H3 and H4 headings
• Change text format to Bold or Italic:
• Insert hyperlink
• Strikethrough
• More options

The post title uses h1 tag automatically, so subsequent heading can be h2 and so on. So here in toolbar heading tags starts from h2 to h4. You can choose your heading style according to your needs.

Heading Block Settings:

Heading block has the option to change the settings in the sidebar in addition to the Heading block toolbar. This allows you to change the Heading settings, text alignment and advanced settings.

Here H1 to H6 tags are available to choose from with text alignment options.

Adding Gallery Block:

Gallery Block allows you to add multiple photos easily and arrange them in a proper way.

In order to add a gallery block, just click on the + button and select gallery block.

You can drag and drop the images, upload new images or select images from image library to create a new gallery and insert the gallery into your blog post.

Gallery Block toolbar:

Gallery block has its own settings. To find the Gallery settings, just select a Gallery block to reveal the toolbar at the top of the block. This toolbar includes gallery alignment options, edit gallery option and option to change block type.

The Image Block toolbar offers below options.

• Convert block type
• Align left
• Align center
• Align right
• Edit gallery
• More options

Edit gallery option lets you add, remove and reorder the photos in your image gallery. You can also edit the image caption using this Edit gallery option.

Gallery Block Settings:

Gallery block has the option to change the settings in a sidebar in addition to the Gallery block toolbar. This allows you to change the Gallery settings, image settings, link settings and advanced settings.

Columns: In gallery settings, you can arrange the images in your gallery in columns. You can choose from 1 to 8 and your images will automatically arrange themselves in columns.

You can only select columns proportionate to images. If you have 5 images you can only select up to 5 columns.

Cropping: You can choose whether you want to crop the images or not in your gallery. Cropping the images helps to make the images in each row of the gallery in the same size.

Link settings:

Link setting lets you hyperlink your images in your gallery. You can choose to open your image as an attachment page, original media file or none of your choice.

Adding Quote Block:

Quote Block allows you to add phrases or some important points to your blog post easily.

In order to add Quote block, just click on the + button and select Quote block.

Quote Block toolbar:

A Quote block has its own settings. To find the Quote settings, just select a Quote block to reveal the toolbar at the top of the block. This toolbar includes Quote text alignment options, formatting option and option to change the block type.

The Quote Block toolbar offers below options.

• Convert block type
• Align left
• Align center
• Align right
• Edit gallery
• Change text format to Bold or Italic:
• Insert hyperlink
• Strikethrough
• More options

Quote Block Settings:

Quote block has the option to change the settings in a sidebar in addition to the Quote block toolbar. This allows you to change the quote styles and add advanced settings.

Styles:

Clicking on styles option in Block Settings lets you choose between two block styles. One is regular and another one is large.

Adding Audio Block:

Audio block allows you to embed a podcast or any other sound file on your WordPress post or a page.

In order to add Audio block, just click on the + button and select Audio block.

You can drag and drop, upload a new audio file, select a file from media library or can insert Audio from an URL.

Once you selected an audio file, you can add an optional caption underneath the audio player.

Audio Block toolbar:

Audio block has its own settings. To find the Audio settings, just select an Audio block to reveal the toolbar at the top of the block. This toolbar includes Audio alignment options, edit audio option and option to change the block type.

The Quote Block toolbar offers below options.

• Convert block type
• Align left
• Align center
• Align right
• Edit Audio
• More options

Alignment: There are three options for the block alignment, left, center and right. Choosing the left or right will allow you to add another block alongside the audio block. Choosing center will return the block to center and take the full width of the post or page.

Edit audio:

Clicking on edit option on toolbar lets you replace with a new Audio file.

Audio Block Settings:

Audio block has the option to change the settings in the sidebar in addition to the Audio block toolbar. This allows you to change the Audio settings and preload settings.

Audio settings:

Autoplay lets you set your audio file to auto play when someone visits your WordPress post or page. Looping lets you choose if the audio file repeats after it’s finished.

Preload:

Preload allows you to select how much of the audio file to download when the post or page is loaded.

Adding Cover Block:

Cover Block allows you to add beautiful cover photos to your posts or pages.

In order to add Cover block, just click on the + button and select Cover block.

You can drag and drop the image, upload a new image or select images from the image library to add a Cover photo.

Cover Block toolbar:

Cover block has its own settings. To find the Cover settings, just select a Cover block to reveal the toolbar at the top of the block. This toolbar includes image alignment, text alignment options, edit gallery option and option to change block type.

The Image Block toolbar offers below options.

• Convert block type
• Change block alignment to left, center or right Align left
• Change text alignment to left, center or right
• Edit Media
• More options

You can add a caption to the image in block editor easily. Just add a caption in space below the image in the image editor and style it using the formatting buttons.

Edit gallery option lets you change the cover photo by selecting the new photo from your image gallery.

Cover Block Settings:

Cover block has the option to change the settings in a sidebar in addition to the Cover block toolbar. This allows you to change the Cover settings, overlay settings, background opacity and advanced settings.

Fixed background:

Fixed background means you cover image scrolls along with your post or page. Turning off this option embeds the image in its place and doesn’t scroll with your post or page.

Overlay color:

You can add color overlays to your cover image. This will automatically change the color of the image.

Background opacity:

This lets you set the opacity of the image overlay. Moving towards 100 makes overlay darker and moving toward 0 makes overlay lighter.

Adding File Block:

File Block allows you to add files to your posts or pages which will be available to your blog visitors to download using that download link.

In order to add File block, just click on the + button and select File block.

You can drag and drop, upload a new file or select files from Media library to add a file.

File Block toolbar:

File block has its own settings. To find the File block settings, just select a File block to reveal the toolbar at the top of the block. This toolbar includes block alignment, edit File option and option to change block type.

The Image Block toolbar offers below options.

• Convert block type
• Change block alignment to left, center or right Align left
• Edit File
• More options

Clicking on edit option on toolbar lets you replace with a new file.

File Block Settings:

File block has the option to change the settings in a sidebar in addition to the File block toolbar. This allows you to change the text link settings, open in new tab settings, download button and advanced settings.

Text Link Settings:

In link settings, you can choose whether to link media file directly or as an attachment page. You can also choose these two options can be opened in a new tab here by toggle the open in new tab button option.

Download Button Settings:

File block comes with a download button beside the uploaded file. This can be toggled on and off in the block settings panel.

Adding Video Block:

Video block allows you to embed a video on your WordPress post or a page.

In order to add Video block, just click on the + button and select Video block.

You can drag and drop, upload a new Video, select a Video from media library or can insert Video from an URL.

Once you selected a Video file, you can add an optional caption underneath the Video player.

Video Block toolbar:

Video block has its own settings. To find the Video settings, just select a Video block to reveal the toolbar at the top of the block. This toolbar includes Video alignment options, edit Video option and option to change the block type.

The Quote Block toolbar offers below options.

• Convert block type
• Align left
• Align center
• Align right
• Edit Video
• More options

Edit Audio:

Clicking on edit option on toolbar lets you replace with a new Video file.

Video Block Settings:

Video block has the option to change the settings in the sidebar in addition to the Video block toolbar. This allows you to change the Video settings, preload settings and poster image.

Video settings:

Autoplay lets you set your Video file to auto play when someone visits your WordPress post or page. Looping lets you choose if the Video file repeats after it’s finished. You can also choose to mute the video if required.

You can toggle to show or hide the playback control overlay on the video.

Preload:

Preload allows you to select how much of the Video file to download when the post or page is loaded.

Poster Image:

You can set a poster image that will display before the video starts. This will be helpful to indicate the video content.

Formatting Blocks:

As the name suggests it contains all formatting tools.

• Table
• Syntax highlighter code
• Code
• Classic
• Custom HTML
• Preformatted
• Verse
• Pull quote

Adding Table Block:

Table block allows you to add a table on your WordPress post or a page easily without the help of a plugin.

In order to add Table block, just click on the + button and select Table block. Now select column count and row count and click on create button to create a table.

Table Block toolbar:

Table block has its own settings. To find the Table settings, just select a Table block to reveal the toolbar at the top of the block. This toolbar includes block alignment options, table text formatting options, edit Table option and option to change the block type.

The Table Block toolbar offers below options.

• Convert block type
• Align left
• Align center
• Align right
• Edit Table
• Change text format to Bold or Italic:
• Insert hyperlink
• Strikethrough
• More options

Edit Table:

Select any cell on the table and Click on edit Table option on toolbar to reveal the edit options.

Here you can add a row/column before/after the selected column and delete the row and columns.

Table Block Settings:

Table block has the option to change the settings in the sidebar in addition to the Table block toolbar. This allows you to change the styles, Table settings and advanced settings.

Styles:

Clicking on styles option in Block Settings lets you choose between two block styles. One is regular and another one is Stripes.

Table settings:

Fixed width table cells, allow you to fix the width of each cell in that particular row.

Adding Syntax highlighter code Block:

Syntax highlighter code Block allows you to add the code snippets on your post or page easily without losing its formatting.

In order to add Syntax highlighter code Block, just click on the + button and select Syntax highlighter code block.

Syntax highlighter code Block Settings:

Syntax highlighter code block has the option to change the settings in a sidebar. This allows you to select the code settings and advanced settings.

Code Language:

Here you need to select the code language from the drop-down list that will help to wrap the code snippets in the shortcodes for that language.

Show line numbers:

Show line numbers help to add the line numbers properly. This can be toggled on and off in the block settings panel.

Highlighting lines:

Highlighting lines helps to highlight the specific lines. You can mention a range of line numbers separated with a comma. For example 2,4,5-10.

You can make URL’s clickable in the code snippets by toggle the make URL’s clickable button option.

Layout Elements:

Layout Element blocks comes with great features which helps to create stunning layouts.

• Button
• Columns
• Media & Text
• More
• Page break
• Separator
• Spacer

Adding Button Block:

Button block allows you to add a call to action button on your WordPress post or a page easily without the help of a plugin.

In order to add Button block, just click on the + button and select Button block. Now add button text in the add text option, add URL and click on apply to configure the call to action button.

Button Block toolbar:

Button block has its own settings. To find the Button settings, just select a Button block to reveal the toolbar at the top of the block. This toolbar includes block alignment options, text formatting options and option to change the block type.

The Button Block toolbar offers below options.

• Convert block type
• Align left
• Align center
• Align right
• Change text format to Bold or Italic:
• Strikethrough
• More options

Button Block Settings:

Button block has the option to change the settings in the sidebar in addition to the Button block toolbar. This allows you to change the styles, button color settings, text color settings and advanced settings.

Styles:

Clicking on styles option in Block Settings lets you choose between three block styles Rounded, Outline and Squared.

Color Settings:  This allows you to change button and text color

Advanced: the advanced tab lets you add additional custom CSS classes to the block

Adding Columns Block:

Creating multi-column content was a big issue in a classic editor. This new block editor allows you to create multi-column content easily.

In order to add Columns block, just click on the + button and select Columns block. This will add 2 columns of paragraph blocks.

Columns Block toolbar:

Every paragraph in columns block has its own settings. To find the paragraph settings, just select a paragraph to reveal the toolbar at the top of the block. This toolbar includes formatting options, text alignment options and option to change block type.

Columns Block Settings:

Columns block has the option to change the settings in a sidebar. In these settings, you can easily add columns up to 6. You can also add other blocks inside columns.

The post How to Use New WordPress Block Editor (Gutenberg)? appeared first on Royal Ecash.