Why does the "visual editor" add useless html-comments and how can I get rid of them?

Question

This is a paragraph and a hr-separator in html:

<p>Test</p>
<hr/>

This is what happens when I create it in the visual editor:

<!-- wp:paragraph -->
<p>Test</p>
<!-- /wp:paragraph -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

Yeah, my paragraph started and endend, thanks for clarifying my p-tags. What use have those comments? Can I somehow disable the creation of them? Lets give the paragraph some styling:

<p class="has-text-align-center has-secondary-color">Test</p>

This is what the visual editor does:

<!-- wp:paragraph {"align":"center","style":{"elements":{"link":{"color":
{"text":"var:preset|color|secondary"}}}},"textColor":"secondary"} -->
<p class="has-text-align-center has-secondary-color has-text-color
has-link-color">Test</p>
<!-- /wp:paragraph -->

If I remove this crap, it looks completely the same. So what is the point? Can someone from a technical perspective explain why wordpress is bloating my html with json-data-commentaries instead of just having a clean html/css style binding? Why is the editor storing data in commentaries instead of parsing them from the html it just wrote in the first place, where all this data is already stored in classes?

This sounds like a rant and partly it is, but I really try to understand the technical reasoning behind it.

Answer 1

The block editor is a hideous abortion but it's here to stay. Your only recourse if you don't like the way it operates is to use a plugin that replaces it altogether. Attempting to manually edit the mess it generates will break things. Attempting to manually write HTML outside of an HTML block will break things.

Answer 2

1. Switch to code view and manually delete the comments
2. Use a plugin or extension that removes HTML comments.
3. Check the editor's settings for an option to disable these comments.