Say Hello to Gutenberg Editor or Block Editor in WordPress
WordPress included a new type of Post Editor called Gutenberg Editor or Block Editor since WordPress version 5.0 and set it as the default Editor for the WordPress users. Through this inclusion, WordPress entered a new age bringing about a new idea and technological strategy in WordPress Posting and Publishing system.
But candidly speaking, most of the WordPress users are still using the old Classic Editor which is really frustrating. The main reasons behind this is that Gutenberg Editor is unknown, unclear, uncertain and thus terrific to them, not that this editor is difficult to understand. In short, They’re not in the position to say Hello to Gutenberg.
If you’re among those users who no way feel comfortable with Gutenberg and wish to go back to Classic Editor, follow the following link for the time being-
But I can assure Gutenberg Editor is modernized in features, enjoyable to learn, easier to use, and sportive to handle. Through this tutorial, we’re going to represent a vivid evidence of this statement. I’m sure you’re going to say Hello to Gutenberg Editor.
But before that have a look at ‘Why you should say goodbye to Classic Editor‘.
What is Gutenberg Editor
Gutenberg Editor is the Block-based editor. Here each component of post is a separate block. When we create a post, what do we add on the Editor’s screen? We might need to add Paragraph, Heading, Div, Image, Image Gallery, Quotation, List, Table, Multiple columns, Button, Audio, Video and other HTML elements, structures and lay-outs.
How do we put each of these things on the screen environment of Classic Editor?
We just type and insert them from up to down by using a formatting toolbar above the large Editor’s screen.
But what about Gutenberg?
In Gutenberg, each of the component stated above are separated by block. In the block-insertion window, you’ll find Paragraph block, Image block, List block etc. You just click any Insertion sign (+) on the post screen, reach the Insertion window and select your desired piece of content; you see that component inserted on the post. In short, this is Block Editor.
All probable structures are pre-built in each block. You just need to change the values from the respective toolbar of the blocks.
Why to say Hello to Gutenberg Editor
Beyond all reasoning, we can simply say you can’t avoid Gutenberg as it is the future Editor for WordPress. Technology never goes backward. Over time, Classic Editor will disappear which WordPress contributors have already declared.
So, is it logical to stick to the back-dated version of things while the latest one is before you?
Now let’s pinpoint the factors that must prove Gutenberg Editor enticing to you-
First impression problem
When a WordPresser enters the Block Editor’s screen leaving behind long-cherished Classic Editor, he/she finds it strange-looking, unfriendly and complicated at the first sight. Frankly speaking, they loses way failing to decide how and where to start.
This is largely because, they’re not accustomed to using it. In other word, Gutenberg Editor isn’t promoted to them. This first impression problem can be solved if they just stare at the Visual structure of the Block Editor’s screen with intensive care.
Let’s see at a glance the overall structure of the Gutenberg screen-
When you add a new post, you reach the Block editor’s screen with an empty block saying ‘Start writing or type / to choose a block‘ in the middle. When you start writing, this empty block turns into a Paragraph block. Write anything in the Text field, you see the toolbar above for Paragraph block.
Now, to insert any block in the content field, do the followings-
- click the Block Insertion sign (+) placed on top-left of the screen or right to an empty block or any other places. you reach a Block Insertion window.
- Select your desired block. Your block will be positioned in definite place.
Above the screen, we see Title field saying ‘Add Title‘.
Each block has its own formatting toolbar above the block. There are more formatting options for each block on right-sidebar panel. You find More Formatting options by clicking Setting icon (on Top) >> Block if they are not already selected.
Left to Block option, there is Document option that applies to whole document and is composed of several options like Status and Visibility, Permalink, Categories, Tags, Featured Image etc. This is roughly what we see on the right panel of Classic Editor.
There is also another source of More Options (three dots) on top-left of right panel. It is new in Block editor. By clicking it, you find View, Editor and Tool options.
However, I think, all these stated above are the things that are enough to blow out vagueness, darkness and fearfulness from your impression of Gutenberg Editor.
However, to learn every details of how to use Block Editor, read up the following post shortly-
Blocks are like Tools in drawing Toolkit
Many things like drawing pencil, Eraser, Sharpener, Pen, colored pencils, Charcoal etc. are essential tools for a drawing toolkit. Whenever the artist needs any, he/she picks from the box/bag, make use of it and put again in its place.
Gutenberg Blocks are like the tools of the WordPress posting toolkit. All the blocks are already stored in the Block-insertion page. Whenever needed, click the insertion sign and insert your wanted block in the posting work-field. But you needn’t put it back as you actually get a copy of blocks.
As each block acts like a separate tool, there is no hassle, no fear of clutter, You even needn’t worry about their management. All are separate, all are free. Use if you like; remove if it is useless and replace with the corresponding one just by clicking.
Handle Blocks comfortably
Here ‘handle‘ involves Edit, Copy, Duplicate, Move up and down, Delete, Modify, Save, Change, Insert before or after etc. Performing any of the tasks is not only easy but comfortable also.
Take a deeper look at the toolbar of any block. Depending on Block instance, toolbar may vary. But a common feature of each tool is a Three-dot menu on the right.
Click on the menu. You’ll find a bunch of options. All of the toolbar-options will let you perform the above-mentioned tasks without any hassle. I think they’re all self-explanatory. Once you use, you might be able to teach others.
You can also switch between Visual mode and HTML mode of an individual block by clicking Three-dot.
Find and edit blocks independently
In Classic, finding a definite part of content to edit from a long post (Suppose 2000-word post) is really tiresome, especially, if you have to do both-way editing- in Visual mode and Text Mode. This is also time-consuming.
When I used Classic editor, I applied a trick to be able to mark-out each part of content. At drafting stage, I separated necessary paragraph, div etc. with a line of # sign with name by which I could figure out the target element from both Visual and HTML side and edited easily.
But Gutenberg is doing the same thing technologically in my favor applying the idea of Block. Now I needn’t mark-out element but each part is already marked-out by different blocks which can easily be identified and edited independently without confusing with others.
Reusable block flourishes your creativity
You can Save any block as ‘Reusable’ for using in the next time by clicking Three-dot menu with each block. Your saved blocks will be shown in Block Insertion window in a separate Reusable Block tab.
You can edit and manage all of your saved Reusable blocks from a page by following this path: Three-dot menu (on upper-right of the editor’s screen) >> TOOLS >> Manage all reusable blocks.
But why to save block as Reusable? Here are the probable answers-
- While using a block, you customized it as you like by setting own Values and added necessary Content. You want to use this next time without any efforts. You can save it as Reusable block and Reinsert it in no time.
- You have a decent understanding of HTML and CSS. You restructured a block from HTML mode and want to reuse it.
- You collected codes of an HTML structure from a tutorial or anywhere. Just insert an HTML block on the Editor and paste the code. Then save it as Reusable block for future use.
This way, try to enrich your Reusable block collections with more and more blocks. This efforts will eventually make you efficient as well as creative in using block. For details of Reusable block, just click-
Reusable block: How to Create, Save, Reuse, Edit and Manage
Export Import and Share Blocks
Your Reusable blocks are exportable, importable and shareable. Through ‘Reusable block management page‘, you can export any block as .json file. The Export link lies under block title in the list. Again, import any saved .json file from the same page by clicking ‘Import from JSON‘ button on top-left.
This features open a great possibility of sharing blocks and enriching your collections. So make the best use of it.
Block Directory: Unlimited possibility for WordPressing
Block Directory is the collection of blocks on WordPress.org contributed by WordPress community.
Suppose you want to add a Tooltip (showing defined text on hovering mouse upon a link) on a post. But there is no block named Tooltip or so in WordPress default block-list.
But you can try to find it from Block Directory. Just click on Insertion (+ sign) and reach Block window. On Search box write ‘Tooltips’. The system will first look for it in the default block list and then in Block Directory. If it is available there, all the probable results will be shown.
This might be the unlimited source of collection of advanced block structures for the WordPress users.
Add Plugin-free structure by Block
There are many pieces of content that need Plugin or free coding to include in the Classic Editor such as List, Table, Multiple column, Media and Text, File to Download, Button, Search Box and much more.
But in Gutenberg editor, each of these items has its separate block and you can easily insert them in the post just by clicking.
Embedding is romantic here
In Gutenberg, you can embed the following Social Media and other contents fantastically by using individual block which is out of reach of Common Classic Editor users-
- Different files including .pdf, .html, .css etc.
- Audio and Video files
- Most popular Social Media posts including Facebook, Twitter, YouTube, Instagram, Tumblr, WordPress, Reddit etc.
Classic Editor is also with you
Beyond all of these reasoning, if you like to create or edit the whole post or a part of it by using Classic editor’s style, there is options for you in the Block Editor. You just need to add a Classic block. In Classic block, you’ll get exactly all of the environment of the Classic Editor.
Start Learning HTML, CSS from Block
If you’re accustomed to using only Visual mode of Block Editor, also try the HTML mode whether you know web language or not. Stare at the coding for a long time and try to guess how these symbols by English letters Behind the scene have made it possible to build up a beautiful visual structure.
<p style="color:green;">This is a Paragraph with green-colored text</p>
This is a Paragraph with green-colored text
Look at the instance above. As you inserted, you know this is a Paragraph block. Try to find what is the symbol that is used to determine that this is a paragraph and how.
You see (in visual) the color of the paragraph is green. Whether you understand or not, find where the color name is written or coded in HTML. Change it (suppose ‘red’) and see the result.
You must be elated at the pleasure of new invention and tend to show your friend that you also can.
Now enter a basic HTML-CSS learning site and discover what other symbols mean.
However, this might be the confidential way how you can start probable journey to learning web language.
Now friend, what is your thought about Gutenberg? Aren’t you ready to say hello to Gutenberg Editor. I’m confident, you are.
Yet, if you’re still swinging on a Pendulum, probably you’re caught-up by Inertia of Rest. You won;t move unless someone pushes you with the advanced knowledge of Gutenberg Editor of WordPress.
Happy Blogging! Happy WordPressing!
