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 components

Gutenberg Editor

Many and many, and you can obtain more plugins 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 reading 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 components editor in WordPress When we open the Gutenberg components editor in WordPress, we notice that it contains a large number of virtual components that can be increased 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, as the components in the Gutenberg editor are divided into a number of main classifications such as classification (text), classification (media), and 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 tab (reusable)

It is a tab that contains all the components that you have 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 within the page or article that 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 a component can be added to the list of reusable components, we move in the following paragraphs to explaining how to design custom components. Entirely within the Gutenberg editor. Designing custom components within the Gutenberg editor Designing 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 in

Writing codes for creating additional components, as we will install one of the additions that helps us save a lot of time. Install an add-on

Custom blocks

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

Two similar add-ons appear: Install and activate the add-on

Indicated by the arrow, because the other add-on adds and provides the default component editor with dozens of ready-made plug-ins, 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. When you hover over it, you can enter the Add New Component tab. A page will open before 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 that you want to create and add it to the Gutenberg Component Editor.

For example, we have named the component that we want to design as (New Component): On the left of the current page you will notice that there is a box containing options for controlling the new component that you are creating: You will find four basic options that you must select and fill out 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 to be created and filled in its data.

The next step is to design the fields we want to create

inside 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 with the name (new field)

As shown in the picture: On the left of the current screen, you will find the options tab for the new field that you have inserted: As you can notice, 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, and 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 only web addresses and links. 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, which 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 to find inside it the section dedicated to adding the code: As we indicated at the beginning of the article, you must have a background in the HTML language, which specializes in displaying web components in a way that is understandable to the browser, and among the codes found in this language is the >h1 code.< المتخصص في إظهار المكونات داخل الصفحة بحجم خط كبير يناسب العناوين الرئيسية.

We will add the following code inside it. We write the name of the field that we referred to in the previous paragraphs, but it must be inside the brackets {{}}: {{new-field}}

The code we added is for the