Introducing Meta Box Builder 4 - New UI, More Features & API to Extend

After more than 500 commits and half a year of hard work, we’re happy to release version 4 of Meta Box Builder. It’s a complete rewrite in React with a much better UI/UX and has more features than ever.

Clean and Beautiful User Interface

One of the most complaints about Meta Box Builder is the user interface. Some developers find it hard to use. Some even refuse to use it. When comparing Meta Box with ACF, people usually appreciate the UI of ACF.

Understanding that, we updated Meta Box Builder with a modern, and beautiful UI. We changed the UI several times based on the feedback from our team and some early adopters (WordPress developers).

This is how it looks now:

So, what’s new in this UI?

The Similarity with the Edit Post Screen

We don’t want to invent a new UI that is too different from the WordPress Dashboard. In the previous version, we made the UI like the edit menu screen, but it wasn’t a good choice.

We also changed from the tab UI to a new style with a toolbar. The Code tab now becomes the Get PHP Code button, which makes it easier to understand.

New Field Inserter

Inserting a new field is now easier. You just need to click the + Add Field button and select the field type. You can also search for a new field type as in the previous version.

The insert field button replaces the old panel of field types which takes a lot of space.

Visual Hierarchy for Groups

Sub-fields of groups are now put under the group panel. The insert field button is also moved under the list of sub-fields to make it easier to insert a new sub-field.

Better UX and Interactions

In this version, all the interactions such as:

• Collapsing and expanding field settings
• Dragging and dropping fields
• Switching between fields and settings tab
• Getting PHP code
• Removing and duplicating a field

are done very fast, leading to a smooth interaction. To do that, we put a large effort into optimizing the codebase to make sure it is slim and has the best performance.

We also save the state of the screen (which tab you’re on) and of each field (is it collapsed or expanded), so next time you visit the page again, you’ll see exactly what you were doing.

Another small thing that we added in this version is the small settings icon in the meta box title bar, which allows you to edit the meta box settings:

Built with React

The previous version of Meta Box Builder was built with AngularJS, which comes to the end of life by the end of this year. It’s abandoned by Google and now is put in the support mode only.

When rewriting Meta Box Builder, we decided to go with React for a simple reason: WordPress uses React for Gutenberg. Using React has a lot of benefits, such as:

• Re-using React and React components from Gutenberg. There are a lot of useful components like Dropdown or Dashicon that already available in Gutenberg and we used them.
• Small built file size, thanks to re-using Gutenberg components.
• A large community with many available React components and libraries (outside WordPress) like react-tabs and react-select.

This was also a great chance for us to learn and use React in a real project. It’s worth noting that we did a lot of trial and error. There were many wrong decisions such as choosing an architect for the plugin or a library for a specific task. Luckily, we got over that and finished the tasks.

Support All Settings in Meta Box and Extensions

One of the issues people usually had when using the previous version of Meta Box Builder is that it hasn’t supported all settings available in Meta Box and extensions.

In this version, we have added all settings of fields and field groups to Meta Box Builder. All extensions are supported, too. So you don’t have to touch code again.

This is the screenshot of the advanced settings for fields:

Support Validation

Validation is a powerful feature in Meta Box, but it hasn’t been in the Meta Box Builder until now.

This version supports adding validation rules easily and quickly for all field types:

Support Creating Settings Pages & Relationships

In the new version, you’re able to use the builder to create settings pages and relationships. It’s one of the goals to make Meta Box Builder is the builder for everything in Meta Box.

Here is the screenshot of creating a settings page:

And here is how to create a relationship with Meta Box Builder:

API to Extend the Builder with New Settings or Types

Last but not least, the new Meta Box Builder allows developers to create UI for their custom field types, or add new settings/controls for their plugins.

This is useful if you want to use the Meta Box Builder to do the UI part for your plugin. See the Meta Box Builder documentation for more details.

Conclusion

This is a big update for Meta Box Builder. With this version, we hope it becomes the standard way of using Meta Box. As the goal of Meta Box is saving developers hours of tedious work with custom fields, Meta Box Builder is the tool to do that.

Although we’re happy with the result, we understand that there always be areas that can be improved. If you have any ideas or suggestions, please let us know in the comments, or send us a message or create a discussion in the Facebook Group.