Make WordPress Core

Opened 9 years ago

Closed 9 years ago

#33192 closed defect (bug) (fixed)

WYSIWYG editor Visual tab doesn't load when going from Text to Visual

Reported by: stuartshields's profile stuartshields Owned by: azaozz's profile azaozz
Milestone: 4.3 Priority: normal
Severity: blocker Version: 4.3
Component: TinyMCE Keywords: has-patch commit
Focuses: administration Cc:

Description

To reproduce

  1. Go and add a new Post or Page
  2. Make sure the Text tab is active, add some text and click Publish if text tab isn't active by default.
  3. Once saved, click on the Visual tab, the editor tools fail to load, until the Visual tab is clicked a second time and the tools load.

This was tested in Firefox 41 and Chrome Chrome 44

Results
The Visual tab doesn't load correctly when the tab is clicked on, after being in the Text tab

Expected result

Single click on the Visual tab to get it to load first time

Attachments (5)

Screen Shot 2015-07-30 at 10.20.41 am.png (62.8 KB) - added by stuartshields 9 years ago.
Make sure that the Text tab is selected and saved so the page loads the text tab first
Screen Shot 2015-07-30 at 10.20.46 am.png (47.1 KB) - added by stuartshields 9 years ago.
Once the Visual tab is clicked on non of the tools load
Screen Shot 2015-07-30 at 10.20.52 am.png (64.3 KB) - added by stuartshields 9 years ago.
2nd click on the tab loads the tools
visual-screenshot.jpg (57.5 KB) - added by stuartshields 9 years ago.
The differences in the 1st click of the Visual tab and the 2nd click of the Visual tab
33192.patch (573 bytes) - added by azaozz 9 years ago.

Download all attachments as: .zip

Change History (27)

@stuartshields
9 years ago

Make sure that the Text tab is selected and saved so the page loads the text tab first

@stuartshields
9 years ago

Once the Visual tab is clicked on non of the tools load

@stuartshields
9 years ago

2nd click on the tab loads the tools

#1 @atomicjack
9 years ago

  • Component changed from General to TinyMCE

#2 @iseulde
9 years ago

Are you sure all plugins are disabled? Do you see any JavaScript errors?

@stuartshields
9 years ago

The differences in the 1st click of the Visual tab and the 2nd click of the Visual tab

#3 @stuartshields
9 years ago

Hi,

Yes all plugins are disabled. I've tried it on different wordpress installs on my computer at work and here at home.

From the new screenshot I attached it could be the fact that the page is refreshing to get the editor to display correctly on the 2nd click.

4.3 Beta 3 and 4 didn't have the issue at all.

#4 follow-up: @iseulde
9 years ago

Do you see any JavaScript errors?

#5 in reply to: ↑ 4 @stuartshields
9 years ago

Replying to iseulde:

Do you see any JavaScript errors?

No Javascript errors are given. I've tried this on two different computers.

#6 @atomicjack
9 years ago

  • Keywords needs-patch added

I've tested this on my RC installation, I can confirm this issue is present.

Steps:

  • Edit a post/page
  • Click Text, enter some text
  • Click Update
  • Switch to Visual

Tools don't load.

Last edited 9 years ago by atomicjack (previous) (diff)

#7 @peterwilsoncc
9 years ago

It looks to be breaking as part of the build process.

Able to reproduce only on build with script_debug disabled. Running src or with script_debug runs fine.

#8 @peterwilsoncc
9 years ago

The error occurs when the build includes wp-tinymce.js.gz. Switching from text editor to visual editor works properly if compress:tinymce is removed from the build task.

Tested on Firefox 38/OS X and Chrome 44/OS X.

Unsure if the problem is in the gzip file or the loader wp-includes/js/tinymce/wp-tinymce.php.

#9 @netweb
9 years ago

  • Milestone changed from Awaiting Review to 4.3
  • Severity changed from normal to blocker

Confirmed in 4.3 Beta 1, RC1 and /trunk (r33525), not reproducible in 4.2, 4.1, 4.0, or 3.9

Repro steps are the same as originally provided except you need to use /build or the .zip download package

Alternate repro: Edit any post via the Text tab and save by clicking Update, now click the Visual tab

With define( 'SCRIPT_DEBUG', false ); or SCRIPT_DEBUG not defined the compressed and concatenated TinyMCE file that should be loading for /build is wp-tinymce.js.gz,

See /wp-includes/class-wp-editor.php#L1199 and /wp-includes/js/tinymce/wp-tinymce.php#L29

// Load tinymce.js when running from /src, else load wp-tinymce.js.gz (production) or tinymce.min.js (SCRIPT_DEBUG)

Last related change to any of this was r32543

#10 @netweb
9 years ago

Current thoughts are leaning towards this being an issue with the creation of wp-tinymce.js.gz via the Grunt concat/compress tasks for the TinyMCE JS files, though the following looks correct to me.

grunt concat:tinymce --verbose

$ grunt concat:tinymce --verbose

Running tasks: concat:tinymce

Running "concat:tinymce" (concat) task
Verifying property concat.tinymce exists in config...OK

