From a55305602a8d99acb32834f3bb8958220e94c390 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 26 May 2017 11:25:51 +0100 Subject: [PATCH] Chrome: Adding the Revisions Panel --- editor/effects.js | 17 ++-- editor/sidebar/last-revision/index.js | 110 ++++++++++++++++++++++++ editor/sidebar/last-revision/style.scss | 9 ++ editor/sidebar/post-settings/index.js | 2 + editor/utils/url.js | 30 +++++++ 5 files changed, 158 insertions(+), 10 deletions(-) create mode 100644 editor/sidebar/last-revision/index.js create mode 100644 editor/sidebar/last-revision/style.scss diff --git a/editor/effects.js b/editor/effects.js index 61e51c0d31f04..0cd1ffa28fd8f 100644 --- a/editor/effects.js +++ b/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, diff --git a/editor/sidebar/last-revision/index.js b/editor/sidebar/last-revision/index.js new file mode 100644 index 0000000000000..005e5b15684b6 --- /dev/null +++ b/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 ( + + + { + sprintf( + _n( '%d Revision', '%d Revisions', revisions.length ), + revisions.length + ) + } + + + ); + } +} + +export default connect( + ( state ) => { + return { + postId: getCurrentPost( state ).id, + isSaving: isSavingPost( state ), + }; + } +)( LastRevision ); diff --git a/editor/sidebar/last-revision/style.scss b/editor/sidebar/last-revision/style.scss new file mode 100644 index 0000000000000..f033403d216d9 --- /dev/null +++ b/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; + } +} diff --git a/editor/sidebar/post-settings/index.js b/editor/sidebar/post-settings/index.js index b3032e07e7d99..1192e7e74f235 100644 --- a/editor/sidebar/post-settings/index.js +++ b/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 } ) => { + diff --git a/editor/utils/url.js b/editor/utils/url.js index d806ea2c552de..2ac20c4966872 100644 --- a/editor/utils/url.js +++ b/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; +}