Wp-calypso: Editor: Various improvements to the new editor

[jasmussen]

A visual refresh to the post/page editor was just merged:

The new editor allows the sidebar to be toggled, and has permanently visible preview and publish buttons.

Some smallish issues have popped up, which we should address. Please add to this list if you find any:

• [ ] labels on preview and post settings disappear between the 660 and 960 breakpoint, even though they don't need to. We should consdier a new 720 breakpoint, and hide them under that.
• [x] horizontal scrollbar appears in sidebar when all metaboxes are open, on the between 660 and 960 breakpoints
• [x] word count doesn't have a correct right margin between the 660 and 960 breakpoint
• [x] bottom left status indicator gets cut off sometimes with long documents
• [x] between the 660 and 960 breakpoints, with the sidebar closed, the TinyMCE toolbar lacks left and right borders
• [x] prior to adding content into a draft the preview button is disabled, but it's still clickable and opens a new tab with a post-editor
• [x] fix missing RTL button in editor, tracked separately here https://github.com/Automattic/wp-calypso/issues/12061

See also https://github.com/Automattic/wp-calypso/pull/11536

[jasmussen]

We should also make improvements to the save indicator. Specifically it can be confusing that after publish, the "Save" button stops appearing, even though in the background, the autosave revision system still works.

One solution would be to decide whether we trust the autosave or not, and if we do, remove the Save button entirely. Then it's simply an indicator.

Edit: Improved.

[Copons]

A couple of other things you might want to add to the checklist:

• As already mentioned: between ~720 and ~920px of width, the toolbar in both modes loses its left and right borders.
  
  

• The "published" indicator, while covered by TinyMCE in Visual mode, in HTML mode does not have a background (like the word count on the opposite side; see second screen), and it looks weird with the post content overlapping it.
  
  

[jasmussen]

Only does this in the HTML tab.

[Copons]

Only does this in the HTML tab.

Damn!
Coming up with a fix right now.

[rralian]

Added an issue to the list about the preview button behavior on an empty draft.

[jasmussen]

We should think about, perhaps not as part of this ticket, adding a confirm on the publish dialog. The behavior is technically unchanged since the old editor, but there are some ideas here worth maybe exploring:
https://github.com/Automattic/wp-calypso/pull/11536#issuecomment-283608918

[jasmussen]

A couple of things to look into also:

• https://en.blog.wordpress.com/2017/03/13/a-distraction-free-writing-space-at-wordpress-com/#comment-232843
• https://en.blog.wordpress.com/2017/03/13/a-distraction-free-writing-space-at-wordpress-com/#comment-232834
• https://en.blog.wordpress.com/2017/03/13/a-distraction-free-writing-space-at-wordpress-com/#comment-232846

[jasmussen]

From Mark, and this isn't a regression in the new editor, but posting here regardless as we should improve it:

it's literally impossible to cut and paste text into [captions] in the calypso editor. this has been a bug forever

Here's a video demonstrating the problem https://cloudup.com/cyEsK88iYGU

[jasmussen]

Reporting here, even though it's not a regression from the new editor. Don't want it to fall off the map.

Bug: The visual editor doesn't stick the scrollbar to the bottom when you press enter, only when you type:

Video: https://cloudup.com/cnHrvlx-_4P

Edit: Improved.

[jasmussen]

Another one that is not a regression in the new editor.

Bug: If you write a long long text, then transform one of the paragraphs to a pre preformatted tag, you can no longer scroll to the bottom by selecting text:

Edit: Fixed.

[davewhitley]

I think the pre loader could be added to this list. Currently, the loader is using the old design.

Clarification: the loader is using the same one that is used across all of Calypso — sidebar on the left. We should create a new one with the sidebar on the right.

Edit: this issue was fixed, thanks!

[lancewillett]

For the remaining items — need more eyes to test, or want to split into new issues if not urgent to fix?

[jasmussen]

Thanks for chiming in @lancewillett! Turns out two of the remaining issues have since been fixed.

The remaining label is more of a discussion point:

labels on preview and post settings disappear between the 660 and 960 breakpoint, even though they don't need to. We should consider a new 720 breakpoint, and hide them under that.

I feel like it's not worth keeping this ticket open for just that, so I'm going to close it. We will be revisiting the editor regardless, and in particular the whole area around preview | post settings | Publish (see mockups that are likely to inform this), and so the issue is likely to become vestigial or change.