4: Start Using The Custom Block<\/li>\n<\/ul>\n\n\n\nStep 1: Curating The Custom Gutenberg Block<\/h3>\n\n\n\n Open the WordPress dashboard, and from the left pane, click on Custom Blocks and then Add New. It will open the block editor page. Again, click on the Add New button available at the top.<\/p>\n\n\n\n\nAfter you click on the Add New button on the editor page, set a name for your block. In our case, we have provided the name as Testimonials.<\/p>\n\n\n\n
Further, by clicking on the Block, you can open its settings in the right pane to access & configure advanced settings. You can use all the provided settings to configure categories, add keywords, set names, icons, and more.<\/p>\n\n\n\n
Now, you can see a block named Testimonials on the interface. It\u2019s time to modify it and make it as per requirements. For this tutorial, we are going to add three different fields to it, namely: <\/p>\n\n\n\n
\nText area field<\/li>\n\n\n\n Image field<\/li>\n\n\n\n Reviewer Name field<\/li>\n<\/ul>\n\n\n\nSo, let\u2019s add them all. <\/p>\n\n\n\n
Click on the ( + )plus icon in the lower right corner of the Block. It will open the filed settings in the right pane with the following configuration options: <\/p>\n\n\n\n
\nField Label: Input any string of your choice in this field. <\/li>\n\n\n\n Field Name: The name will be set as per the field label.\u00a0<\/li>\n\n\n\n Field Type: We are going to use an image block so that we will select an image from the drop-down menu. Similarly, you can select the type as needed.\u00a0<\/li>\n\n\n\n Field Location: Choose the editor or inspector location. <\/li>\n\n\n\n Help Text: Input the description for the field so that others can understand its purpose. <\/li>\n<\/ul>\n\n\n\nOnce you set the fields for the image for the testimonial block. Then, again, follow the procedure by clicking the ( + ) plus icon and adding the other two fields. Select the correct field type for an output similar to the one below.\u00a0<\/p>\n\n\n\n
In addition, you can also use the drag-and-drop feature to rearrange the fields. And if you still need to edit a field, click on it and modify settings in the right panel. Otherwise, click on Publish and save the custom Gutenberg WordPress block. <\/p>\n\n\n\nIn addition, you can also use the drag-and-drop feature to rearrange the fields. And if you still need to edit a field, click on it & modify settings in the right panel. Otherwise, click on Publish & save the custom Gutenberg WordPress block.<\/p>\n\n\n\n
Step 2: Create Block Template WordPress<\/h3>\n\n\n\n Creating a custom block using the plugin is not enough, as it will only work once you create a template. <\/p>\n\n\n\n
A custom block template determines the working of the Block and how it displays the data on the website using HTML, CSS, and PHP. In addition, primarily, you can use the following two methods to create a template: <\/p>\n\n\n\n