Writing a WordPress post with the Gutenberg editor

by | Mar 6, 2019 | Knowledge Base | 0 comments

Writing posts with WordPress is as easy as using a word processor. With the latest release of WordPress (5.0) comes a new page and post editor called Gutenberg. This is a very different experience from the old WordPress editor. However, it’s here to stay and it’s worth learning the ropes.

Creating a new WordPress post

Creating a new post in WordPressTo create a new post log into your wordpress website. From to top menu select ‘New’, or hover over the ‘Posts’ section in the left hand menu and click on ‘Add New’. If you are already on the ‘Posts’ page you can click on the ‘Add New’ button, next to the ‘Posts’ title at the top of the page. Start by giving you post a title. Simply click on ‘Add title’ and type away.

Adding and formatting text

To add content to the post click on the text below the title, where is says ‘Start writing or try / to choose a block’. While you are typing the format controls will be hidden. If you need them stop typing and move the mouse pointer.

To create a header click on the paragraph icon above the text, select ‘heading’, and choose what level header you want to include. Note that H1 is not available. This is because its reserved for the title of the post, and it’s good practice to only have one h1 tag on a webpage. From the same panel you’ll also see other formatting options for creating things like lists and quotes.

Adding text to a WordPress post with Gutenberg

Saving your blog post

Once you typed some text in you’ll want to save the post. The controls are located top right. If you’re not ready to publish yet click on the ‘Save Draft’ link to the left of the ‘Preview’ and ‘Publish’ buttons. The ‘Preview’ button will open a new window with the post displayed as it will look once published. Click the ‘Publish’ button to make the post live on your website.

Adding an image to a WordPress page or blog postAdding images

You’ll probably want to add a featured image to the post. The featured image will be used by WordPress when it needs an image to go with a summary of the post, like on the main blog page. Depending on how you have the website configured, it may also be used when sharing the post on social media. To add a ‘Featured Image’ click on the ‘Document’ tab in the right hand side menu. Click on the ‘Featured Image section, and ‘Set featured image’. The websites image gallery will open, you have the choice of adding an existing image or uploading a new one. To add a new image simply drag it from your computer and drop it on the media library window.

To add additional images to the post click on the plus sign next to an empty block. Select ‘Image’ and choose from one of three options. Uploading an image, selecting an image from the media library, or inserting an image using a URL.

Adding an image to a post in Gutenberg

Guide for uploading images

Before you upload an image it’s important to make sure that its optimised. The speed of a webpage is an important part of SEO. One of the easiest ways to maintain a fast website is to make that image files are not too big. To optimise an image follow these guidelines:

  • Choose an appropriate format. For graphic images, graphs, or drawings you’ll probably want to use a PNG format. For photographs use a JPG.
  • Ideally you should resize an image to the exact dimensions of the space you want to fill. However, with a responsive website thats not always possible. As a general rule resize images so that the longest dimension is no more that 1920 pixels long. That should be large enough for most uses, and small enough to limit the file size.
  • Once the image is resized compress it. The easiest way to do that is to use an online image compression tool. My personal favorites are Optimzilla or TinyPNG.
  • Rename the image. It’s good SEO practice to give the image an appropriate name, but try not to stuff keywords in unnecessarily.
  • When you upload the image don’t forget to fill in the ‘Title’ and ‘Alt Text’ fields. The image alt text is another important SEO factor.

Finishing touches

You may have finished writing your post, but you’re not quite done. For the next bit you’ll need to make sure you have the Yoast SEO plugin installed. Look in the left hand menu, towards the bottom there should be plugin names SEO. If its not there follow these instructions [to be created!] and install it.

If Yoast is installed correctly you should see the panel below at the bottom of the editing screen. There is a longer discussion on using Yoast and SEO, but for the sakes of this post we’ll just focus on filling out the meta description. The page or post meta description is important as Google will often use it as the page description in the search results. It should be a short description describing the contents of the page, of around 320 characters.

To write the description click on the ‘Edit snippet’ button. A section opens below that includes a box titled ‘Meta description’. When you start typing a bar will appear below the box. This is to help you keep the description within the 320 characters limit.

Adding a meta description with Yoast

Do you want a planet-friendly website?

Ready to make your website more sustainable? Then let us help you! We can help you create a website that is efficient, user-friendly, and environmentally friendly. So don’t wait any longer – contact us today and take the first step towards a more sustainable future!