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

admin管理员组

文章数量:1122832

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.

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.

• css
• html
• visual-editor

Share Improve this question asked Aug 3, 2024 at 17:01 rhavinrhavin 12166 bronze badges 2

• 2 If you want to get rid of then, don't use WordPress. Try another CRM. Those tags that you want to get rid of, are the core of the block system of WordPress as I have already pointed on your other question. – Iogui Commented Aug 3, 2024 at 18:20
• 2 I don't think they're useless comments, I think what you're referring to is how the block editor works. – Tony Djukic Commented Aug 5, 2024 at 2:06

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 2

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.

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.

本文标签： cssWhy does the quotvisual editorquot add useless htmlcomments and how can I get rid of them