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.
npx claudepluginhub respira-press/agent-skills-wordpressThis skill uses the workspace's default tool permissions.
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...
Migrates WordPress sites from Visual Composer (VCV/WPBakery) to Gutenberg by auditing pages, mapping elements to blocks like vc_row to Group, and converting via duplicates for safe review.
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.
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.
Share bugs, ideas, or general feedback.
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