I think you will agree when I say: This whole business of Gutenberg is very confusing.
Firstly, is the new block editor difficult to use? I mean, you don't know where all your favorite stuff went. Now, you can take more time to create an article, right?
Maybe adding a link (link or otherwise) threw you a curve and you're frustrated. Perhaps you had problems adding an image next to your text.
Perhaps you tried adding more columns and things weren't as expected. If that is not the case, you may not be able to easily add your PDFs or you see the Error Message Update failure failure.
Well, don't worry anymore; I was in your exact position not too long ago, but now I see Gutenberg is a thrill to use. There's a learning curve, yes, but by the end of today's lesson, you'll think of Gutenberg differently.
What is the Gutenberg editor
If you're using WordPress 5.0 or higher, you've probably come across a shiny new WordPress editor, known as Gutenberg.
And like many other users, you want to use a revolutionary editor, but you're hesitant because of Gutenberg. Very complicated .
Or maybe when you first meet Gutenberg, many things don't work. After all, developers have been and are still making themes and plugins compatible with the block editor.
Functionally, Classic Editor and Gutenberg do the same thing; You know, both tools help you create content without coding.
However, we are so familiar with the old editor that we find the adaptation to the new Gutenberg user interface a bit strange, if not completely confusing. At least that's what I thought.
What exactly is Gutenberg?
Gutenberg is the new default WordPress editor. It is not like the traditional image / text editor; Gutenberg uses content blocks just like many modern page builders.
It ships with more intuitive features than the Classic Editor, meaning you can create multimedia content quickly. Now you can quickly arrange special layouts whether you're working with WordPress posts or pages.
And with a few extra utilities, Gutenberg can compete favorably with established WordPress site builders like Brizy, Elementor and Divi.
The only drawback is that page builders often offer more features because they are mostly page builders! At the same time, Gutenberg is still quite young and you can only expect the block editor will grow by leaps and bounds.
In today's article, we will have an interesting time creating a WordPress post with the Gutenberg editor. I aim to include every little detail and feature so you can use Gutenberg to create content like experts.
Are you ready? If so, please create that WordPress post.
How to create a WordPress post with Gutenberg
If you run a WordPress site, you can create more posts than pages. In the following, we create a WordPress post in Gutenberg from scratch. I hope you will have as much fun as I did when testing Gutenberg.
Whatever the case, navigate to Posts> Add New as we highlight in the screenshot below.
Doing so will lead you straight to the Gutenberg editor shown below.
Add a title
You cannot write an article without a solid title. The good thing is that Gutenberg makes it easy to add a title.
The first block you see is Title at the top of the document as we detailed in the image above. To create a title for your article, enter it inside the block. Simple as A, B, C.
Need permalink editing? You can easily do that in blocks Title by clicking the button Edit as shown below.
After adding your title, press ENTER key to start a new line. Oh yes, Gutenberg maintains your own favorite navigation in the classic WordPress editor.
Add a new paragraph
Press ENTER key will create a block Paragraph New, as shown above. Before you enter any text, the block will present you with several options. See the numbered image below for more details.
Note. You can:
- Convert a new paragraph block into any other block, e.g. image, title, cover, library, WooC Commerce, form, etc.
- Use keyboard shortcuts to change a paragraph block into an image block
- Change the paragraph block into a title block, i.e. H2, H3 and H4
- Convert a paragraph block into a cover image block
For illustrative purposes, I will set aside the first paragraph for the introduction. When you add some text, a formatting toolbar appears as shown below.
Thanks to the formatting toolbar, you can:
- Convert a paragraph into a pre-formatted verse, quote, title, list, code and text
- Bold , italicized ,
attackand underline the content - Align text left, right, center and justify
- Adding a link can also open in a new tab
- Insert an inline image (yes, it exists!)
- Hide block settings
- Duplicate the block
- Insert a block before or after the current block (in our case, it's the first paragraph, so don't add anything before, only after.) You can add a cover photo block before the first paragraph if you want because it looks so good
- Edit block as HTML
- Add existing blocks to reusable blocks so you can use it in other articles
- Completely remove the block
You can further customize the paragraph block with the options available in the tab Block out is found in the sidebar menu as shown below.
A few notes about the image above:
- Select tab Block out Here to see all the options and block settings
- Select the font size and activate Drop Cap here
- Add a background color to your paragraph. I set it to blue for illustrative purposes. You can also customize the text color. In both cases, you can add unlimited custom colors
- You can add a custom CSS class here, meaning you can add additional CSS styles to your block
- Blue background and Drop Cap have been applied in Gutenberg editor
Documents tab in the Sidebar
There is another tab in the sidebar menu; the document Tab as shown below.
Here, the notes for the image above:
- Click here to switch to the tab Document
- Here, you can schedule your post, set visibility to Private or Public , set the post to status Awaiting review , select a post format and create a sticky post
- This section allows you to edit your permalink
- You can select or create a new category here
- Add tags to your post
- Set featured image
- Create a manual excerpt
- Allow comments, pingbacks and trackbacks
As you can see, you have a lot of options to design a paragraph block (and the whole article) any way you want. By the way, different blocks come with different settings as we learn in a minute.
After the first paragraph, press ENTER key again to create a new line (or paragraph block). Now, let's add an image below the first paragraph.
Add photos in Gutenberg
They say a picture speaks a thousand words, and a blog post without images is good, dull. To add an image in your WordPress post with Gutenberg, you have a few options.
When you press ENTER key A few minutes ago, you activated a new paragraph block. As if Gutenberg is intuitive, you can add an image by clicking on the plus (+) icon, image or cover as we highlight in the image below.
A few notes:
- You can add an image through the plus symbol (+)
- Here, you can add an image easily
- This option allows you to add photos cover (These images are usually larger than other images. In addition, you can add text on cover images, BTW)
Go ahead and click any plus (+) icons. Next, click the tab Picture , as shown below.
Click the tab Picture will load blocks Picture is shown in the screenshot below.
The conventional media settings
... and Picture block setting.
Did you learn anything today? I hope so. Continue.
After adding your image, Gutenberg adds a new paragraph block right below it. You can add whatever you want, but for illustrative purposes, I added some text and then a button below that.
How to add downloadable files, e.g. PDF, images, videos, etc.
Gutenberg makes it easy to add downloadable files to your WordPress post or site.
In blocks Paragraph New, click the plus icon (+), navigate to Common block and click the tab File when we highlight below.
Doing so will launch the following block:
From the block File , you can upload a new file or add one from your media library. After adding your file, Gutenberg will automatically add the button Download Cute as shown in the image below.
You can play around with options. For example, you can edit / delete titles Free Gutenberg PDF checklist PDF as well as buttons Download . You can add a CSS class to the block and style it any way you want.
Add a quote in Gutenberg
Next, add a quote because they are charming, engaging and help you drive home. In a new line, click the plus sign (+), navigate to Common block and click the tab Quote as below.
Doing so will add blocks Quote in your post as we highlighted in the video below.
Note the quoted block settings in the upper right bar?
To add your citations, enter inside the block. This is my result.
Add embedded media in Gutenberg
Gutenberg comes with a number of blocks to embed videos and other media from more than 30 websites like YouTube, Vimeo, Facebook, SoundCloud, WordPress, Sl slideshoware, etc.
To embed content, click on the plus (+) icon, navigate to Dip and select the site. For example, I want YouTube, as shown below.
Next, copy-paste the YouTube video URL and click the button Dip as in the picture below.
As soon as you press the button Dip , Gutenberg will automatically cover the link as a video when we highlight below.
How to add buttons in Gutenberg
You shouldn't have a hard time adding blocks at this time. Just click the plus sign (+) and select your block. It couldn't be easier than that.
So how do we add a node?
In a new line (or block), click the plus (+) icon, navigate to Composition composition and click the tab Knot as shown below.
Doing so will lead you to the block Knot As we detailed below.
As you can see from the image above, you can edit the button text and add a link. Alternatively, you can customize the button via the menu bar on the right side of the screen.
By the way, if you use hard-to-read color combinations on your buttons, Gutenberg will quickly tell you . How nice?
How to add columns in Gutenberg
With a nice button, let's add some columns. I will add two columns, so stay tuned.
This is what to do. Click the plus (+) icon, navigate to Layout layout and click the tab Column as in the picture below.
Gutenberg adds two columns by default. See the image below, and remember, I have added the content to the columns already.
Not bad for a few seconds at work. But maybe you don't want to create columns. Perhaps you want to display an image next to some text.
Is there a block for that? Yes, yes!
How to add images next to text in Gutenberg
Are you looking to add an image next to some text? If so, you will like the following.
As usual, click the plus (+) icon, navigate to Layout layout and click Media & Text as shown below.
You will see the block Media & Text , as shown below.
Next, upload your image / video / media or add one from the media library. Then add your text next to the media, as shown in the image below.
I was playing around with blocks Media & Text , and I came up with the following. Your mind; I also tried to squeeze a button in it
It looks very professional, doesn't it? You can certainly imagine how much you can achieve with the Gutenberg editor.
Gutenberg block of a third party
WordPress developers are very interested in making themes and plugins compatible with the Gutenberg editor. A few examples include WooC Commerce, Jetpack and Yoast SEO.
For example, you can add WooC Commerce blocks to your WordPress post. First, you must install and activate WooC Commerce.
Next, in a new line, click the plus (+) icon, navigate to WooC Commerce and select any block you want as shown below.
Do you know what that means? It means you can create multimedia and great posts and pages in minutes.
Other noticeable blocks
We already have over 2,000 words and if we continue, we will write the entire eBook. My prayer is that you can now use Gutenberg without any hiccups.
This is another list of available blocks.
- Widgets - You can add content from the widget to the blog post
- Shortcodes - You can still use the original WordPress shortcodes
- Classic - A great block containing your old content
- More - Blocks formerly known as cards Read more
- Page Break, Separator, Spacers
- Custom HTML, Pullquote, Table
- Library and HTML5 audio / video
- And much more depending on the theme and plugin you use
Out out : Creating a WordPress site is similar to creating an economical post for a few minutes of difference, so we won't go into that today.
Gutenberg keyboard shortcuts & Quick keyboard shortcuts
Gutenberg comes with a few hacks and shortcuts that make it easier. For example, if you type Forbidden / Revert in a paragraph block, it will display a list of blocks.
You can even select a specific block by entering its title after the backslash (/), for example, typing in a set of images / images will show the image block among the blocks associated with Other images. See image below for more details.
Keyboard shortcuts: To view all available keyboard shortcuts, press SHIFT + ALT + H in Windows and OPT + CTRL + H in Mac.
At the top of the document, you can see the document structure by clicking on the (i) icon, as shown below.
Pretty. Extremely smooth.
Oh, and by the way, the Update Unsuccessful error of the Update usually occurs due to a broken internet connection
Between you and me, Gutenberg is a great content editor. As long as you are willing to learn the ropes; You can get a lot from the WordPress editor in the future.
Gutenberg is still relatively young, and you can expect it to grow in usability and functionality. It will be a serious force to calculate in the coming days. Page builders better watch out, otherwise they'll run out of jobs
We hope our step-by-step guide to editor Gutenberg has helped you put everything into perspective. We believe you can now use the block editor to create content like a pro.
Please share your concerns, thoughts and questions in the comment section below.
CEO - Founder of Compa Marketing. Specialist with over 5 years of experience in the field of Digital Marketing, SEO / SEM in Vietnam and the world.
0 Comments