Blog Writing: How to Create a Blog Post Using WordPress Gutenberg

Blog Writing: How to Create a Blog Post Using WordPress Gutenberg

So, you decided to start a blog or plan creating one in the near future.

Congratulations!

Besides being one of the most powerful content marketing tools, blogging also increases writing skills and general knowledge.

As a result, we created this detailed tutorial that’ll teach you how to:

  • Create a blog post.
  • Use WordPress Gutenberg editor advantages.
  • Handle the most-used post elements the wise way.

As an example and for the guideline purposes, we’ll use the free OceanWP theme (affiliate).

How to Start a New Blog Post

There are three ways to write a new blog post. You can use the:

  1. Adminbar shortcut.
  2. Sidebar menu.
  3. Post menu

Each options will do the exact thing — start a new blog post. There’s no difference other than to use them at your own convenience.

#1 Add Post Using the Adminbar

Select “+ New” drop-down menu.

Choose “Post” to create a blog post.

Screenshot of adding a new WordPress blog post via admin bar

#2 Add Post Using the Sidebar Menu

Click “Posts”.

From the side-menu select “Add New”.

Screenshot of how to start a blog post in WordPress

#3 Add Post Using the Post Menu

Pick the “Posts” menu option on the left sidebar.

Left click on the “Add New” button.

Screenshot on how to write a blog post in WordPress using the side-menu bar

Welcome to the WordPress Gutenberg Blog Post Editor

Ever since December 2018, or ever since the WordPress 5.0 (Bebo) came out, the classic WP editor has been replaced with the block editor, aka the Gutenberg editor.

Although Gutenberg offers rich and versatile experience, it still has plenty opponents among veteran WordPress users. Old habits die hard, don’t they?

Nonetheless, we’ll show you how to use the new WP editor to create a blog post with ease. It’s simple, elegant, blazing fast and offers more control over your content. Trust us.

You’ll get a grasp of it in less than a few minutes.

How to Create a Blog Post With WordPress Gutenberg Blocks

Each blank blog post starts with two primary blocks.

Screenshot of a blank WordPress editor

The first field is for your blog post title. It even has a nice description saying “Add title”, so enter your catchy headline.

The next item is a regular content block. You can convert this block into anything you want. For example, paragraph, heading, image, etc. If you start typing, the field becomes a paragraph by default. Moreover, you can transform it to its “next of kin”: list, quote, heading, verse, etc.

For this tutorial, we’ll discuss essential blocks: paragraphs, headings and images. But, fear not, because almost all block-types function the same way.

WordPress Gutenberg Blocks

When you left-click into the presented field, you’ll see a circled-plus sign appear on the left. That’s a menu for all block-types available. You can search for a certain type or browse through the categories.

On the right side, you’ll see three block suggestions. WordPress generates these based on your blog-post writing habits.

Screenshot of WordPress Gutenberg editor blocks

Of course, you don’t have to select the paragraph-type each time you want to enter written content. Start typing or paste existing content, and WP will automatically convert it into a paragraph (or paragraphs).

Blog Post Paragraph

Once you’ve entered your sentence(s), you’ll notice a text-format menu appear for the first time.

The menu-bar includes options for:

  • Alignment (left, center, right).
  • Formatting (bold, italic).
  • Link option (to insert URLs).
Screenshot of WordPress Gutenberg paragraph block text format menu

The small down-arrow adds more rich text controls:

  • Justify.
  • Strikethrough.
  • Underline.
  • Additional options based on your writing preferences or installed plugins.
Screenshot of WordPress Gutenberg paragraph block rich text format menu

The three-vertical-dots menu is the same for ALL blocks:

  • Hide block settings. (Hide the right panel for less distraction.)
  • Duplicate. (Creates another block with the exact same settings.)
  • Insert Before. (Add a blank block before the selected block.)
  • Insert After. (Insert a blank block after the selected block.)
  • Edit as HTML. (Don’t use this option if you’re unfamiliar with HTML.)
  • Add to reusable blocks. (Creates both a copy of your text and its format. If you use one sentence (tagline) or a whole paragraph (call to action) often, it saves you time from entering the same content all over again. Or, from setting up the style.)
  • Remove block. (Delete block and its content.)

