WordPress Gutenberg Tutorial for Developers – Design a Full Website

Here we present our take on WordPress Gutenberg tutorial for developers. After introducing the most revolutionary update, most WordPress developers are struggling with it. We understand that website builders are helping them a lot for designing gorgeous website for their clients.

However, sometimes builders make website loading slow and in recent updates from Google, websites with lower loading speed downranking drastically. On the other hand, with Gutenberg’s simplicity, now you can build any website using it that loads a lot faster.

Johannes Gensfleisch zur Laden zum Gutenberg was a German goldsmith, inventor, printer wait! We are not talking about Gutenberg the human; we are talking about Gutenberg, the awesome block editor in the WordPress platform.

This is the latest block editor of the WordPress platform that has taken the website building experience by storm. With Gutenberg, it is easier than ever to edit and customize a website.

With Gutenberg, you can also create a website from scratch. And you do not have to know coding to work in Gutenberg. Gutenberg comes with super easy features that will help you to develop a website even if you are a newbie.

However, if you know the detailed process of how to build a website with the Gutenberg WordPress block editor, then the entire experience will become easier for you. With that thought, we will be writing a detailed WordPress Gutenberg tutorial for developers.  

Before getting into the details of how you can use Gutenberg to create a website, we would like to discuss more on the benefit of Gutenberg. It will shed light on the significance of Gutenberg and how it can be really useful for developers.

Why Use Gutenberg to Create a Website?

In the following, we will discuss why it is important to use Gutenberg to create a website. We will indicate to the benefits a developer will get by using Gutenberg. 

Easy Customization

With Gutenberg, customization of the website is made super easy. Gutenberg comes with many easy to navigate features that will help you to customize your website easily. Imagine, you do not require to write a single line of code and still end up having a stellar website. This can be made possible with the help of Gutenberg. 

Powerful Plugins

Gutenberg comes with many powerful plugins. These plugins make the entire Gutenberg experience easier to navigate. These plugins have different features that can be very essential when you are designing a website from the ground. With the integration of the proper plugins, you will be able to create a stunning website with ease. For example, in this article, we will show how a tool like Toolset Blocks can be utilized combined with Gutenberg and create a quality website.

Simple Workflow

With Gutenberg, the entire workflow will be very seamless. The editor is designed to make things easier for everyone. With the different features and additional options from plugins, you will have a very simple and structured flow of work.

Non-developers Friendly

With Gutenberg, non-developers can get benefits too. The overall process of the editor enables non-developers to get into web designing. With many features and blocks, even if you do not know how to code, you can still come up with a good quality website.

WordPress Compatibility

The compatibility of Gutenberg with WordPress is very much prominent. The overall workflow of the tool is quite similar to WordPress as well. The similarity in the workflow with WordPress made Gutenberg immediately popular. So much so that many theme developers started crafting themes that are compatible with Gutenberg only. For the overall jelling with WordPress, Gutenberg has become one of the go-to editors for individuals using WordPress.

These are the reasons for which Gutenberg is growing in popularity as a powerful editor in the WordPress community. In the following, we will look into the different elements and scopes of Gutenberg and guide you on how you can create a website using the Gutenberg editor.

WordPress Gutenberg Tutorial on How to Build a Custom Website Using Blocks

To practically demonstrate how to build a custom website with Gutenberg, we will be developing a demo website to make it easy for you to understand. The entire learning experience will cover the following topics. 

• How to use Gutenberg to add, edit, move, and delete blocks in WordPress?
• How to display side by side content using Gutenberg?
• Gutenberg WordPress tutorial on navigating through different blocks.
• Display fields in block editor with Gutenberg WordPress.
• Gutenberg tutorial for developers on how to display an image gallery.
• Gutenberg WordPress tutorial for styling blocks with Gutenberg WordPress.
• How to control typography using Gutenberg WordPress?
• WordPress Gutenberg tutorials for developers on creating a template.
• Gutenberg WordPress tutorial on adding custom search.

By learning these detailed elements, it will be easier for you to understand how to build a website with Gutenberg WordPress.

How to Use Gutenberg to Add, Edit, Move, and Delete Blocks in WordPress?

First things first, let’s go through the basics of how to create and remove your blocks. Blocks are a completely new way of building websites, but it should only take a few minutes to get used to them.

1. On a page or post, click the + button.
2. Search for and click the block you want to use in order to insert it.

The building blocks of Gutenberg are literally blocks! So the very first learning is about how to use Gutenberg to add, edit, move, and delete blocks in WordPress. In order to do that, you will have to do the following: 

• On a page or post, click on the “+” button.
• Look for the block you want to insert and click on it to get started.

• Once you have added the desired block, you can input the content on the block. For example, we can add a heading to the blog, and we will provide a title for this block.
• If you look at the left of any block, you will notice a set of handles that controls the position of the blog. You can use these sets of controls to move around the block as per your requirement.

• From the sidebar at the right-hand side of yours, you can modify the block as per your requirement. From this editor, you can modify the color, size of the image, and text alignment of the block you have selected.
• By clicking on the three-dot option, you can get additional options for the block.

How to Display Side by Side Content Using Gutenberg?

If you are designing a website, you might want to display the contents side by side. You can do that easily with the Gutenberg block editor. To show content side by side on the web page, we recommend using the columns block in Gutenberg. To do that, you will have to do the following. 

