From Respira WordPress Skills Library
Converts WPBakery Page Builder shortcode content into native Gutenberg blocks, preserving text, images, buttons, videos, galleries, and CSS classes. Use when migrating a WordPress site from WPBakery to Gutenberg.
How this skill is triggered — by the user, by Claude, or both
Slash command
/respira-wordpress-skills:migrate-wpbakery-to-gutenbergThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
**Version:** 2.0.0
Version: 2.0.0
Updated: 2026-06-30
Freshly updated: v2.0.0 weaves in the current Respira safety and precision flow — respira_find_builder_targets to inventory and scope the WPBakery source pages up front, a respira_get_snapshot checkpoint before any write, and surgical fixes via respira_find_element + respira_update_element (and respira_batch_update for multi-block or multi-page corrections) instead of rewriting whole pages. Rollback is now explicit (restore the snapshot, delete the draft duplicates). Reflects the current 16 supported builders.
Converts WPBakery Page Builder (formerly Visual Composer) pages to native Gutenberg blocks. Parses WPBakery's shortcode-based content from post_content, maps each element 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 WPBakery to Gutenberg, eliminate the WPBakery dependency, switch to native blocks, or modernize an older WordPress site still running WPBakery.
WPBakery is one of the oldest and most widely-installed WordPress page builders — millions of sites still run it. It stores content as shortcodes in post_content using the [vc_*] prefix. The good news: WPBakery's shortcode structure is relatively straightforward compared to Divi's encoding complexities. The challenge: many WPBakery sites are older and may use deprecated elements, custom shortcodes from themes, or VC-specific plugins that add nonstandard elements.
This skill parses the WPBakery shortcode tree, extracts content and settings, and generates equivalent Gutenberg blocks. The result is clean, modern WordPress content free from shortcode dependencies.
Handles:
Preserves:
el_class attributeel_id attributecss attribute containing encoded CSS) stores background, border, padding as a single encoded string. Basic properties are extracted; complex combinations may be simplified.WPBakery stores content as shortcodes in post_content:
[vc_row full_width="stretch_row" css=".vc_custom_123{padding-top:40px}"]
[vc_column width="1/2" el_class="my-class"]
[vc_column_text]
<h2>Welcome</h2>
<p>Content with <strong>formatting</strong>.</p>
[/vc_column_text]
[vc_single_image image="456" img_size="large" alignment="center"]
[/vc_column]
[vc_column width="1/2"]
[vc_btn title="Learn More" style="flat" color="primary" link="url:https%3A%2F%2Fexample.com"]
[/vc_column]
[/vc_row]
Key WPBakery specifics:
[vc_row] → [vc_column width="1/2"] → elements1/1, 1/2, 1/3, 2/3, 1/4, 3/4, 1/6, 5/6[vc_row_inner][vc_column_inner] for nested layoutscss=".vc_custom_12345{background-color:#f5f5f5;padding:20px}"url:https%3A%2F%2F...||target:_blankfull_width attribute: stretch_row, stretch_row_content, stretch_row_content_no_spacesel_class for custom CSS classes, el_id for IDsRead WPBakery content via respira_extract_builder_content with builder=wpbakery.
Gutenberg stores content in post_content as HTML with block delimiters:
<!-- wp:columns -->
<div class="wp-block-columns">
<!-- wp:column {"width":"50%"} -->
<div class="wp-block-column" style="flex-basis:50%">
<!-- wp:heading {"level":2} -->
<h2 class="wp-block-heading">Welcome</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Content with <strong>formatting</strong>.</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->
Key Gutenberg specifics:
style attributepost_contentWrite Gutenberg content via respira_update_page or respira_update_post targeting the content field.
respira_get_site_context. If unavailable, stop and show setup guidance.respira_list_plugins.respira_list_pages and respira_list_posts — identify all contentrespira_find_builder_targets with builder=wpbakery — inventory the WPBakery-managed pages to scope the migrationrespira_get_builder_inforespira_extract_builder_content with builder=wpbakery## WPBakery → Gutenberg Migration Plan
### Site Context
WPBakery sites are often older WordPress installations. Consider this migration
as a modernization opportunity — not just a builder swap.
### Theme Note
[If theme bundles WPBakery]: Your theme ([theme name]) bundles WPBakery
and likely adds custom elements. These theme-specific elements (X found)
will need manual recreation. Consider whether this theme should also
be updated to a modern block theme.
### Site Inventory
- Total WPBakery pages: X
- Total elements to convert: X
- Direct block equivalents: X (Y%)
- Approximate equivalents: X (Y%)
- Manual recreation needed: X (Y%)
### Element Mapping Summary
| WPBakery Element | Gutenberg Block | Fidelity |
|--------------------|-----------------|-----------|
| vc_column_text | wp:paragraph | Exact |
| vc_single_image | wp:image | Exact |
| vc_custom_heading | wp:heading | Exact |
| vc_btn | wp:buttons | Close |
| vc_row/vc_column | wp:columns | Close |
| vc_gallery | wp:gallery | Close |
| vc_toggle | wp:details | Close |
| vc_grid | wp:query | Manual |
| [theme element] | — | Manual |
### Design Options Analysis
- Pages with simple Design Options: X (colors and padding — auto-mapped)
- Pages with complex Design Options: X (gradients, borders — partially mapped)
### Page-by-Page Plan
1. **[Page Title]** — X elements, [complexity]
2. ...
Ask for confirmation:
WPBakery → Gutenberg is a modernization step. Pages will be cleaner and faster.
- Migrate all pages
- Migrate specific pages
- Start with a test page (recommended for sites with theme-bundled elements)
- Just keep this plan
For each approved page:
respira_extract_builder_content with builder=wpbakeryvc_row → <!-- wp:columns --> (check full_width for alignment)vc_column → <!-- wp:column {"width":"X%"} --> (convert fractions: 1/2→50%, 1/3→33.33%, etc.)vc_column_text → Parse inner HTML, split into appropriate blocks:
<h2> → <!-- wp:heading {"level":2} --><p> → <!-- wp:paragraph --><ul>/<ol> → <!-- wp:list -->vc_single_image → <!-- wp:image {"id":N,"sizeSlug":"large"} -->vc_btn → <!-- wp:buttons --> (decode URL, map style/color)vc_custom_heading → <!-- wp:heading --> (extract tag, text, alignment)el_class as className in block attributesel_id as anchor in block attributes<!-- MIGRATION NOTE: ... -->respira_get_snapshot checkpoint of the target before any write, so the page can be restored exactly if the conversion needs unwindingrespira_create_page_duplicate or respira_create_post_duplicaterespira_update_page or respira_update_postrespira_find_element and correct it in place with respira_update_element. For repeated corrections across many blocks or several migrated pages, batch them with respira_batch_update rather than regenerating and re-writing whole pages.respira_get_snapshot checkpoint before each writerespira_restore_snapshot, or delete the draft duplicates if they are not wantedThis skill converts WPBakery page content to Gutenberg blocks and creates draft duplicates for review.
It cannot:
It can:
Core WordPress tools
respira_get_site_contextrespira_list_pluginsrespira_list_pagesrespira_list_postsrespira_read_pagerespira_read_postrespira_get_builder_inforespira_extract_builder_contentrespira_find_builder_targetsrespira_create_page_duplicaterespira_create_post_duplicaterespira_update_pagerespira_update_postrespira_get_snapshotrespira_restore_snapshotrespira_find_elementrespira_update_elementrespira_batch_updateAfter run completion, send fire-and-forget usage tracking to:
POST https://www.respira.press/api/skills/track-usageInclude:
skill_slug = migrate-wpbakery-to-gutenbergNever block user flow on telemetry failure.
Built by Respira Team https://respira.press/skills/migrate-wpbakery-to-gutenberg
npx claudepluginhub respira-press/agent-skills-wordpressConverts Elementor-built WordPress pages to native Gutenberg blocks by mapping widgets to core block equivalents. Use for moving from Elementor to Gutenberg or eliminating page builder dependencies.
Generates or edits WordPress Gutenberg blocks for the Greenshift/GreenLight plugin and converts data or vanilla HTML+CSS+JS to WordPress blocks.
Converts React/HTML/Next.js codebases into pixel-perfect WordPress themes with preserved SEO, dynamic CMS features, and strict UI audits. Use for high-fidelity frontend-to-WP migrations.