Meta Box Builder 3 - A Truly New Experience

We worked so hard for this big update of Meta Box Builder in the last month. And today, the new major version of the plugin is available for download. Please login to your account and get it now!

Before working on this update, we saw some issues with the plugin and set some goals to improve it:

• A better user experience (UX), and
• Improve the code base

Since the Meta Box is getting more attractions from non-developers, and having more developers interested in turning to use an interface for dealing with custom fields, Meta Box Builder becomes a very important tool to improve the workflow and productivity. Because of this, we set these above goals and tried to reach them asap. Let's see what we've done in the 3rd version.

User Experience

We got some feedback from users who use it extensively as a non-coding tool to make and customize custom fields. The earlier versions did the work fine, but not great. There are some things that confuse users and some options users still need to enter via Custom Attributes.

In this version, we have changed a lot in the UI/UX. It doesn't have everything we wanted to do, but it has a lot. Here are some highlights:

Restructured the Settings tab for field groups

Now all the settings for the post types, show hide conditions, include exclude conditions, and conditional logic are moved into one section called Location.

We also changed the text to make things clearer and easier to understand for beginners. So:

• The include exclude settings (requires Meta Box Include Exclude extension) now becomes Advanced rules
• The show hide settings (requires Meta Box Show Hide extension) now becomes Toggle rules

We also refined the UI for these rules to make it easier to set up, like this:

Improved the Import - Export feature

Previously, the plugin creates a sub-menu Import under the top-level menu Meta Box on the WordPress admin menu. However, the Import menu serves the import feature of the field groups only and there is no menu for export. That makes the sub-menu for import looks weird and confusing.

In this version, we have removed the sub-menu and instead, add a new Import button to the All Field Groups screen, and moved the import form to the same screen, like this:

In addition, we also improved the Export feature. Now you can export individual field group or bulk export some of them. Hover to each field group will show the Export link which allows you to export that specific field group. Or, you can select some field groups and choose Export from the Bulk Actions dropdown.

Integrated with MB Frontend Submission extension

If you installed the MB Frontend Submission extension, you will see a shortcode in All Field Groups screen, that allows you to copy and paste into your pages:

Improved the field editor

There are some small improvements for the field editor. The delete and duplicate a field now are moved to the field title, which allows you to perform these actions faster and easier:

We also fixed some CSS issues with the field settings, improved the drag-and-drop feature, and changed some wording for the field types button on the left. We also reorganized field types to make sure it's more logical.

Improved the code base

The next special thing in this update is the code base. We have rewritten most parts of the plugin to use modern PHP. Previously, it's a kind of mix of legacy PHP code (as WordPress) and some Angular templates. But this version has changed it a lot:

• The plugin now uses Composer with namespace which requires PHP 5.6.
• We have reorganized the folder structure to make the code cleaner and clearer.
• And we also made all text translatable. In the past, some files were HTML that couldn't be translated. Now everything is PHP and you can use a tool like Loco Translate to translate any text you want.

We're pretty much confident to say that we can add new features faster and easier with this change of the codebase.

Finally, that's not the end! In the future, we'll keep improving the Meta Box Builder in both term of UI/UX and codebase. Although we have a big step forward, there are countless things to do in the next time. If you have any suggestions, please let us know in the comments below. Thanks in advance.