Main editor layout issue

Hi, Im having the same issue. Can this be fixed?

I will check it out next week and hopefully I have it fix by then. Will let you guys know.

Hello Marko,

I don’t know if it may help you but I found the cause of the problem.

When you toggle a box, a postbox-toggled event is fired. This event is then catched by an event handler which is declared in file wp-admin/js/editor-expand.js at line 640.

// Adjust when collapsing the menu, changing the columns, changing the body class.
			$document.on( 'wp-collapse-menu.editor-expand postboxes-columnchange.editor-expand editor-classchange.editor-expand', adjust )
				.on( 'postbox-toggled.editor-expand', function() {
					if ( ! fixedSideTop && ! fixedSideBottom && window.pageYOffset > pinnedToolsTop ) {
						fixedSideBottom = true;
						window.scrollBy( 0, -1 );
						adjust();
						window.scrollBy( 0, 1 );
					}

					adjust();
				}).on( 'wp-window-resized.editor-expand', function() {
					if ( mceEditor && ! mceEditor.isHidden() ) {
						mceEditor.execCommand( 'wpAutoResize' );
					} else {
						textEditorResize();
					}
				});

This code adjusts the editor width and, because it’s set to display: none, it set the width to 0px on the div#wp-content-editor-tools… which breaks the editor. I think the logic which resize the editor is in the textEditorResize function which is called by the adjust function called by the previous piece of code.

Maybe firing this postbox-toggled event when the tab with the editor is activated may solve the problem?

jQuery(document).trigger('postbox-toggled')

Simply resizing the window also repair the editor… so there is probably another event which may trigger the resizing of the editor

If you want to temporary solve the problem, uncheck Enable full-height editor and distraction-free functionality. in the Screen Options.

The editor-expand.js is the file which drive this new functionality.

This editor-expand.js exposes 2 functions:

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

You can also set/get the setting (on/off):

window.getUserSetting( 'editor_expand' );
window.setUserSetting( 'editor_expand', 'off' );

Maybe you already figured all these things ??

I have the same issue, it’s pretty irritating.
Hope this can be fixed in a plugin update.

@tristanleboss: I hadn’t the change yet, so thank you for looking into it.

I will try to have an update in the next 24 hours.

Due sickness I didn’t had the time to look into it. I will dive into it in the next days.

same (minor) issue here, besides that: nice plugin!

Sorry for the delays. I still didn’t found the time to look into it. Probably will take me another 2 weeks before releasing an update.

With an even bigger delay I finally fixed it. Thanks to tristanleboss pointing me to jQuery(document).trigger(‘postbox-toggled’).

Will go over some of my tickets to see if I can fix those too. Will release a new update in the next 24 hours.

Thanks for the update Marko! I’m looking forward to the release.

Just released the new update. Please let me know if this fixes this issue for you.

Hi Marko,

Although the above is solved, I still have some layout issues with the editor, after tabs have been switched and metaboxes have been manipulated.
When switching back to the main tab, the editor shows space in 2 parts.
See below screenshot:

https://dl.dropboxusercontent.com/u/2854738/tabify.png

The spaces disappear after:
– clicking the Visual/Text tabs of the editor
– scrolling the page.

Also, this behaviour is not present after turning off the setting ‘Enable full-height editor and distraction-free functionality’ in the Screen Options. I need this option though.
This setting may point in the direction to solve this….probably another timing issue, like the one you solved above.

Hope you can look into it.

Thanks,
Remco

Hey Remco,

Thanks for the information. I will look into it and hope to fix it within the next days.

Best,
Marko