Chrome: Adding the Revisions Panel

editor/effects.js

@@ -2,12 +2,12 @@
  * External dependencies
  */
 import { get } from 'lodash';
-import { parse, stringify } from 'querystring';
 
 /**
- * WordPress dependencies
+ * Internal dependencies
  */
 import { getBlockSettings, switchToBlockType } from 'blocks';
+import { getGutenbergURL, getWPAdminURL } from './utils/url';
 import { __ } from 'i18n';
 
 /**
@@ -26,6 +26,7 @@ export default {
 			dispatch( {
 				type: 'REQUEST_POST_UPDATE_SUCCESS',
 				post: newPost,
+				isNew,
 			} );
 		} ).fail( ( err ) => {
 			dispatch( {
@@ -40,15 +41,11 @@ export default {
 		} );
 	},
 	REQUEST_POST_UPDATE_SUCCESS( action ) {
-		const { post } = action;
-		const [ baseUrl, query ] = window.location.href.split( '?' );
-		const qs = parse( query || '' );
-		if ( qs.post_id === post.id ) {
+		const { post, isNew } = action;
+		if ( ! isNew ) {
 			return;
 		}
-
-		const newUrl = baseUrl + '?' + stringify( {
-			...qs,
+		const newUrl = getGutenbergURL( {
 			post_id: post.id,
 		} );
 		window.history.replaceState( {}, 'Post ' + post.id, newUrl );
@@ -65,7 +62,7 @@ export default {
 	},
 	TRASH_POST_SUCCESS( action ) {
 		const { postId, postType } = action;
-		window.location.href = 'edit.php?' + stringify( {
+		window.location.href = getWPAdminURL( 'edit.php', {
 			trashed: 1,
 			post_type: postType,
 			ids: postId,

editor/sidebar/last-revision/index.js

@@ -0,0 +1,110 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from 'element';
+import { sprintf, _n } from 'i18n';
+import IconButton from 'components/icon-button';
+import PanelBody from 'components/panel/body';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import { getCurrentPost, isSavingPost } from '../../selectors';
+import { getWPAdminURL } from '../../utils/url';
+
+class LastRevision extends Component {
+	constructor() {
+		super( ...arguments );
+		this.state = {
+			revisions: [],
+			loading: false,
+		};
+	}
+
+	componentDidMount() {
+		this.fetchRevisions();
+	}
+
+	componentDidUpdate( prevProps ) {
+		if ( prevProps.postId !== this.props.postId ) {
+			this.setState( { revisions: [] } );
+		}
+
+		if (
+			( prevProps.postId !== this.props.postId ) ||
+			( prevProps.isSaving && ! this.props.isSaving )
+		) {
+			this.fetchRevisions();
+		}
+	}
+
+	componentWillUnmount() {
+		if ( this.fetchMediaRequest ) {
+			this.fetchRevisionsRequest.abort();
+		}
+	}
+
+	fetchRevisions() {
+		if ( ! this.props.postId ) {
+			this.setState( { loading: false } );
+			return;
+		}
+		this.setState( { loading: true } );
+		const postIdToLoad = this.props.postId;
+		this.fetchRevisionsRequest = new wp.api.collections.PostRevisions( {}, { parent: postIdToLoad } ).fetch()
+			.done( ( revisions ) => {
+				if ( this.props.postId !== postIdToLoad ) {
+					return;
+				}
+				this.setState( {
+					loading: false,
+					revisions,
+				} );
+			} )
+			.fail( () => {
+				if ( this.props.postId !== postIdToLoad ) {
+					return;
+				}
+				this.setState( {
+					loading: false,
+				} );
+			} );
+	}
+
+	render() {
+		const { revisions } = this.state;
+		const lastRevision = revisions.length ? revisions[ 0 ] : null;
+
+		return (
+			<PanelBody>
+				<IconButton
+					href={ lastRevision ? getWPAdminURL( 'revision.php', { revision: lastRevision.id } ) : undefined }
+					className="editor-last-revision__title"
+					icon="backup"
+				>
+					{
+						sprintf(
+							_n( '%d Revision', '%d Revisions', revisions.length ),
+							revisions.length
+						)
+					}
+				</IconButton>
+			</PanelBody>
+		);
+	}
+}
+
+export default connect(
+	( state ) => {
+		return {
+			postId: getCurrentPost( state ).id,
+			isSaving: isSavingPost( state ),
+		};
+	}
+)( LastRevision );

editor/sidebar/last-revision/style.scss

@@ -0,0 +1,9 @@
+.editor-last-revision__title {
+	padding: 0;
+	width: 100%;
+	font-weight: 600;
+
+	.dashicon {
+		margin-right: 5px;
+	}
+}

editor/sidebar/post-settings/index.js

@@ -17,6 +17,7 @@ import PostStatus from '../post-status';
 import PostExcerpt from '../post-excerpt';
 import FeaturedImage from '../featured-image';
 import DiscussionPanel from '../discussion-panel';
+import LastRevision from '../last-revision';
 
 const PostSettings = ( { toggleSidebar } ) => {
 	return (
@@ -31,6 +32,7 @@ const PostSettings = ( { toggleSidebar } ) => {
 				</div>
 			</PanelHeader>
 			<PostStatus />
+			<LastRevision />
 			<FeaturedImage />
 			<PostExcerpt />
 			<DiscussionPanel />

editor/utils/url.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { parse, format } from 'url';
+import { parse as parseQueryString, stringify } from 'querystring';
 
 /**
  * Appends arguments to the query string of the url
@@ -18,3 +19,32 @@ export function addQueryArgs( url, args ) {
 
 	return format( { ...parsedUrl, query } );
 }
+
+/**
+ * Returns the Gutenberg page URL with extra query strings
+ *
+ * @param  {Object} query  Query Args
+ *
+ * @return {String}        URL
+ */
+export function getGutenbergURL( query = {} ) {
+	const [ baseUrl, currentQuery ] = window.location.href.split( '?' );
+	const qs = parseQueryString( currentQuery || '' );
+	return baseUrl + '?' + stringify( {
+		...qs,
+		...query,
+	} );
+}
+
+/**
+ * Returns the url of a WPAdmin Page
+ *
+ * @param  {String} page   page to navigate to
+ * @param  {Object} query  Query Args
+ *
+ * @return {String}        URL
+ */
+export function getWPAdminURL( page, query ) {
+	const querystring = query ? '?' + stringify( query ) : '';
+	return page + querystring;
+}