+ { /* GUTENBERG-JS */}
+
+ );
+
+ markup += `
+
+ `;
+
+ targetDocument.write(markup);
+ targetDocument.close();
+}
+
export class PostPreviewButton extends Component {
constructor (props) {
super(props);
@@ -54,119 +124,64 @@ export class PostPreviewButton extends Component {
return `wp-preview-${postId}`;
}
- /**
- * Opens a popup window, navigating user to a preview of the current post.
- * Triggers autosave if post is autosaveable.
- */
- openPreviewWindow () {
- const { isAutosaveable, previewLink, currentPostLink } = this.props;
+ openPreviewWindow (event) {
+ // Our Preview button has its 'href' and 'target' set correctly for a11y
+ // purposes. Unfortunately, though, we can't rely on the default 'click'
+ // handler since sometimes it incorrectly opens a new tab instead of reusing
+ // the existing one.
+ // https://github.com/WordPress/gutenberg/pull/8330
+ event.preventDefault();
- // Open a popup, BUT: Set it to a blank page until save completes. This
- // is necessary because popups can only be opened in response to user
- // interaction (click), but we must still wait for the post to save.
+ // Open up a Preview tab if needed. This is where we'll show the preview.
if (! this.previewWindow || this.previewWindow.closed) {
this.previewWindow = window.open('', this.getWindowTarget());
}
- // Ask the browser to bring the preview tab to the front
- // This can work or not depending on the browser's user preferences
+ // Focus the Preview tab. This might not do anything, depending on the browser's
+ // and user's preferences.
// https://html.spec.whatwg.org/multipage/interaction.html#dom-window-focus
this.previewWindow.focus();
- // If there are no changes to autosave, we cannot perform the save, but
- // if there is an existing preview link (e.g. previous published post
- // autosave), it should be reused as the popup destination.
- if (! isAutosaveable && ! previewLink && currentPostLink) {
- this.setPreviewWindowLink(currentPostLink);
- return;
- }
-
- if (! isAutosaveable) {
- this.setPreviewWindowLink(previewLink);
+ // If we don't need to autosave the post before previewing, then we simply
+ // load the Preview URL in the Preview tab.
+ if (! this.props.isAutosaveable) {
+ this.setPreviewWindowLink(event.target.href);
return;
}
+ // Request an autosave. This happens asynchronously and causes the component
+ // to update when finished.
this.props.autosave();
- let markup = renderToString(
- { __('Generating preview…') }
+
- { /* GUTENBERG-JS */}
-
- );
-
- markup += `
- `;
-
- this.previewWindow.document.write(markup);
- this.previewWindow.document.close();
+ // Display a 'Generating preview' message in the Preview tab while we wait for the
+ // autosave to finish.
+ writeInterstitialMessage(this.previewWindow.document);
}
render () {
- const { isSaveable } = this.props;
+ const { previewLink, currentPostLink, isSaveable } = this.props;
+
+ // Link to the `?preview=true` URL if we have it, since this lets us see
+ // changes that were autosaved since the post was last published. Otherwise,
+ // just link to the post's URL.
+ const href = previewLink || currentPostLink;
return (
{ __('Generating preview…') }
-