PRO TIP: If you use reusable blocks merely for style purposes, make sure to convert them into a regular block before changing the content (via three-dots menu). Otherwise, WP will opt you to save yet another reusable block. Also, if you fail to convert or save as different block but instead make changes, WordPress will apply those alterations across entire site.

Blog Post Paragraph Block Settings

When you select a single block, additional block settings will appear on the right side of your screen. That’s where the actual fun is hidden.

Screenshot of WordPress paragraph block side menu settings

These block settings vary, because they depend on the block type.

The paragraph block usually has three additional settings.

#1 Paragraph block text settings

Text settings allow you to change the font size.

You have a quick menu, where you can choose between:

  1. Small.
  2. Normal. (Default option.)
  3. Medium.
  4. Large.
  5. Huge.
Screenshot of WordPress Gutenberg paragraph block text size settings

PRO TIP: Normal is the default body-text size you’ve selected upon theme customization. WordPress calculates other sizes based on your primary size.

Indeed, you can also enter custom font-size in the field next to it. Use plain numbers, without measure units. For instance, if you want a text with a 30pt font-size, just input 30.

Screenshot of WordPress paragraph block custom text size

PRO TIP: Google recommends the default body-text size to be at least 16pt.

The Drop Cap tool serves as a sweet addition. Use this feature to make a sentence or a paragraph stand out by increasing its initial letter.

Screenshot of WordPress Gutenberg paragraph block drop cap tool settings

#2 Paragraph block color settings

Gutenberg allows each block to have a different background and text color.

Besides several default color suggestions, you can also set a custom color either by using the slider, entering the color value or just picking out a nice shade.

Note: Each block can have only one background and one text color. Sadly, no rainbow blocks allowed.

PRO TIP: Depending on your default theme page and block background color, you may get a warning. Nothing serious, just a recommendation. WordPress will notify you if the chosen color combination (background vs. text) may be hard for people to read. After you finish playing with the color settings, make sure to scroll down a bit because this warning isn’t always visible at first. If you do see one, increase contrast between background and text color.

Screenshot of WordPress Gutenberg blog post paragraph color combination warning

Now, we can all agree that a blog post is nothing without the content. However, headings are second in line as most important.

Blog Post Headings

People fear headings as much as they dread Gutenberg.

Perhaps because headlines remind them of their school-books. On the other hand, some writers avoid headings so as to force visitors to read the entire content. Since it’s unclear where the solution to their problems is hidden, readers spend more time on the website, which was the planned intent. While it may appear as a cunning idea, don’t trick your audience and don’t kid yourself.

Avoid toxic content practices at all costs. Not only will internet users escape when they stumble upon a big black block of text (not the Gutenberg one), but Google will also punish you with lower SERPs. (Search Engine Results Page.)

How to Add a Heading

There are two ways to insert headings into a blog post:

  1. Insert a heading block.
  2. Convert a paragraph block into a heading.

The primary block menu offers only three heading levels (H2 to H4). In addition, there are standard text-format options (bold, italic, link), although we don’t recommend using any of these for headlines.

Screenshot of WordPress blog post heading block text format menu

Note: Your blog post title is in fact H1. Therefore, the highest level you need to use across your content is H2, because the heading hierarchy allows only one H1.

The side block menu contains additional heading settings:

  • All heading levels. (H1 to H6)
  • Alignment. (Left, center, right.)
Screenshot of WordPress Gutenberg single block post heading block additional menu settings

PRO TIP: Different heading levels usually have different font sizes. Therefore, don’t choose a headline depending on its size just because it suits you better. Furthermore, always follow the correct heading structure. For example, don’t insert an H4 right after an H2.

Advanced block options include:

  • HTML anchor. (Use to create internal page navigation.)
  • Additional CSS class. (We’ll skip this part once again since most of the time there’s no need for extra CSS codes.)

Blog Post Images

Although it’s possible to create a blog post without images, it’s not recommended.

Just like headings, pictures serve to break up the textual content by adding more white space to it. However, it’s worth mentioning to use images that reflect the blog post topic and complement the content.

