The use of comments alongside the HTML was the result of a very long (and honestly very public) discussion, ultimately, it boils down to those reasons:
- Comments exist to define a block boundary.
- JSON inside a comment exists to load up user preferences for things that can't be easily parsed from the HTML.
- HTML has to be the final result and representations, and it has to be the source of truth.
- The outcome has to be portable to any other platform or system, you can't move the website tomorrow and get a bunch `[xyz_shortcode]`.
I encourage you to read this post by one of the senior engineers who worked on the project since its inception:
- Comments exist to define a block boundary.
- JSON inside a comment exists to load up user preferences for things that can't be easily parsed from the HTML.
- HTML has to be the final result and representations, and it has to be the source of truth.
- The outcome has to be portable to any other platform or system, you can't move the website tomorrow and get a bunch `[xyz_shortcode]`.
I encourage you to read this post by one of the senior engineers who worked on the project since its inception:
https://lamda.blog/2018/04/22/the-language-of-gutenberg/
The documentation is in itself very expansive and throughout, you should give it a read:
https://developer.wordpress.org/block-editor/explanations/ar...
Gutenberg in itself is a very versatile tool and isn't locked to WordPress btw, you can build your own editor if you want (all JS, no PHP):
https://wordpress.org/gutenberg-framework/