Gutenlypso: update calypso classic block to update block content even if the editor instance is marked for removal

[gwwar]

Changes proposed in this Pull Request

I don't really understand why the timing of the tinymce lifecycle events are lining up this way, but once we reach handlers like the ones that manipulate the more tag, the editor is already marked for removal, and so any content manipulation is not reflected.

In this PR I explicitly detect for this case, then update block content. I've also modified some behavior to more closely match the core Classic block. Basically we don't bother to update block content until on block blur rather than a debounced onchange event.

In the case of the more tag, we should see a nice visual placeholder in the visual mode, and an html more comment in the html view.

Before:

After:

Testing instructions

Publishing with a more block renders correctly

• Add a Classic block
• Add the "more tag" between 2 paragraphs
• Save and Update
• Check post from Blog page, the tag is not applied
• Check post individually, more tag works as expected

Visually toggling between visual/html shows the correct view

• Add a Classic block
• Add the "more tag" between 2 paragraphs
• Select block options, and pick "Edit As HTML"
  

Converting to Blocks works

• Add a Classic block
• Add the "more tag" between 2 paragraphs
• Select block options, and pick "Convert to Blocks"

Content is saved when we focus out of the Classic block
This matches behavior in the core classic block.

• Publish a post with a classic block
• Open the post and make sure there are no unsaved changes on the draft
• Start typing in the Classic block, wait.
• Notice that the update option doesn't appear
• Blur the classic block by clicking outside of the area
• We should see an update option

Fixes #29643

[matticbot]

Test live: https://calypso.live/?branch=fix/more-tag

[gwwar]

Okay this is all set for review. @jsnajdr it looks like icfy might need some 👀 seeing a curl: (7) Failed to connect to api.iscalypsofastyet.com port 5000: Connection refused in the failed run.

[jsnajdr]

@gwwar ICFY got fixed, the Circle CI task restarted and now this PR is all green.

[gwwar]

Thanks @jsnajdr !

[gwwar]

This PR should also fix #29833

[mmtr]

I noticed a weird behavior after converting a classic block to blocks: if we insert new classic blocks, their content is not published.

These are the steps I follow for reproducing the issue:

• Add a classic block and enter some content on it
• Publish the post and verify that the content is published
• Convert the classic blocks
• Update the post and verify that the content is still on the published post
• Add a new classic block and enter some content on it
• Update the post (after blurring the classic block)

⚠️The published post doesn't contain the content of the new classic block

[gwwar]

Hmm @mmtr I can't reproduce this, but I can add back the onChange handling. I wouldn't be surprised if timing issues are causing this.

Oh super weird, the first blur excludes the content in the update, but the second one works. 🤔

Ah so I think I can reduce steps.

• Add a classic block, add some content, blur
• Add a second classic block, add some content. First blur doesn't trigger the handler. The second blur event for the new classic block works.

Nice catch

[kwight]

Works great for fixing #29643 and #29833 ✨

I was able to replicate @mmtr 's experience, but a further refresh and Update click in the editor corrected it. Looking at the API POST calls for the content updates, they both include the new content, so it does seem UI related.

[gwwar]

😭 alright I think I have most major cases. Note that when we go into "Edit as html" we're using the editor package's component block-list/block-html.js instead of this tinymce instance in the html tab.

[mmtr]

Thanks for fixing the issue with the blur events!

Now I have a different one when I switch from "Edit as HTML" to "Edit visually": changes done in the HTML editor are not reflected in the visual editor.

[gwwar]

Thanks @mmtr I'll maybe timebox debugging for that case, as adding content without blurring > convert to blocks works in visual mode. We can file a follow up issue if I'm unable to get it today.

[gwwar]

🤔 @mmtr are there more steps? I think I reproduced once, but now I'm not having luck. Is this pretty consistent for you?

[mmtr]

Uhm... strange. I cannot reproduce it now neither. But those were the only steps I followed. In fact, I recorded a couple more GIFs before that one, and I always did the same, so I don't know what can cause that state.

Will apply again the whole testing instructions and see if I detect how to reproduce it. Otherwise I think this is good to go.

[mmtr]

Same, I cannot reproduce it again, so I don't know what I did differently before. I guess we can ignore that since it should be a very corner case.

[gwwar]

Thanks for the detailed testing @mmtr and @kwight! I'll try and land this if I can get a clean full e2e run.

[gwwar]

Got a clean run locally for the invites, and edit post suite.

 [WPCOM] Invites:  (desktop)
    Inviting new user as an Editor: @parallel @jetpack
Reusing login cookie for e2eflowtesting3
      ✓ Can log in and navigate to Invite People page (20686ms)
      ✓ Can invite a new user as an editor and see its pending (7808ms)
      ✓ Can see an invitation email received for the invite (585ms)
      ✓ Can sign up as new user for the blog via invite link (13533ms)
      ✓ User has been added as Editor (1382ms)
Reusing login cookie for e2eflowtesting3
      ✓ As the original user can see and remove new user (15398ms)
