Gutenberg

Convert a page builder export into native Gutenberg blocks

A scenario prompt that untangles Elementor-style div soup, with its plugin-specific classes and inline widths, into clean nested Group and Columns block markup that survives the plugin's removal.

Works with Claude / GPT620 uses 4.2

The prompt

gutenberg-elementor-divi-to-native-blocks
We're dropping Elementor and need to rebuild a page that currently exists only
as its exported HTML. Here's the raw markup pulled from the page:

[paste the raw exported HTML here, including nested divs with classes like
elementor-section, elementor-row, elementor-column, elementor-widget-wrap,
inline style="width: 33.33%;" on columns, and a section with a CSS
background-image set inline for what looks like a hero]

Convert this into native block markup. This export style is dense and
repetitive, so work through it methodically:

1. Collapse the nested `elementor-section` > `elementor-row` > `elementor-column`
   > `elementor-widget-wrap` chain down to its actual structural equivalent:
   usually section becomes a `wp:group`, row plus column becomes `wp:columns`
   with `wp:column` children, and widget-wrap is just a wrapper to discard, not a
   block of its own. Nesting every level literally as a separate Group produces
   four levels of wrapper for content that only needs two.
2. Strip every `elementor-*` class name once conversion is done, these classes
   have no meaning or matching CSS once the plugin is deactivated, and leaving
   them in the block markup is dead weight that can also visually break things if
   another plugin happens to reuse a similarly-named class.
3. Convert inline `width: 33.33%;` style attributes on columns into the block
   editor's column width setting (expressed as the block's width attribute), not
   left as inline CSS, so widths stay editable in the block inspector instead of
   locked in raw style attributes.
4. Find any section with a CSS `background-image` set inline for what's visually
   a hero or banner, and rebuild that specific section as a `wp:cover` block with
   the image as its actual media, rather than a Group with a leftover inline
   background-image style, since a Cover block's overlay and focal point controls
   don't exist on a plain styled Group.
5. Watch for unbalanced or orphaned closing `</div>` tags, a common artifact of
   page-builder exports when the original export tool interleaved widget markup
   unusually, an unbalanced div structure carried into block comments produces a
   block validation error the first time the page is opened in the editor.
6. Output the fully converted, cleaned block markup with all elementor-specific
   classes and inline styles removed.

Step 1 is where most of the actual work is: page builders tend to wrap even a single paragraph in three or four nested divs, and replicating that nesting literally as blocks just moves the page-builder bloat into block markup instead of removing it, which defeats the point of migrating off the plugin.