Block Editor - The New Field Type That Goes Beyond WYSIWYG

For years, WYSIWYG field has been the go-to solution for adding rich content to custom fields. They’re simple, familiar, and work well until content needs go beyond simple text and formatting.

At the same time, since Gutenberg became the default editor in WordPress, block-based editing has transformed the way we create content. It’s visual, flexible, and powerful, but it’s still mostly limited to a single place: the main post content.

That’s exactly why Meta Box introduces a new field type: Block Editor, built to solve both problems at once. It brings block-based editing to custom fields without sacrificing structure or flexibility. In this article, you’ll discover how it transforms the way you build dynamic WordPress websites with Meta Box.

The field group includes a Block Editor field. It has its own layout, and each piece of data can be queried and reused more easily than ever.

What Is the Block Editor Field Type?

This new field type allows you to embed an isolated Gutenberg block editor directly into meta boxes, settings pages, and other supported Meta Box objects. The block editor includes all the core blocks, custom blocks, patterns, styles and all settings like alignment, spacing, media uploads, and formatting tools.

Unlike the default block editor, it works independently of the post content, giving you the freedom to build flexible, block-based layouts anywhere in WordPress.

In short, editors get the same block-based experience they already know, while developers gain a clean, structured way to manage content inside custom fields.

How It Works

At first glance, the Block Editor field feels familiar, but under the hood, it works very differently from a traditional WYSIWYG field and Gutenberg block.

In essence, Meta Box will initialize a block that operates independently and does not interfere with the main post editor or other fields on the same screen. Each Block Editor field instance is fully self-contained. You can safely use multiple block editor fields on the same page inside meta boxes, settings pages, or custom objects, without conflicts.

When content is saved, the field stores raw block markup in the database instead of pre-rendered HTML. On the frontend, Meta Box renders this content using WordPress’s native block rendering system via do_blocks(), ensuring full compatibility with core blocks.

Developers can also define which blocks are allowed for each field with the allowed_blocks setting. This control prevents unsupported or unwanted blocks from being added, keeping content consistent and predictable.

Why It Stands Out?

The Block Editor field type is how it fundamentally changes the way content is created, structured, and maintained in WordPress.

First, it closes the long-standing gap between block editor experience and custom fields. Editors get a block-based, visual editing experience they already know from Gutenberg, while developers work with clean, predictable block markup instead of a single, fragile HTML blob.

Because content is stored as structured block data, it becomes far easier to manage data and layout. Sections can be reused, reordered, or extended without rewriting templates or parsing HTML. This makes the Block Editor field a strong foundation for scalable content architectures.

Another major advantage is control without sacrificing flexibility. By limiting allowed blocks per field, developers can protect layouts and enforce consistency, while still giving editors enough freedom to build rich content. This is especially valuable in client projects, where content safety and usability matter as much as flexibility.

The field also integrates seamlessly with WordPress itself. Since content is rendered using WordPress’s native block rendering system, blocks behave exactly as expected on the frontend.

Last but not least, this field type reduces reliance on page builders and complex workarounds. You get block-based layouts inside fields, without vendor lock-in or performance overhead. Everything remains pure WordPress, fully compatible with your existing Meta Box setup.

Real-World Use Cases

Usage

With the key benefits above, the Block Editor field opens up many practical use cases that were previously difficult or messy with WYSIWYG fields. It is ideal when you need to have a modern block-based editing with flexible layouts and structured data.

Specifically, you can use it to build flexible content sections such as hero areas, feature lists, testimonials, or call-to-action blocks. Each section lives in its own field, keeping your templates clean and modular.

It’s also ideal for creating custom landing pages outside the main post content, giving editors freedom to build layouts while preserving structure. If you’ve ever wanted page-builder-like flexibility without actually using a page builder, this field is a powerful alternative.

Imagine you’re building a website for a spa or beauty salon. Each service page, like a manicure or facial treatment, needs more than just text. It typically includes a title, an image, key service details (price, duration, specialist), a call-to-action button, and a rich description, like the example as below:

It’s exactly where the Block Editor field excels. Let’s move on to creating it.

Adding and Setting up the Block Editor Field

For simplicity, I use MB Builder to visually create and configure the field. On the screen of creating a field group, click on the Add field, then find the Block Editor field.

On the left panel, you’ll find the field settings. In addition to the common options, there’s a dedicated setting that lets you control which blocks can be used. Here, I leave it empty to allow all blocks.

After configuring the field, don’t forget to set the location for the location in the Settings panel, in this case, I apply it to the service post type.

In the post editor, the field will be displayed like this:

Simply add blocks one by one, following the structure you want, and do the same with adding blocks using Gutenberg.

After adding block and inputting data, we have the expected results when we see the post on the frontend.

Why Block Editor Beats WYSIWYG for Editing Content?

Let’s revisit the spa service example. The section is not just a rich text. It’s a well-structured section composed of multiple, clearly defined elements such as: a featured image, a group of key–value information (price, duration, performer), a call-to-action button, and a detailed description.

So, these are some limitations of the WYSIWYG that make it NOT the optimal choice in this case:

• Layout and consistency problems: Editors can easily turn buttons into regular links or add inline styles that break the design.
• Scalability limitations: When you want to update the layout or add new fields (for example, “Service level”), you’re forced to manually update every existing post.

And the Block Editor field can solve all of them.

Summarize, you can refer to this table to use these two fields suitably:

Feature	WYSIWYG	Block Editor
Block-based layout	❌	✅
Data structure	HTML	Block markup
Modern editing UX	Limited	✅
Best for	Content that is just simple text, usually used only for notes or short descriptions	Content can be anything (headings, images, CTAs, info boxes), including flexible layouts

Last Words

The Block Editor field bridges the gap between structured data and flexible content. It’s ready to use. Update your Meta Box right now and explore a new approach to using the Block Editor while managing your website data more effectively. Feel free to share your feedback on this field type with us.