How to Use Gutenberg for Custom Meta Fields

May 29, 2021

Hello everyone, I'm Julia and welcome back to the croco blog channel. In our previous video, we talked about the

custom

post type and created a

gutenberg

post in this tutorial to show you the full power of the jet engine. I'd like to see it closer. In a key feature of

custom

post, write many custom

fields

together, we will add the custom

how to use gutenberg for custom meta fields...

Don't stop there, it allows you to query and filter content, customize the visibility of each subject field using conditional logic, and much more. As for publishing, this option can be enabled if you click on options, preferences panels, custom fields, however, this method is very time-consuming and requires coding skills because you will need to edit your WordPress theme files. Once you add the custom field, you'll have to select it and enter its value every time you write a post, which is absolutely inconvenient, especially if there are multiple users writing. the website, so without this option, the default WordPress post does not allow you to add anything except the title description and featured image.

Let's say I have a vacation rental website, it will be impossible to provide my website visitors with a number of bedrooms and bathrooms. installations or registration time using WordPress posts; However, everything is possible with Jet Engine custom post types and custom meta fields, so that the custom meta fields display additional information about your custom or default post and that meta data is not visible to website visitors. You can display it with the help of dynamic widgets, however, the information you write in the subject fields can be used in multiple places and not just once. Now let's open a custom post type for that, go to jet engine.

Both types I already created a custom post type. houses and if you need help creating a cpt just follow our detailed video tutorial. Meta fields can be found just below the advanced settings, click on this new meta field button and let's take a look at the first three options here, a type of label in the title. of the field here this is how it will be displayed to you and other users name id this value is automatically generated according to the text you enter in the label bar if you want to change it please note that the id should not include spaces and make sure that contain only the letters and numbers necessary for the metafields to be stored in the database without any problems.

Autocomplete will also add a random number to the name if it is not unique. Fields with similar ids could confuse you and cause some problems if you want to use them elsewhere, that's why autocomplete avoids using similar ideas object type here you can choose the type of object, the field option means you will be able to add values tab tab accordion and full stop I'll create a specific layout in the post editing area that will make the process of filling posts with content a little easier later in this tutorial. I will demonstrate how to group metafield easily now, under field type select custom metafield type.

Here we have 18 metafields, let's review the text of each of them. If you want to add an extra field with custom text to the post type, this type perfectly meets your requirements. You can add additional information about posts by using this field. You can also specify the available number of characters in the date field provides information about the date of events meetings conferences with the help of this subject field you can also save the date as a timestamp this type of meta field will be stored in the database data allowing you to query and filter post by time this is an appropriate type to add a time marker for a post at the particular time of events meetings and conferences in this date and time meta field this custom meta field allows to select date and time in the same place of a convenient way text area you can use this type to add a text area to the post with the layout of the text line by line, additionally you can set the character limit for this always active field value by selecting this type it will add a basic editor in the custom field for By adding content with a given layout and customizing its appearance directly in the WordPress dashboard launcher, you can add the switch as a custom field for posting product events, etc., allowing you to turn the switch on and off. appropriate option in the metafield block checkbox that this type provides. an opportunity to add checkboxes with different options to choose default and custom post icon picker.

Create a meta box with an icon picker where you will be able to choose an appropriate icon for the post media and this type will help to add images of particular media files to the post gallery, with the help of this type of meta field you will be able to add various images to the publication and to the product in the gallery from a radio. A radio type is perfect for adding radio options to choose from by editing the default and custom post repeater. this type will help to add the repeating content block for each product post event etc. which you will be able to populate with value in WordPress dashboard.

Select use this content type to add dropdown selector for post in case you enable allow multiple select. values options, you will be able to select multiple options at once, this value can also be displayed using the appropriate callback for dynamic field number, if you need a field that is filled with numbers only, this will be a single color selector perfect, you will add the color picker tool with a post that chooses this post type from metafield and this type will allow setting and displaying related posts from WordPress dashboard to do so you need to use related posts list callback in dynamic field widget, add it to a list and last html, you can add some custom html code to your metafields with this type if you need, it will be useful for unique features or data types that are not presented in the list, no will be visible only in the WordPress dashboard By the way, two additional options will appear on the edit metafields page: allow customizing for checkbox and radio metafield types and get glossary options for checkbox radio and select types allow custom this option allows to add custom values to those fields and save them in a database of the current post but without saving it in the list of default values, allowing custom options, let's add different custom values to different posts, which means you can create different custom values for each post, however if you want those custom values to apply to all posts in the custom post type use the Save Custom option, therefore all your posts will contain this new checkbox field value check.

The metafield radius type is set similarly to the checkbox. If you activate this option, you will get glossary options. Enabling it will allow you to add the glossary options to the list. You can specify a specific glossary. You can find more details about this feature in the glossaries functionality overview. Now there are other parameters of the fields of matter that are described and completed. with lines where you can add the additional text needed for the metafield and set the width of the metafield. You can also specify the character limit and determine the default value for the current field.

Additionally, it is possible to enable it. There is a required option to create the field. It is also necessary to note that the default value option is available only for textual field types and the last one here, conditional logic, gives you the opportunity to make fields visible only if some conditions are met. You can find more details on how this feature works in the Conditional Logic Tutorial as I'm using our Bell Rental vacation rental website template. I'm going to add metafields for the houses cpt that I created in the previous tutorial. Basically, it is a booking website, so there will be the number of rooms, beds, check-in time and others. information of the advertised houses let's start with the rooms, I will fill in the name and tag identification field, then the object type field and the field type text width field remain the same, as do the rest of the options, Once it's done, simply press the new midi field. button again for this one, I'm simply repeating the same steps now for the direction metafield.

