V2 Converter

HTML to GenerateBlocks

Paste any HTML and get clean GenerateBlocks V2 output ready for the WordPress editor. Styles, attributes, and structure preserved.

HTML to GenerateBlocks Converter
HTML: 0 lines

GenerateBlocks Output

Output GenerateBlocks 2.x
0 Blocks
0 Elements
0 Text
0 Media
0 Shape
0 Core
WP Query loops are not supported. This tool converts static HTML only. Post grids, related-post lists, and anything fed by WordPress data should be built as a Query Loop inside the editor, then styled with GenerateBlocks. Pasting query markup here will not work.

Quick Start

  1. 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
  2. Click the arrow button (or press Cmd/Ctrl+Enter) to convert
  3. Copy the output, or Download it as a file for big conversions; the expand button gives either panel the full screen
  4. In WordPress Block Editor, switch to Code Editor (menu → Code Editor)
  5. 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>, <table>, <blockquote>, <dl> and any other container tag generateblocks/element GenerateBlocks elements accept any tag, so lists and tables stay fully editable GB blocks; <li> and table cells become text blocks (or element + text for mixed content)
<form>, <pre>, <hr>, <video>, <audio>, <iframe> and unknown tags core/html Markup preserved exactly in a Custom HTML block

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 styles object (&:hover), never in the css string; the plugin generates that CSS itself. Pseudo-elements and media queries go in css.
  • 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

FAQs

What is the HTML to GenerateBlocks Converter?

The HTML to GenerateBlocks Converter is a tool that transforms standard HTML code into GenerateBlocks-compatible block markup for WordPress. It allows you to easily migrate existing HTML designs into the GenerateBlocks ecosystem without manual recreation.

What is GenerateBlocks?

GenerateBlocks is a lightweight WordPress plugin that provides a collection of blocks for the WordPress block editor (Gutenberg). It offers:

  • Container blocks for layout control
  • Grid blocks for responsive layouts
  • Headline blocks with advanced typography
  • Button blocks with customization options
  • Image blocks with advanced features

It allows you to build professional websites without bloated code.

How do I use the converter?

Simply paste your HTML code into the input area, click the 'Convert' button, and the tool will generate GenerateBlocks-compatible markup. You can then copy the output and paste it into your WordPress editor.

What HTML elements are supported?

The converter supports most common HTML elements including:

  • Structural elements: divs, sections, articles, headers, footers
  • Text elements: headings (h1-h6), paragraphs, spans
  • Media: images, figures, figcaptions
  • Interactive: links, buttons
  • Lists: ordered and unordered lists

Complex layouts with flexbox and grid are also handled through GenerateBlocks Container and Grid blocks.

Does the converter preserve CSS styles?

Yes, the converter attempts to preserve inline styles and translates them into GenerateBlocks styling options where possible. Complex CSS may require manual adjustment after conversion.

Is GenerateBlocks Pro required?

The basic converter works with the free version of GenerateBlocks. However, some advanced features and styling options may require GenerateBlocks Pro for full functionality.

Can I convert entire web pages?

Yes, you can convert entire page sections or full page layouts. For best results, convert smaller sections at a time and assemble them in WordPress. This allows for easier editing and customization.

What if the conversion doesn't look right?

Some complex HTML structures may need manual adjustment after conversion. Use the WordPress block editor to fine-tune spacing, colors, and typography. The converter provides a solid starting point that you can customize further.