Let’s understand how Gutenberg Editor reconstructed from plain html which is stored in database.

Firstly, whenever we load post in a block editor page. We load a html post content that is saved in a database and that is a only thing that we know about the post content.

This post content then parsed and converted into a Javascript array of objects and each objects in this array represents a block.

Now this Javascript array represents the state of the post editor. It represents, what block should be displayed and their attributes.

This all blocks array lives in memory. It’s not saved to database until you saved the post. If you not save post after some editing then Once you close window this array will cleaned from the memory.

This generated array is then used to construct the editor. It is just loop through the array and foreach object in the array we know the name of the block and it’s attributes.

So, we can just run the edit function for the specific block giving it’s attribute and this will return the component that should be displayed in visual editor.

Block API which has edit function using that we can just reconstruct the visual editor. To get more Idea look at Diagram.