Lovable to Gutenberg: Which Blocks You Get

What Gutenberg can and cannot represent

Gutenberg is a block editor. Every piece of a page is a block with attributes, stored as HTML comments in the post or template. Core blocks cover structure (Group, Columns, Row, Stack), content (Heading, Paragraph, Image, List, Quote, Buttons), site parts (Site Logo, Navigation, Query Loop) and a few interactive ones (Details, which powers accordions).

Lovable builds React + TypeScript with Tailwind CSS and shadcn/ui. A lot of that maps cleanly, because most marketing pages are nested boxes with text and images. What does not map is behaviour: React state, event handlers, data fetched at runtime, and anything drawn with canvas or JavaScript.

So the honest split is this. Layout and content convert. Design tokens convert, because theme.json is built for exactly that. Behaviour either becomes a static snapshot or has to be rebuilt with a plugin or custom block.

The block mapping, section by section

Here is how a typical Lovable page translates into core blocks. The names are the ones you will see in the List View in the editor.

If you want the full inventory, including the edge cases, see Supported features.

Section wrapper — a <section> or padded <div> becomes a Group block with its own padding, background color and alignment.
Grid or flex row — grid-cols-3 or flex becomes a Columns block with three Column children. WordPress stacks them on mobile.
Card — becomes a Group with a background, border radius, an Image, a Heading and a Paragraph inside.
Headings and body text — become Heading and Paragraph blocks with a preset font size, not a hardcoded pixel value.
Buttons — become a Buttons block with Button children, including hover colors.
Lists and quotes — become List and Quote blocks.
Images — become Image blocks with the aspect ratio kept, and the files copied into the theme folder.
Header logo and menu — become Site Logo and Navigation inside a header template part.
Accordions (shadcn/ui) — become Details blocks, which open and close natively.
A blog-like data array — becomes real posts with categories and a Query Loop block on the listing page.

Approximations and gaps you will see in the editor

Some components have no block that behaves the same way. They still appear, but as a still frame of one state.

Carousels arrive as the visible slides, not as a slider. Tabs, modals and dropdowns arrive in their default state only. Animations arrive in their final state, which is usually what you wanted on screen anyway. Fixed-height cropped boxes and decorative div mockups are approximated with the closest block and sizing.

Responsive design is approximated too. Desktop values are used, and WordPress applies its own stacking on narrow screens. Check your breakpoints after install rather than assuming they carried over.

Left out entirely: absolutely positioned decorations, iframes, canvas, Lottie, video or audio without a static src, third-party widgets, Supabase, authentication, dashboards and any API call. Screens behind a login are reported, not converted. Those need a plugin or a developer. Converter vs manual rebuild vs headless walks through when each route makes sense.

Where the design tokens go

Gutenberg does not want a thousand inline styles. It wants a palette and a type scale in theme.json, so the editor can offer them as presets.

Tailwind colors become palette entries. The Tailwind type scale becomes font size presets. Google Fonts are registered as font families. Spacing becomes spacing presets where it maps.

The payoff is in the editor sidebar. Select a Heading, open Typography, and you pick from your own scale instead of typing numbers. Change a palette value once in the Site Editor and every block using that color updates.

Getting from Lovable to a block theme

You need the code first. GitHub sync works on every Lovable plan; "Download codebase" as a ZIP needs a paid plan. See how to export Lovable code for both routes.

Doing the mapping by hand means writing block markup into template and pattern HTML files, filling theme.json, and moving images. It is normal WordPress theme work and it takes as long as a rebuild. Our Lovable to WordPress converter does the same mapping automatically: it reads the ZIP or the repo and outputs a block theme with templates, header and footer template parts, one pattern per page, theme.json and the images.

The review screen shows the converted site next to the original inside WordPress Playground, in the browser, so you compare before you download. Conversion, review and the theme download are free, and every account includes two free AI-fix attempts.

Export the project from Lovable as a ZIP, or connect the GitHub repository.
Run the conversion at iqdesk.com/app and wait for the theme to build.
Review side by side in the Playground preview and note sections that need work.
Download the theme and install it under Appearance → Themes → Add New → Upload Theme → Activate. Pages are created on activation and the front page is set.
Open the Site Editor at Appearance → Editor to check templates and template parts.

Editing the blocks after install

Two places matter. Pages are edited under Pages, because each converted page is a pattern inserted into a page. Templates, the header and the footer are edited under Appearance → Editor.

Open List View in the editor to see the block tree. It is the fastest way to find the Group that wraps a section, or the Column that holds a card. Select the parent Group to change padding and background; select a child to change text.

A few habits save time. Use the palette and font size presets rather than custom values, so the design stays consistent. Edit the header once in the template part and it updates everywhere. If a section was approximated, it is often easier to delete the block and rebuild it with a core block than to patch the markup.

For anything specific to blocks and the Site Editor, the WordPress developer documentation is the reference. For questions about Lovable itself, check Lovable's documentation.

Change a color everywhere — Appearance → Editor → Styles → Colors.
Change the menu — edit the Navigation block inside the header template part.
Change a page slug — edit it per page; the structure lives under Settings → Permalinks.
Keep staging private — tick Discourage search engines from indexing this site under Settings → Reading, then untick it at launch.

Meta, forms and shops

Per-page titles and descriptions from TanStack Start head() functions are written to Yoast, Rank Math or SEOPress, whichever you have installed. JSON-LD carries over. So do redirects from public/_redirects, the page language and hreflang.

Older React + Vite apps are different. Their per-page meta and Open Graph tags are not converted, because the tags are set in the browser rather than in the route files. Plan to re-enter titles and descriptions in your SEO plugin. Is Lovable good for SEO? explains why those two app types behave differently.

Contact forms become Contact Form 7 forms. Product listings, product pages and the cart link become WooCommerce blocks. Install those plugins before you judge the result, or the blocks will look empty.

FAQ

What Gutenberg blocks does a Lovable layout become?

Sections become Group blocks, grids and flex rows become Columns, and cards become Groups holding an Image, Heading and Paragraph. Text becomes Heading, Paragraph, List and Quote blocks, buttons become a Buttons block, and the header uses Site Logo and Navigation. Accordions become Details blocks, and a blog-like data array becomes real posts shown with a Query Loop.

Do Tailwind styles survive the move to Gutenberg?

The design tokens do. Tailwind colors become palette entries in theme.json, the Tailwind type scale becomes font size presets, and Google Fonts are registered as font families. You then pick those presets in the editor sidebar instead of typing pixel values.

Can I still edit the pages in the WordPress editor afterwards?

Yes. Each converted page is a pattern inserted into a normal WordPress page, so you edit it under Pages like any other content. Templates, the header and the footer are edited in the Site Editor under Appearance then Editor. Use List View to find the Group or Column that wraps the section you want to change.

What will not convert into blocks?

Anything driven by JavaScript at runtime. React state and event handlers, API calls, Supabase, authentication, dashboards, iframes, canvas, Lottie and third-party widgets have no block equivalent. Carousels, tabs, modals and dropdowns arrive as a single static state, and screens behind a login are reported rather than converted.

Is the IQDesk converter free to try?

Conversion, review and the theme download are free, and every account includes two free AI-fix attempts. Paid plans add AI credits and saved projects: Starter is 20 dollars for 666 credits and one saved project, Studio is 60 dollars for 2000 credits and five saved projects.

Convert a Lovable site to WordPress All guides