Content editing in Elementor
Elementor excels at layout-building and design flexibility, but when it comes to long-form content or complex structured text, traditional editors quickly hit their limits.
That’s where the Gutenberg Editor — specifically the Isolated Block Editor (IBE) — becomes a game-changer.
TinyMCE simply doesn’t hold up inside Elementor, and after years of using Gutenberg for rich content, the difference is night and day.
My journey
My journey started with the Isolated Block Editor, and I definitely went down a very deep rabbit hole exploring what’s possible.
In the integration I built for Elementor, IBE becomes the content engine inside the page builder.
It provides block-based editing, clean semantic markup, reliable long-text handling, reusable content structures, and the freedom to switch between code and visual modes.
Users get a modern WordPress editing experience directly inside Elementor—without depending on either the native block editor UI or the outdated classic editor.
It also lets me reuse my custom blocks effortlessly. Even the Media Library integration works beautifully now (after ironing out some preview permission quirks).
Is it working?
Yes, it is — a perfect little pre-Christmas project that will significantly streamline my own workflow and many of my client projects as well.
I’ll share more soon about the specific areas that needed fixes or adjustments. The integration is already fully usable, but it still needs some real-world testing to expose edge cases.
I haven’t tested any third-party blocks yet, because for my use case the core Gutenberg blocks are the essential foundation. Most third-party blocks would just duplicate functionality that Elementor already provides, which defeats the purpose. So my focus is entirely on delivering a rock-solid long-form content experience.
I am exploring Markdown tweaks, as that is how I prepare most of my documents with.
Changelog / Working Functionality
- ✓ Use the WP Gutenberg Setup, using the IBE proof of concept as a foundation
- ✓ Connected media library
- ✓ Connected installed blocks (internal / external)
- ✓ Connected Gutenberg styles for preview and modal
- ✓ Block Settings are working
- ✓ Overview list (List View + Outline)
- ✓ Add block in Sidepanel
- ✓ Elementor style / color bleeds fixed
- ✓ Color-Palette Sync with Elementor
- ✓ Load Gutenberg Styles on Frontend / Preview (using do_blocks and add global stylesheet)
- ✓ Apply Elementor default for H1-H5, paragraphs, links, code block, quote …
- ✓ Elementor settings for the core block styles, to override the default
- ✓ Fullscreen Mode
- ✓ Save Status
- ✓ Character / Word / Block Count
- ✓ Fixed: Copy and Paste breaks saving
- ✓ Added: Added Autosave
- ✓ Added: Plugin Info
- ✓ Fix Block Settings to the top below toolbar, no floating settings covering text.
- ✓ Import content from existing post
- ✓ Export content to existing post
Missing Functionality / Broken Stuff / Potential Additions
- Test with external Gutenberg blocks.
- Markdown enhancements
Video Preview
Small video preview of the latest iteration. Fully integrates the local WP Gutenberg now.
Day 3 of making this work ….
Fixes / Workarounds
One thing that messed things up, is the Elementor AI feature ! Lets disable it …. Hate it anyway!
|
1 2 3 4 5 6 |
function disable_elementor_ai() { return null; } add_filter('get_user_option_' . Elementor\Modules\Ai\Preferences::ENABLE_AI, 'disable_elementor_ai'); |
|
1 2 3 4 5 6 7 8 9 |
# Gutenberg // Get styles from content wp_style_engine_get_stylesheet_from_context( 'block-supports' ); # Elementor // Get the active kit object (holds all global styles) $active_kit = \Elementor\Plugin::$instance->kits_manager->get_active_kit(); |
Block Editor Settings
Key | Type / Possible Values | Description |
|---|---|---|
alignWide | Boolean (true / false) | Enable wide alignment for blocks |
allowedBlockTypes | Boolean (true / false) | Controls whether all block types are allowed |
allowedMimeTypes | Array of MIME types (e.g., “image/jpeg”, “video/mp4”) | Specifies which file types are allowed for upload |
defaultEditorStyles | Array of CSS strings | Default CSS applied to the editor when no theme styles are set |
blockCategories | Array of objects (slug, title, icon) | Categories used for grouping blocks in the editor |
disableCustomColors | Boolean | Disables custom colors if true |
disableCustomFontSizes | Boolean | Disables custom font sizes if true |
disableCustomGradients | Boolean | Disables gradient selection if true |
enableCustomLineHeight | Boolean | Allows custom line heights if true |
imageDefaultSize | String (“thumbnail”, “medium”, “large”, “full”) | Default image size for inserted images |
imageEditing | Boolean | Enable image editing inside the editor |
maxUploadFileSize | Integer (bytes) | Maximum file upload size |
titlePlaceholder | String | Placeholder text for the post title |
bodyPlaceholder | String | Placeholder text for the post body |
autosaveInterval | Integer (seconds) | Interval for autosaving content |
richEditingEnabled | Boolean | Enables rich text editing in the editor |
supportsLayout | Boolean | Indicates if layout support is enabled |
supportsTemplateMode | Boolean | Allows template mode for block patterns |
enableCustomFields | Boolean | Enables custom fields for posts |
colors | Array of objects (name, slug, color) | Defines the color palette available in the editor |
gradients | Array of objects (name, slug, gradient) | Defines gradient presets available in the editor |
FAQ
What makes the Gutenberg Editor suitable for long-form content?
Gutenberg is structured around blocks, allowing writers to organize large amounts of text into logical sections. This makes long-form content more readable, maintainable, and easier to format without relying on shortcodes or custom HTML.
How does Gutenberg improve writing flow for lengthy articles?
The block-based navigation panel, outline view, and document structure tools help authors quickly move between sections, manage headings, and maintain logical hierarchy. This minimizes scrolling and improves writing efficiency.
Can Gutenberg handle complex page structures often needed for long content?
Yes. Gutenberg supports nested layouts using Group, Columns, and Container blocks. These allow authors to build complex structures—such as multi-section guides, tutorials, case studies, and documentation—while keeping the layout visually consistent.
Does Gutenberg support reusable elements for long-form content?
Gutenberg includes Reusable Blocks and Patterns, enabling authors to save components like callouts, tips, tables, or disclaimers and insert them into long-form content with a single click. Updates can be synced globally if needed.
How does Gutenberg assist with SEO for long-form writing?
Gutenberg works well with SEO plugins and ensures semantic HTML through native blocks. Structured headings, clean markup, and support for schema-generating tools help long-form content rank more effectively.
Is collaboration possible when creating long-form content in Gutenberg?
Yes. With the optional WordPress Collaborative Editing features (and plugins like PublishPress), multiple authors can review, comment, and revise long documents while maintaining editorial workflows.
Can Gutenberg be extended for more advanced long-form editing needs?
Gutenberg is fully extensible. Developers can add custom blocks, block styles, sidebar panels, and enhanced writing tools. Many plugins provide features such as AI-assisted writing, table-of-contents blocks, footnotes, and improved typography.
Is Gutenberg suitable for writing books, documentation, or multi-chapter guides?
Yes. With block patterns, hierarchical navigation, and content segmentation tools, Gutenberg is increasingly used for documentation, e-books, and multi-chapter knowledge bases. It offers structure and flexibility without code.
