/migrate-elementor-to-gutenberg

name: migrate-elementor-to-gutenberg
description: "Use when the user says 'migrate elementor to gutenberg', 'convert elementor to blocks', 'remove the elementor dependency', or 'go back to native wordpress'. Maps Elementor widgets to core blocks and creates draft duplicates for review."
license: MIT
metadata:
  author: Respira for WordPress
  author_url: https://respira.press
  version: 2.2.0
  mcp-server: respira-wordpress
  category: migration

Migrate Elementor to Gutenberg

**Version:** 2.2.0 **Updated:** 2026-09-13 **Freshly updated:** v2.1.0 adds design-token awareness: conversion writes register the colors, font families and font sizes they carry as named presets in the block editor's own global styles (the palette, fontFamilies and fontSizes), and converted pages reference those presets instead of carrying value copies. A font token named for the body or heading also sets the site-wide body or heading font; font weights are not registered. Reuse registered tokens instead of re-inlining raw values, and report the registration in the migration summary.

Converts Elementor-built WordPress pages to native Gutenberg blocks. Reads Elementor's JSON widget tree from post meta, maps each widget to its closest core block equivalent, generates a migration plan for approval, and writes clean block markup to the target pages. Use this skill whenever someone wants to move from Elementor to Gutenberg, eliminate page builder dependencies, go back to native WordPress blocks, or simplify their tech stack by dropping Elementor.

What This Skill Does

Moving from Elementor to Gutenberg is one of the most common — and most complex — builder migrations. Elementor stores content as a deeply nested JSON tree in `_elementor_data`, while Gutenberg uses HTML comments (`<!-- wp:block -->`) inline with content in `post_content`. Every layout decision Elementor makes with JSON settings must be translated into block attributes, CSS classes, or Group/Columns block structures.

This skill handles that translation systematically: it reads every Elementor widget, finds the right Gutenberg block, maps settings as closely as possible, and flags anything that needs manual attention. The result is clean, dependency-free WordPress content. Elementor and Gutenberg are both among the 17 page builders Respira reads and writes natively, so extraction and the block write run through the same builder-aware tooling Respira uses everywhere else.

**Handles:**

• Section/Column layouts → Group and Columns blocks with appropriate width settings
• Text Editor → Paragraph blocks (preserving inline formatting)
• Heading → Heading block (h1-h6 mapping)
• Image → Image block (with alt text, caption, link)
• Video → Video or Embed block (YouTube/Vimeo detected)
• Button → Buttons block (with link, style, colors)
• Icon List → List block
• Spacer → Spacer block
• Divider → Separator block
• Google Maps → Custom HTML block with embed
• Tabs, Accordion → Group blocks with Details block (WP 6.3+) or HTML fallback
• Image Gallery → Gallery block
• Counter, Progress Bar → HTML or Group block approximations
• Custom HTML → Custom HTML block (direct transfer)
• Responsive visibility → block-level responsive classes (theme-dependent)

**Preserves:**

• All text content, headings, and inline formatting (bold, italic, links)
• Image URLs, alt text, captions, and link targets
• Button labels, URLs, and target attributes
• Color values applied as block-level styles
• Basic spacing via Spacer blocks
• Heading hierarchy (h1-h6)
• List content and structure
• Embedded media URLs

What This Skill Does NOT Do

• **Complex multi-column layouts** — Elementor allows pixel-level column width control and nested sections. Gutenberg Columns blocks support percentage widths but with less precision. Complex grid layouts may need manual adjustment or a block-based layout plugin.
• **Elementor Pro widgets** — Posts grid, portfolio, price table, price list, flip box, call to action, and similar Pro widgets have no core Gutenberg equivalent. They are flagged for manual recreation.
• **Third-party addon widgets** — Essential Addons, JetElements, Crocoblock widgets cannot be auto-mapped.
• **Dynamic content** — ACF fields, custom loops, and dynamic tags require separate solutions (ACF blocks, custom block patterns, or Query Loop block).
• **Theme Builder templates** — Headers, footers, archive templates are outside page content scope.
• **Advanced animations** — Motion effects, parallax scrolling, entrance animations have no Gutenberg equivalent.
• **Form widgets** — Elementor forms need a forms plugin replacement (WPForms, Gravity Forms, etc.).
• **Popup content** — Elementor popups are not page content and are excluded.
• **Design fidelity** — Gutenberg is intentionally simpler. Expect a cleaner but less visually identical result. This is a feature, not a bug — you are trading design complexity for simplicity and performance.

Requirements

• Respira for WordPress plugin installed and connected
• MCP connection active (desktop or WebMCP)
• Elementor plugin active (to read source content)
• WordPress 6.0+ (for modern block features; 6.3+ recommended for Details block)
• A block-compatible theme (Twenty Twenty-Three, Astra, Kadence, GeneratePress, etc.)
• Read access to scan Elementor content
• Write access to create duplicates with Gutenberg content

Trigger Phrase

• "migrate elementor to gutenberg"

Alternative Triggers

• "convert elementor to blocks"
• "switch from elementor to gutenberg"
• "remove elementor dependency"
• "go back to native wordpress"
• "rebuild elementor pages with blocks"
• "elementor to block editor"
• "decommission elementor"

Source Builder: Elementor

Elementor stores page content in the `_elementor_data` post meta field as a JSON string. The structure is a nested tree:

Document
  └─ Section (type: "section")
       ├─ settings: { structure, layout, content_width, ... }
       └─ elements: [
            Colum