If you were using WordPress before the introduction of the Gutenberg editor you will notice some significant changes to what you have been used to. If you are new to WordPress this is simply how to use WordPress when writing Posts or creating Pages.

What is Gutenberg?

Gutenberg is the name of version of WordPress starting with 5. The changes that came with WordPress 5.0 meant that it was quite different from the previous versions in the way that website content is created and managed. It has been designed to make it easier to use, with the parts of the post or page being made up of ‘blocks’. The blocks can be moved on a page by dragging with the mouse, no need to copy and paste.

This article is a basic overview of how to create new posts in WordPress using the Gutenberg editor. This articled is based on version 5.2.1 which is the most up-to-date version as of May 2019.

To get the most from this article you will need to have access to a WordPress website and can log in to the Admin Panel under a role that allows you to write and publish posts. Just the basics are covered here, the Gutenberg block editor can do much more with regards to styling the look of your post than is shown here. A WordPress website needs to run on a Theme to function, depending on the theme some of the features and options may be displayed differently or not be available.

I recommend using a ‘block’ for each paragraph as this makes it easier to work with once in WordPress and help you get the final edit as you would like.

Getting Started

The best way to learn is to practice on WordPress. Once you are logged in click on Posts in the left hand menu then Add New, or the tool bar a the top where it says New, and in the drop-down menu click PostAdd a title in the box, this will be the title shown in the list of posts, think of it at your headline, it can be changed at any time so don’t worry about not having the perfect title from the outset.

Page Overview

Screen Recording Gutenberg toolbar

Once the new posts page is open you will see a tool bar at the top of the screen with some icons on the top left, if you hover over these you’ll see a label telling you their function. From the left the icon functions are as follows:

Gutenberg Insert Icon
Insert Icon

Click on this icon to see a menu showing different types of blocks available. The most commonly used will appear at the top. Use the search box or scroll to see more options.

Gutenberg Undo Icon

When this shows as black, rather than grey, click on this to reinstate the last action.

Redo Icon

When this shows as black, rather than grey, click on this to reinstate the last action changed by using the Undo button.

Gutenberg Information Icon

Use this button to view the Content Structure of your post, it will give you a word count and information about the layout of the post.

Gutenberg Block Navigation Icon
Block Navigation

This is useful when you have a long post and want to navigate to a particular part of it, it allows you to click on a particular section and it will jump to that block.

The right hand side of the tool bar are Save, Preview and Publish buttons alongside a ‘gear’ icon which represents Settings.

Gutenberg Cog Icon

if you click this it will make the left hand menu section disappear to give you a clearer typing area, if you want to left hand menu back just click on the icon again to restore it.
Under the Settings there are two tabs - Document and Block. Under the Document tab is where you can find the Revisions for the autosaved versions of your post, this will appear only when revisions have been saved.

Ellipsis icon
Show More Tools & Options

On the very far left is the vertical ellipsis icon, this indicate more options for changing the viewing settings the page so you can customise it to show and hide certain tools in a way that suits you. The Editor gives options to change from a Visual to Code editor, unless you are familiar with HTML use the Visual editor. In the bottom section are some Tools which can be used to further customise the settings and access a list of keyboard shortcuts, if you are just concerned with the basics it's not necessary to use these functions.

Saving and Previewing the Draft

WordPress will autosave your post and store up to 25 revisions. If you need to go back to your revisions they can be accessed by going to Settings where there will be a list of revisions. It is good practice to Save manually and not rely on the autosave, if the internet fails are the wrong point you could loose work. Preview the Post to see what it will look like on an actual web page by clicking on this button, it will open up a new tab in your browser when you click on this button.

Start Writing

You can simply start typing just as you would if you were using any other program. The text you type will automatically be contained inside a paragraph block. If you want to start a new paragraph just press ‘enter’ as you would in any other text editor and the new paragraph will be started in its own block. If you click anywhere inside a block you are typing a box will appear around it with basic formatting icons on the top left – within here you can align the text, bold and italicise. Depending on what type of block you are using these options change

If you write your posts in another text program such as Microsoft Word, keep the formatting as basic as possible don’t use, fancy fonts or text as they may not carry over as you expect and save the editing once the text has been copied and pasted into a post in WordPress. Being called a ‘block’ editor this refers to the sections of the web page being contained in block which can be styled individually and moved around easily. 

Headings & Sub-Headings

You’ll probably want to add some headings and/or subheadings to your paragraphs. Headings and sub-headings are added in their own blocks. There are a number of routes to adding headings and sub-headings. Here is one option:
  1. Type out the heading in a new block and click in the block in which the heading is typed so that you can see the outline and icon as shown above. 
  2. Click on the Paragraph icon  in on the far left with a down arrow next to it, click on this and a pop-up will appear with some option to ‘Transform To:‘ click on Heading and this will change the text inside this box to a heading. By default this will be size H2, the size options are limited to H2, H3 and H4 when editing in the block itself. To get more size options the Settings menu on the left must be visible, click the Settings gear if you can’t see it, and when the Block tab is selected, more sizes are available to choose from. There are more details about the tab settings below.

Adding Images

