WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 6 years ago

Last modified 3 years ago

#26986 closed defect (bug) (wontfix)

Editor Deletes Empty Spans

Reported by: GeJay Owned by:
Milestone: Priority: normal
Severity: normal Version: 3.8
Component: TinyMCE Keywords:
Focuses: Cc:
PR Number:

Description (last modified by ocean90)

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>

Change History (16)

#1 @ocean90
6 years ago

  • Description modified (diff)

#2 @TobiasBg
6 years ago

  • Milestone changed from Awaiting Review to 3.9

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.

#3 @TobiasBg
6 years ago

  • Component changed from Editor to TinyMCE

#4 @GeJay
6 years ago

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.

#5 @TobiasBg
6 years ago

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.

#6 follow-up: @bcworkz
6 years ago

A possible workaround is insert the HTML entity for soft-hyphen &shy; 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?

#7 @TobiasBg
6 years ago

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

#8 @GeJay
6 years ago

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

#9 @azaozz
6 years ago

  • Keywords close added

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.

#10 @markcallen
6 years ago

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

#11 @mikeschroder
6 years ago

  • Keywords close removed
  • Milestone 3.9 deleted
  • Resolution set to wontfix
  • Status changed from new to closed

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.

#12 @SergeyBiryukov
6 years ago

#28218 was marked as a duplicate.

#13 @SergeyBiryukov
6 years ago

#28218 was marked as a duplicate.

#14 @SergeyBiryukov
5 years ago

#28958 was marked as a duplicate.

#15 in reply to: ↑ 6 @thierryouellet
5 years ago

Replying to bcworkz:

A possible workaround is insert the HTML entity for soft-hyphen &shy; 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.

#16 @ManellyC
3 years ago

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.

Last edited 3 years ago by ManellyC (previous) (diff)
Note: See TracTickets for help on using tickets.