With the advent of the advanced WordPress editor (Gutenberg) within WordPress, it has become easy for WordPress users to add many components and elements that were not available in older versions, which makes it easier for users to design advanced and professional websites with almost no programming experience.
Although the components of the Gutenberg editor are many and varied, and more plugins can be obtained by installing plugins dedicated to this matter, you may notice that there are many WordPress plugins that, once installed and activated on the site, create their own components within the Gutenberg editor.
In this article, we will take you on a unique tour full of information that will greatly enhance the way you use the WordPress Gutenberg editor and control the components available within it.
We recommend that you review the article explaining HTML and CSS because we will use some codes from these languages during the design and creation phase of new components within the Gutenberg editor.
Default components within the WordPress component editor
When we open the Gutenberg component editor in WordPress, we notice that it contains a large number of default components that can be expanded as more plugins are installed on the site.
Note that all components within the Gutenberg editor are divided into two main parts:
1- The first part (1), which is the name of the classification, where the components in the Gutenberg editor are divided into a number of main classifications, such as the classification (text), the classification (media), and the classification (widgets).
2- The second part (2) contains all the components available within this category, which are components that are provided by default with the Gutenberg editor or are included through some of the add-ons that we install on the site.
There is also a (Reusable) tab , which contains all the components that you previously added to the list of reusable components:
To add a component to the list of reusable components again, you can click on the options button next to any component on the page or article you are editing, and then click on the option to add the component to the reusable components:
After you learned about the default components within the Gutenberg editor in WordPress and how to add a component to the list of reusable components, we move in the following paragraphs to explaining how to design completely custom components within the Gutenberg editor.
Design custom components within the Gutenberg editor
The design of Gutenberg components is basically done by inserting many code into the code files in the WordPress template that you are using, but we save a lot of time writing the codes for creating plugins as we will install one of the plugins that helps us save a lot of time.
Install the Custom Blocks plugin , which provides very useful options for creating and designing custom components in the Gutenberg editor.
When you search by name of the plugin in the Install plugins tab in WordPress, you will notice that two similar plugins appear:
Install and activate the add-on indicated by the arrow, because the other add-on adds and supplies the default component editor with dozens of ready-made add-ons, but we want to create custom components from scratch, so we will install the other add-on that specializes in creating and designing components.
After successfully installing and activating the plugin on your site, go to the WordPress control panel to find the Custom Blocks tab, and when you hover your mouse over it, you can enter the Add New Component tab.
A page will open in front of you containing options for creating and designing new components. On this page, the first thing to do is write a name or title for the new component you want to create and add it to the Gutenberg Component Editor.
For example, we named the component we want to design ( new component ):
To the left of the current page you will notice a box containing options for controlling the new component you are creating:
You will find four basic options that you must select and fill in to create the new component, which are as follows:
- ( Icon ) In which you click on the icon that appears in front of you to open a large list containing many icons. You can choose the icon that you want to appear next to the name of the new component within the Gutenberg components.
- ( Category ) In which you either choose the current category into which you want to add the new component, or you can click on the Add new Category button directly below the tab to create a new category for the component that you are designing.
- ( Keywords ) In which you write some of the keywords that you want to link to this component, so that when you search in the Gutenberg editor components search box, the component appears in front of you so that you can add it easily, whether you are within an article or a page on the site.
- ( Post type ) In which you choose the types of content in which you want this new component to appear. For example, you can choose for this component to appear while editing only articles, only pages, or only products, or you can choose all so that this component appears while editing any page within the site.
After filling in the previous data, as we explained, you can click on the publish or update button to create the new component with the name you specified:
In the previous step, we wrote the name of the component we want to create and filled in its data. The next step is to design the fields that we want to create within this component.
To clarify the idea, first let us take a look at one of the ready-made components in the WordPress editor, which is the ( Title ) component. When we click on it, we notice that a field appears inside the article editing page in which the title can be written:
We will do the same thing here, as we want to design fields for this component so that when we click on it from the list of components, the fields for the component are shown.
In order to create a new field for the component, you will click on the plus sign on the new component creation page, and the new field bar will appear, called ( new field ), as shown in the image:
To the left of the current screen, you will find the options tab for the new field you inserted:
As you can see, the Options tab contains some important data that you must fill out to design the field exactly the way you want:
- ( Field name ) In which you write a name or title for the field. We will use this name later. The name must be in English, and by default its name is New field.
- ( Field type ) In which you specify the type of data that you want to allocate to the new field, where you will find many data types such as the (Text) type, which when chosen, this field will be allocated to receive text-type data only, and the (URL) type, which allocates the field to receive addresses. And web links only. And so on the rest of the data types that you can choose from freely.
In our example, we will choose the type (Text), where we will customize the field to receive texts inside it.
The next step is in which we write HTML code that in turn displays the field content in the way we want and specify it in the code.
To add the code to display the field, you can go to the (Template Editor) tab, and inside it you will find the section dedicated to adding the code:
We also indicated at the beginning of the article that you must have a background in the HTML language, which specializes in displaying web components in a way that is understandable to the browser. Among the codes found in this language is the <h1> code, which specializes in displaying components within the page in a large font size that suits the main titles.
We will add the following code inside which we write the name of the field that we referred to in the previous paragraphs, but it must be inside the brackets {{}}:
The code that we added is a <h1> tag, as you noticed, and inside it we wrote the name of the field that we created previously. In this way, the content that is written inside the field will be displayed directly on the screen.
Now that we have added the code that contains the field name, let us try the new component by going to the edit page of any article or page on the site and opening the Gutenberg Components box:
When you click on the name of the new component, its field will be inserted into the editing page, where you can write the text you want to appear on your site using its field:
Of course, the component that we designed is a completely simple text component, but you can still create and design any component with any function you want, such as components for inserting images, links, etc., and you can create a component that contains more than one field, and in each field you specify its data type, such as texts and images from The list of data types that we explained previously:
Conclusion
In the end, creating custom components in the Gutenberg editor may help you get work done on your site faster and save you a lot of time and effort.
Imagine that you are publishing content or articles on your site and repeating a set of texts, images, and links in each article, for example. It will be difficult to repeatedly add all of those fields every time. You can create a special component that contains all the fields that you want to show, and every time you want to include Fields: Just search by the name of the component and insert it.