^CTerminated: 15
[kerryliu@bmo ~/checkouts/wp-e2e-tests] (fix/login-and-select-my-site-dev)$ NODE_ENV=kerry HEADLESS=1 ./node_modules/.bin/mocha specs/wp-invite-users-spec.js -s desktop


  [WPCOM] Invites:  (desktop)
    Inviting new user as an Editor: @parallel @jetpack
Reusing login cookie for e2eflowtesting3
      ✓ Can log in and navigate to Invite People page (13501ms)
      ✓ Can invite a new user as an editor and see its pending (8383ms)
      ✓ Can see an invitation email received for the invite (731ms)
      ✓ Can sign up as new user for the blog via invite link (13847ms)
      ✓ User has been added as Editor (1152ms)
Reusing login cookie for e2eflowtesting3
      ✓ As the original user can see and remove new user (16067ms)
      ✓ As the invited user, I am no longer an editor on the site (13860ms)
    Inviting new user as an Editor and revoke invite: @parallel @jetpack
Reusing login cookie for e2eflowtesting3
      ✓ Can log in and navigate to Invite People page (14595ms)
      ✓ Can Invite a New User as an Editor, then revoke the invite (7718ms)
      ✓ Can see an invitation email received for the invite (433ms)
      ✓ Can open the invite page and see it has been revoked (5956ms)
    Inviting New User as a Viewer of a WordPress.com Private Site: @parallel
      ✓ As an anonymous user I can not see a private site (469ms)
Reusing login cookie for e2eflowtestingprivate
      ✓ Can log in and navigate to Invite People page (12212ms)
      ✓ Can invite a new user as an editor and see its pending (25753ms)
      ✓ Can see an invitation email received for the invite (512ms)
      ✓ Can sign up as new user for the blog via invite link (13122ms)
      ✓ Can see user has been added as a Viewer (2668ms)
Reusing login cookie for e2eflowtestingprivate
      ✓ Can see new user added and can be removed (47782ms)
      ✓ Can not see the site - see the private site log in page (14137ms)
    Inviting New User as an Contributor, then change them to Author: @parallel @jetpack
      - Can log in and navigate to Invite People page
      - Can invite a new user as an editor and see its pending
      - Can see an invitation email received for the invite
      - Can sign up as new user for the blog via invite link
      - Can see a notice welcoming the new user as an contributor
      - New user can create a new post
      - New user can submit the new post for review as pending status
      - New user can see post on posts page in pending status
      - As the original user, can see new user added to site
      - As the original user, I can change the contributor user to an author user
      - As the invited user, I can now publish a post
    Inviting New User as a Follower: @parallel @jetpack
      - Can log in and navigate to Invite People page
      - Can invite a new user as an editor and see its pending
      - Can see an invitation email received for the invite
      - Can sign up as new user for the blog via invite link
      - User has been added as a Follower
      - As the original user, can see new user added to site
      - Can remove the email follower from the site
      - Can remove the follower account from the site


  19 passing (4m)
  19 pending

  [WPCOM] Editor: Posts (desktop)
    Public Posts: Preview and Publish a Public Post @parallel @jetpack
Reusing login cookie for e2eflowtesting3
      ✓ Can log in (14320ms)
      ✓ Can enter post title, content and image (7071ms)
      ✓ Expand Categories and Tags (305ms)
      ✓ Can add a new tag (476ms)
      ✓ Close categories and tags (192ms)
      ✓ Verify tags present after save (5671ms)
      ✓ Expand sharing section (190ms)
      ✓ Can see the publicise to twitter account (270ms)
      ✓ Can see the default publicise message (93ms)
      ✓ Can set a custom publicise message (875ms)
      ✓ Close sharing section (96ms)
      ✓ Can launch post preview (33855ms)
      ✓ Can see correct post title in preview (95ms)
      ✓ Can see correct post content in preview (83ms)
      ✓ Can see the post tag in preview (91ms)
      ✓ Can see the image in preview (52ms)
      ✓ Can close post preview (74ms)
      ✓ Can publish and view content (377ms)
      ✓ Can see correct post title in preview (12762ms)
      ✓ Can see correct post content in preview (60ms)
      ✓ Can see the post tag in preview (81ms)
      ✓ Can see the image in preview (55ms)
      ✓ Can close post preview (82ms)
      ✓ Can publish and view content (1031ms)
      ✓ Can see correct post title (105ms)
      ✓ Can see correct post content (43ms)
      ✓ Can see correct post tag (41ms)
      ✓ Can see the image published
      Can see post publicized on twitter
        ✓ Can see post message (2966ms)
    Basic Public Post @parallel @jetpack @canary
      Publish a New Post
Logging in as e2eflowtesting3
        ✓ Can log in (26810ms)
        ✓ Can enter post title and content (4360ms)
        ✓ Can publish and view content (18896ms)
        ✓ Can see correct post title (46ms)
    Check Activity Log for Public Post @jetpack @parallel
Reusing login cookie for e2eflowtesting3
      ✓ Can log in (7724ms)
      ✓ Can enter post title and content (4357ms)
      ✓ Can publish and view content (11213ms)
      ✓ Can see the post in the Activity log (12855ms)
    Schedule Basic Public Post @parallel @jetpack
      Schedule (and remove) a New Post
