Blog

WordPress Gutenberg Editor

WordPress-Gutenberg-Editor-WebePower

In this article, We’ll discuss what is the Gutenberg editor in WordPress and a few advantages of Gutenberg WordPress Editor.

Let’s get started!

1.What is the Gutenberg editor in WordPress?
2.How do we use the Gutenberg editor in WordPress?
3.How do we show the editor in WordPress?
4.How do we switch to Classic editor in WordPress?

What is the Gutenberg editor in WordPress?

The Gutenberg WordPress editor is a new page builder that is completely redesigned and reimagined editor to integrate with WordPress core. Gutenberg is slated to be released with WordPress 5.0 (Bebo).

Advantage – Drag and drop to create nick interfaces (UI / UX design) for front page design.

Official link: https://developer.wordpress.org/block-editor/

Gutenberg editor in WordPress

How do we use the Gutenberg editor in WordPress?

We’ll discuss a very simple way to use the Gutenberg page builder editor in the WordPress website.
Step 1 – Login WordPress dashboard.
First of all go your domain (http://example.com) and hit default admin URL http://example.com/wp-admin/

Login WordPress dashboard

And we get that type interface. Please enter your user name and password and successfully login to the admin panel.

Step 2 – Go to the WordPress Admin panel.
If you’re successfully logged in then will get this type of interface.

Go to the WordPress Admin panel

You will get the above type image interface that means you successfully login your WordPress admin panel.

Step 3- Check your WordPress version.
First of all, click WordPress about the page.

Check your WordPress version

Then get the WordPress version.

get the WordPress version

If your WordPress version less than five then please update or upgrade WordPress version.

Step 4 – Go to Page or Post Section.
If you get the current WordPress version then choose and click any WordPress default posts and pages section.

Go to Page or Post Section

Step 5- Click on Add New Button.
Now we get the WordPress pages or WordPress posts sections then click on add new button for add new page or new post.

Click on Add New Button

Step 6 – Enter text on the Title box and click on the plus symbol.
We will get below image interface and show and get add title text field box and type text which we want to publish on this page and we get “add block” symbol and press it.

Enter text on the Title box

Step 7 – Show Gutenberg editor
You will get below image interface that means you’re using Gutenberg editor. If you want beautiful design on your webpage then search any type of module which you want to use.

We choose a paragraph module and enter paragraph text.

If you want to show an image on paragraph the click on plus button symbol on top left section.

Show Gutenberg editor

And search image module on search box and we choose image after insert paragraph this is process of upload image and we get 3 options on image module that is upload image, Media Library and last option is Insert from URL. If you choose the media library option then we insert a caption. You can choose which type of image you want to publish (Thumbnail, Medium and Full size) on the right side sidebar. This is the process of image upload on Gutenberg editor.

Media Library

Step 8 – Feature Image
If you want to upload a feature image (main image) then click on Feature image drop down click on set featured image button and upload image which you want to feature image.

Feature Image

Step 9 – Publish page.
If you complete designing on your page then click on the publish button after again clicking on publish button then this page is published successfully.

Publish page

If you have this type of interface that means your page will be published.

Step 10 – Show frontend
Click on the view page link on the top section then we redirect to frontend of this page.

Show frontend

How do we show editor in WordPress

Step 1 – Login WordPress dashboard.
First of all go your domain (http://example.com) and hit default admin url http://example.com/wp-admin/

And we get that type interface. Please enter your user name and password and successfully login to the admin panel.

Step 2 – Go to the WordPress Admin panel.
If you’re successfully logged in then get this type of interface.

You will get the above type image interface that means you successfully login your WordPress admin panel.

Step 3- Check your WordPress version.
First of all, click WordPress about the page.

Then get the WordPress version.

If your WordPress version less than five then please update or upgrade WordPress version.

Check your WordPress version

Step 4 – Go to Page or Post Section.
If you get the current WordPress version then choose and click any WordPress default posts and pages section.

Step 5 – Click on Add New Button.
Now we get the WordPress pages or WordPress posts sections then click on add new button for add new page or new post.

Step 6 – Show Gutenberg editor
Then when you successfully reach the Gutenberg editor you can edit this page using the Gutenberg editor.

How do we switch to Classic editor in WordPress?

If you want to disable Gutenberg editor on your WordPress website then follow a few steps and successfully disable Gutenberg editor.

Step 1 – Login WordPress dashboard.
First of all go your domain (http://example.com) and hit default admin url http://example.com/wp-admin/

And we get that type interface. Please enter your user name and password and successfully login to the admin panel.

Step 2 – Go to the plugin section.
If you successfully login to the admin panel then click on plugins.

Go to the plugin section

Step 3 – Click Add New
Please click on add new button and search Classic Editor.

Click Add New

Step 4 – Install and active plugin
Click on install now button and Activate classic editor plugin.

Install and active plugin

Step 5 – Go to any page or post.
If you successfully install the classic editor plugin then go to the page section and add a new page.

Go to any page or post

If you get this type of interface then it means disable the Gutenberg editor on your WordPress site.

If you have any trouble in your WordPress website, contact our WordPress Developer. We will get back to you asap!