How to Export and Import Gutenberg Blocks in WordPress

How to Export and Import Gutenberg Blocks in WordPress

You spent an hour building a perfect hero section — custom headline, two-column layout, CTA buttons, background image. Now you need it on four other pages and two client sites. The Gutenberg editor has no obvious “export block” button. Here’s exactly what to do.

Reusable Blocks vs. Block Patterns: Stop Confusing These Two

This distinction determines your entire export strategy. Get it wrong and you’ll hit errors that are genuinely annoying to debug.

What Synced Patterns (Reusable Blocks) Actually Are

Reusable Blocks were renamed to “Synced Patterns” in WordPress 6.3. The name change reflects the behavior accurately: every instance of a synced pattern is connected. Edit it in one place, and all copies update across the entire site automatically.

Under the hood, synced patterns live in a custom post type called wp_block. They’re database records, not just markup. This is why WordPress’s built-in XML exporter can pull them out — it knows how to read that post type. When you import the XML on a destination site, the synced patterns land in its wp_block table and work correctly.

Critical caveat: if you export a page that uses a synced pattern, the page XML does not include the pattern data. It only stores a reference to the pattern’s database ID. On a fresh site, that ID doesn’t exist — you’ll see a block error or a blank space where the block should be. Always export synced patterns separately, and import them before importing the pages that reference them.

What Block Patterns Are

Block patterns are fundamentally different. They’re pre-built layouts registered through code — in a theme’s functions.php file, a plugin, or via the WordPress Pattern Directory at wordpress.org/patterns. When you insert a block pattern into a post, WordPress stamps a copy of its HTML directly into that post’s content. No database record. No syncing. The inserted copy and the original pattern have zero ongoing connection after insertion.

You can’t export a block pattern the way you’d export a synced pattern. There’s nothing in the database to export. What you’re moving is raw HTML block markup — and the most direct way to move it is copying it straight from the Code Editor.

The Practical Difference

Use Synced Patterns for content that must stay consistent everywhere: global disclaimers, pricing tables, standardized call-to-action sections. Use Block Patterns as design templates you’ll customize per page. Use raw HTML copy for fast one-off transfers where neither system is worth setting up.

WordPress 6.3 also introduced Unsynced Patterns — each inserted copy starts from a shared layout but evolves independently afterward. Good for team member bios or case studies that share structure but need different content per entry. It’s the middle ground between strict syncing and pure one-time stamping.

How to Export Gutenberg Blocks: Three Methods

No single button covers all cases. The right method depends on what you’re moving and where it’s going.

Method 1: WordPress XML Export — for moving all reusable blocks to a different WordPress site at once.

  1. Dashboard > Tools > Export
  2. Select Reusable Blocks as the content type (available in WordPress 6.0 and later)
  3. Click Download Export File — you receive a .xml file
  4. On the destination site: Tools > Import > WordPress (install the WordPress Importer plugin if prompted)
  5. Upload the .xml file and follow the prompts

The import creates new database entries on the destination site. Pages from your source site that referenced these patterns by their original database IDs won’t auto-reconnect — you’ll re-insert the patterns on those pages manually after import.

Method 2: Code Editor Copy/Paste — fastest method for transferring single blocks or small groups.

  1. Open the source post or page in the Gutenberg editor
  2. Select the blocks you want (use Shift+click for multiple blocks)
  3. Open the three-dot menu (top right) and switch to Code Editor
  4. Copy the block HTML markup
  5. On the destination page, open Code Editor and paste
  6. Switch back to Visual Editor to confirm everything rendered correctly

Block structure and settings transfer fully. Custom CSS from your theme does not follow — expect visual differences if the destination site runs a different theme or doesn’t have the same block plugins installed.

Method 3: Plugin Cloud Library — for agencies and developers managing multiple sites regularly.

Plugins like Kadence Blocks Pro and GenerateBlocks Pro let you save blocks to a cloud-hosted pattern library, then insert them on any site connected to your account. No XML files to manage, no markup to copy. If this matches your workflow, the plugins section below covers your options in detail.

Block Export Methods Compared

Method Best For Transfers Styles? Cross-Site? Plugin Needed? Speed
WordPress XML Export Full synced pattern migration Markup yes, CSS depends on theme Yes No Medium
Code Editor Copy/Paste One-off single block transfers Markup only Yes No Fast
Kadence Blocks Cloud Library Multi-site agency workflows Yes (on Kadence theme stack) Yes Yes — Pro, $149/yr Very Fast
Spectra Template Library Importing pre-built page layouts Yes (within Spectra stack) Yes Yes — Free Fast
Reusable Blocks Extended Better native WP block management Yes Yes (via JSON export) Yes — Free Medium
Custom Block Pattern in theme Developer-built distributable patterns Depends on theme CSS Yes (ships with theme) No — requires code N/A

The shared limitation across every method: visual styling doesn’t transfer unless the destination site runs the same theme and plugin stack. A block built with Kadence Blocks’ Advanced Row Layout moves its HTML cleanly to any WordPress site — but its spacing, colors, and typography depend on Kadence theme CSS. Put that block on a site running Astra, Blocksy, or GeneratePress and it’ll look different. The markup is portable. The design system isn’t.

