A New UI is Coming - Meta Box Builder 5.0.0 Alpha

New year, new experiences!

We (Meta Box team) heard whispers many times that you want a more intuitive and modern UI. Over the past year, we've been thinking, researching, and figuring out ways to have a new layout for the Meta Box's interface. The most important thing is how the interface can help you interact in the most efficient way while keeping the native and minimalist style.

Although we did some changes in the UI in the past year, that's some small things and is not all. We’ve prepared for this big move for a long time!

A totally new UI which is completely different from the old one is coming in an alpha version!

We believe that you will find it modern, seamless, and very convenient. It’s really a new experience! Creating and configuring custom fields is smarter, faster, and more optimal.

However, this is a major change, we release the Alpha version with the hope that you will try it and share your thoughts. Any of your feedback, even the smallest details, are worth their weight in gold for us. We will base on that to have the beta version later, then also the official version.

Video Version

Our Principle and Purpose

The last time we updated the Meta Box Builder's UI, it was all about the visually stunning hierarchy and predefined/suggested values in settings. Your positive feedback was truly encouraging, but for us, it was just the beginning.

For the new version's interface, our guiding principle is simple yet powerful: to create something better while staying true to its native feel, ensuring you still feel that Meta Box is a part of WordPress.

As you can see on the demo image above, everything on the new interface: the sidebar, color schema, and layout,... is very similar to what you already have in WordPress. So, your experience inside WordPress is still seamless.

Based on this, we modified it to have a modern interface. Also, it shows all the power from features from Meta Box, which you may have missed previously.

In terms of details, we strive for comprehensiveness, efficiency, and minimizing actions. But we put all the basic things first, so you can see and work with them as fast as they can.

Now, let’s dive into the new interface and discover the improvements we've made, taking your experience to the next level.

What’s New?

All your favorite features and settings are still here, but in a whole new layout. Here are the exciting highlights of what’s coming your way:

1. Everything is live-preview (the most prominent thing)
2. Field group settings and field settings are organized practically on the right sidebar
3. Add-new-field panel (New)
4. Structure panel (New)
5. Field actions are ready everywhere

It’s time to see them in detail.

Everything is Live-Preview

This is one of the most groundbreaking features of this new interface. Imagine everything being a real-time preview to implement the settings, allowing you to easily choose the most suitable one without having to switch screens or update multiple times. You will save a lot of effort and time.

The Same Looks in Field Group Editor and Post Editor

Previously, you could see the fields’ hierarchy in the main area and their settings only in the Field Group Editor screen. Now, what you see there will be exactly what you’ll see in the post editor.

It’s not only the field title with its settings anymore, it’s real look as when it's displayed to input data.

Also, you still can drag and drop fields and subfields to rearrange them in the Field Group preview area.

Real-time Preview for Configuring

It’s super useful when you can also see real-time changes to your field settings.

Every change in the settings will be updated immediately in the preview!

For example, you can update the tooltip, reduce the text limiter, add choices for the Checkbox List field, etc., then all of those actions will have the results simulated right on the real-time preview.

This makes everything smoother, cutting down errors and guesswork, so you can fine-tune every field with confidence. Moreover, the live preview lets you make quick and informed choices, saving you time and effort efficiently.

Settings Grouped into Panels on the Right Sidebar

All settings for field groups and custom fields are now neatly organized into separate panels on the right sidebar, instead of overwhelming you with everything at once in the main area.

