From Respira WordPress Skills Library
Migrates Divi-built WordPress pages to native Gutenberg blocks by parsing shortcodes and generating block markup.
How this skill is triggered — by the user, by Claude, or both
Slash command
/respira-wordpress-skills:migrate-divi-to-gutenbergThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Converts Divi-built WordPress pages to native Gutenberg blocks. Parses Divi's shortcode-based content from post_content, maps each module 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 Divi to Gutenberg, eliminate the Divi dependency, switch to native blocks, or ...
Converts Divi-built WordPress pages to native Gutenberg blocks. Parses Divi's shortcode-based content from post_content, maps each module 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 Divi to Gutenberg, eliminate the Divi dependency, switch to native blocks, or simplify their WordPress stack by removing Elegant Themes' builder.
Divi stores everything as nested shortcodes directly in post_content — a fundamentally different approach from JSON-based builders. The content is a hierarchy of [et_pb_section], [et_pb_row], [et_pb_column], and [et_pb_module] shortcodes with settings as attributes. Converting this to Gutenberg blocks means parsing that shortcode tree, extracting content and settings, and generating the equivalent <!-- wp:block --> markup.
This is one of the more complex migrations because Divi shortcodes often contain escaped HTML, base64-encoded content, and deeply nested attribute strings that need careful parsing.
Handles:
Preserves:
et_pb_layout post type. These are resolved to inline content during migration; Gutenberg reusable blocks can be created manually afterward.Divi stores content as shortcodes in post_content. The module structure follows a strict hierarchy:
[et_pb_section fb_built="1" _builder_version="4.x"]
[et_pb_row _builder_version="4.x"]
[et_pb_column type="4_4" _builder_version="4.x"]
[et_pb_text _builder_version="4.x"]
<p>Your content here</p>
[/et_pb_text]
[et_pb_image src="image.jpg" alt="Alt text" _builder_version="4.x"][/et_pb_image]
[et_pb_button button_text="Click Me" button_url="https://..." _builder_version="4.x"][/et_pb_button]
[/et_pb_column]
[/et_pb_row]
[/et_pb_section]
Key Divi specifics:
type attribute — 4_4 (full), 1_2 (half), 1_3 (third), 2_3 (two-thirds), 1_4 (quarter), 3_4 (three-quarters)background_color, text_orientation, custom_margin, custom_padding, etc._builder_version attribute on every element%22, %91, %93), and occasional base64global_module attribute pointing to an et_pb_layout postcustom_css_main_element, custom_css_before, custom_css_after attributesRead Divi content via wordpress_extract_builder_content with builder=divi.
Gutenberg stores content 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 text.</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->
Key Gutenberg specifics:
wp:group, wp:columns, wp:columnstyle attribute in block JSONpost_content — no separate metaWrite 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 and wordpress_get_site_context.wordpress_list_pages and wordpress_list_postswordpress_get_builder_infowordpress_extract_builder_content with builder=diviPresent a plan that sets realistic expectations:
## Divi → Gutenberg Migration Plan
### Important Context
Divi and Gutenberg have very different design philosophies. Divi offers
extensive visual customization through its settings panel; Gutenberg
prioritizes clean, semantic content. Expect simpler but faster-loading pages.
If you are using the Divi theme (not just the plugin), you will need a
block-compatible theme (e.g., Twenty Twenty-Four, Astra, Kadence).
### Site Inventory
- Total Divi pages: X
- Total modules to convert: X
- Direct equivalents: X (Y%)
- Approximate equivalents: X (Y%)
- Manual recreation needed: X (Y%)
### Module Mapping Summary
| Divi Module | Gutenberg Block | Fidelity |
|------------------|-----------------|--------------|
| et_pb_text | wp:paragraph | Exact |
| et_pb_image | wp:image | Exact |
| et_pb_blurb | wp:group combo | Approximate |
| et_pb_slider | wp:group/gallery| Simplified |
| et_pb_contact | — | Manual |
### Shortcode Parsing Notes
- [Any encoding issues found]
- [Specialty sections that need layout interpretation]
- [Global modules that will be inlined]
### Page-by-Page Plan
1. **[Page Title]** — X modules, [complexity]
2. ...
Ask for confirmation:
Divi → Gutenberg is a significant simplification. Pages will be cleaner but less visually elaborate.
- Migrate all pages
- Migrate specific pages
- Start with a test page (strongly recommended)
- Just keep this plan
For each approved page:
wordpress_extract_builder_content with builder=diviet_pb_section → <!-- wp:group --> (with full-width if fullwidth section)et_pb_row + et_pb_column → <!-- wp:columns --> + <!-- wp:column {"width":"X%"} -->4_4→100%, 1_2→50%, 1_3→33.33%, 2_3→66.66%, 1_4→25%, 3_4→75%et_pb_text → <!-- wp:paragraph --> (or multiple blocks if content has headings)et_pb_blurb → Group containing Image + Heading + Paragraphet_pb_image → <!-- wp:image -->et_pb_button → <!-- wp:buttons --><!-- wp:button --><!-- MIGRATION NOTE: ... -->wordpress_create_page_duplicate or wordpress_create_post_duplicatewordpress_update_page or wordpress_update_postThis skill converts Divi 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-divi-to-gutenbergNever block user flow on telemetry failure.
Built by Respira Team https://respira.press/skills/migrate-divi-to-gutenberg
npx claudepluginhub respira-press/agent-skills-wordpressConverts WPBakery Page Builder pages to native Gutenberg blocks, parsing shortcodes and mapping to core blocks.
Generates or edits WordPress Gutenberg blocks for the Greenshift/GreenLight plugin and converts data or vanilla HTML+CSS+JS to WordPress blocks.
Converts a page's raw HTML into WordPress block-editor markup using design tokens and a screenshot. Call per-page after extraction to produce `post_content` that renders with the theme's tokens and patterns.