Getting Started with Gutenberg (Block Editor) in WordPress

Previously, the Classic Editor was the default editor for WordPress. It lacked the ability to format individual content elements, and it required additional plugins and some coding knowledge to achieve the desired outcomes. However, this was not beginner friendly to many individuals who wanted to create a site without much technical knowledge.

In an attempt to enhance the experience, the Gutenberg editor was developed and introduced as a DIY, beginner friendly editor. Through the use of drag and drop content blocks, Gutenberg allowed for the creation of rich content with a simpler interface and easier execution of added elements.

Gutenberg does not require installation for WordPress sites 5.0 and later as it became the default editor for increased user experience. Further information can be found on the plugin page for Gutenberg by Gutenberg Team.

In this tutorial, you will learn how to create pages using the Gutenberg editor.

Getting Started

The editor was added into WordPress 5.0 so you should already have it installed. There’s no additional plugins to download and install.

Creating Basic Blocks

Gutenberg works with a system of “blocks” that may be rearranged at any moment and adding these content blocks to your site can be done in two ways.

The first way to add blocks is by using the + icon. The icon may appear in three locations on your page: next to the WordPress icon in the editor toolbar on the top of the page, to the right of your content, or as a line with a + icon in the middle when adding blocks between other blocks.

Hovering over the icon will bring up the message “Add block”. Once clicked, it will bring up six of the most commonly used blocks such as paragraph, heading, and image. From here, select a common basic block or search for something specific; click on the content you would like to add and it will appear on your page.

The second way to add basic blocks is by using the / (slash) command.

For example, if you wanted to add a heading to your page, click where you would like to include a heading on the page and start typing /heading. This will bring up the heading block which can be added to the page by hitting the Enter key or by clicking on the highlighted option.

Paragraph Block

Adding a paragraph block is as simple as hitting the Enter key as this is the default block. You can also click on the + icon and find the Paragraph block option.

Formatting the paragraph text can be done through the associated toolbar. The most common formatting options such as Bold, Italics, Link, and Text Alignment are immediately seen on the bar.

Click on the down arrow to view all the remaining editing options.

Formatting Options

Many of the options are commonly used in other programs; however, the following are either not as common or function differently.

One helpful formatting option is Inline Code which allows for adding code snippets. This is great for individuals hoping to include code in their content without executing the code.

*The difference between pasting in code into the paragraph and selecting inline code can be seen in the image. Simply pasting the code will execute it as separate blocks while inline code allows for readers to view code snippets.

• Inline image is different from the image block as it allows for a smaller, thumbnail size image to be seamlessly placed within the text.
• Keyboard input formats the text to stand out as the keyboard action required. For example, if you wanted to let someone know the keyboard shortcut for paste, you would click Keyboard input and write Ctrl + V.

Image Block

When adding an image block, there will be options where to retrieve the image from : Upload from device, Media Library, Google Photos, Pexels Free Photos, or from URL.

Once your image has been added, you have several customization options:

• Resize it by dragging the circles from the sides and bottom of the image.
• Change alignment: where the image is relative to the block and wide/full widths
• Add a link to the image
• Crop the image
• Add text over the image
• Apply duotone filter: Changes the shadow and highlight colors
• Add a caption

*As with other blocks, you can click on the dual three dot stacks to move the image around to any place on the page.

Other Block Types

In order to see all block types, click the + icon and “Browse all” on the bottom of the box. This will expand a panel to the left where one can search for a specific block or scroll through the options.

Some of the most popular blocks include Heading, List, Quote, Table, Gallery, and File.

Classic Block Type

While Gutenberg is the default editor, you can still make use of the Classic Editor. To do so, add the Classic block.

Once added, edit content as normal all in the Classic block. Clicking Convert to blocks will  convert any blocks (such as paragraph, quote, and list in image) from the Classic block into separate Gutenberg blocks.

Block Patterns

To view Patterns, expand all block types. The expansion will happen as on the left panel and will display two tabs: Blocks and Patterns. Switch to view Patterns; patterns are premade, organized content blocks that fit inside of one larger block.

The available patterns can be found in the drop down menu and may include:

