Blogging with Gutenberg

In the following tutorial I am going to show you how to create blog posts using the new Gutenberg builder with Flothemes. If you prefer to blog like you did before, you can install the classic editor plugin and continue to blog as normal.

To add a block with Gutenberg is simple, there are 2 ways to add blocks, top left, by clicking add block, or inside the post, just hover over the text area, and click on the plus icon.

Video Overview

In the following video we explain how to use the Gutenberg to create blog posts with Flothemes.

Gutenberg Blocks

With the new Gutenberg builder you will have blocks added to your blog posts. This will allow you to add blocks to create your own unique posts. You can see a full list of the Gutenberg blocks here.

The most important blocks for more used will be:

  • Paragraphs
  • Headings
  • Subheadings
  • Buttons
  • Text columns
  • Images
  • Image Galleries
  • Video

Adding Images

Adding images with Gutenberg is different than with the classic editor, as you need to add the images one by one (unless using the gallery block). It also¬† automatically applies the sizing “large” to images which for most users will be maximum width of 1024px which can mean images are blurry. This will mean you need to manually adjust all images to be full size which can be very time consuming, especially for photographers.

To add an image block, it’s the same process as adding any block, just click on the plus icon and choose an image block, or image gallery block.

Once added you’ll want to then upload an image (drag it onto the block fro your desktop), or choose an image from your media library. I would suggest uploading your images to media library in bulk to save time, then choosing the images when building the post.

Once the image is inserted, you can resize it, edit it, add a caption and align it.

In the right hand sidebar you can also add the ALT text for your image, highly recommended for Image SEO, you can choose the image sizing and dimensions and also link the image to a URL.

Adding 2 Images side by side

One of the main advantages of using Gutenberg when creating blog posts, is the gallery feature, which allows you to add 2-3 images side by side.

You can also use the gallery feature to add all images in one list.

The process is the same as before, add a new block, but this time choose a gallery block:

You can then choose a number of images to be in the gallery from your media library or by upload them. Once selected the gallery will be inserted into the post.

You can then choose the number of columns between 1-3, if you want to crop the images to make them align nicely, and if you want to link them to anything, in this case I suggest keeping “link to” set to none.

If you have 3 images, and 2 columns, you’ll notice that the last image is full width.

You can also click on the upload an image option to upload more images for the post.

If you want to add more images from your media library, or change the order of images hit the pencil icon on the left side. Drag and drop images into order, or choose add to gallery to add more images.

Adding Text

Adding text to your post is simple, using the same method as before, choose to add a new block, then choose a paragraph block:

Add your text as you would normally. Pressing enter allows you to add a new paragraph.

If you want to add titles and headings, you can use the heading block. This will allow you to choose headings between h1-h6.

You can choose the header hierarchy by clicking on it, and using the inline options, or the block options on the right:

Using headings is a great way to break up articles, and to let Google understand know what sections are inside it. I highly recommend using them for longer articles.

So that’s how you can add text and titles with Gutenberg. In the next section we quickly look at how you can add a video.

Adding Video

Adding a video is the same process as adding any block. Simply click the add new block plus symbol, and then filter by blocks.

You can choose to add the vimeo, youtube, or embed block (amongst others) from the “Embeds” section.

We highly recommend using Youtube or Vimeo when adding video to your site as it will improve loading time for your clients.

Just choose the block you want, add the URL, and click embed:

You’ll then have a video embedded into your post.

That’s all there is to adding video with Gutenberg.