Options: separator="\n", banner="", footer="", stripBanners=false, process=undefined, sourceMap=false, sourceMapName=undefined, sourceMapStyle="embed"
Reading build/wp-includes/js/tinymce/tinymce.min.js...OK
Reading build/wp-includes/js/tinymce/themes/modern/theme.min.js...OK
Reading build/wp-includes/js/tinymce/plugins/charmap/plugin.min.js...OK
Reading build/wp-includes/js/tinymce/plugins/colorpicker/plugin.min.js...OK
Reading build/wp-includes/js/tinymce/plugins/compat3x/plugin.min.js...OK
Reading build/wp-includes/js/tinymce/plugins/directionality/plugin.min.js...OK
Reading build/wp-includes/js/tinymce/plugins/fullscreen/plugin.min.js...OK
Reading build/wp-includes/js/tinymce/plugins/hr/plugin.min.js...OK
Reading build/wp-includes/js/tinymce/plugins/image/plugin.min.js...OK
Reading build/wp-includes/js/tinymce/plugins/lists/plugin.min.js...OK
Reading build/wp-includes/js/tinymce/plugins/media/plugin.min.js...OK
Reading build/wp-includes/js/tinymce/plugins/paste/plugin.min.js...OK
Reading build/wp-includes/js/tinymce/plugins/tabfocus/plugin.min.js...OK
Reading build/wp-includes/js/tinymce/plugins/textcolor/plugin.min.js...OK
Reading build/wp-includes/js/tinymce/plugins/wordpress/plugin.min.js...OK
Reading build/wp-includes/js/tinymce/plugins/wpautoresize/plugin.min.js...OK
Reading build/wp-includes/js/tinymce/plugins/wpdialogs/plugin.min.js...OK
Reading build/wp-includes/js/tinymce/plugins/wpeditimage/plugin.min.js...OK
Reading build/wp-includes/js/tinymce/plugins/wpemoji/plugin.min.js...OK
Reading build/wp-includes/js/tinymce/plugins/wpgallery/plugin.min.js...OK
Reading build/wp-includes/js/tinymce/plugins/wplink/plugin.min.js...OK
Reading build/wp-includes/js/tinymce/plugins/wptextpattern/plugin.min.js...OK
Reading build/wp-includes/js/tinymce/plugins/wpview/plugin.min.js...OK
Writing build/wp-includes/js/tinymce/wp-tinymce.js...OK
File build/wp-includes/js/tinymce/wp-tinymce.js created.

Done, without errors.

grunt compress:tinymce --verbose

grunt compress:tinymce --verbose

Running tasks: compress:tinymce

Running "compress:tinymce" (compress) task
Verifying property compress.tinymce exists in config...OK
Files: build/wp-includes/js/tinymce/wp-tinymce.js -> build/wp-includes/js/tinymce/wp-tinymce.js.gz
Options: archive=null, mode="gzip", level=9
Created build/wp-includes/js/tinymce/wp-tinymce.js.gz (146870 bytes)

#11 @SergeyBiryukov
9 years ago

Introduced in [32899].

#12 follow-up: @azaozz
9 years ago

Still cannot reproduce here neither from /build nor from clean RC1 install...

I doubt this is build tools related. More likely to be script load order related (i.e. a consequence of concatenating the scripts or loading them faster).

A question for the people that can reproduce: after you switch to Visual and the editor doesn't show, is the TinyMCE instance missing (TinyMCE is not initialized) or it is there but set to "hidden"? To test, run these in the console:

tinymce.activeEditor; // should show the editor instance, `null` if not initialized

If this is present, run:

tinymce.activeEditor.isHidden();

#13 in reply to: ↑ 12 ; follow-up: @peterwilsoncc
9 years ago

Replying to azaozz:

In console:

tinymce.activeEditor
// editor object

tinymce.activeEditor.isHidden()
// true

tinymce.activeEditor.show()
// reveals editor

Still cannot reproduce here neither from /build nor from clean RC1 install...

I can reproduce locally on 4.3-RC1-33526 built from develop.git.wordpress.org.

