Editor Deletes Empty Spans

[GeJay]

Based on ticket #22477, it sounded like this was fixed but apparently not. My spans have a class and when empty (used for font based icons), they are being stripped out when going from text to visual mode with the editor. I'm using WordPress 3.8.1. So it appears this was not fixed. An example span icon container:

<span class="icon-user"></span>

[TobiasBg]

Sorry to hear that you experiencing such problems and thanks for reporting this.

I can confirm this in trunk. After pasting that empty <span> in the Text editor and then switching to the Visual editor and back, the <span> is gone.

[GeJay]

Thanks... in the mean time, is there something I could pop into the functions.php to have it not delete the span? I'm about to release a new theme, but I've been looking for a solution.

[TobiasBg]

Probably not. This is most likely an issue in the JS code of the Visual editor (TinyMCE).
For now, you'll probably have to tell users to not switch from the Text to the Visual editor after inserting this.

[bcworkz]

A possible workaround is insert the HTML entity for soft-hyphen ­ in the otherwise empty span. It gets converted the to UTF-8 character if that is your charset, which takes up no space, so it's like it is not there, but it keeps the span from disappearing because it is not actually empty.

It could still foul up the icon placement, I didn't test that far. Worth a try anyway?

[TobiasBg]

Commit [27083] fixed an issue that resulted in the same problem for <i> and <b> tags. Those are now no longer removed when switching to the Visual editor and back.
I just tested this on WordPress 3.8.1, and empty <i> and <b> tags are not removed their either.
Therefore, one way to work around this would be to not use <span> tags, but <i> tags (which by the way is what most CSS libraries use for font icons), like this:

<i class="icon-user"></i>

Related: #23037, #22477

[GeJay]

Forgot about using the <i>, although it would be better with a span, but it's definitely an alternative. I just tried this and it stays in the editor after going to visual and back to text. So for the meantime, the <i> is the solution, albeit a temporary one. Thanks

[azaozz]

Therefore, one way to work around this would be to not use <span> tags, but <i> tags (which by the way is what most CSS libraries use for font icons)

Agreed. In addition it's not a good idea to stop removing empty spans. WebKit and particularly Chrome has the "bad habit" to insert lots of spans with inline styles for no good reason, see #26975. Some of them are empty. Most are caught and cleaned by TinyMCE, but some make it through.

[markcallen]

Where appropriate use a screen reader class to populate the span.

TwentyFourteen has one ready, as does Bootstrap and others. You can just copy the styles to create your own if necessary.

It would then look something like this

<span class="genericon genericon-wordpress"><span class="screen-reader-text">WordPress</span></span>

This wins on all fronts

• Content is kept on save
• It stays in place when changing between Visual/Text views
• Content is not displayed
• Screen readers get something meaningful

[kirasong]

It looks like this isn't something we want to do at this point, due to azaozz's comments above.

If there are further concerns, feel free to comment or re-open.

[SergeyBiryukov]

#28218 was marked as a duplicate.

[SergeyBiryukov]

#28218 was marked as a duplicate.

[SergeyBiryukov]

#28958 was marked as a duplicate.

[thierryouellet]

Replying to bcworkz:

A possible workaround is insert the HTML entity for soft-hyphen ­ in the otherwise empty span. It gets converted the to UTF-8 character if that is your charset, which takes up no space, so it's like it is not there, but it keeps the span from disappearing because it is not actually empty.

It could still foul up the icon placement, I didn't test that far. Worth a try anyway?

Hey bcworkz,

I know this post is old but I just tested your technique and it works perfect! Thanks for the great tip.

[ManellyC]

Thanks for the tip. The &shy; appears to have worked for me. This is how I had to add it in the text editor: <span class="&shy">content</span class="&shy">.
After I updated and went back and forth between Visual and Text Editor, WordPress had changed it to: <span class=" ">content</span>. But the span tags appear to be sticking.