Skip to content
wpgraft
ClaudeClaudeA page or artifact Claude generated
GutenbergGutenbergCore WordPress blocks, no page builder at all

How to move a page from Claude to Gutenberg

Move a page from Claude to Gutenberg as real, editable Gutenberg elements, not a screenshot. What comes across, and what does not.

wpgraft reads the page as your browser rendered it, the real elements and the real computed styles, at every breakpoint you ask for, and rebuilds it as Gutenberg’s own native elements with the styles in Gutenberg’s own fields. It does not care that a language model wrote the HTML, and it does not care what framework the page was built with: by the time wpgraft looks, all of that has already become computed styles.

A page Claude writes is one clean self-contained HTML document, which is close to the best possible input for a converter. What it is not is editable by anyone who does not read HTML. wpgraft rebuilds it as core WordPress blocks, with no page builder involved and editable by whoever owns the site.

Before you start

What to have ready

Which Gutenberg wpgraft writes

The WordPress block editor

Core blocks only. No third-party block plugin is needed, and none is assumed; what arrives is what a stock WordPress install can already open.

WordPress 6.0 or newer

That is the wpgraft plugin’s stated minimum. Newer WordPress has more native style fields, so on a current install more of the copy lands in a control you can see rather than in a style attribute.

Phase 1 · Set up
  1. 01

    Install the wpgraft extension in Chrome

    wpgraft is a Chrome extension. Get it from wpgraft.com/releases. Install it, click the icon, sign in: the free tier needs an account but is never billed. On your very first copy it asks you to confirm you have the right to reuse what you are copying, once, and does not ask again.

    Get the Chrome extensionwpgraft.com/releases → Get the Extension
  2. 02

    Install the wpgraft plugin on the Gutenberg site

    The plugin is the WordPress half of wpgraft: it receives the copy, shows it in a panel inside the Gutenberg editor, inserts it, and pulls the images into your Media Library. Download the zip from wpgraft.com/releases, then upload it in wp-admin. It is free software with no licence key and nothing to configure. Its only admin screen, Settings → wpgraft, is a status page that tells you which builder it detected. It updates itself from inside wp-admin like any other plugin: a version check against wpgraft.com that carries no token and no licence key, only your WordPress and PHP versions and your site's own address in the request's User-Agent, as the privacy policy sets out. It touches nothing on your site until you send it something.

    Download the plugin (.zip)Plugins → Add New → Upload Plugin → Activate
Phase 2 · Copy, in Claude
  1. 03

    Open the Claude page you want

    Claude renders an artifact inside a sandboxed frame in the chat, and wpgraft copies the page the tab is on rather than reaching into frames. Publish or share the artifact and open that link in its own tab. That link is an ordinary web page, and it copies like one.

    Open the artifact as its own page first
  2. 04

    Choose Gutenberg in the extension

    Click the wpgraft icon on the source tab and pick your destination under Copy into. There is one Gutenberg entry, labelled Gutenberg. Switch Also copy tablet & phone on unless you only want the desktop layout: it is off until you turn it on, and it captures three viewports instead of one, so the copy arrives responsive.

  3. 05

    Point at what you want and copy it

    Select element starts a picker: hover to highlight, press ↑ to widen the selection to the parent and ↓ to narrow it again, click to confirm, Esc to cancel. Whole page takes the entire document in one pass and is a Pro capture. wpgraft scrolls the page for you first so lazy images and scroll-triggered effects have fired, then waits for the fonts and images to finish before it reads anything.

    click copies · ↑ widen · ↓ narrow · Esc cancels
Phase 3 · Insert, in Gutenberg
  1. 06

    Open the page in Gutenberg

    Pages → the page → Edit. That is wp-admin/post.php?post=<id>&action=edit; a brand-new page at post-new.php works the same way. The wpgraft panel appears in the bottom-right corner of the editor as soon as it recognises the builder.

    Edit (the normal WordPress editor)
  2. 07

    Send the copy to the site

    The extension does not push copies at sites by itself, because that would mean any approved site could receive a capture made for another one. Click the wpgraft icon again with the editor open: it names the site and the copy and asks you to confirm, or press Send to open builder. The first time for a given site it also asks whether that site may receive copies at all; approve it once and it stays approved (you can take a site off the list later from the same popup).

    Send to open builder
  3. 08

    Insert it

    The panel lists what is waiting for this builder. Decide whether to tick Import images to Media Library. On, and the images become yours; off, and they keep pointing at the original page. Then press Insert into builder. wpgraft parses the converted markup with WordPress’ own block APIs and applies it through the editor’s official store, as one editor change. A section or element copy is appended after the blocks already there; a whole-page copy replaces them.

    Insert into builder
  4. 09

    Save it

    Press Update (or Publish). It is one undoable change, so Ctrl+Z takes it back cleanly if you change your mind, and nothing is real until you save: the copy’s stylesheet and fonts are only promoted onto the page by that save.

