HTML to GenerateBlocks Converter V2
Convert any HTML to GenerateBlocks V2 format with styles and attributes
Input HTML
GenerateBlocks Output
How to Use This Tool
Quick Start
- Paste your HTML code in the Input HTML panel
- Click the arrow button to convert
- Copy the output
- In WordPress Block Editor, switch to Code Editor (⋮ menu → Code Editor)
- Paste and switch back to Visual Editor
GenerateBlocks V2 Block Mapping
| HTML Element | GB V2 Block | Notes |
|---|---|---|
<div>, <section>, <header>, <footer>, <nav>, <article>, <aside>, <main> |
generateblocks/element |
Container with tagName preserved |
<h1> - <h6>, <p>, <span> |
generateblocks/text |
Text with tagName |
<a> |
generateblocks/text |
Link with tagName="a" and htmlAttributes.href |
<img> |
generateblocks/media |
Image with htmlAttributes.src/alt |
<svg> |
generateblocks/shape |
SVG wrapped in span with full SVG markup preserved |
<button> |
generateblocks/text |
Button styled text with tagName="button" |
V2 Attribute Structure
- styles: Object with CSS properties (camelCase)
- css: Generated CSS string for the block
- className: Custom CSS classes (space-separated string)
- globalClasses: Array for GenerateBlocks global classes (predefined)
- htmlAttributes: Object for href, src, alt, data-* etc.
- tagName: The HTML element type
Example V2 Output
<!-- wp:generateblocks/element {"uniqueId":"abc123","tagName":"div","styles":{"padding":"20px","backgroundColor":"#f5f5f5"},"css":".gb-element-abc123{padding:20px;background-color:#f5f5f5}","className":"my-class"} -->
<div class="my-class gb-element-abc123">
<!-- wp:generateblocks/text {"uniqueId":"def456","tagName":"h1"} -->
<h1 class="gb-text">Hello World</h1>
<!-- /wp:generateblocks/text -->
</div>
<!-- /wp:generateblocks/element -->Tips
- Classes from HTML are converted to
classNameattribute - Inline styles become
stylesobject +cssstring - The
gb-element-{uniqueId}class is only added when there are styles - Images use
generateblocks/mediawith htmlAttributes for src/alt
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.