While the quantity of graphics is a matter of choice, don’t overdo it. Insert visuals to amplify certain parts described in the content (like the mood) or to add infographics, tables or quotes. Blog images make it easier on readers who are visual learners.

In addition, blog photos also have a content marketing purpose. Quality infographics and content related graphics have a better chance of ending up on social media than the blog post they originated from (sad but true). Use this opportunity to brand your pictures by adding a logo or your website address. In this way, you’ll protect your property and people won’t wonder where those graphs came from.

The WP Gutenberg editor enables you to write a blog post by inserting a single image or a gallery. (Two images and more are referred to as a gallery.)

How to Insert a Single Image Into a WordPress Blog Post

When you add an image block, you have four (three visible) ways to insert your photos:

  1. Upload.
  2. Media Library.
  3. Insert from URL.
  4. Drag and drop.
Screenshot of WordPress Gutenberg single blog post image block

#1 Upload images into a blog post

Click the upload button, select a file from your computer and the graphic will be inserted into your image block.

#2 Select a visual from Media Library

If you wish to use a previously uploaded photo, select the Media Library button, choose your file and insert into the block.

#3 Insert a picture from URL

When it comes to borrowed graphics, it’s better to use direct links rather than downloading them to your PC and then uploading to your library. Besides being ethical, this practice reduces the number of files on your website, but also decreases page loading time.

All you need to do is right-click the image you want to use, select “Copy the image address”, and paste the link into the URL field. Finish the process and apply changes by pressing the enter-arrow.

Screenshot of how to insert an image from URL to a blog post

#4 Drag and Drop

Select a file from your computer, then just drag into the image block and release. Voila, you have your visual.

How to Position Single Blog Post Images

Upon image insertion, the graphic is centered by default. Therefore, there’s no need for you to align center.

Nonetheless, the alignment options cover the following positions:

  • Left. (Forces your text to align on the right side of the image.)
  • Center.
  • Right. (Forces your content to align on the left side of the image.)
  • Wide width. (Disregards content margins and doesn’t add side padding.)
  • Full width. (Respects the margins of your full-width content. Thus, the content has the same width regardless of the desktop monitor resolutions.)
Screenshot of the WordPress Gutenberg image block alignment menu

PRO TIP: Even though the right and left alignments look good on desktop, that isn’t always the case with mobile devices and tablets. Hence, use these variants with caution.

Insert Captions for Single Blog Post Images

Utilize the caption feature to write short image descriptions or display the picture source.

Additional Image Block Settings

The image block settings control:

  1. Alt text.
  2. Image size.
  3. Image dimensions.
  4. Link settings.
  5. Advanced CSS settings. (Again, we won’t cover this step.)

#1 Image Alt Text

The alt text (alternative text) is nothing more than an image description.

However, this text isn’t shown on your website, at least not in a visual manner. Despite that, visually impaired visitors who use screen readers benefit from alt descriptions. In other words, you’ll be giving your audience the opportunity to comprehend the meaning and the purpose of the image within your content.

Screenshot on how to insert alt text into the WordPress image block

Besides being user friendly, alt text also has an SEO role, since it helps Google locate your media files. Search engines have no other ability to “read” images (yet), other than using the description you provided.

#2 Image size

The size control offers the insertion of three “quick” sizes:

  1. Thumbnail.
  2. Medium.
  3. Full size.

Note: You can define these dimensions from your WordPress dashboard > Settings > Media.

To apply custom size, skip this step and head right to the image dimensions section.

#3 Image dimensions

There are two ways to enter custom size:

  1. Type in the desired image dimensions.
  2. Exert percentage settings.

Note: When inserting dimensions, you don’t have to define both sizes. Decide on a width or height and WordPress will do the rest, although the changes WP made to the opposite value won’t be visible in the field. So, don’t let that small issue confuse you.

PRO TIP: Avoid using images that are wider than your defined content width, except in special occasions. For example, if your content width is set to 900px, insert graphics with the exact or smaller width. In that way, visuals will load faster while the page loading time decreases.

Likewise, if you don’t want to bother with defining custom dimensions, you can reduce the image size using the provided percentage options.

#4 Link settings

Link settings make images “clickable”.

However, the default link value is set to “none“, which means you’ll have to add target link options yourself.