Phase 4 · Edit
  1. 10

    Edit it like you built it

    This is where the product earns its keep. Click anything in the copy and Gutenberg’s own panel opens with real values in it. There is no wrapper you may not touch, no “generated, do not edit” block and no code view. Change the heading, swap the image, drag the padding.

The result

What lands in Gutenberg

Core blocks

Group, columns, heading, paragraph, image, buttons, list, quote, table, separator, video and the rest. Every block is valid to WordPress’ own parser, with no "this block contains unexpected content" warnings.

Block supports, not a CSS dump

Colour, typography, spacing, border and layout are written as the block support attributes the editor sidebar reads, so the sidebar shows the real values.

Images in your Media Library

Tick Import images to Media Library and the images are sideloaded and re-pointed at your own copies before the blocks are inserted.

After the insert: Press Update (or Publish). It is one undoable change, so Ctrl+Z takes it back cleanly if you change your mind, and nothing is real until you save: the copy’s stylesheet and fonts are only promoted onto the page by that save.

The source side

Copying out of Claude

Claude renders an artifact inside a sandboxed frame in the chat, and wpgraft copies the page the tab is on rather than reaching into frames. Publish or share the artifact and open that link in its own tab. That link is an ordinary web page, and it copies like one.

  • The frame is the whole trick. Clicking the wpgraft icon while looking at an artifact inside the chat copies the chat, not the artifact. Get the artifact onto its own URL first and everything else is normal.
  • Failing a share link, ask Claude for the full HTML, save it as a .html file and open it in Chrome. Then switch Allow access to file URLs on for wpgraft at chrome://extensions, which Chrome requires before any extension can read a local file.
  • An AI-generated page is usually one self-contained document with a <style> block, which is about the cleanest thing you can hand a converter.
  • Ask for the design you want in plain HTML and CSS rather than in a framework. A page that needs a build step to render is a page your browser cannot render for wpgraft to read.
Honest limits

What does not carry over

A guide that only lists what works will waste your afternoon. These are the things that surprise people, set out before you start rather than discovered afterwards.

  • What is on screen is what is copied. A closed accordion is copied closed; an inactive tab is copied inactive; a carousel is copied on whichever slide was showing. Put the page into the state you want before you pick.
  • Behaviour does not travel; appearance does. A slider arrives as its markup and its styling, not as a working slider; a form arrives as a form that has had its submit target deliberately removed, so your copy can never post to Claude’s endpoint. Wire interactive things up with Gutenberg’s own tools.
  • Anything driven by a query arrives as a design. A post grid copies as the posts that were on the page at that moment, not as a loop that keeps querying.
  • Raw HTML in a copy needs the unfiltered_html capability, which normally means an administrator. Without it, the parts of the copy that would output markup verbatim are removed before the insert, or, where WordPress sanitizes them on save instead, left to it, and the panel tells you how many. Everything else in the copy still lands. Insert as an administrator if you want all of it.
  • Links that pointed at code are disabled. A javascript: link in the source page is neutralised on the way in, for every account including an administrator’s, and you are told how many. It is the one thing wpgraft will not carry across for you.
  • Only the page in the tab is copied; never what is inside a frame. An <iframe> is kept as the embed it is: a YouTube or Vimeo frame becomes a video element, a Google Maps frame becomes a map. wpgraft does not descend into it, same origin or not, which is also why a builder’s own editor canvas and an AI chat’s artifact preview have to be opened on their own URL before you can copy them.
  • A whole-page copy replaces the page’s blocks, and sets the page template to "wpgraft Blank". That template renders the content with no theme header or footer, which is right, because a captured page brought its own. A section or element copy appends and leaves the template alone. Copy whole pages onto new or empty pages; if you land one on the wrong page, the previous content is in the page’s WordPress revisions.
  • Absolute positioning, z-index and transform have no native block support in WordPress, only position: sticky, and only on a Group block whose theme supports it. Where a captured design needs the others, they are written into the block’s own custom-CSS field rather than a sidebar control: still editable, still yours, but not a slider.
  • Anything that cannot be a block support or a per-block rule, media queries, keyframes, hover states, lands in a stylesheet wpgraft stores on the page and prints for it. That is what carries the responsive layout, because core blocks have no per-breakpoint controls to write it into.
  • Writing CSS at all, the per-block field and that page stylesheet, needs the edit_css capability (WordPress maps it to edit_theme_options, so an administrator has it and an editor normally does not) or unfiltered_html. Without either, wpgraft drops the stylesheet and tells you it did, and the copy renders with your theme’s styling instead. Insert as an administrator.
