WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 3 months ago

Last modified 3 months ago

#16239 closed defect (bug) (fixed)

Improve switching between visual editor and html mode when text set immediately after more tag

Reported by: koopersmith Owned by: azaozz
Milestone: 3.9 Priority: normal
Severity: normal Version: 3.1
Component: TinyMCE Keywords: has-patch needs-testing ux-feedback
Focuses: Cc:

Description

By request from Matt. When switching from the visual editor to html mode, text immediately after the more tag will be set directly next to the comment. In this case, we should set the text on the next line.

Attachments (4)

editor_plugin.dev.js.patch (695 bytes) - added by dwright 2 years ago.
<!--more--> is surrounded by a fully blank line above and a fully blank line below, representing a paragraph
16239-2.patch (1.1 KB) - added by azaozz 2 years ago.
16239.whitespace.png (2.9 KB) - added by SergeyBiryukov 2 years ago.
16239-3.patch (2.4 KB) - added by azaozz 2 years ago.

Download all attachments as: .zip

Change History (21)

comment:1 nacin3 years ago

  • Keywords 3.2-early added
  • Milestone changed from Awaiting Review to Future Release
  • Status changed from new to reviewing

comment:2 koopersmith2 years ago

  • Keywords needs-patch added; 3.2-early removed
  • Milestone changed from Future Release to 3.4
  • Owner koopersmith deleted

Still exists. This one should be a quick fix.

comment:3 dwright2 years ago

  • Keywords has-patch added; needs-patch removed

if I understand correctly, basically, in html mode, <!--more--> should exist by itself on a line. attached a patch which accomplishes that.

comment:4 follow-up: azaozz2 years ago

Seems we should be putting <!--more--> in a separate paragraph, that way the content above and below it will be formatted properly after we do the split.

This would also need a look at the back-end handling of <!--more-->.

comment:5 in reply to: ↑ 4 dwright2 years ago

Replying to azaozz:

Seems we should be putting <!--more--> in a separate paragraph, that way the content above and below it will be formatted properly after we do the split.

By 'separate paragraph', I assume you mean <p><!--more--></p>, however, when switching from Visual to HTML mode in the TinyMCE editor, the <p> tags are stripped, it appears the way a paragraph is then represented in HTML mode is when content is surrounded by a fully blank line above and a fully blank line below.

This would also need a look at the back-end handling of <!--more-->.

why? with the new patch, after saving a post, <!--more--> maintains the paragraph format

dwright2 years ago

<!--more--> is surrounded by a fully blank line above and a fully blank line below, representing a paragraph

comment:6 follow-up: SergeyBiryukov2 years ago

The patch has two closing </p> tags.

comment:7 in reply to: ↑ 6 ; follow-up: dwright2 years ago

Replying to SergeyBiryukov:

The patch has two closing </p> tags.

the filtering that occurs when switching from visual to html mode, converts </p> to a newline and converts <p> to blank. As stated above if it is true that a paragraph in visual mode is denoted by a newline above and below, this achieves that result.

(admittedly, it's 'tricky' or hackish, but I didn't see a bug filed against that filtering behavior, so it seemed acceptable and not likely to change soon, if at all)

comment:8 in reply to: ↑ 7 ; follow-up: SergeyBiryukov2 years ago

Replying to dwright:

the filtering that occurs when switching from visual to html mode, converts </p> to a newline and converts <p> to blank.

Ah, I see, thanks for the explanation. Seems it can be \n\n<!--more'+moretext+'-->\n\n as well?

azaozz2 years ago

comment:9 follow-up: azaozz2 years ago

It seems unsafe to assume the <more> tag is always in a <p>. Inserting it wrapped in a paragraph would ensure tags above it are closed properly (the wrap creates new DOM node).

comment:10 in reply to: ↑ 8 dwright2 years ago

Replying to SergeyBiryukov:

Replying to dwright:

the filtering that occurs when switching from visual to html mode, converts </p> to a newline and converts <p> to blank.

Ah, I see, thanks for the explanation. Seems it can be \n\n<!--more'+moretext+'-->\n\n as well?

If I remember correctly any number of newlines is replaced with one newline. <br/> is stripped completely.

comment:11 in reply to: ↑ 9 ; follow-up: dwright2 years ago

Replying to azaozz:

It seems unsafe to assume the <more> tag is always in a <p>. Inserting it wrapped in a paragraph would ensure tags above it are closed properly (the wrap creates new DOM node).

I changed the patch to wrap <!--more--> withing <p></p> (wrapped in a paragraph) based on your comments above. I guess I don't know what you mean by, "Inserting it wrapped in a paragraph", please elaborate

comment:12 in reply to: ↑ 11 azaozz2 years ago

Replying to dwright:

I meant that rather than replacing <more> with <p><more></p> on post-process (i.e. after the DOM has been serialized into a string of HTML code), we should insert it in a new paragraph when the "More" button in the visual editor is clicked. That way the editor creates a new DOM node for it which later is serialized properly.

The equivalent in the HTML editor would be to insert "\n\n<more>\n\n" as two line breaks are converted to a <p> by wpautop.

comment:13 SergeyBiryukov2 years ago

Replying to dwright:

If I remember correctly any number of newlines is replaced with one newline. <br/> is stripped completely.

Two or more empty lines are indeed replaced with one. However \n\n only creates one empty line, which is preserved (I've double-checked this).

It also seems that <!--more--> on its own line adds more whitespace in TinyMCE (see 16239.whitespace.png). With 16239-2.patch, it looks more compact.

azaozz2 years ago

comment:14 azaozz2 years ago

  • Keywords needs-testing ux-feedback added

16239-3.patch inserts the <!--more--> tag always wrapped in a paragraph in both visual and HTML editors.

However in the visual editor the user may continue typing in the same paragraph which is undesirable, so there's an extra paragraph inserted after the tag and the cursor is placed there. Also added a check to make sure <!--more--> is always in a separate paragraph, so no tags are broken. Old posts will be checked when edited.

All this changes the behavior of the More button a little

comment:15 ryan2 years ago

  • Milestone changed from 3.4 to Future Release

comment:16 azaozz3 months ago

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

In 26941:

TinyMCE: improve handling of Read More and Nextpage tags. See #24067, fixes #16239.

comment:17 azaozz3 months ago

  • Milestone changed from Future Release to 3.9
Note: See TracTickets for help on using tickets.