Stats
Actions
Tags
From Respira WordPress Skills Library
Converts WPBakery Page Builder pages to native Gutenberg blocks, parsing shortcodes and mapping to core blocks.
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
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...
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 wordpress_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 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=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:
wordpress_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: ... -->wordpress_create_page_duplicate or wordpress_create_post_duplicatewordpress_update_page or wordpress_update_postThis skill converts WPBakery 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-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-wordpressMigrates full WordPress sites from Visual Composer (WPBakery) to Gutenberg blocks. Audits pages, maps elements to native block equivalents, builds a migration plan, and converts pages via duplicates to keep the live site untouched.
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.