Questions

Claude to Gutenberg: FAQ

Why does copying from the Claude chat window give me the chat instead of the design?

Because that is what the tab is showing. The artifact renders inside a sandboxed frame from a different origin, and wpgraft captures the top-level page, deliberately, since reaching into other origins’ frames is exactly what a well-behaved extension should not do. Open the artifact on its own URL and copy that.

Do I need a block plugin like Kadence, GenerateBlocks or Spectra?

No. wpgraft writes core WordPress blocks only. That is deliberate: a copy that depends on a block plugin stops rendering the day that plugin is deactivated, and it cannot be moved to a site that does not run it.

Will the blocks show "this block contains unexpected content"?

They should not. The markup is produced with WordPress’ own block serializer rather than hand-written, so it is valid to the same parser the editor validates against.

Why did my page’s header and footer disappear after a whole-page copy?

A whole-page copy sets the page to wpgraft’s Blank template, which renders the content without the theme’s header and footer, because the page you copied already contains its own. If you would rather keep the theme’s chrome, switch the template back in the page sidebar (Page → Template) and delete the copied header and footer blocks.

Does moving from Claude to Gutenberg change anything on the Claude side?

No. wpgraft reads the generated page and writes to Gutenberg. Nothing is sent back to Claude and nothing there is altered.

Will the Gutenberg copy still need Claude installed?

No. What lands in Gutenberg is Gutenberg’s own elements with the styles in Gutenberg’s own fields. There is no shortcode, no embed, no wrapper block and no stylesheet borrowed from Claude. The copy is fully yours and stands on its own.

Is the result editable, or is it a locked block?

Editable. Click anything in it and Gutenberg’s own settings panel opens with real values in it. That is the whole product, and it is measured on every release: an inserted copy has to be selectable through Gutenberg’s own API and the editor has to reopen cleanly on the saved page, or the build does not ship.

Does it copy the mobile and tablet layouts too?

Yes, once you switch Also copy tablet & phone on. It is off by default, and with it off you get the desktop layout only, slightly faster. With it on, wpgraft measures the page three times: at your window’s own width, then at 768px, then at 375px. Core WordPress blocks have no per-breakpoint controls to write those values into, so the narrow layouts arrive as media queries in the stylesheet wpgraft stores on the page. The page reflows; what you will not find is a “tablet” tab in the sidebar, because WordPress does not have one. One honest caveat about the measurement: the Web Store build produces the narrow viewports inside the page rather than by resizing the window. It re-evaluates every media query at the target width, pins the layout width, resolves vw units and clamps position: fixed boxes to it, and the result is measured at 100% of the property values a real 768px and 375px window produces on getbootstrap.com and on a stock WordPress theme. What it cannot do is re-run the source site’s own JavaScript for the new width, so a layout a script computes on resize is copied as the desktop script left it, and the capture says so in a warning.

What does this cost?

The free tier is three copies in total, usable on any destination, at full fidelity, with nothing watermarked or downgraded, within seven days of signing up. Whole-page copies are a Pro capture; sections and elements are not. Pro removes the copy limit and opens up whole-page captures.

Do I need the wpgraft plugin on the Gutenberg site?

Yes. It is the WordPress half of wpgraft, and it is free software with no licence key, no counter and no upgrade nag in it. It receives the copy, shows it in a panel inside the Gutenberg editor and imports the images. It does nothing on its own until you send it something.

Is copying a page from Claude legal?

A page you generated yourself is yours to use, subject to the terms of the tool that generated it. Fonts, images and icons that the page pulled in from somewhere else carry their own licences and those follow them into the copy.

Read more

Try a single section first.

Three copies free, every destination unlocked, full fidelity. Point at one Claude section, put it in Gutenberg, then judge the result before you decide anything.