For decades the WordPress editor was the same old boring limited editor. Was good for writing but if you wanted to create a special page, well that was impossible without knowing code or additional plugins. But with the WordPress 5.0 version, they release a new editor, Gutenberg.
It’s the new WordPress editor.
Finally, WordPress level up their game and offer a new editing experience. Now you can create rich fancy pages and posts for your WordPress website without a designer, knowing code or additional plugins.
How that? Because Gutenberg uses blocks, meaning you will choose from a list of blocks available. Then click to add content, change the style, move blocks around. Pretty much the same as Wix, Squarespace, or plugins page builder.
Now don’t get all excited. Gutenberg is still in the beginning phases. I don’t doubt that in time will improve really well and you will have thousands of option but now the style options are still a bit limited.
However, with the options available you can create beautiful pages and posts and your pages will be mobile responsive.
How you can activate Gutenberg on your website?
Gutenberg makes part of WordPress now, it’s the new editor, so you don’t have to activate it. It will be there when you open a page or post unless you have the Classic Editor Plugin activated.
If so, just go to Plugins and deactivate and delete the Classic Editor plugin and the new editor will take over.
Why you should use Gutenberg?
I know a lot of people don’t want to handle new things. It’s time-consuming to learn and develop a new skill but trust me this will really be handy.
It’s the WordPress revolution, sooner or later you will have to learn Gutenberg. And it’s not even that complicated.
It’s free and already integrated. Maybe you already are familiar with another Page Builder Plugin and you will be doing just fine but a new plugin means space allocated from your website. Why would you want to slow down your website with additional code when Gutenberg is already there and all you have to do is just use it?
It’s mobile responsive.
And You can extend the options available with a minimum of code.
Introduction to Gutenberg
Now, I will make you a quick tour of Gutenberg.
If you add a new page, your editor will look something like this. Nice and clean.
At the top you will have the title, at the bottom the options will vary depending on the theme and on the right is the same options from the old editor, Status and Visibility, Permalink, Featured Image, Comments, Page Template, and Plugins Options.
If you add a new post, you will have the Categories, Tags and Excerpt and no Page Attributes.
Until now, everything is just the same only they are arranged a little bit differently and have a different design.
At the top of the page, you will see a bar, the Gutenberg bar from where you can change the options, add blocks and see details about your page or post.
The first icon is a plus sign. The place where you find the blocks available to add on your posts. Every time you want to add some content, click on the plus icon, choose the type of block you need and click on it. And the block will be added.
UNDO & REDO
The arrow to the left, named Undo, let’s say you changed something that you didn’t like, click on the arrow to the left or CTRL+Z to go back.
The arrow to the right, Redo, or CTRL+Shift+Z. Let’s say you decided that actually want the change you’ve made, click on the Redo to add it back.
The icon with an ‘i’ in a circle, I guess coming from information, it’s named Content structure. If you click on that sign you will see information about your post or page.
The last icon, named Block Navigation, it used to have another format at the beginning, anyway, it has the same function. If you click on a block from that list, it will jump you right there, at the block you clicked on.
On the same bar, on the right, there are other options.
Save Draft, Preview and Publish links, are obviously for what the link name says.
The wheel icon usually used for settings, it will hide or show the Gutenberg sidebar. If your Gutenberg sidebar, it’s not showing, click on the wheel icon.
Next is the Yoast SEO icon, if you don’t have the Yoast SEO plugin installed and activated, that icon will not show.
MORE TOOLS & OPTIONS
And the last icon is the 3 dots to show more tools & options. When you click on that icon, a menu will expand. Below, I will explain each menu.
→ Top Toolbar
If you check this option, the bar for each block that usually appears at the top of the block will stick to the Gutenberg bar at the top.
→ Spotlight Mode
The Spotlight mode will help you to focus on a block at a time. Maybe at the beginning, you are confused about what block you make changes at, this option will help you to be sure.
→ Fullscreen Mode
Clearly, this will make your editing space full screen. If you want to write your posts without distraction, eliminate the WordPress sidebar from the left and the admin bar checking the Fullscreen mode option. To go back just uncheck the option.
→ Visual Editor vs Code Editor
You have to choose one of these. Either you choose the Visual Editor so you can see your page in real time or Code Editor. With the new Editor, I doubt somebody will choose to write the entire post in Code Editor mode, but, it’s handy when it comes to no-follow links par example.
After these, you will have options for your plugins and then some Gutenberg tools.
→ Block Manager
I get it, that Gutenberg has a lot of blocks that you will never use. So, if you want to make your editing space a bit more organized and clean you can select from here only the blocks you use.
In this way, when you are looking to add a block, you will not have to look through the entire list of available blocks.
→ Manage all Reusable Blocks
In case you have reusable blocks you can manage all of them from here.
A reusable block is a block you constantly use on your website, like your signature or disclosure. So, you build the block once, add the style and add the block to reusable, then you will add it everywhere through your pages and posts with just a click.
The cool part is, if I make changes to a reusable block, the changes will be visible everywhere I used that block.
→ Keyboard Shortcuts
If you are one of those who love to use keyboard shortcuts, you can find here the shortcuts for all the tasks.
→ Copy all Content
If for some reason you want to copy the content and don’t know how to select all the content, you have here the option to copy all the content with just a click.
The same system as Block Manager only here you choose to display options like tags, categories, excerpt and so on. If some options are missing check here maybe the option is unchecked.
On the Gutenberg sidebar, if you click on Document, here you have the option to add the main information about your page or post.
While on the block option you have additional options for each block. The options will vary depending on the type of block is selected.
My Favorites and Most Used Gutenberg Blocks
Use the paragraph block whenever you want to add text. You have the option to align the text to the left, center or right. Change the text size, color, and background. Select part of the text and make it bold, italic or link.
Do the best you can in every task, no matter how unimportant it may seem at the time. No one learns more about a problem than the person at the bottom.
There are 6 headings available and they will inherit the style from your theme. Also, you can make your headings bold, italic or link.
Now when you will want space after a paragraph or image you will have to add the Spacer block. The enter key won’t work here. But there is a big plus because you can change the space size in pixels.
The Image Block is really improved. You have the option to insert the alt image (really important for SEO), change the image size, if you want to link to something and important options for the link. And alignment and width compared to the page layout.
You can add responsive columns now very easy. All you have to do is select how many columns you want, then add different block types for each column.
Another big plus is the galleries. No more freak galleries with odd spaces between the photos. Now your images will be cropped and you can choose how many columns you want the gallery to have. Also, you can add a caption to each photo with a link.
Great way to invite your readers to take action.
Want to start a Blog but don’t know where to start? I have a step by step guide for you, where you can follow along and start a successful blog from the beginning.
Cover Image with text
Advanced block with beautiful options. Basically, you choose a photo for the background, chose the width, full- width, wide width, the horizontal and vertical position, background opacity and an overlay color if you want. Then add a block. Or two… Anyway, you can add only paragraph, heading, and button. But it’s pretty cool for a call to action.
Need a feminine WordPress Theme?
The quotes will also inherit your theme style. But you can add some fancy style.
The most courageous act is still to think for yourself. Aloud.Coco Chanel
Media & Text
Another advanced block. One of my favorites because you can add an image or video with text alongside but you can change how much space the picture occupies does not need to be 50% – 50%. As well you can add a background color.
Need web hosting?
Read my reviews about the web hosting I tried. Find out which is the best for your blog.
If you have a WooCommerce Shop on your website, you can easily insert products for your shop to your posts and pages.
Use lists to make your content more readable.
- BEST WORDPRESS THEMES FOR BLOGGING
- HOW TO ADD A SIGNATURE FONT TO YOUR BLOG
- BEAUTIFUL PHOTOS FOR BUSINESS WOMENS
- WEB HOSTING FOR WORDPRESS BLOGGERS
- BRAND YOURSELF
And the list with Gutenberg blocks can continue. Here are only a few I use frequently. You have to take a look at all the blocks available and choose for yourself.
HOW TO USE THE GUTENBERG BLOCKS
ADD A BLOCK
The plus sign icon is responsible for adding blocks. Whenever you click on it, a list with blocks will show. You can scroll to it until you find the type of block you need. Click on the block and the block will be added.
How to add a block?
- Gutenberg bar
- Hover over an existing block
- Enter inside a block
- More options
DELETE A BLOCK
If you want to delete a block, click on the block, then the icon with 3 dots for more options and remove block. OR the keyboard combination Shift+Alt+Z.
TRANSFORM A BLOCK
Sometimes it’s more time saving to transform a block instead of deleting it and adding a new one. So you have the option of transforming an existing block with something related.
If you hover over the first icon from the block bar, the block sign will transform into an icon with 2 arrows.
MOVE A BLOCK
When you click on a block, to the left will appear a small menu for navigation. You can move blocks around with the up and down arrows or you can click on the icon with dots, grab the block and drag it in the position you want.
ADD STYLE TO A BLOCK
For each block, you will have the block bar with alignment, width, height, and other options and to the right, the sidebar for the block. The options will vary depending on the block. You can extend the block style with classes.
The style you add will apply only to the block selected.
ADD A LINK
Now let’s say you want to add links to your paragraphs. Select the text, click on the icon for the link from the block bar, type in your link, click the arrow to select open in a new tab and Apply.
EDIT AS HTML
And the reason I mentioned the links is that editing as HTML should become your habit in combination with affiliate links. At least until they will add an option for link rel.
Till then, you will have to edit as HTML all your paragraphs with affiliate links and add the link rel manually.
After you added your link, click on the more options icon and select, Edit as HTML.
Your paragraph will become odd, a bunch of code and text. All you have to do is locate the rel tag. And replace “noreferrer noopener” with “nofollow”. Now your affiliate link is set up properly.
To come back to the initial format, click on the more options icon and select Edit visually.
ADD A BLOCK TO REUSABLE
Why on Earth would you want to use reusable blocks? It seems so complicated.
Actually is a smart way to speed up your writing. And it’s really easy to use.
When to use reusable blocks? For your signature at the end of the posts, disclosure, featured posts, call to actions and other block formats you use repeatedly.
For example, I will transform the block with my signature into a reusable block. When your block is styled properly, click on the more options, Add to Reusable Blocks.
Anytime you need your signature, add the signature block from reusable.
And you can add just any type of block to reusable, even complex galleries, columns and media text .
These are the basics about Gutenberg, the new WordPress Editor at the given moment. For better results with Gutenberg, use WordPress Themes that support Gutenberg. If you have questions, leave me a comment below.
- INSTALL A WORDPRESS THEME WITH DEMO CONTENT
- CHOOSE THE PERFECT THEME
- PLAN YOUR BLOG / WEBSITE FOR SUCCESS
- LAUNCH A BLOG / WEBSITE
- HOW MUCH DOES IT COST TO START A BLOG
- BEFORE CHOOSING A WEB HOSTING FOR YOUR BLOG
- START A BLOG THE RIGHT WAY
- LEARN WORDPRESS
- WHAT CONTENT GOOGLE LIKES
- BRAND YOURSELF
- WHERE TO FIND BEAUTIFUL IMAGES
- HOW TO ADD A SIGNATURE FONT TO YOUR WEBSITE