WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 7 months ago

#18820 closed enhancement (fixed)

Formatting bar loading experience is subpar

Reported by: markjaquith Owned by: azaozz
Milestone: 4.4 Priority: normal
Severity: normal Version: 3.2.1
Component: Editor Keywords: needs-patch dev-feedback
Focuses: ui Cc:

Description

When you save a post, the way the formatting bar loads in (Visual and HTML both) is subpar. It pops in really late, and shoves your post content down.

Screencast: http://s3.amazonaws.com/txfx/screencasts/Formatting-Toolbar.mov

Let's make this better.

Change History (12)

#1 @jane
5 years ago

Agreed. This drives me crazy. We brought it up in 3.2 cycle, too.

#2 @jane
5 years ago

  • Keywords ux-feedback removed

#3 @azaozz
5 years ago

In [18829]:

Attempt to keep the textarea still while loading the editor, see #18820

#4 follow-up: @trepmal
4 years ago

Similar thing happening with the width - http://screencast.com/t/RypBW4M50

My personal fix is to copy the width style to the <head>

add_action('admin_head', 'editor_css_fix');
function editor_css_fix() { ?>
	<style type="text/css">
	.wp-editor-container textarea.wp-editor-area {
		width: 99.9%;
	}
	</style>
<?php }

#5 @nacin
4 years ago

  • Component changed from General to Editor
  • Milestone changed from Awaiting Review to 3.3
  • Severity changed from normal to major

#6 in reply to: ↑ 4 ; follow-up: @azaozz
4 years ago

Replying to trepmal:

From the screencast it seems editor-buttons.css loads late because your connection is (very) slow. We can add that css to wp-admin.css, also outputting editor-buttons.css earlier should help.

#7 @azaozz
4 years ago

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

In [19126]:

Output editor-buttons.css earlier so the browser renders the editor in time, fixes #18820

#8 in reply to: ↑ 6 ; follow-ups: @nacin
4 years ago

  • Severity changed from major to normal

Replying to azaozz:

Replying to trepmal:

From the screencast it seems editor-buttons.css loads late because your connection is (very) slow. We can add that css to wp-admin.css, also outputting editor-buttons.css earlier should help.

Nice fix. FWIW though, I was able to see this on localhost consistently.

I'm re-opening as http://s3.amazonaws.com/txfx/screencasts/Formatting-Toolbar.mov (the original report) is still a problem.

#9 in reply to: ↑ 8 @SergeyBiryukov
4 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Replying to nacin:

I'm re-opening as http://s3.amazonaws.com/txfx/screencasts/Formatting-Toolbar.mov (the original report) is still a problem.

#10 in reply to: ↑ 8 @azaozz
4 years ago

  • Milestone changed from 3.3 to Future Release

Replying to nacin:

Not sure we can do anything else to minimize the jumpiness there. TinyMCE is big, doesn't load fast, and places an iframe exactly on top of the textarea so there will always be some visual changes.

Next step can probably be to place a blocking div on top of it with a spinner in the middle until it loads completely. Beta3 is a bit too late for that though, moving to 3.4.

#11 @chriscct7
18 months ago

  • Focuses ui added
  • Keywords needs-patch dev-feedback added

This isn't as pronounced in 4.0 after the latest round of TinyMCE updates, but I agree with azaozz, the best solution might just be a placeholder that hides when TinyMCE loads

#12 @azaozz
7 months ago

  • Milestone changed from Future Release to 4.4
  • Resolution set to fixed
  • Status changed from reopened to closed

Most of the Text editor "jumpiness" was removed in 4.3 by outputting the buttons container "inline" (before initializing quicktags.js). Also, browsers have become better and TinyMCE loads faster :)

Considering this fixed.

Note: See TracTickets for help on using tickets.