• Buttons: includes social media linked buttons or adding regular buttons for hyperlinking
• Columns: Choice of two or three columns of text with variations of images and titles
• Gallery: Originally starts with three offset images or side by side but can be expanded to include more
• Headers: Variations of media with text
• Text: Two or three columns of text, heading, or quote styles
• Query: Grids of content to link existing posts and pages

If you would like to insert a pattern at the end of your page, it can be added by simply clicking on the pattern. However, if you want to insert it between other blocks, click and drag the pattern to the desired spot on the page.

Right Hand Side Column

To open or collapse the right hand column, click on the gear icon to open the settings.

Post Configuration

To view the configuration, switch to the Post tab. This option will allow you to view important information about the post and to make changes to this information.

• Status & Visibility: Allows you to change the visibility options between Public, Private, or Password protected. Change the author of the post or to move the post to trash.
• Revisions: This will show the number of revisions made to the post and allow for the author to restore previous versions and to compare versions.
• Permalink: Change the URL of the post.

*There is also the ability to add Categories, Tags, Featured Images, Excerpts, and allow for Comments, Pingbacks, and Trackbacks.

Block Configuration

To view block configuration, switch to the Block tab after selecting the desired content block.

Some of the most common basic blocks include Heading, Paragraph, and Image.

• Heading blocks do not have many configuration options besides the typography (font size, font weight, line height) and color.
• The Paragraph blocks include the same configurations as Headings blocks with the additional Text Settings option for Drop Cap or enlarge first letter.
• Image blocks have the Style settings which allows for the default image (rectangular) or for a rounded version of the image. There is also the possibility for changing the image’s size, dimensions, and Alt text (useful for describing the purpose of the image in case it fails to load on a user’s screen).

*In all blocks, there is an option for advanced settings which includes the HTML anchor and CSS classes (if you want to customize through code).

Group Blocks

Gutenberg allows authors to create group blocks. The group block acts as a container for other blocks and then allows authors to move a single large block or apply configuration settings to several blocks.

Adding a group can be done by the use of the + icon or by typing /group.

Initially, the group block will look like a rectangle with a + in the middle. There will also be a hovering toolbar. The two overlapping squares are an identifier of a group block. Adding different content blocks can be done by clicking the + within the group block; from here, adding these blocks is the same as adding content blocks to a page.

To view the content of the group block, click on an element within the group and then Select Group from the toolbar. All contents of the group will be surrounded by a rectangle.

Other blocks can also be changed into group blocks.

For example, click on a paragraph block. Once the toolbar pops up, click on the three dots and click Group. This will move the paragraph block into a group.

Reusable Blocks

Reusable blocks can be created once and then used across multiple pages. If you want to change the block, change it at the source and it’ll update everywhere it’s used.

Create Reusable Blocks

To create a Reusable block, select an existing block or group on your page. Click on the three dots in the toolbar, and click Add to Reusable blocks.

The next window will be to assign a name to the block. Use something that makes sense and can easily identify the block in the future.

Save the name. You will then see the name displayed in the toolbar of the Reusable block.

(This example uses the name “Information”).

Manage Reusable Blocks

In order to manage these blocks, you will need to select the three dots from the toolbar and select “Manage Reusable blocks”.

The actual management takes place in a separate window. (If the site asks you to leave the page, make sure to save changes beforehand.)

Click on the title of the block (“Information”) or Edit to make changes.

There is an option for those familiar with JSON to import and export blocks.

There is also a possibility to add new blocks all from this management window instead of creating them in your pages and then deleting them.

Adding Reusable Blocks

Adding these blocks into your post or page is as simple as clicking the + icon and searching the name of your block.

Summary

Gutenberg was meant to radically change the editing process of content and it has achieved that quite well.

It allows for the creation of visually stunning pages by dropping and dragging blocks to the desired locations and comes with a multitude of editing options while still allowing users to switch back to the Classic Editor if desired.

There is a plethora of blocks to choose from as well as premade block patterns. Authors have greater flexibility in the configuration and formatting of blocks. They can also group blocks into one container or create reusable blocks.