The project I am working on has several templates, some which do not use the main WordPress editor. For those templates, I typically hide the editor via jQuery’s .hide() or .slideUp methods.

The problem I ran into was that when editing a page using a template that did not use the editor, then switching the template to one that used the editor, the editor would be broken until the user scrolled, resized the window, etc. This is due to how WordPress 4.0 now resizes the editor window automatically to fit the content in it.

Screen Shot 2014-10-15 at 11.32.06 AM

The trick to fix this is to turn the auto resizing off and on again, which fires off all of the auto resize functions. The methods are:

window.editorExpand.off();
window.editorExpand.on();

The longer explanation is below the gist.

First I get the elements I am watching or modifying, I then create the function that is going to flip the switch off and on again.

In the function I first see if auto resizing is even on, because if it isn’t, then you don’t need to do this. Next you can see that I have it set to wait 401ms, the reason for this is due to I am using .slideDown(), which has a default time of 400ms, and I want it to fire after that.

I then listen for the change of the page template select box, and show/hide my editor as needed. I also flip the switch every time there is a change, which may be too much, but it shouldn’t affect any usability.

And that’s it. If you have a better way of doing some of the things, let me know.

Leave a Reply

Your email address will not be published. Required fields are marked *

+ 35 = forty