I will select a different field type text area for multi-line input. You can also add a gallery metal field if you want to demonstrate in detail a room house or let's say a car if it is a car rental website and of course set the gallery field time to that type of time field which can be used for check-in and check-out time, since I have properties on my website, it would be good to add information considering different facilities, the problem is that the number of facilities is quite large and I don't want to waste a lot of time completing this kind of information manually.

The checkbox field type is a lifesaver in this situation, once it is selected, the new field radio button will appear nothing difficult here. just fill in the option value and option label. It takes some time to add options for the checkbox, however, it significantly saves time and energy when adding posts and filling meta fields with information. Well, I think that's enough and the last step here I will enable save. as array, if you don't remember, we need to use this option if this meta value will be added from the start form. Okay, so we added some meta fields that you can follow along with these or go deeper and check out other types of fields. once you are done click on this update post type button on the right, now you will be able to display the content you have added in the custom meta field using for example

gutenberg

, unlike the classic editor gutenberg allows you to play with blocks and customize. the layout is easy which is absolutely perfect especially for beginners but first of all we need to fill the subject fields with information for that open your cpt and edit the post scroll down a little bit to find the meta field in the post page, as you can see there. are the meta fields I just added here, there are a couple of tricks before I start filling them in, I set everything to 100 but some fields like time beds or room don't require a full field whip to save some space , especially if you have a lot. of different subject fields just set the width of the required fields to a certain percentage now, as for grouping the subject fields in a certain way, I use the field object type for this layout and what if there are many metafields and no I don't want to scroll down to reach some meta field.

Let's try the tab object type. Note that whenever you use this type you need to create one more metafield. Let me show you why it is necessary. Here is the metafield of my room. If I set it to tab, it will turn this metafield into a tab with the rest of the subject fields inside, making it impossible to fill full meta rooms with any content, so the best option is to create an empty metafield. For example, I can create a metafield with main information, convert it to a tab, andthen create an additional metafield and move part of the metafield into it, as you can see now everything is conveniently grouped into two tab-like tabs.

Apply the same steps with the accordion object type to receive this result. Fill in the metafields with content depending on the type of website you have. Don't forget to set the featured image and once you're ready, update the post to show the metadata I need to create a page, but let's not make the page static simple. How about displaying the content dynamically? Since dynamic blocks do not work with default WordPress pages. We have to create a list item before moving to the next step. Let me explain quickly. why is a listing item needed at the end i want to display the post in a grid a listing grid requires a template or individual item to be created we will create it only once and what listing grid does it just replicate the data from each post but just so you know, the functionality of the listing item is much broader and in our next tutorials we will go deeper into this topic, so stay tuned, let's go to the jet engine listings, let's add a new one.

The listing source will be published and in post type select your custom post type where you added the post and many fields, set a name and select gutenberg blocks as a list view, as you know gutenberg works with blocks only for Add them, just click the Add Block button here or this button at the top, which is great. about jet engine is that except for the default gutenberg blocks you will get jet engine blocks after installing the plugin, if you scroll down a little you will see 9 blocks that have different icons, in particular these six allow you to work with the metadata as for my layout, first there will be an image, then a title and a bit of additional data and address.

First, let's add a dynamic image block below the general post selection thumbnail as a source. You can also resize the image if necessary and it's nice. a lot for the title I will apply the dynamic field block set source to post the user object data and in the post object I will select the title now if you remember I added some house features like number of beds for guests, etc., the best way to present this type of information is columns. I am going to add a dynamic field again, however this time I will set metadata as source. and once you click on the meta key you will see your cpt, in my case it is houses and the full list of your meta fields, I will select rooms for the first column and what you can also add is an icon, so even though an icon was added, it is still not clear if it means two beds or two people, if you have the same situation, please scroll down to customize the field output and enable it in the field format box, type the necessary information, now it says rooms as for the rest of the columns I will repeat the same steps changing only the key kill the last block will be an address don't think we are done here as you noticed it didn't style anything because the gutenberg editor doesn't have its own styling options however croco block has you covered on this one, all you need is the Jet Style Manager plugin, let me activate it and show you how much difference it makes at first glance, nothing really changed, but Jet Style Manager adds a block style button on the top right. corner of the edit window once you select a block and now we can style the text, change the color size, set a different font and there are also tons of other options to style the rest of the blocks depending on your needs and what you want. ago, click publish.

We have created a template for an individual listing item within our listing. Now we need to create a listing grid. Open the page where you want to display a listing or create a new one. Find a listing grid block and edit it in General. Select the listing item template you just created, you can adjust the number of columns here, set the post number, enable amazing equal column height and set query parameters if needed, jet style manager also allows you add horizontal and vertical spaces between the columns once you are satisfied with the result, publish the page and here is our listing grid with the metadata extracted dynamically with the help of a jet engine dynamic vlogging personally, I did not expect that adding fields custom stuff and then creating a listing in gutenberg might be so simple, but what are croco blocks?

The main goal is to make your life easier. Stay tuned as there will be more interesting tutorials coming soon. Give us a thumbs up if you liked this video and don't forget to subscribe to our channel. Thank you very much for watching and I. See you next time

Watch Video & Subscribe

If you have any copyright issue, please Contact