You can link graphics to:

  1. A Media File. (Opens image in full size upon clicking.)
  2. An Attachment Page. (Redirects to a certain page, like the About or Contact page.)
  3. A Custom URL. (Redirects to a file or page using the source’s URL.)

PRO TIP: Unless your readers benefit from viewing images in full size (to download or read content), avoid attaching photos to their media files.

How to Insert an Image Gallery Into a WordPress Blog Post

Add a gallery block by typing gallery into the search field or insert a single image block and transform it into a gallery.

The gallery block operates almost the same way as the single image block. However, there are a few small differences:

  1. You can’t insert images using custom URL, unless you do it via the Media Gallery.
  2. No caption option available.
  3. No alt text shortcut, so you’ll need to insert the description via the Media Gallery.

Since alignment functions in the exact manner, we’ll head straight to the block settings.

Additional Gallery Block Settings

The additional settings include:

  • Number of columns.
  • Image crop toggle.
  • Link options.
  • Advanced settings. (Not covered by this tutorial.)

#1 Columns number

Select the image columns number with the help of the slider or by typing in the preferred value.

Don’t worry if you happen to have an uneven graphics count, because WordPress will take care of that too.

Screenshot of WordPress Gutenberg gallery block columns settings

#2 Image crop

Toggle the image crop option on or off.

ON: All gallery image thumbnails presented are the same size and cropped to align.

Screenshot of WordPress Gutenberg gallery block image crop settings toggled on
With the Crop Images function on, all thumbnails have an even preview size

OFF: Images are shown in full width but reduced to fit the column container.

Screenshot of WordPress Gutenberg image gallery block crop settings off
With the Crop Images function off, images preview in full size with uneven thumbnails

#3 Link options

To add link options, select an individual file from the gallery, and link it just as you would link a single blog post image.

Note: Since the gallery image previews are smaller, If you want readers to be able to open images in full size, you must link each photo to its media file.

Given that we’ve covered the most important blocks, now it’s time to show you one more useful toolkit – the upper single blog post menu.

The Upper Gutenberg Single Blog Post Menu

Although this menu appears rather plain, it’s an almighty tool with the following features:

  1. Add new block. (Circled-plus sign.)
  2. Undo. (Left arrow.)
  3. Redo. (Right arrow.)
  4. Document outline. (Circled-i.)
  5. Block navigation. (Hamburger menu.)
Screenshot of WordPress Gutenberg single blog post upper menu

What should you be paying attention to are the Document Outline and Block Navigation options.

Blog Post Document Outline

This menu shows all headings in a single blog post, including their levels. At the same time, it also acts as a navigation system. Select a headline and WordPress will steer you towards it.

Screenshot of WordPress Gutenberg single blog post document outline
An example of the heading hierarchy for this blog post

However, use the document outline the wise way and check:

  • If a heading is missing somewhere in the content.
  • If the heading hierarchy isn’t broken. (H4 right after the H2, etc.)

Block Navigation

The block navigation menu also performs as your autopilot. Select a block and WP will put it in front of you. Unlike the document outline, the block navigation doesn’t show you the contents of each block, just the block-type.

Screenshot of WordPress Gutenberg single blog post block navigation menu

So, you’re wondering what is its mission, right?

Well, you can use it for your content strategy. We also have an interesting article on content marketing basics you might benefit from.

Let’s say you decided to insert an image after every fifth paragraph. Instead of checking the whole document manually, you’re given a nice little shortcut that saves time and decreases the amount of editing work.

Final Thoughts on How to Write a Blog Post

Once you get the hang of how the primary blog post blocks function, you’ll master all other WordPress blocks in no time.

WP Gutenberg gives you no reason whatsoever to be afraid. On the contrary, it shows you that content curation can be quite a party.

Explore the features.

Find out what suits your content guidelines best. Save time and create reusable blocks. Add alt text for accessibility settings and SEO goals. You’re the hero here, WordPress is your “weapon” of choice.

Turn your blog post into a stunning piece of art, check the document settings and hit publish.

Stay Titan.


Let us know what WordPress editor do you prefer and why. Share your thoughts in the comment section below.

Leave a Reply

Close Panel