The Gutenberg Wordpress editor is a new WordPress editor which was first introduced to the world in 2017. This editor differs from the previous WordPress editor in the sense that it has many additional features. You shall be happy to know that it is actually a blessing for people who are on the non-technical side. You can create and perform edit operations on websites very easily.
The Gutenberg editor allows website creation using blocks, which you can just drag and drop thereby replacing the current customisation process. You can also enable HTML tags in the new editor. If you happen to be one of those who want to know how to use/learn Gutenberg editor, then this piece is for you.
The Gutenberg editor: The major advantage of those who plan to use Gutenberg editor is that you need not be an expert in HTML or write codes. Also, you need not do the following:
- Import images or multimedia files.
- Copy paste links for embedding purposes.
- Create featured images which are added at the top of a post.
- Write shortcodes for different plugins.
- Add widgets for content which are located on the side of a page.
So, if you want to use Gutenberg editor, you shall be getting to know an editor which is more easy to use than the previous one. Also, instead of writing meta boxes and shortcodes you will use simple blocks.
How to use Gutenberg editor: Once you have installed and activated Gutenberg, you will see an icon in the left menu bar. When you launch it, it creates a demo post where you can practice before you create your own.
Add new post: Go to “Posts” in the left menu bar of the WordPress dashboard. You will see that a new post is launched in Gutenberg.
Edit: You the classic editor in case if you still in love with the old editor that you have, though you can use the new editor to edit the content as well. You can still utilise the classic editor to have you work done. You can check in the following gif about how you can use the same.
Switch between the two editors: Go to the dropdown menu in the upper right corner to switch between the visual editor and the text editor. If you need a shortcut for this, use Ctrl + Shift + Alt + M to do so.
Copy all content: If you want to use the Gutenberg editor, you can copy all content in the HTML version with just a single click. Open this feature ( both editors) by clicking on the dropdown menu in the upper right corner of the dashboard. You can use Custom HTML block to put the HTML content in it and then you can just use the preview button the view the HTML isn’t that too easy?
In classic editor you need to switch to the text view and then you had to find the place where the corresponding HTML was written, in Gutenberg they made is easier than ever to manage your content.
In classic editor you need to switch to the text view and then you had to find the place where the corresponding HTML was written, in Gutenberg they made is easier than ever to manage your content.
Page settings and documents settings: You can by yourself change various settings on the page and document. These are the following changes that you can make:
- A post can be made public or private.
- Date of publishing can be changed.
- You can select the format of post.
- You can add / edit tags and categories.
- Featured images can be uploaded.
- Enable and disable comments.
Front page: If you are running a blog and in the document settings this feature is turned on, the selected post will always appear on the front page of your blog. If you want to remove it, all you have to do is to just turn it off.
Blocks: If you use Gutenberg editor, you shall have to know that blocks are the most fundamental of its units. Click the ( + ) button next to the redo/undo option to open the blocks menu. The most common blocks are the following:
- Paragraph: The paragraph block comes with features like custom font sizes, drop caps, background colors and text colors. Also, you can add more CSS classes here, if need be.
- Image: It has a new feature which allows you to shift between gallery and image layouts. Additionally, you can set particular size dimensions and have more control over images.
- Elements: The other important elements you should be aware of are
- Cover Images.
- Quotes.
- Headings.
- Lists.
- Audio.
- Video.
- Subheadings.
- Galleries.
- Table: When you use Gutenberg editor, you shall see that with the table block, you can add and remove rows, columns of a table without any coding.
- Custom HTML: If you want, you can use a custom code when you use Gutenberg editor. Also, you can insert your code and can preview it in the block itself.
- Elements: Other notable elements which are important here include the following:
- Classic.
- Code.
- Preformatted.
- Pull Quote.
- Verse.
- Button: Buttons like “Subscribe now” and “Buy now” can be added using this block. Also there are options for alignment and font styles. Additionally, you can also set the colour of the background and shape of the button.
- Columns: This block allows you to add text columns where you shall be able to add one to six columns in a single row.
- Elements: Other notable elements include:
- Page break.
- Separator.
- Spacer.
- Read more.
Format: These blocks contain all the formatting tools.
Layout: When you use Gutenberg editor, you can create excellent layouts using this block.
Embeds: Using these blocks you can easily access any embeds. All you need to do is paste the URL in the given blank space, and Gutenberg will embed the code for you whether it is a link from YouTube or Twitter.
Reusable Blocks: You can convert any block into a reusable block so that you can use it in a different location. Developers get access to improved usability because of reusable blocks. The same block can be edited and saved to be used as a new reusable block again. This is great thing which shall be of use to you when you use Gutenberg editor.
Conclusion: The new features have been described in detail and if you use the Gutenberg editor, you shall for yourself see the advantages of this.
Also, we are leading software developers in developing CMS solutions using the WordPress environment. If you have any needs which require WordPress based solutions please do not hesitate to get in touch with us.
Our team of software developers at Vyrazu Labs shall see to it that we are able to come up with customised solutions that take care of your need.