Reusing login cookie for e2eflowtesting3
        ✓ Can log in (12027ms)
        ✓ Can enter post title and content (4218ms)
        ✓ Can schedule content for a future date (first day of second week next month) (11251ms)
        ✓ Can confirm scheduling post and see correct publish date (2161ms)
        ✓ Remove scheduled post (2622ms)
    Private Posts: @parallel @jetpack
      Publish a Private Post
Reusing login cookie for e2eflowtesting3
        ✓ Can log in (9928ms)
        ✓ Can enter post title and content (1311ms)
        ✓ Can disable sharing buttons (544ms)
        ✓ Can allow comments (255ms)
        Set to private which publishes it
          ✓ Ensure the post is saved (4593ms)
          ✓ Can set visibility to private which immediately publishes it (3869ms)
          As a logged in user 
            ✓ Can see correct post title (63ms)
            ✓ Can see correct post content (74ms)
            ✓ Can see comments enabled
            ✓ Can't see sharing buttons (2046ms)
            As a non-logged in user 
              ✓ Can't see post at all (475ms)
    Password Protected Posts: @parallel @jetpack
      Publish a Password Protected Post
Reusing login cookie for e2eflowtesting3
        ✓ Can log in (36978ms)
        ✓ Can enter post title and content and set to password protected (6926ms)
        ✓ Can enable sharing buttons (352ms)
        ✓ Can disallow comments (565ms)
        Publish and View
          As a logged in user
            With no password entered
              ✓ Can view post title (52ms)
              ✓ Can see password field
              ✓ Can't see content when no password is entered (66ms)
              ✓ Can't see comments (2069ms)
              ✓ Can see sharing buttons
            With incorrect password entered
              ✓ Can view post title (45ms)
              ✓ Can see password field
              ✓ Can't see content when incorrect password is entered (49ms)
              ✓ Can't see comments (2039ms)
              ✓ Can see sharing buttons
            With correct password entered
              ✓ Can view post title (41ms)
              ✓ Can't see password field (2031ms)
              ✓ Can see page content (57ms)
              ✓ Can't see comments (2048ms)
              ✓ Can see sharing buttons
          As a non-logged in user
            With no password entered
              ✓ Can view post title (534ms)
              ✓ Can see password field
              ✓ Can't see content when no password is entered (44ms)
              ✓ Can't see comments (2062ms)
              ✓ Can see sharing buttons
            With incorrect password entered
              ✓ Can view post title
              ✓ Can see password field
              ✓ Can't see content when incorrect password is entered (42ms)
              ✓ Can't see comments (2035ms)
              ✓ Can see sharing buttons
            With correct password entered
              ✓ Can view post title (42ms)
              ✓ Can't see password field (2045ms)
              ✓ Can see page content (46ms)
              ✓ Can't see comments (2068ms)
              ✓ Can see sharing buttons
    Trash Post: @parallel @jetpack
      Trash a New Post
Reusing login cookie for e2eflowtesting3
        ✓ Can log in (16230ms)
        ✓ Can enter post title and content (1244ms)
        ✓ Can trash the new post (7482ms)
        ✓ Can then see the Posts page with a confirmation message (4669ms)
    Edit a Post: @parallel @jetpack
      Publish a New Post
Reusing login cookie for e2eflowtesting3
        ✓ Can log in (7800ms)
        ✓ Can enter post title and content (4223ms)
        ✓ Can publish the post (10829ms)
        Edit the post via posts
          ✓ Can view the posts list (6314ms)
          ✓ Can see and edit our new post (1797ms)
          ✓ Can see the post title (2070ms)
          ✓ Can set the new title and update it, and link to the updated post (7772ms)
          Can view the post with the new title
            ✓ Can view the post
            ✓ Can see correct post title
    Insert a contact form: @parallel @jetpack
      Publish a New Post with a Contact Form
Reusing login cookie for e2eflowtesting3
        ✓ Can log in (11654ms)
        ✓ Can insert the contact form (4604ms)
        ✓ Can see the contact form inserted into the visual editor (110ms)
        ✓ Can publish and view content (20687ms)
        ✓ Can see the contact form in our published post
    Insert a payment button: @parallel @jetpack
Reusing login cookie for e2eflowtesting3
      ✓ Can log in (11039ms)
      ✓ Can insert the payment button (8880ms)
      ✓ Can see the payment button inserted into the visual editor (14612ms)
      ✓ Can publish and view content (19142ms)
      ✓ Can see the payment button in our published post (56ms)
      ✓ The payment button in our published post opens a new Paypal window for payment (5518ms)
    Revert a post to draft: @parallel @jetpack
      Publish a new post
Reusing login cookie for e2eflowtesting3
        ✓ Can log in (11910ms)
        ✓ Can enter post title and content (4252ms)
        ✓ Can publish the post (19959ms)
      Revert the post to draft
        ✓ Can revert the post to draft (3155ms)


  115 passing (8m)

[gwwar]

I think I'm in the clear for the full e2e suite, I'll try landing and will revert if we note new breakages in master