Meta Box, Meta Box Builder, MB REST API, and some other extensions have been updated today with a lot of changes that you may be very interested in. This update will bring you more convenience and advantages, especially about field type, UX/UI, and REST API. Let's see the main changes in detail below.

New Field Type: Icon Field

What is the Icon Field?

In addition to 40+ field types, Meta Box has just released a new one named Icon. The Icon field allows you to select an icon from a predefined icon library as well as display it on the front end as usual stored value in other field types.

The icon field display on the front end as usual stored value in other field types.

When building frontend pages, you may want to have some icons to highlight some special content.

Some icons to highlight some special content on the page

Then you normally have to put the icons to the page template manually. However, now you can store them in an icon field for each kind of content. As a result, you can change them more easily without touching the template.

How to Use the Icon Field?

This field is now available on the list when you add the new field, from the Meta Box 5.9.0 version.

The icon field is available on the list when you add the new field, from the Meta Box 5.9.0 version.

To have the list of icons to choose from, you should set at least a pre-defined library for the field.

Set the icon library as Font Awesome Free
Set the icon library as Font Awesome Free
Set the icon library as icon font that requires a CSS file
Set the icon library as icon font that requires a CSS file
Set the icon library as custom icon library using SVGs
Set the icon library as custom icon library using SVGs

This field allows adding almost the most common libraries as well as your custom one:

  • Font Awesome Free (default, built-in);
  • Font Awesome Pro (requires your Pro account on the Font Awesome website);
  • Any icon font that requires a CSS file. This is helpful if you use many icons from the icon font across your website;
  • Your own custom icon library, where you can define your own icons with SVG. This is optimal if you use only some icons, and want to use SVG to improve the performance of the website because it doesn't require you to load a CSS file.

Depending on the icon library you use, you can output the icon on the front end as an icon font, or as an SVG.

You also can create an icon field using code (without Meta Box Builder extension), or with the UI provided by Meta Box Builder.

Here is a sample icon field using Boxicons:

[
'name' => 'Icon',
'id' => 'icon',
'type' => 'icon',
'icon_file' => get_theme_file_path( 'assets/icons.txt' ), 
'icon_css' => 'https://unpkg.com/[email protected]/css/boxicons.min.css',
]

To see how to use this field type in detail, please look at this documentation.

UI: Predefined/Suggested Values in Settings of Fields

When adding values for conditional logic, group title, date picker options, post/term/user query options, etc. in the settings of any field, you now just need to choose from the list with suggested values.

Add dynamic name from subfields for group title
Add dynamic name from subfields for group title
Add value for conditional logic
Add value for conditional logic
Add option for date picker
Add option for date picker
Add query options for the Post field
Add query options for the Post field

To know which setting provides this feature, you can look for this icon at the end of each setting box.

look for this icon at the end of each setting box to choose value

We expect that this feature will help you save time, avoid typo errors or incorrect structure, and get the values easier.

UI: Add Toggle Buttons

Button to Toggle the Field Settings

We’ve added a button at the end of the field header to open/close the field settings area. We believe that it will be less confusing than previously.

button at the end of the field header to open/close the field settings area

By the way, we expanded the clickable area to the whole field header to open/close the field settings area.

the clickable area to the whole field header is expanded to open/close the field settings area.

Button to Toggle the Settings Area of All the Fields

We also added a button to collapse or expand the settings area of all the fields at once.

button to collapse or expand the settings area of all the fields at once

MB REST API

The MB REST API extension now supports the settings page. It allows you to get and update data for settings pages.

We also completely rewrite the plugin for clarity and maintainability. It also shows the errors when updating non-existing fields, fixes PHP warnings when a group has no value, and ensures the group value is always an array.

Others

Along with these above updates, the MB Custom Table, MB User Profile, and MB Relationships extensions also have been updated.

Please see the detailed information here.

Just enjoy the new things!

Leave a Reply

Your email address will not be published. Required fields are marked *