Create a simple Divi to Gutenberg converter

[bobbingwide]

Create a simple Divi to Gutenberg converter

[bobbingwide]

Sample AJAX request

https://s.b/wp55/frost/wp-admin/admin-ajax.php?action=divi2gb&id=nnnn

Generated output ( view source )

Processing post IDnnnn

<h3>Heading</h3><p><strong>some strong words</strong></p>
<p>Rhubarb rhubarb</p>
...
<p>Contact us today to book your initial consultation</p>
<a href="[/contact-us/](https://s.b/contact-us/)">Book Now</a>
0

[bobbingwide]

The first version didn't cater for

• et_pb_image
• et_pb_contact_form and nested shortcodes et_pb_contact_field
• extracting the image for the et_pb_slide

[bobbingwide]

A Google search for previous work on this produced Jamie Marsland's blog post, video and cheat sheet

• https://www.pootlepress.com/2021/03/how-to-change-from-divi-to-the-block-editor/
• https://www.youtube.com/watch?v=PAV5vrVv9Is
• https://www.pootlepress.com/wp-content/uploads/2021/03/divi-to-gutenberg-cheat-sheet.pdf

Jamie uses a number of block plugins to implement the equivalent functionality of the Divi modules.
In my prototype version I've either used an oik block or implemented the solution using patterns from the Frost theme.

[bobbingwide]

The process for running the converter is:

1. Clone the original sites contents
2. Deactivate Divi
3. Activate a block based theme ( eg Frost )
4. For each page that needs converting
5. Run the AJAX request to generate the HTML to copy
6. View source
7. Copy the HTML
8. Edit the page
9. Paste the HTML as plain text before the original content
10. Comment out the original content using an HTML comment. Eventually it should be deleted but there may be shortcodes that were missed first time.
11. Edit using the block editor to make it similar to the original page