On 6th 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.
This tutorial helps to beginners who are just creating their blog with new WordPress block editor.
Below topics will be covered in this guide.
- Difference between Old Classic Editor and New WordPress Block Editor
- How to Launch New Block Editor
- Adding blocks in the block editor
- Block Categories and how to add and configure each block
- Saving and reusing blocks in the block editor
- Post Settings in Block Editor
- Publishing the post in Block Editor
- Keyboard shortcuts
- FAQ’s about New Block Editor
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.
- Click on + at the left side of the top toolbar.
- Click on + at the left side of the empty block.
- Click on + at the top center of the existing block to add a block above it.
- 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 to create an image gallery 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.
Adding Classic Block:
Classic block lets you create content using the old classic editor in block form. Classic editor buttons can be found in this block and you can use them to add content.
In order to add Classic block, just click on the + button and select Classic block.
Classic Block toolbar:
Classic block has its own settings. To find the Classic settings, just select a Classic block to reveal the toolbar at the top of the block. This toolbar includes block duplicate, edit as HTML and option to change the block type.
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 by dragging the slider or by typing the number directly in the field. You can also add other blocks inside columns.
Adding More Block:
Just like more tag in the classic editor, More block allows you to add a page break to your post easily that shows excerpts of your post to the reader in website Homepage.
Once reader clicked on Read More tag, full post will be displayed. You can truncate your posts easily with this block to show the first part of your blog post on blog homepage, archives and subscriber emails.
In order to add More block, just click on the + button and select More block.
Editing Read More Text:
Once you added the More block, you can edit the read more text that appears by default between lines and change the text.
Just click on the block and erase the text and type anything you required.
More Block Settings:
Button block has the option to change the settings in the sidebar. This allows you to hide the teaser before the more tag.
By enabling this option, the content appears before the more block will not be displayed in the full post once reader clicked on read more option. By default, this option is disabled.
If you want to enable it, you can toggle hide the teaser before the more tag switcher.
Adding Page Break Block:
Page Break Block allows you to add pagination to WordPress posts or pages easily which helps to split your post into multiple chapters.
In order to add Page Break block, just click on the + button and select Page Break block.
Use can add page breaks as many you want. This will split your content into pages. Each page break adds a new number to the multi-page and the link will appear at the bottom of the post as shown in the below image.
Other Blocks:
You can easily insert separator and spacer easily with the help of these blocks.
Widget Elements:
- Archives
- Categories
- Latest comments
- Latest posts
- Shortcode
Adding Archives Block:
Archives Page is a collection of your blog posts, where you can list your posts by category, tags, author, year and month wise. With the help of this block, you can easily add your blog monthly archives anywhere on your page or post.
In order to add Archives block, just click on the + button and select Archives block.
Archives Block toolbar:
Archives block has its own settings. To find the Archives settings, just select an Archives block to reveal the toolbar at the top of the block. This toolbar includes block alignment options and option to change the block type.
The Archives Block toolbar offers below options.
- Convert block type
- Align left
- Align center
- Align right
- More options
Archives Block Settings:
Archives block has the option to change the settings in the sidebar in addition to the Archives block toolbar. This allows you to change archives settings and advanced settings.
Adding Categories Block:
Categories block allows you to organize your published content in categories.
In order to add categories block, just click on + button and select categories block.
Categories Block toolbar:
Categories block has its own settings. To find the categories settings, just select a categories block to reveal the toolbar at the top of the block. This toolbar includes block alignment options and option to change the block type.
Categories Block Settings:
Categories block has the option to change the settings in the sidebar in addition to the categories block toolbar. This allows you to choose to display the categories as dropdown and option to show post count or show Hierarchy.
Display Categories in Dropdown menu:
Choose this option to display the categories in the drop-down menu rather than a bulleted list.
Show Hierarchy:
Choosing this option allows to display the sub-categories inside your main categories. You can show category Hierarchies with both list and drop down menu formats.
Show Post Counts:
Choosing this option allows to display the post count for that particular category. You can show category number of published post count with both list and drop down menu formats.
Adding Latest Comments Block:
Latest Comments block allows you to display the latest comments that published on your blog.
In order to add Latest Comments block, just click on the + button and select Latest Comments block.
Latest Comments Block toolbar:
Latest Comments block has its own settings. To find the Latest Comments settings, just select a Latest Comments block to reveal the toolbar at the top of the block. This toolbar includes block alignment options and option to change the block type.
Latest Comments Block Settings:
Latest Comments block settings allow you to choose to display the avatar, comment date and excerpt.
You can also choose to display the number of comments by dragging the slider or by typing the number directly in the field.
Adding Latest Posts Block:
Latest Posts block allows you to display your most recent posts on your blog post or page.
In order to add Latest Posts block, just click on the + button and select Latest Posts block.
Latest Posts Block toolbar:
Latest Comments block has its own settings. To find the Latest Comments settings, just select a Latest Comments block to reveal the toolbar at the top of the block. This toolbar includes align center, list view, grid view options and option to change the block type.
The Latest Posts Block toolbar offers below options.
- Convert block type
- Align center
- List view
- Grid view
- More options
Latest Posts Block Settings:
Latest Posts block has the option to change the settings in a sidebar in addition to the Latest Posts block toolbar. This allows you to change the Latest Posts settings and advanced settings.
Latest Posts settings:
Order by: Latest Posts settings allows you to display the posts in below orders.
- Newest to oldest
- Oldest to Newest
- A – Z
- Z – A
Category: You can choose the specific category from the drop-down list to display the posts by category wise.
Number of Items: You can also choose to display the number of Latest Posts by dragging the slider or by typing the number directly in the field.
Display post date: you can choose to display the post date by toggle between on and off button.
Embeds:
You can embed anything using these blocks. This consists below blocks.
- Embed
- Youtube
- WordPress
- Sound cloud
- Spotify
- Flickr
- Vimeo
- Animoto
- Cloudup
- College Humor
- Daily motion
- Funny or die
- Hulu
- Imgur
- Issuu
- Kick starter
- Meetup.com
- Mixcloud
- Photobucket
- Polldaddy
- Reverbnation
- Screencast
- Scribd
- Slideshare
- SmugMug
- Speaker deck
- TED
- Tumblr
- Videopress
- WordPress.tv
Adding YouTube Block:
If you want to embed any YouTube video just click on the + button and select the YouTube block from Embeds.
Enter YouTube video URL and click on embed to add the YouTube video on your WordPress post or page.
YouTube Block toolbar:
YouTube block has its own settings. To find the YouTube settings, just select a YouTube block to reveal the toolbar at the top of the block. This toolbar includes block alignment options and option to change block type.
The YouTube Block toolbar offers below options.
- Convert block type
- Align left
- Align center
- Align right
- More options
Saving and Reusing Blocks in Block Editor:
One of the best thing in the new Block Editor is you can save and reuse the blocks. This is very helpful for the bloggers who use specific content frequently on their blog posts.
To save the block, click on 3 dots menu and click on “Add To Reusable Blocks” option.
Now you’ll be asked to provide a name for this block. Give a name and click on save.
This block will be added to reusable blocks and ready to use.
Now let’s see how to use this reusable block and add to your post or page in your WordPress site.
In your post edit screen, click on + add block button and go to reusable blocks. Under the reusable blocks section, you’ll find your saved blocks.
Hover your mouse to see the block preview and click on it to insert on your WordPress post or page.
You can manage all saved blocks by clicking the “manage all reusable blocks” option to edit or delete the reusable blocks.
Post Settings in Block Editor:
Every block has its own settings and every post or page has document settings where you can add tags, categories, featured image, post excerpt, change discussion settings and post attributes.
In the post edit screen, you can switch between document settings and block settings in the sidebar.
Click on the Document to show or hide the settings and change the post settings accordingly.
Publishing the post in Block Editor:
Once you create the post and updated the post document settings click on the publish button. This will show your post settings along with share this post option.
Here you can select social media icons to share the post on the social media once published the post.
Keyboard Shortcuts:
Block editor comes with some handy shortcuts that will make your work even fast.
Simply add on / anywhere on post edit screen that will show the available blocks or you can add / and start typing to show the matching blocks.
You can also find more helpful shortcuts. Click on 3 dot menu at the screen top left corner and click on keyboard shortcuts or press Shift+Alt+H to show the keyboard shortcuts.
FAQ’s about New Block Editor:
How Can I edit my old posts or pages??
Your old posts and pages are safe and you can edit them whenever you want. When you click on edit post, your total post will be opened in a block containing old classic editor.
You can edit the post using an old classic editor or click on “Convert to Blocks” option in the menu to edit the post using block editor.
I’ve updated version 5.0 but still, want to use the old classic editor. How?
Install and activate old classic editor plugin which disables new block editor and keeps old editor. The classic editor supports till 2022 only.
I hope this article helped you to learn How to Use New WordPress Block Editor (Gutenberg).
If you’ve any questions, feel free to contact me and share this post with your friends on Facebook, Twitter and Google +.
Pat says
In the old editor you could tie your new blog post to LinkedIn, Facebook, Twitter & Tumblr so when the post publishes it automatically publishes on those platforms too. Where is that option in the new block editor?
Hyma says
Hi, the same option is there in the new block editor also. Once you click on publish button share this post settings will be shown in block settings. you can turn on and off.