The new WordPress Editor Tutorial: Gutenberg Powerful & Easy to Use

The new WordPress Editor Gutenberg makes it simple and easy to write engaging content with drag and drop features and different types of content blocks.

Posted on by

With the launch of the latest version, WordPress has eventually unlocked numerous opportunities! Gutenberg is the new editor in the world’s most CMS, which has given more power to WordPress in numerous ways.

WordPress editor Gutenberg
New WordPress editor Gutenberg

Whether it is the streamlining of the writing process or visualizing the content as blocks, you can expect exceptional performance from this updated version of WordPress editor. Here we would be discussing a step by step tutorial that would lend a hand in getting the most out of your WordPress development.

What is Gutenberg

Gutenberg is the latest editor of WordPress, which is intended to write and edit blogs in the most appealing way. This editor is designed to work with any plugin and all the themes available online. This is perhaps the main reason why you can expect great reliance on this platform.

There are numerous things that you get with this version, which is the reason why developers and bloggers are switching to the new version.

How it Works

For all those who are wondering about the overall functionality of the newly-released Gutenberg; it is a block-based editor that lets the user upload the content in individual blocks. These blocks are intended for both the advanced users and the beginners that are on a hunt for reliable CMS for complex designing.

One can use these blocks for:

  • Writing text
  • Images
  • Videos and Embedded Videos
  • Tables and Widgets

The developers are now provided with numerous possibilities, which simply allow them to customize these blocks in a way that it can be accessed through any plugin.

Gutenberg is a powerful and user-friendly editor that would help in augmenting blogging and would eventually remove the dependency on creating new pages. Apart from this, the new editor helps in creating flexible landing pages as well as help developers to get the best out of their CMS that they can’t expect from the older versions. You can check the detailed information about the new editor on the official website.

The Features and Functionalities that You get in Gutenberg

1. Editing the Permalinks and Titles

Easily edit permalinks with Gutenberg editor
Easily edit permalinks with Gutenberg editor

One of the best features of the new editor is that you can eventually edit the title as well the permalinks of the posts. This feature was awaited from a long time and one can now make the necessary alterations in the permalinks and the titles.

You can see the option to edit the permalink and the titles on the same page where these quantities are displayed.

2. Building a Layout in Gutenberg

If you wish to build a simple layout in Gutenberg, you have to follow the procedure that is explained below:

layout block Gutenberg editor WordPress

Step1: Initially, you need to write a post in any document editor or you can directly write into the editor.

Step 2: Just paste the post into the editor and it would be converted the same into blocks.

Step 3: If you wish to add an image to your post, you just need to hover over the exact place where you need to insert an image. After that, just click on the plus icon twice to get the insertion block. You can add multiple images through this

Step 4: For the ones that need to insert a video from YouTube, you can now simply add a video without any hassle. Just add a new video block from a tab named embeds. Paste the embedded URL of the video and just click on the embed icon.

3. Creating Columns

You can now enhance the overall appeal of your layout by inserting different columns. One can create multiple columns in a single go. Here’s the Procedure:

multiple columns Gutenberg editor WordPress
multiple columns Gutenberg editor WordPress

Step 1: First you have to add columns block in the layout by clicking on the layout element block. This would allow you to insert multiple blocks in it.

Step 2: Click on the Publish button once you have added the columns in the layout. You can go through the guidelines that are also available on the official website if you are facing some issues in the same.

4. Customizing Individual Blocks

One can always customize these blocks that simply means you can alter the content in each individual block. The styling could be easily modified with the use of a menu bar that can be seen by hovering on a block.

Step 1: For rearranging the blocks, you need to use the arrows available on the blocks. These Up and Down arrows help you in re-arranging blocks without any hassle. Alternatively, you can simply drag and drop these blogs.

Step 2: Just hover the mouse over the dots that are available on the blocks in between the arrows to adjust the position of the blogs. Alternatively, you can have a look at some online tutorials that can lend a hand in getting the things better.

The Advantages of Relying on the New Editor

The new editor simply enhances the content management experience that you can’t expect from any other CMS. The older version was quite capable of delivering adequate content management but up to an extent. The flaws and the issues that were there in the older version are now rectified to ensure a smooth content creation experience.

For the ones that possess little or no knowledge about the development could now easily develop some of the complex layouts that actually require good development skills. This is the reason why experts are predicting that the new version of the WordPress Editor would be the future of development.

Here are Some Exclusive Features that you Would Get in Gutenberg

Easy Drag and Drop Functionality: One of the biggest reasons to rely on the new editor is that you can now just drag and drop while you are creating a complex landing page. This is perhaps the reason you can rely on this editor as it has simplified the development, which earlier was a little challenging.

Easily add/edit images with Gutenberg
Easily add/edit images with Gutenberg

Advanced Styling: With the updated version, you can expect enhanced styling possibilities along with flexible designing. You can now adjust the responsiveness of the website as per your requirements.

advanced CSS styling in Gutenberg
advanced CSS styling in Gutenberg

These were some aspects associated with the updated version of WordPress Editor that can help you in getting the best out of your WordPress development.

Featured Image: Yoast

1

About Author: Henna Williams

Henna Williams is a Writer of Seasia Infotech, one of the leading WordPress development company in USA and India having a team of best WordPress. He regularly contributes his knowledge on the leading blogging sites.

Leave a Reply

Your email address will not be published. Required fields are marked *