Preview: Enable published posts preview #7189

aduth · 2018-06-06T18:56:13Z

Closes (when #7130 is merged): #7179
Closes (when #7130 is merged): #2544
Related: #6257, #6882

Note: Merges to fix/autosave-preview (#7130) as base branch.
Note: As best I can tell, this branch is fully functional, but I have plans to include new end-to-end tests for various preview circumstances prior to merge.

This pull request seeks to allow the user to preview changes to a published post without first updating the post (i.e. the autosave revision preview).

In doing so, it...

Refactors the PostPreviewButton component to avoid relying on a specific save workflow, and instead leverage the mere availability of a preview link
Removes preview_link from the posts endpoints and adds instead to the autosaves endpoint (see REST API: Autosaves entities should include preview_link #7179)

To the latter point, I landed at the conclusion that preview_link only makes sense in the context of autsosaves on consideration of:

The post endpoints reflect the value of the canonical saved post. If there are no unsaved changes, the user should be directed to post.link as its preview.
It does not belong in the revisions endpoints because it is not the case that any revision can be previewed. A preview only occurs for the latest revision of a post (_set_preview, wp_get_post_autosave).

Related Trac tickets:

REST API: Support autosaves (43316)
REST API: Expose 'preview_link' for viewable post types (44180)

Thus, if there are no unsaved changes for a post, the Preview button is effectively a link to post.link. If there are unsaved changes, the autosave is triggered and once its responses' autosave.preview_link becomes accessible, it is used in the redirect (regardless of whether or not the autosave occurred as a full save as described in #7124).

danielbachhuber · 2018-06-06T20:40:48Z

To the latter point, I landed at the conclusion that preview_link only makes sense in the context of autsosaves on consideration of:

This is an interesting idea. I hadn't considered it this way before, but it seems like a reasonable decision to me (particularly because I don't think core's existing implementation of previews is this well-considered).

danielbachhuber

Couple small nits. I also ran into an issue where the preview doesn't reflect the title:

It's not immediately obvious to me why that discrepancy exists.

danielbachhuber · 2018-06-06T20:42:32Z

editor/store/test/reducer.js

@@ -2298,13 +2298,15 @@ describe( 'state', () => {
 						raw: 'The Excerpt',
 					},
 					status: 'draft',
+					preview_link: 'https://wordpress.org/?p=1',


Nit: Should this include &preview=true for clarity?

Nit: Should this include &preview=true for clarity?

Yep, sounds good.

danielbachhuber · 2018-06-06T20:46:48Z

lib/class-wp-rest-autosaves-controller.php

+
+		if ( ! empty( $schema['properties']['preview_link'] ) ) {
+			$response->data['preview_link'] = get_preview_post_link( $post->post_parent, array(
+				'preview_id'    => $post->post_parent,


Is preview_id supposed to be $post->post_parent? This ends up as 0 on a draft post:

Is preview_id supposed to be $post->post_parent? This ends up as 0 on a draft post:

Good call. We might consider using something like wp_is_post_autosave to vary the logic. Though in this context since we assume the $post is the result of either an autosave (get_item) or generated by an autosave intent, maybe just testing its type $post->post_type === 'revision'.

Hmm the -autosave post name suffix checking in wp_is_post_autosave makes me think it might be better to rely on that. Guessing it might be possible for a non-autosave revision to be attached to a post parent?

aduth · 2018-06-07T17:56:55Z

Couple small nits. I also ran into an issue where the preview doesn't reflect the title:

I can reproduce this, and it seems to affect where we're previewing a post we'd already previewed once before in the same session:

Navigate to Posts > Add New
Enter a title
Hit preview
Return to editor tab
Change title
Hit preview

Expected: Preview is shown with updated title
Actual: Preview reflects original title.

The problem is that the second time we preview, we already have a preview_link available because we reset the autosave after the first preview. I think we either need to:

Clear the preview_link before an autosave starts so it isn't considered for the popup window
Consider change detection and invalidate the preview link as soon as the user makes an edit
Force the autosave and interstitial screen if the post is dirty, even if a preview link is already available
- Might be the simplest approach for now. Technically this is wasted for repeatedly hitting "Preview" on a published post, since it remains dirty after an autosave.
- Effectively a revert of 7658b07

aduth · 2018-06-07T18:00:49Z

Another complication: For repeated previews of a draft post, even if I make changes, the preview URL will never change (e.g. ?p=123&preview=true), so it's hard to know that the preview is ready without either (re-)integrating awareness of the save process, or invalidating the preview link at some point (e.g. on edit or pre-autosave)

Was not reliably triggered when redirect occurs by setPreviewWindowLink, possibly because document.open triggered by document.write erased window handlers.

Allows use in handlers to assume options present

Preview link is no longer valid until autosave completes, by which UI can infer availability of preview as being ready to view.

adamsilverstein · 2018-06-08T16:41:40Z

Thanks for working on this @aduth - I'll give it a test and review as soon as possible!

aduth · 2018-06-08T17:02:44Z

editor/store/effects.js

 				// An autosave may be processed by the server as a regular save
 				// when its update is requested by the author and the post was
 				// draft or auto-draft.
 				const isRevision = newPost.id !== post.id;

-				// Thus, the following behaviors occur:


Note that these removed changes were introduced as part of the base branch to which this merges (#7130) so there is effectively no difference between this callback and what's in master at the moment.

aduth · 2018-06-11T15:43:15Z

Going to merge this into the fix/autosave-preview branch (#7130) it has assigned as base, so as to be able to work on these related changes in one place.

aduth · 2018-06-11T15:43:47Z

Continued at #7130

* REST API: Move preview_link to autosaves controller * Post Preview: Redirect to preview by autosave property availability * Preview Button: Use preview link as href if available * Preview Button: Move window bind to after write Was not reliably triggered when redirect occurs by setPreviewWindowLink, possibly because document.open triggered by document.write erased window handlers. * Preview Button: Always trigger autosave when dirty * Preview Button: Consider preview ready by change in value * State: Set default value for savePost options Allows use in handlers to assume options present * Store: Clarify preview link with query parameter * REST API: Set preview link by parent only if autosave * Store: Invalid autosave preview link on save intent Preview link is no longer valid until autosave completes, by which UI can infer availability of preview as being ready to view. * Testing: Add preview E2E tests * Testing: Fix copypasta * Preview: Use correct location property for URL comparison

…7130) * State: Trigger autosave as standard save for draft by current user * Testing: Update E2E tests for expected autosave conditions * Testing: Wait for animation to avoid cursor chasing button * State: Distinguish save on effective autosave Change detection reset for known-to-be-draft, pick from non-effective autosave for resetting post * Testing: Ensure autosave is identified as autosave Passed previously because when autosaving, class is assigned with _both_ `is-saving` and `is-autosaving`. The superset of classes is what what should be expected. * State: Update post in autosave as assumed full save * Preview: Enable published posts preview (#7189) * REST API: Move preview_link to autosaves controller * Post Preview: Redirect to preview by autosave property availability * Preview Button: Use preview link as href if available * Preview Button: Move window bind to after write Was not reliably triggered when redirect occurs by setPreviewWindowLink, possibly because document.open triggered by document.write erased window handlers. * Preview Button: Always trigger autosave when dirty * Preview Button: Consider preview ready by change in value * State: Set default value for savePost options Allows use in handlers to assume options present * Store: Clarify preview link with query parameter * REST API: Set preview link by parent only if autosave * Store: Invalid autosave preview link on save intent Preview link is no longer valid until autosave completes, by which UI can infer availability of preview as being ready to view. * Testing: Add preview E2E tests * Testing: Fix copypasta * Preview: Use correct location property for URL comparison * State: Partially pick saved fields for autosave Must dirty artificially once save completes if there were edits not included in the payload. * Testing: Update published change detection test to use publishPost utility * REST API: Fix code styling (aligned assignment operator) * Autosave: Remove redundant draft transition of reset autosave Now reflected in committed updatePost edit of status to draft in save effect for auto-draft (by current user).

aduth added 3 commits June 6, 2018 14:24

REST API: Move preview_link to autosaves controller

578c345

Post Preview: Redirect to preview by autosave property availability

2134269

Preview Button: Use preview link as href if available

7658b07

aduth requested review from danielbachhuber, azaozz and adamsilverstein June 6, 2018 18:56

danielbachhuber reviewed Jun 6, 2018

View reviewed changes

aduth mentioned this pull request Jun 6, 2018

State: Trigger autosave as standard save for draft by current user #7130

Merged

aduth added 9 commits June 7, 2018 14:34

Preview Button: Move window bind to after write

131853b

Was not reliably triggered when redirect occurs by setPreviewWindowLink, possibly because document.open triggered by document.write erased window handlers.

Preview Button: Always trigger autosave when dirty

ab1415e

Preview Button: Consider preview ready by change in value

46d0dd5

State: Set default value for savePost options

02b29bd

Allows use in handlers to assume options present

Store: Clarify preview link with query parameter

432329d

REST API: Set preview link by parent only if autosave

972d880

Store: Invalid autosave preview link on save intent

734b95f

Preview link is no longer valid until autosave completes, by which UI can infer availability of preview as being ready to view.

Testing: Add preview E2E tests

05f428d

Testing: Fix copypasta

5f379b3

Preview: Use correct location property for URL comparison

8dda4b1

aduth commented Jun 8, 2018

View reviewed changes

aduth merged commit 111fb73 into fix/autosave-preview Jun 11, 2018

aduth deleted the add/publish-preview branch June 11, 2018 15:43

mtias added this to the 3.1 milestone Jun 20, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Preview: Enable published posts preview #7189

Preview: Enable published posts preview #7189

aduth commented Jun 6, 2018 •

edited

danielbachhuber commented Jun 6, 2018

danielbachhuber left a comment

danielbachhuber Jun 6, 2018

aduth Jun 7, 2018

danielbachhuber Jun 6, 2018

aduth Jun 7, 2018

aduth Jun 7, 2018

aduth commented Jun 7, 2018 •

edited

aduth commented Jun 7, 2018

adamsilverstein commented Jun 8, 2018

aduth Jun 8, 2018

aduth commented Jun 11, 2018

aduth commented Jun 11, 2018

Preview: Enable published posts preview #7189

Preview: Enable published posts preview #7189

Conversation

aduth commented Jun 6, 2018 • edited

danielbachhuber commented Jun 6, 2018

danielbachhuber left a comment

Choose a reason for hiding this comment

danielbachhuber Jun 6, 2018

Choose a reason for hiding this comment

aduth Jun 7, 2018

Choose a reason for hiding this comment

danielbachhuber Jun 6, 2018

Choose a reason for hiding this comment

aduth Jun 7, 2018

Choose a reason for hiding this comment

aduth Jun 7, 2018

Choose a reason for hiding this comment

aduth commented Jun 7, 2018 • edited

aduth commented Jun 7, 2018

adamsilverstein commented Jun 8, 2018

aduth Jun 8, 2018

Choose a reason for hiding this comment

aduth commented Jun 11, 2018

aduth commented Jun 11, 2018

aduth commented Jun 6, 2018 •

edited

aduth commented Jun 7, 2018 •

edited