HTML to GenerateBlocks
Paste any HTML and get clean GenerateBlocks V2 output ready for the WordPress editor. Styles, attributes, and structure preserved.
GenerateBlocks Output
Quick Start
- Paste your HTML in the HTML tab; optional stylesheet CSS (without
<style>tags) goes in the CSS tab and is merged with any<style>blocks in your markup - Click the arrow button (or press Cmd/Ctrl+Enter) to convert
- Copy the output, or Download it as a file for big conversions; the expand button gives either panel the full screen
- In WordPress Block Editor, switch to Code Editor (menu → Code Editor)
- Paste and switch back to Visual Editor
What Converts to What
| HTML | Output Block | Notes |
|---|---|---|
<div>, <section>, <header>, <footer>, <nav>, <article>, <aside>, <main> | generateblocks/element | Containers; tagName preserved |
<h1>–<h6>, <p>, <span>, <button> | generateblocks/text | Inline links and bold stay inside the rich text |
<a> (standalone) | element wrapping a text span | The only link pattern whose href survives saving |
<img> | generateblocks/media | <figure> + <figcaption> becomes a core Image instead |
<svg> | generateblocks/shape | Attributes reordered for round-trip stability |
<ul>, <ol> | core/list | Semantic List blocks with nesting preserved; list styling isn't carried over (use Additional CSS) |
<table>, <blockquote>, <pre>, <hr> | core/table, core/quote, core/code, core/separator | Native core blocks with built-in editing; GB elements don't accept these tags |
<video>, <audio>, YouTube/Vimeo <iframe> | core/video, core/audio, core/embed | Native players and responsive oEmbed blocks |
<form> and other <iframe>s | core/html | Markup preserved exactly in a Custom HTML block; unsupported container tags (like <address>) become <div> element blocks |
Why the Output Looks the Way It Does
- Recovery-safe serialization. The block editor validates pasted markup by re-serializing it and comparing strings. The converter applies the exact escapes WordPress uses inside block JSON (
--→\u002d\u002d,<→\u003c,>→\u003e,&→\u0026,"→\u0022) and the canonical attribute order per block. - htmlAttributes is a plain object, never an array. Arrays cause instant “Attempt Recovery” errors.
- Hover styles live in the
stylesobject (&:hover), never in thecssstring; the plugin generates that CSS itself. Pseudo-elements and media queries go incss. - CSS is minified and alphabetized, with no spaces inside function arguments, matching the editor’s own output.
- Original class names are dropped by default (styling moves into block attributes). Enable “Keep original classes” if your theme styles those classes.
- Use absolute URLs. The editor rewrites relative links on save, which breaks validation. The converter warns about every relative URL it finds.
Not Supported
- WP Query loops. Build post grids with the Query Loop block in the editor, then style them with GenerateBlocks.
- JavaScript.
<script>tags are removed with a note; use a snippets plugin instead. - @keyframes and @font-face. Flagged in conversion notes; add them via Additional CSS or your theme.
HTML to GenerateBlocks V2 Converter · Works with GenerateBlocks
The HTML to GenerateBlocks converter turns ordinary HTML and CSS into block markup you can paste directly into the WordPress Code Editor. It targets GenerateBlocks 2.x, maps structural elements to the newer Element, Text, Media, and Shape blocks, and can also create legacy V1 markup when an older site still needs it.
The conversion runs in your browser, so you don’t need an account and your pasted code isn’t sent to a conversion API. You should still review the output before publishing. Dynamic queries, JavaScript behavior, global CSS, and complex form logic can’t be reconstructed safely from static HTML alone.
What does the HTML to GenerateBlocks converter do?
The converter parses your HTML into a document tree, reads inline and embedded CSS, and serializes the result as valid WordPress block comments plus HTML. GenerateBlocks 2.x structural tags become Element blocks, text becomes Text blocks, images become Media blocks, and inline SVG becomes Shape blocks.
This is different from dropping code into a Custom HTML block. The converted layout becomes a set of editable blocks that WordPress and GenerateBlocks can recognize. You can select a heading, container, link, or image in the editor and continue working with it instead of maintaining one large HTML blob.
| HTML input | Generated block | What to check afterward |
|---|---|---|
div, section, nav, article | GenerateBlocks Element | Responsive spacing and any complex selectors |
| Headings, paragraphs, spans, links, buttons | GenerateBlocks Text | Relative URLs, hover states, and typography |
| Images and inline SVG | GenerateBlocks Media or Shape | Media Library URL, alt text, and dimensions |
| Lists, tables, quotes, code, audio, video | WordPress core blocks | Styles that core blocks can’t store as attributes |
| Forms and unsupported iframes | Custom HTML block | Validation, scripts, embeds, and accessibility |
| Scripts and inline event handlers | Removed | Add behavior through a plugin or theme, not post content |
Why does GenerateBlocks V2 output matter?
GenerateBlocks 2.0 replaced the old Container and Grid blocks with Element, Headline and Button with Text, and Image with Media. The current GenerateBlocks 2.3.0 release still uses that V2 architecture. Choosing V2 output gives a new site the current block structure, while the V1 option helps when you’re adding a section to a site that still uses legacy blocks. If you’re starting a new build, get GenerateBlocks or GenerateBlocks Pro here.
I wouldn’t mix formats without a reason. Use V2 for new layouts. Use V1 only when consistency with an existing V1 page matters more than adopting the newer editor controls. If you’re deciding whether the plugin fits your workflow, my GenerateBlocks review after six years of use explains the tradeoffs in more detail.
How do you use the output in WordPress?
Paste the generated markup into the WordPress Code Editor, not into a Paragraph or Custom HTML block. WordPress reads the <!-- wp:... --> comments, rebuilds the block tree, and then lets you switch back to the Visual Editor to inspect and edit each block.
- Install and activate GenerateBlocks before pasting V1 or V2 markup.
- Paste one self-contained section into the converter. Smaller sections are easier to verify than an entire page.
- Add separate CSS when the design depends on a stylesheet instead of inline styles.
- Choose V2 for a current GenerateBlocks build or V1 for a legacy layout.
- Copy the output, open the target page, and select Options > Code Editor.
- Paste the markup, switch back to the Visual Editor, and check the List View for the expected block hierarchy.
- Replace remote image URLs with Media Library assets, then test desktop, tablet, and mobile breakpoints.
If you want a cleaner editor workflow around custom blocks, see my WordPress Block Editor setup. The converter solves the markup step, while your theme, block styles, and reusable patterns still control how maintainable the finished page will be.
If you use ChatGPT, Claude, Cursor, Windsurf, or Copilot to create layouts, copy my free GenerateBlocks Skills for AI tools too. The MIT-licensed pack includes 38 section templates and teaches an AI assistant the actual GenerateBlocks V2 block shapes, attributes, and utility classes instead of letting it invent markup that breaks in the editor.
What HTML and CSS does it preserve?
The converter preserves semantic tag names, classes when requested, safe HTML attributes, inline styles, embedded <style> rules, CSS custom properties, hover rules, and media queries where GenerateBlocks can express them. CSS properties are normalized into block attributes and a generated CSS string.
- Links: Absolute URLs are safest. Relative URLs are kept, but WordPress recovery can be less predictable after copying between sites.
- Images: The source and alt attributes are carried over. Upload final images to the WordPress Media Library instead of leaving temporary or third-party URLs in the layout.
- Responsive CSS: Standard media queries can be mapped. Responsive hover or pseudo-element rules may need manual CSS.
- Global CSS: Rules targeting
body,html, or unrelated selectors are skipped because page content shouldn’t rewrite the entire site. - Animations and fonts:
@keyframesand@font-facerules are dropped. Load them through your theme, a snippets plugin, or the site’s font system.
HTML to GenerateBlocks vs. HTML to Gutenberg
An HTML to Gutenberg converter usually creates WordPress core blocks or scaffolds a custom block plugin. This tool has a narrower job: it converts a static layout into GenerateBlocks markup you can paste into an existing page. It doesn’t generate block.json, React editor code, PHP render files, or a standalone plugin.
That narrower scope is useful when you already build with GenerateBlocks and want an editable starting point from an HTML section. If you’d rather compare broader block libraries first, my guide to the best Gutenberg block plugins for WordPress covers GenerateBlocks, Kadence Blocks, Spectra, Stackable, and other options.
When should you not use the converter?
Don’t use the HTML to GenerateBlocks converter as a substitute for rebuilding application logic. Static HTML doesn’t contain the server queries, JavaScript state, validation rules, or plugin data that made the original component work. The tool can preserve structure, but it can’t infer behavior that isn’t present in the markup.
- Query loops: Build GenerateBlocks Query and Looper blocks inside the editor. Imported WordPress Query Loop markup is intentionally not converted.
- Forms: The HTML can be preserved in a Custom HTML block, but submissions, spam protection, and validation still need a form plugin or custom code.
- JavaScript components: Script tags and inline event handlers are removed. Rebuild menus, tabs, sliders, and modals through an appropriate block or plugin.
- Whole-site imports: Convert one section at a time. Headers, footers, templates, and global styles belong in the Site Editor or theme.
Bottom line: use the converter to save the mechanical work of translating a static HTML section into editable WordPress blocks. Treat the output as a strong first draft, then check media, responsive behavior, accessibility, and any interactive features before publishing.
HTML to GenerateBlocks FAQs
Is the HTML to GenerateBlocks converter free?
Yes. The converter is free to use, requires no account, and runs in your browser. Paste HTML and optional CSS, choose GenerateBlocks V2 or V1 output, convert the layout, and copy the generated block markup into WordPress.
Does the converter send my HTML to a server?
No. The conversion logic runs in your browser and does not need a conversion API. That makes the tool suitable for working with draft layouts. You should still avoid pasting passwords, private keys, customer data, or other secrets into any browser page.
Does it support GenerateBlocks 2.x?
Yes. V2 output uses the GenerateBlocks Element, Text, Media, and Shape block structure introduced in GenerateBlocks 2.0. A V1 option is also available for older sites that still use Container, Grid, Headline, Button, and Image blocks.
How do I paste the output into WordPress?
Open the target post or page, choose Options, switch to the Code Editor, and paste the generated markup. Switch back to the Visual Editor and inspect the block hierarchy in List View. Install and activate GenerateBlocks before pasting GenerateBlocks markup.
Does the converter preserve CSS styles?
The converter preserves inline styles and many embedded stylesheet rules, including CSS variables, hover states, and media queries. Global selectors, keyframe animations, font-face rules, and complex pseudo-element behavior may be skipped because those styles belong in a theme or site-level stylesheet.
Is GenerateBlocks Pro required?
No. Basic Element, Text, Media, Shape, and core WordPress blocks work with the free GenerateBlocks plugin. A converted layout may still depend on Pro if its final design uses Pro-only global styles, dynamic data, custom breakpoints, or other premium features.
Can it convert forms, iframes, and JavaScript?
Forms and unsupported iframes are preserved as core Custom HTML blocks when possible. Script tags and inline event handlers are removed, and WordPress or GenerateBlocks query loops are not converted. Rebuild interactive behavior with a suitable plugin, block, or theme code.
Why does WordPress ask me to attempt block recovery?
Block recovery usually means the saved HTML no longer matches the attributes inside a block comment. Convert smaller sections, use absolute image and link URLs, paste through the Code Editor, and avoid editing generated block comments manually. Then check the affected block in List View.