This is why plugin cloud libraries work best when your entire client portfolio runs the same stack. If your sites use different themes, the XML export and Code Editor copy method are actually more predictable — you know you’re moving structure only, and you set visual expectations accordingly rather than getting surprised by styling gaps post-import.

The Best Plugins for Block Portability

Native WordPress export is a one-off tool. If you’re moving blocks regularly across multiple sites, you need a plugin-based workflow. These four are worth knowing.

Kadence Blocks — Free + Pro at $149/year

Kadence Blocks by Kadence WP has the most complete portability system available. The free version includes a library of pre-built block patterns — testimonials, hero sections, pricing grids, feature lists — insertable in one click. The Pro version ($149/year, or $269/year for the full Kadence bundle) unlocks the cloud pattern library.

The cloud library is where it earns the subscription: save any block or section from Site A, access it from any site linked to your Kadence account. No XML files, no markup copying, no friction. For agencies running ten or more client sites on the Kadence stack, this pays for itself fast. Kadence Blocks also adds genuinely useful native blocks — Advanced Row Layout, Icon List, Info Box, Accordion, Tabs — that plug directly into Kadence theme’s global design system. If you’re already on Kadence, this is the obvious install.

Spectra by Brainstorm Force — Free

Spectra (formerly Ultimate Addons for Gutenberg) comes from Brainstorm Force, the same team behind the Astra theme. It’s entirely free. The template library is Brainstorm Force’s own curated designs — you browse their layouts and import one, not a cloud library you populate yourself. Spectra adds blocks like Info Box, Timeline, Star Rating, Marketing Button, and Post Grid. Best fit for solo site owners running Astra who want design flexibility without paying for tooling. Custom cross-site cloud saving isn’t available here.

Reusable Blocks Extended — Free

This plugin fixes one specific problem: WordPress’s default UI for managing reusable blocks is buried and inconvenient. Reusable Blocks Extended adds a top-level dashboard menu item, bulk export to JSON, and individual import support for synced patterns. Under 50KB. Zero bloat. Install it if you work heavily with native WordPress synced patterns and don’t want a larger plugin ecosystem involved. It does exactly one thing well and nothing else.

GenerateBlocks — Free + Pro at $39/year

GenerateBlocks by Tom Usborne takes a deliberately minimal approach: four highly flexible blocks — Container, Grid, Headline, Button — instead of twenty-plus specialized ones. You build complex layouts by combining these primitives, which keeps the code output clean and lightweight. Pro ($39/year) adds a pattern library and JSON-based style export/import between sites. If you run the GeneratePress theme, GenerateBlocks integrates directly with its global styles. At $39/year, it’s the lowest-cost professional portability option in this category and a natural choice for developers who want standards-aligned HTML output without heavy plugin dependencies.

Why Block Imports Break and How to Fix Them

Why does an imported block show “This block contains unexpected content”?

The block type isn’t registered on the destination site. If you import a block built with Kadence Blocks onto a site without Kadence Blocks installed, WordPress can’t parse the markup and throws this error. Install the same block plugin on the destination site, reload the page, and the error clears. This is the most common import error — and the easiest to fix once you know what’s causing it.

Why does the WordPress Importer stall or fail partway through?

Two causes. First: the WordPress Importer plugin isn’t installed on the destination site — go to Tools > Import > WordPress > Install Now. Second: your XML references media files hosted on the source server. During the import step, check “Download and import file attachments” to have WordPress fetch those files from their original URLs. If the source site is offline or behind a login, that fetch will fail and the import will stall.

For XML files over 50MB, PHP’s default upload limits become the blocker. Ask your host to raise upload_max_filesize and post_max_size in php.ini, or switch to WP Migrate by Delicious Brains, which handles large database transfers without hitting standard upload limits.

Images transferred but show as broken links — what went wrong?

WordPress stores image URLs as absolute paths in the database. After import, those paths still point to the source domain. The fix is a database search-replace: swap the old domain for the new one across all tables. Better Search Replace by Delicious Brains handles this correctly — it’s free, serialization-aware, and takes under five minutes. Run it once post-import and images load correctly.

Can Gutenberg blocks be imported into Elementor or Divi?

No. These three systems store layout data in completely different formats. Gutenberg uses HTML block comments in post content. Elementor stores JSON in post meta fields. Divi uses shortcode syntax. There’s no reliable conversion bridge. Any plugin claiming to automate this will produce output that needs significant manual cleanup — treat it as a starting point at best, not a finished migration. If you’re moving from Elementor or Divi to Gutenberg, plan to rebuild the layouts manually.

For straightforward WordPress-to-WordPress Gutenberg work, use the XML export for bulk synced pattern migration, the Code Editor copy method for individual blocks, and Kadence Blocks Pro cloud library when cross-site sharing needs to happen at scale. That combination handles the full range without fighting against WordPress’s own systems.

Leave a Reply