Free tool

WPBakery → Gutenberg Converter

WPBakery is legacy tech now. Paste your page's [vc_row] shortcodes and get native Gutenberg blocks with your design intact — nothing to install, completely free.

WPBakery hasn't meaningfully moved forward in years, and every page you build in it is locked behind the plugin's [vc_row] shortcode soup — deactivate it and your content turns to raw text. This free converter reads that shortcode tree and turns it into native Gutenberg blocks: rows become groups, columns become column blocks, and text/image/button elements become real core blocks, with your design-options CSS carried over in a single embedded style block. Paste the page's shortcode content from the Text/Code editor view, convert, and paste the result into Gutenberg's code editor. No plugin, no account, no lock-in — the output is plain WordPress.

  1. 1

    Copy the shortcodes

    Open the page, switch the classic editor to Text view (or the WPBakery backend editor) and copy the full [vc_row]…[/vc_row] content.

  2. 2

    Convert here

    Paste it below, optionally add your design-options CSS, hit Convert, copy the result.

  3. 3

    Paste into Gutenberg

    In the block editor open ⋮ → Code editor, paste, switch back to the visual editor — done. No plugin needed.

🔒 Runs entirely in your browser — your pasted content is never uploaded to a server.

WPBakery Shortcode Input

No WPBakery content yet? In WP admin open the page, switch the editor to Text/Code view, and copy everything — the [vc_row...] shortcodes are your input.

The output is native Gutenberg blocks with one embedded <style> block carrying your design. In the block editor open the ⋮ menu → Code editor (Ctrl+Shift+Alt+M), paste, and switch back to the visual editor.

Shortcodes from third-party plugins you don't have installed are kept as-is (core/shortcode) — the converter tells you exactly which ones and why.

Design Options CSS (optional)

If this page used WPBakery's per-row/column "Design Options" CSS (stored in the _wpb_shortcodes_custom_css postmeta), paste it below so those rules get folded into the converted markup's embedded stylesheet.

Gutenberg Blocks Output

Live Preview

From the makers of ready→made

Building from a Figma design instead?

ready→made converts your Figma designs straight into Gutenberg, Oxygen 6, Etch or clean HTML — real structure from a real layout engine.

See ready→made →
FAQ

Good to know.

What exactly do I paste in?

The page's raw post_content — easiest way to get it is opening the page in the classic editor and switching to the Text tab (or your page builder's "backend editor"), then copying everything from the first [vc_row] onward.

What about my design-options CSS?

WPBakery stores custom per-element CSS separately in _wpb_shortcodes_custom_css post meta. There's an optional field for it in the converter — paste it in and those rules land in the embedded style block alongside the rest.

My images look broken after converting.

WPBakery often references images by attachment ID, which only resolves on your own WordPress install. Convert on the same site the page lives on, or swap in the image URLs manually afterwards — the converter flags any ID it couldn't resolve.

What happens to my contact forms?

Contact Form 7 and Gravity Forms shortcodes ([contact-form-7 …], [gravityform …]) are kept as-is in the output — they just need the corresponding plugin active on the target site to render.

What can't be converted?

Unrecognized or third-party [vc_*] shortcodes (custom addons, page-builder-specific widgets) are skipped and listed in the conversion notes rather than guessed at.

I'm starting from a design, not an old build.

Then use ready→made to convert the Figma design directly to Gutenberg.

More free tools

Other converters in the suite.

Ready?

Build a real site from your Figma file — in minutes.

menu