Migrates Elementor-built WordPress pages to native Gutenberg blocks. Parses JSON widget tree from post meta, maps widgets to core blocks, generates migration plan for approval, and writes block markup to post content.
npx claudepluginhub respira-press/agent-skills-wordpressThis skill uses the workspace's default tool permissions.
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 ...
Converts WPBakery Page Builder pages to native Gutenberg blocks by parsing shortcodes from post_content, mapping elements to core block equivalents, generating a migration plan for approval, and writing clean block markup to target pages.
Generates or edits WordPress Gutenberg blocks with Greenshift/GreenLight plugin. Converts HTML/CSS/JS designs or data/charts to paste-ready blocks for Gutenberg editor, or reverses to vanilla code.
Generates Gutenberg blocks for WordPress using Greenshift plugin. Outputs HTML with JSON parameters for sections, layouts, heroes, galleries, and elements in code editor.
Share bugs, ideas, or general feedback.
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.
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.
Handles:
Preserves:
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: [
Column (type: "column")
├─ settings: { _column_size, ... }
└─ elements: [
Widget (type: "widget", widgetType: "heading")
└─ settings: { title, size, header_size, ... }
]
]
Key Elementor specifics:
widgetType field (e.g., heading, text-editor, image, button)margin, margin_tablet, margin_mobile_elementor_css post meta — not needed for migration but useful for verification_elementor_page_settings (page layout, hide title, etc.)templateID — must be resolved before mappingRead Elementor content via wordpress_extract_builder_content with builder=elementor.
Gutenberg stores content directly in post_content as HTML with block comment delimiters:
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group">
<!-- wp:heading {"level":2} -->
<h2 class="wp-block-heading">Title Here</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Content here with <strong>formatting</strong>.</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->
Key Gutenberg specifics:
<!-- wp:image {"id":123,"sizeSlug":"large"} -->wp:group, wp:columns, wp:column{"style":{"color":{"background":"#fff"},"spacing":{"padding":{"top":"2rem"}}}}post_content<!-- wp:column {"width":"33.33%"} -->Write Gutenberg content via wordpress_update_page or wordpress_update_post targeting the content field.
wordpress_get_site_context. If unavailable, stop and show setup guidance.wordpress_list_plugins.wordpress_list_pages and wordpress_list_postswordpress_get_builder_infowordpress_extract_builder_content with builder=elementorPresent a detailed plan acknowledging that Gutenberg migration involves the most interpretation:
## Elementor → Gutenberg Migration Plan
### Important Context
Gutenberg is intentionally simpler than Elementor. This migration prioritizes
content preservation and clean markup over pixel-perfect layout recreation.
Some design adjustments will be needed post-migration.
### Site Inventory
- Total Elementor pages: X
- Total widgets to convert: X
- Direct block equivalents: X (Y%)
- Approximate equivalents (layout may differ): X (Y%)
- No equivalent — manual recreation needed: X (Y%)
### Widget Mapping Summary
| Elementor Widget | Gutenberg Block | Fidelity |
|-----------------|----------------|----------|
| heading | wp:heading | Exact |
| text-editor | wp:paragraph | Exact |
| image | wp:image | Exact |
| section+columns | wp:group+columns| Close |
| tabs | wp:details (6.3+)| Approx |
| form | — | Manual |
### Layout Simplification Notes
- [Specific notes about how complex Elementor layouts will be simplified]
- [Column configurations that will change]
- [Sections that will become Groups]
### Page-by-Page Plan
1. **[Page Title]** — X widgets, [simple/moderate/complex]
- Direct conversions: X
- Approximate conversions: X
- Manual items: X — [details]
2. ...
Ask for confirmation:
This migration will produce cleaner, faster-loading pages but with simpler layouts than Elementor.
- Migrate all pages
- Migrate specific pages
- Start with a test page (recommended for complex sites)
- Just keep this plan
For each approved page:
wordpress_extract_builder_content with builder=elementor<!-- wp:group --> with constrained layout<!-- wp:columns --> and <!-- wp:column {"width":"X%"} -->heading → <!-- wp:heading {"level":N} --><hN>text</hN><!-- /wp:heading -->text-editor → <!-- wp:paragraph --><p>text</p><!-- /wp:paragraph -->image → <!-- wp:image {"id":N,"sizeSlug":"large"} --><figure>...</figure><!-- /wp:image -->button → <!-- wp:buttons --><div class="wp-block-buttons"><!-- wp:button -->...<!-- /wp:button --></div><!-- /wp:buttons -->style attributes where possible<!-- MIGRATION NOTE: [widget type] needs manual recreation -->wordpress_create_page_duplicate or wordpress_create_post_duplicatewordpress_update_page or wordpress_update_postThis skill converts Elementor page content to Gutenberg blocks and creates draft duplicates for review.
It cannot:
It can:
Core WordPress tools
wordpress_get_site_contextwordpress_list_pluginswordpress_list_pageswordpress_list_postswordpress_read_pagewordpress_read_postwordpress_get_builder_infowordpress_extract_builder_contentwordpress_find_builder_targetswordpress_create_page_duplicatewordpress_create_post_duplicatewordpress_update_pagewordpress_update_postAfter run completion, send fire-and-forget usage tracking to:
POST https://www.respira.press/api/skills/track-usageInclude:
skill_slug = migrate-elementor-to-gutenbergNever block user flow on telemetry failure.
Built by Respira Team https://respira.press/skills/migrate-elementor-to-gutenberg