Additionally, locally I have tried the following without success:

  • Manually ordering tinymce:concat to match load order with SCRIPT_DEBUG enabled:
    BUILD_DIR + 'wp-includes/js/tinymce/tinymce.min.js',
    BUILD_DIR + 'wp-includes/js/tinymce/plugins/compat3x/plugin.min.js',
    BUILD_DIR + 'wp-includes/js/tinymce/themes/modern/theme.min.js',
    BUILD_DIR + 'wp-includes/js/tinymce/plugins/charmap/plugin.min.js',
    BUILD_DIR + 'wp-includes/js/tinymce/plugins/colorpicker/plugin.min.js',
    BUILD_DIR + 'wp-includes/js/tinymce/plugins/hr/plugin.min.js',
    BUILD_DIR + 'wp-includes/js/tinymce/plugins/lists/plugin.min.js',
    BUILD_DIR + 'wp-includes/js/tinymce/plugins/media/plugin.min.js',
    BUILD_DIR + 'wp-includes/js/tinymce/plugins/paste/plugin.min.js',
    BUILD_DIR + 'wp-includes/js/tinymce/plugins/tabfocus/plugin.min.js',
    BUILD_DIR + 'wp-includes/js/tinymce/plugins/textcolor/plugin.min.js',
    BUILD_DIR + 'wp-includes/js/tinymce/plugins/fullscreen/plugin.min.js',
    BUILD_DIR + 'wp-includes/js/tinymce/plugins/wordpress/plugin.min.js',
    BUILD_DIR + 'wp-includes/js/tinymce/plugins/wpautoresize/plugin.min.js',
    BUILD_DIR + 'wp-includes/js/tinymce/plugins/wpeditimage/plugin.min.js',
    BUILD_DIR + 'wp-includes/js/tinymce/plugins/wpemoji/plugin.min.js',
    BUILD_DIR + 'wp-includes/js/tinymce/plugins/wpgallery/plugin.min.js',
    BUILD_DIR + 'wp-includes/js/tinymce/plugins/wplink/plugin.min.js',
    BUILD_DIR + 'wp-includes/js/tinymce/plugins/wpdialogs/plugin.min.js',
    BUILD_DIR + 'wp-includes/js/tinymce/plugins/wptextpattern/plugin.min.js',
    BUILD_DIR + 'wp-includes/js/tinymce/plugins/wpview/plugin.min.js',
    BUILD_DIR + 'wp-includes/js/tinymce/plugins/*/plugin.min.js'
    
  • Manually unzipping wp-tinymce.js.gz and including the unzipped file
  • Forcing wp-tinymce.php to load tinymce.min.js and the concat3x plugin only - this works but is not a practical solution.

@azaozz
9 years ago

#14 in reply to: ↑ 13 ; follow-ups: @azaozz
9 years ago

  • Keywords has-patch needs-testing added; needs-patch removed

Replying to peterwilsoncc:

tinymce.activeEditor
// editor object

tinymce.activeEditor.isHidden()
// true

tinymce.activeEditor.show()
// reveals editor

33192.patch should fix it. This bit was intended for initializing MCE in the background to speed up loading when the Text editor is first. Not used by default.

Could you confirm if it works? :)

Last edited 9 years ago by azaozz (previous) (diff)

#15 in reply to: ↑ 14 ; follow-up: @stuartshields
9 years ago

Hi, I can't get your patch to do anything. When I ran tinymce.activeEditor in the console, when the Visual tab is first clicked going from the Text tab, I can see this in console when running tinymce.activeEditor:

formatter: Object
hasVisual: true
hidden: true
id: "content"

But when the Visual tab is first loaded the same Object is this:

formatter: Object
hasVisual: true
hidden: false
id: "content"

Could this be causing said problem?

Replying to azaozz:

Replying to peterwilsoncc:

tinymce.activeEditor
// editor object

tinymce.activeEditor.isHidden()
// true

tinymce.activeEditor.show()
// reveals editor

33192.patch should fix it. This bit was intended for initializing MCE in the background to speed up loading when the Text editor is first. Not used by default.

Could you confirm if it works? :)

Last edited 9 years ago by stuartshields (previous) (diff)

#16 in reply to: ↑ 15 @stuartshields
9 years ago

Had to do a hard browser refresh and the patch worked. Ignore my last comment.

Replying to stuartshields:

Hi, I can't get your patch to do anything. When I ran tinymce.activeEditor in the console, when the Visual tab is first clicked going from the Text tab, I can see this in console when running tinymce.activeEditor:

formatter: Object
hasVisual: true
hidden: true
id: "content"

But when the Visual tab is first loaded the same Object is this:

formatter: Object
hasVisual: true
hidden: false
id: "content"

Could this be causing said problem?

Replying to azaozz:

Replying to peterwilsoncc:

tinymce.activeEditor
// editor object

tinymce.activeEditor.isHidden()
// true

tinymce.activeEditor.show()
// reveals editor

33192.patch should fix it. This bit was intended for initializing MCE in the background to speed up loading when the Text editor is first. Not used by default.

Could you confirm if it works? :)

#17 in reply to: ↑ 14 @peterwilsoncc
9 years ago

Replying to azaozz:

33192.patch should fix it.

Could you confirm if it works? :)

Yep, 33192.patch works for me.

This ticket was mentioned in Slack in #core by netweb. View the logs.


9 years ago

#19 @azaozz
9 years ago

  • Keywords commit added; needs-testing removed

Great, thanks for testing :)

#20 @netweb
9 years ago

Just adding my confirmation, 33192.patch works for me :+1

#21 @SergeyBiryukov
9 years ago

33192.patch works as expected.

#22 @azaozz
9 years ago

  • Owner set to azaozz
  • Resolution set to fixed
  • Status changed from new to closed

In 33527:

TinyMCE: fix initializing the editor on switching Text => Visual when the Text editor is loaded first.
Props stuartshields, peterwilsoncc, netweb, azaozz. Fixes #33192.

Note: See TracTickets for help on using tickets.