To add an image in a block, add block by clicking on the insert icon which will open up a number of options, within them will be an Image icon, click on that and a box will open containing choices for how to upload as follows:

  1. Drag and drop an image in from another folder or application such as iPhoto.
  2. Upload an image from your computer by clicking on the button.
  3. Images can be inserted from the Media Library in WordPress. The Media Library contains images that have already been uploaded into the library.
  4. The URL button allows you to add an image from the web by inserting the website address of the image you want to use.

The default setting for imported images is determined by the WordPress theme that is running on your site. In the editing options that are displayed when the image block is selected show alignment options can be set.

Gutenberg add image block screenshot
Gutenberg image block screenshot resize

Adding Further Styling Using The Individual Block Toolbar

By default there is a menu with settings on the right hand side of the screen which is set to show the Documents tab, if you click on the Block tab this will show extended options for styling the block which is selected at the time.

Paragraph Blocks

Under Text Settings if you wish to change the defaut size of 22 pixels, you can sent the font size in the drop-down menu to:

Small - 19.5 px
Normal - 22 px
Large - 36.5 px
Huge - 49.5 px

Alternatively type in a number of the pixel size you want.

Drop Cap, can be added by clicking the button to show the first letter of the paragraph larger. Note, you won’ see it until you click outside of the block, i.e. that particular block is not selected.

Click the dropdown arrow for the Colour Settings, change the colours of the background of the block, and text colours.

Click the dropdown arrow for the Colour Settings, change the colours of the background of the block, and text colours. Here is an example of white text on a blue background.

If you want to revert back to black text on a white backgroung simply click on the Clear button.

Gutenberg text block settings

Heading Blocks

When a Heading block is selected on the main writing area the options are limited to H2, H3 and H4. In the right hand menu, under the Block tab further options for Heading levels are available.

Gutenberg headings block screenshot
Gutenberg block editor screenshot

The heading alignment can be set from within the right-hand menu using the Text Alignment buttons.

Image Blocks

The image can be resized by dragging the blue dots in or out with your mouse, this a a good way of resizing and it keeps the original ratio 

Under Image Dimensions it is possible to set Width and Height but alternatively the exact image size can be set from here in pixels or as a percentage, I don’t suggest using this as it adds blank space when the ratio is not the same as the original image file.

Regarding the Image Size, by default the image is imported as Full Size. Three preset options are available in the drop down menu Thumbnail (150 px square) Medium (200 px x 300 px) and Full Size (the actual size of the imported image file).

If you change the image size when using the first three alignment tools which align to the left, right or centre, the actual size is reflected in the space taken up of the image. However if you use either the Wide Width or Full Width alignment the actual image file will be the size set under Image Size and will look pixelated and low quality. Be sure to set the image to Full Size to avoid this issue. If the images still looks low quality even when set to Full Size the actual uploaded image files is probably not big enough.

You can add a caption under the image, this will be centred with the image.

Note: when you use either the Wide Width or Full Width option as detailed below, the Image Dimension settings disappear. 

Gutenberg wide width image icon
Wide Width

Wide width alignment takes ups more space than the text

Gutenberg full width image icon
Full Width

The images will take up the full width of the screen having the effect of breaking up the page.

Gutenberg block editor screenshot

Filling out the Alternative Text in this section. It is not necessary but good practice to fill this out as websites with this text included are accessible to visitors who cannot see the image as the computer can read a description of what the image is. Filling out this information also helps with search engine optimisation (SEO) as search engines such as Google can identify the image.

A link can also be set up from this menu with options to make the image clickable, and for what happens when the image is clicked.

Creating Links

Links, also known as hyperlinks, to other pages on your website or to other websites can be created in a number of ways as follows:

  1. By highlighting the text you want to use as the link and then, whilst the text is highlighted, click on the link icon. A box will open in which you can paste or type the link you would like to point the link. This can also be used for setting links to internal page on the website, if you start typing the name of the page or a word contained in the title the box with automatically give you the available options.
  2. Start by copying the URL website address you want to link to, then go back to the WordPress post you are working on and highlight the text you want to use for making the link, then paste (Control + V on Windows or Command +V on MAC) WordPress recognises that you want to make a link and the link box will appear automatically.
  3. A button such as the one below can be used to create a link. To do this click on the insert icon to add a new block, in the search box enter Button and click on the icon. The button will appear in the block, you can type in the text you want on the button and enter in the URL or page you’d like the button to link.
Gutenberg pencil edit icon
Edit Text Link

To change a link in text, click on the link and the pencil icon that appears on the right, and you are then able to edit the link.

Gutenberg unlink icon
Remove Link

To remove a link in text, click on the link and then click on the Unlink icon as shown.

Taking it Further

Each block is customisable individually and these customised blocks can be moved around which makes easy to apply the stying as you want it. When working on your layout Preview it regularly as the way that the content displays within the editor is not exactly the same as on a real web page.

This article shows only the basics for writing a post using the Gutenberg editor. There are lots of options under the Insert icon menu. You can browse the options and experiment, these include the Media (video and audio) and Text layouts with an image on one side and text on the other, ability to embed video and social media content.

If you have any questions or suggestions about this article or others you’d like to see, please do get in touch.

Share on facebook
Share on twitter
Share on linkedin