Whenever I switch from the visual editor to the text (HTML) editor and put an HTML comment in the code, e.g. <!-- this is a comment-->, WordPress removes it, either after saving the change or switching back and forth between editing modes.
Is this a quirk of WordPress or TinyMCE and more importantly, how do I stop this so I can keep the comments in the content?
This is due to a very old WordPress HTML Comment bug, that was never fully fixed.
You may use Gutenberg, it handles HTML comments better.
Also, This Post suggests that placing a beginning HTML comment TAG, just before the ending HTML comment tag works. Like this:
<!-- some HTML Comment <!-- -->
This is valid HTML comment, but in my tests, this works sometimes, but shows erratic behaviour other times.
As the bug still exists and marked to be fixed for WordPress 5.0 (set as milestone), I guess you may still find some erratic behaviour.
If the HTML comment is too important for you, then you may use a shortcode to place the comment consistently. For example, use this sample plugin (modify it according to your needs):
<?php
/*
Plugin Name: WPSE HTML Comment Shortcode
Plugin URI: https://wordpress.stackexchange.com/a/312622/110572
Description: WPSE Shortcode check
Version: 1.0.0
Author: Fayaz Ahmed
Author URI: https://www.fayazmiraz.com/
*/
remove_filter( 'the_content', 'wpautop' );
add_filter( 'the_content', 'wpautop' , 99 );
add_filter( 'the_content', 'shortcode_unautop', 100 );
function wpse312622_html_comment( $attr, $content = "" ) {
return $content;
}
add_shortcode( 'comment', 'wpse312622_html_comment' );
Then, use the [comment] shortcode in HTML/TEXT mode like below:
Some Content
[comment]
<!--
This is
<div> comment!</div>
OK -->
[/comment]
Some other content.
In Visual mode, you'll only see:
Some Content
[comment]
[/comment]
Some other content.
But it'll not break over save or mode change.
Looks like it's TinyMCE that's doing this, and it can be fixed by either modifying the valid_elements or extend_valid_elements options. I'm using the Advanced TinyMCE Configuration plugin which makes this very easy. The value for either option above to use is --[*]'
For example: valid_elements: 'strong,em,--[*]'
I can understand the "don't use HTML comments" suggestion above—it's awkward to insert HTML comments in WP, as (in the past, at least) one had to switch to text mode editing—otherwise comments are (correctly so!) invisible. Moreover, once one starts editing a block with HTML comment, WP eliminates the comment, and the user is not aware of this.
Now, I have been using HTML comment in all my blog posts (I use them to store standardized search terms), hence learned to live with the above quirk. Now, however, I realized that at least in WP 5.5 & 5.6, there is a "Custom HTML" block. Here, I can write HTML comments that persists (i.e., is not automatically removed by WP), is visible while in the editor (no switching to text mode editing), and doesn't leave any traces in the displayed Web content at the front-end. For myself, I regard this issue as resolved.
Proper solution is to find a way not to use HTML comments. I know I am whispering against the hurricane wind here, but wordpress is (or should be) a CMS and not a frontpage/dreamweaver clone. Manipulating raw HTML should be left for extreme cases which can not be resolved in any other way. Lets not even start the dead end conversation about gutenberg's use of comments, which means that some uncareful coding on your side or bug on GB side might introduce a block where it should not be.
(and wordpress even before GB, used comment as significant markers for legacy reasons)
Just don't do it.
