WordPress 4.8’s Updated Text Widget Contains a Trap for the Unwary

Short-But-Technical Version: If you have elements like onmouseover, onmouseout, and onclick in IMG tags in your text widgets they will get stripped out when you update your WordPress to version 4.8.

Long Version: In WordPress version 4.8, the text widget has been ‘upgraded’ to incorporate the same TinyMCE that is used in the post/page body fields.  This is nice because it now means that you have a more WYSIWYG-like method for creating textual sidebar (widget area) content. For example, if you want text in a widget area to be bold you no longer have to manually insert the appropriate HTML to do so.

Some of us have websites containing hand-crafted image rollovers in text widgets. An image rollover is an image that changes when you move the mouse over it. This is normally accomplished by adding ‘onmouseover=’ and ‘onmouseout=’ elements to the IMG tag (the bit of HTML that creates the image). WHEN YOU UPDATE TO WORDPRESS 4.8 YOUR CAREFULLY HAND-CRAFTED IMAGE ROLLOVER CODE IN YOUR TEXT WIDGET WILL GET STRIPPED OUT. Unfortunately that is the nature of TinyMCE.

If you’ve used WordPress, you know that TinyMCE has two modes: ‘Visual’ and ‘Text’.  You’ll see two tabs of the same name above the toolbar while creating or editing a page or post. While it is true that in ‘Text’ mode you can enter HTML and include advanced elements such as ‘onmouseover’ and ‘onmouseout’:

1. The instant you switch from ‘Text’ mode to ‘Visual’, TinyMCE strips your advanced elements out.
2. When updating to WordPress 4.8, the initial default mode for TinyMCE in the text widget is ‘Visual’, which means that your advanced elements are going to get stripped out before you have a chance to do anything about it.  Bad.  Very Bad.

Yesterday I reported this issue to the WordPress Developer team.  Their response was:

With the 4.8 update, we introduced TinyMCE to the text widget as well, unfortunately this does have some side effects, like stripping of unexpected elements and similar.

If you use only the Text tab of the editor, and have the correct access (such as an admin that can post unfiltered html), you should be able to post the content in, but be aware that switching to the visual mode again may strip HTML unexpectedly.

We’re planning on introducing a stand along widget for HTML, but it was not something done for 4.8

Now that You Know:

Now that you are aware that the WordPress 4.8 update my turn and viciously bite you, the problem can be avoided:

1. Prior to doing the 4.8 update, go into your dashboard, and copy all text widget contents to a text editor (I use BBEdit).
2. Update your site to 4.8
3. After updating to 4.8, go to your dashboard. Open each text widget. Switch to the ‘Text’ tab.  Paste the widget contents back in from your text editor.

Lessons Learned:

For me this whole episode reinforces the value of three best-practices we use when updating our clients’ websites:

1. We maintain a ‘clone’ of ever client’s website on our server.  All updates are installed on the clone first.  As a result, we discovered this rollover-striping problem without impacting the client’s live website.  This is not the first time we dodged a similar bullet.
2. Turning off automatic updates.  Wordpress by default will automatically install ‘minor’ releases.  For example, going from version 4.7.4 to 4.7.5. In this particular case,the update to 4.8 was a ‘major’ release. WordPress does not do automatic updates of ‘major’ releases.  Had this been a minor release however, the ‘rollover-stripping’ would have slipped  in while you were totally unaware.  It may have been days, weeks, or months before you discovered that your rollovers were gone.  Another bullet dodged.
3. Backups are good.  Changelogs are good. We backup our clients’ websites nightly.  We also keep a written log of every change made to each website. Had this problem gone unnoticed while testing on the clone website, once discovered on the live website we could have easily rolled the live site back to the earlier WordPress version.

As noted above WordPress plans to add an HTML plugin some time in the future.  And I expect within a few days, I expect that someone will create a ‘Classic Text Widget’ plugin (I may do so myself). Either of these will make life easier for those of us doing advanced ninja-like coding in our text widgets.