HTML to GenerateBlocks Converter V2

Quick Start

1. Paste your HTML code in the Input HTML panel
2. Click Convert to GenerateBlocks
3. Copy the output
4. In WordPress Block Editor, switch to Code Editor (⋮ menu → Code Editor)
5. 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
<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 className attribute
• Inline styles become styles object + css string
• The gb-element-{uniqueId} class is only added when there are styles
• Images use generateblocks/media with htmlAttributes for src/alt