If you’ve ever worked with text editors on the web, you know the routine: dependencies everywhere, fragile integrations, and editors that only behave when the stars align.
The Isolated Block Editor (IBE) solves this by taking the core of Gutenberg and making it work anywhere — no WordPress environment required. It gives you the power of modern block editing, but decoupled, modular, and ready to be embedded wherever you need it.
With IBE, you can transform a simple <textarea> into a full
block editor. It supports multiple instances, each maintaining its own state,
undo history, toolbars, inserters, and inspector controls. Essentially, it’s
Gutenberg without the baggage, designed to drop into any frontend.
For setup details, take a look at the
Standalone Module section.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> <script src="isolated-block-editor.js"></script> <link rel="stylesheet" href="core.css" /> <link rel="stylesheet" href="isolated-block-editor.css" /> <body> <textarea id="editor"></textarea> <script> wp.attachEditor( document.getElementById( 'editor' ) ); </script> </body> |
What It Brings to the Table!
- Block allowlists and denylists to control exactly which blocks appear.
- Support for templates, patterns, grouping, and reusable blocks.
- Toolbar, sidebar, block inserter, visual and code editing modes.
- Works inside embedded areas rather than requiring a full-page editor.
- Available as ES6 module, CommonJS module, or standalone JS/CSS bundle.
The result is a flexible editor that handles rich content, mixed layouts, reusable structures, and longer writing sessions without breaking a sweat.
More about Semantic Editors here.
Why It would fit perfectly into Elementor!
Elementor focuses on layout-building and design freedom, but when it comes to long-form content or richly structured text, traditional editors fall short. This is where the Isolated Block Editor becomes a powerful addition.
In the integration I built for Elementor, IBE acts as the content engine inside the page builder. It allows block-based editing, clean structural markup, long-text handling, reusable content elements, and the flexibility to switch between code and visual views. Users get modern content editing right inside Elementor, without having to rely on the WordPress block editor or the classic editing system.
Because IBE runs independently from WordPress, the integration stays lightweight, portable, and easier to maintain. It enables true hybrid editing: Elementor handles layout, while IBE handles structured content.
The following is just a short preview and my first proof of concept. Its a big library, but it does bring a huge benefit for editing large text-sections. Almost usable for me ;)
IBE direct integration
What works!
- Basic framework is running and working
- Sync to simple Elementor Textarea on save
- Sync to Elementor Preview on save
What needs work!
- Proper Editor CSS isolation
- Style settings for the widget, to change the style of core blocks
- Decide which blocks are active within the editor
Using the WP Gutenberg integration directly.
I moved this to its own article, as it got out of hand. I went down a deep deep rabbit hole LOL
Gutenberg Blocks in Elementor: Seamless Widget Integration
TinyMCE: Fine for Short Notes, Not for Serious Writing
TinyMCE has been around for a long time, and it works adequately for small text snippets or quick blog edits. Once the content gets longer or more complex, problems start appearing. Switching between visual and text modes often alters the markup, removes tags, introduces inconsistent formatting, or breaks embedded elements. Just browse any discussion about TinyMCE quirks and you’ll see countless examples of broken HTML and frustrated users.
TinyMCE treats the whole document as one large HTML blob. There is no concept of structured blocks or reusable components, making long-form content more error-prone and difficult to maintain. For modern editing needs, especially inside advanced builders like Elementor, it simply does not keep up.
Thoughts
The Isolated Block Editor stands out as a modern approach to content editing. It brings block-based structure, reusability, flexibility, and clean separation from WordPress. Paired with tools like Elementor — and especially with the integration I have developed — it offers a powerful and future-ready editing experience.
TinyMCE had its era. For long content and structured editing, IBE is the superior choice moving forward.
FAQ
What is the main difference between TinyMCE and the Isolated Block Editor (IBE)?
TinyMCE is a traditional WYSIWYG text editor that outputs HTML directly. It treats content as one large text field and applies formatting inline. The Isolated Block Editor (IBE), based on Gutenberg, uses structured JSON-based content blocks. Each block is isolated, predictable, and individually managed, resulting in cleaner markup, better performance, and consistent design control.
Why is TinyMCE considered unreliable for long-form content?
Long content forces TinyMCE to operate on a single, massive DOM tree. This leads to lagging, cursor jumps, broken undo history, and unexpected formatting changes. The block-based architecture of IBE avoids this by keeping each block independent and manageable.
How does the Isolated Block Editor improve performance and stability?
IBE only renders and manages the active block with minimal surrounding context. This avoids heavy React rendering of the full Gutenberg editor, resulting in faster load times, smooth scrolling, and stable editing even on large pages.
Does IBE support the same blocks as Gutenberg?
Yes. IBE uses Gutenberg’s block engine and supports core blocks, third-party blocks, and custom blocks that follow the standard Gutenberg block API. The difference is the lightweight, isolated editing environment.
Can I replace TinyMCE with IBE inside other page builders or custom editors?
Yes. IBE is designed to be embedded into third-party environments such as page builders and custom admin UIs. It can be integrated without taking over the entire screen, making it ideal for builder-based workflows.
Does TinyMCE generate clean or semantic HTML?
TinyMCE often produces bloated HTML with inline styles, nested spans, and duplicated formatting. IBE outputs structured block data that is consistently rendered into clean, semantic HTML.
Is the Isolated Block Editor easier for non-technical users?
Yes. IBE offers a focused, block-based editing experience without the complexity of the full WordPress interface, making it intuitive and approachable for non-technical users.
Is TinyMCE still useful in 2025?
TinyMCE remains suitable for short, simple text inputs. However, it is no longer ideal for full-page or long-form content. Modern WordPress development favors block-based editors like IBE.
Does IBE support collaborative workflows or real-time editing?
IBE does not provide real-time collaboration by default, but its structured block output can be integrated with collaborative backends or headless CMS workflows.
Is the Isolated Block Editor future-proof?
Yes. IBE is built on Gutenberg, the core direction of WordPress. Using IBE ensures compatibility with future block features, patterns, and themes.