We’re following the new (but not really new since it's been out for a while) design of the post editor in WordPress as you know as Gutenberg. The post settings and block settings are all on the right sidebar. So, Meta Box does that, for nativeness.

Field Group Settings

Last week, we released Meta Box Lite, we further reinforced the perception that it might be inconvenient for you to switch tabs anytime you want to set the location for the field group. Therefore, the first thing we want to change in the interface is that the location rule section is always shown on the sidebar, allowing you to select and customize it without having to switch.

Still, there is an overview on the field group, while setting its location easier and saving some mouse clicks. Everything on a single screen, giving a clearer overview.

Also in the panel, all other advanced settings are grouped inside.

Simply open up and set them just like before.

We bring everything clearly in front of you, giving you full control to edit, adjust, and customize whatever you need.

Field Settings

The settings of the fields are also not in the main area anymore. We’re moving them to the panels on the right sidebar as well.

Click on the field preview, and the right sidebar will turn to the field’s settings instead of the field group’s settings.

The right sidebar area is quite limited so we divide all the field settings into different panels as well. In there, the basic settings are in the General tab, and advanced options are just a click away below.

We are just re-arranging and re-layouting the settings, all of them are still there and grouped in a smarter way. It does not affect any features.

Required and Cloneable Settings

Not every setting in panels!

The Required and Cloneable settings are fundamental and quite special, so we've moved them to the top of the field settings in the right sidebar. Their position and design are totally different from others, but also visible in the preview.

To set a field as required, just click the button one time to enable it, then click one more time to disable.

In contrast, the cloneable (as you may know as repeater) feature is more complicated with some options. So, when you click on it, there will be a dropdown popup with some settings, including the Clone empty start feature.

Add New Field Panel

We’ve made it simpler and faster to search for and add fields with a brand-new panel on the LEFT. As soon as you click Add a new field (+) button, the panel appears, ready for you to dive in. Plus, we’ve redesigned the field type title to come with an icon to make it even more attractive and easier to choose from.

To have field in the right place, you can simply drag and drop it from the left panel to wherever it fits best in the main area (where is the live preview).

If not, the new field will be added in the bottom if you click to the field type name.

Structure Panel

We are aware that the live preview is not everything. You need to see the field group structure in the neatest way, especially when you have a lot of fields or a complicated structure with groups and subgroups.

So this Structure panel will be really useful. Just click the Structure icon (on the right of the Add new field (+) button) to view the field group layout.

Note that you can interact with the field on the panel the same way you do in the live preview area by dragging and dropping to reorder or opening up the field settings by clicking any field.

Contextual Field Actions

The following actions will be available on both live preview area and Structure panel:

• Add a new field before/after the current field
• Move the field up/down
• Duplicate the field
• Delete the field

We’re having some icons in a dropdown list in the current official version for these actions already, but they do not satisfy our expectations yet. So, we also redesign them in this new interface.

Action Toolbar

When you click on a field in the live preview, not only the settings of the field display on the right sidebar but also a toolbar appears on the field preview with some icons corresponding to the actions.

Combining this toolbar with the live preview allows you to make some changes on fields quickly. It's all about making your workflow more convenient and intuitive, allowing you to take action right when you need it without any delay.

Actions in Structure panel

If you are working on the Structure panel, you also can have the same quick actions.

At the end of each field on the Structure panel, click on the three dots icon to see the list of actions.

Which one is kept intact?

Design? Nothing in design stays the same. But features do.

We change the design down to the smallest detail but keep every feature the same, for instance:

• Drag and drop fields
• Every setting options
• Edit the field label by clicking on it in the live preview
• Get PHP code or generate the PHP code

The + Add Field and + Add Subfield buttons are still at the end of the field list or inside a group. So you can add new ones quickly.

How to Get and Experience the New UI?

The UI of Meta Box is provided by the Meta Box Builder extension as you know at all. So, to have the new UI, you should update only this extension to the Alpha 5.0.0 version.

The Meta Box Builder 5.0.0 Alpha version is available on GitHub. You can download it here:

https://github.com/wpmetabox/meta-box-builder/archive/refs/heads/ui.zip

Or download directly from Github:

Last Words

With these groundbreaking changes, there are too many differences from the current version. We want to make sure the new version is stable, and does not have any significant impact on your website, so we released the Alpha version to experience first.

Also, the interface update is mainly for the user experience (your experience) so we want to have a trial version first to check how it brings a better experience for you guys, and what else needs to be improved.

So, we'd like to get your feedback about this. What do you think? What do you like and don’t like? What do you expect more? Even the smallest details such as the text, the color, the border, etc. are appreciated. We accept all praise or criticism (if any, but do not hope so).

By the way, there is a notice that we also work on the data a little bit when redesigning the interface. So, we’d like to recommend you to try and test it with your existing field groups, especially the complex ones, and see if it affects the data.

It is totally new and there may be some issues with the layouts or the code that we are still working on to improve your experience. We’re still on the way! With your support by giving us feedback, the refinement process will be faster and the next version will be available sooner. So, let's give a hand to quickly have a better version of Meta Box! Your voice means a lot to us, thank you!