• Click on the + button and search for the column blocks.
• When you find it, click on the block, and the columns will appear on the page.

• After inserting the block, you will be able to see the blocks that can be edited with contents side by side.
• If you want to increase the number of columns, you can do that easily by selecting the column block and tweaking the number from the right-hand sidebar.
  

WordPress Gutenberg Tutorial on Navigating Through Different Blocks

If you are working on a specific block and want to get into another block for customization, you can do that easily with the Block Navigation button at the very top of the editor. When you are working with a detailed template and navigate between different blocks, you can make use of the navigation menu to navigate through other blocks. 

Display Fields in Block Editor with Gutenberg WordPress

While you are working on the different blocks, you can add additional information to the different fields of the block. For example, you can add information from post fields such as the title, body, and so on. You can also include fields from different blocks that you have already created. 

In general, there are three major ways to display fields; we will elaborate on that in the following.

Bring Content from the Block’s Field Value

Every block belonging to the Toolset Blocks library gives you the freedom to set the content from fields. You can provide any heading text to fetch from a post field or make use of the Toolset custom field. To do that, you will have to follow the steps below:

• Create a new Content Template. 
• Choose the custom post type that you will prefer to be displayed.
• Select the “+” button
• Add the Toolset Heading block

• Turn the Dynamic Heading Text box on

• Pick the post field you would prefer to be displayed. In the given example we have selected Post Title.

From now on, you will have the ability to see and correct the title of all the posts related to a specific custom post category.

Display Fields as Individual Blocks

With the following steps, you will be able to display fields as individual blocks as well. To do that, you will have to take the simple steps mentioned below:

• Select the Single Field Block
• From the bar on the right-hand side located below the Field Type, select the Standard Field option.
• From below the Post Field option, select the Post Content (Body) option.

The related description will now be visible below each of the fields.

Create a Mix Between Fields with Text in One Block

If you want to create a mix of fields and text on the web page, you can do that too with Gutenberg WordPress. Please take the steps mentioned below. 

• Click on the “+” button
• Select Fields and Text block

• Write the label you want to include. 
• You can also select from the icons regarding what type of content you would prefer to add. For example, you can add a field, form, or even a conditional output. In the given example, we have added a field.
• Then go on to select the content that you prefer to add and then click on Insert Shortcode.

WordPress Gutenberg Tutorial for Developers on How to Display an Image Gallery

If you want to create an image gallery using WordPress Gutenberg, you can do that easily. To do that, follow these steps:

• From the blocks option, select the Repeating Field/gallery block.
• After selecting the block, you can fix what custom field group you will prefer to display.
• Then you can choose the custom field you want to be displayed.

After doing so, you will be able to add an image gallery to your web page with ease.

Gutenberg WordPress Tutorial for Styling Blocks with Gutenberg WordPress

Styling and customizing your blocks are an integral part of web design. With Gutenberg WordPress, you can do the styling of the blocks very easily with Gutenberg. By following the guide we will elaborate, you can change the font, color, background, and margins of your blog. 

Styling Blocks Using the Interface

• Select the block you would like to customize.
• From the sidebar, expand the Style Settings option.
• You can customize different options such as background color, border, padding, and much more of the website.

Using the Container Block

You can get access to the container block if you are using the Toolset Blocks. You can use this option to categorize certain blocks together and pick a specific style for all those blocks together. From the right-hand sidebar, you will get the option to style your block with the available styling option. This option is suitable if you are styling multiple blocks together.

How to Control Typography Using Gutenberg WordPress?

While you are using the Toolset Blocks, just navigate to the Typography section to style and format the fonts that will be displayed on your website. From the Typography section, you can customize the following elements of the fonts. 

• Type, size, and style of font
• Transforming text with capitalizing, uppercase, and lowercase options
• Changing the color of the texts
• Adding shadow to the texts

WordPress Gutenberg Tutorials for Developers on Creating a Template.

A template is an essential element for any website. Therefore, it is much needed to know from where you can customize the template of your website. Creating a template means all the posts and custom posts of your page will follow the design and layout design in the template. To create a specific template, do the following:

• Navigate to the Toolset > Dashboard option.
• Click on Create Content Template for the type of post you want to design. 
• Similar to the previous time, you can start by adding fields to the template. From the example, you can see how we have added several different blocks that include header, image, single field block field, and more.

• After saving and publishing the template, all the related posts will have the same design and layout. This tool helps to create a template that customizes a lot of blocks and elements together.

WordPress Gutenberg Tutorial on Adding Custom Search

By adding a search option on your website, your visitors will be able to find the contents easily. They can use this search option to look for the content and elements they are looking for. In order to add a custom search, you will have to take the following steps: 

• Insert the View block on your page.
• In the View Creation Wizard, enable the search option.

• In the block, you can add Search Fields and Search Buttons from the editing area. You can also customize it if needed.

• From the right sidebar, you can add more field settings, labels, and styles to this option. When you are done with the necessary customization, you will get a visually appealing search section.

These are the different steps you can take to design a website using Gutenberg from scratch completely. You can see from the tutorial that this is one of the easy to use page builders for your website. We believe if you practice our WordPress Gutenberg Tutorial for developers, you can easily build any website like before.

We hope you found the article valuable and useful. Do not forget to check out our blog.