Gutenberg Integration: load editor with a new post

client/gutenberg/editor/controller.js

@@ -3,11 +3,13 @@
  * External dependencies
  */
 import React from 'react';
+import { uniqueId } from 'lodash';
 
 /**
  * Internal dependencies
  */
 import GutenbergEditor from 'gutenberg/editor/main';
+import { getSelectedSiteId } from 'state/ui/selectors';
 
 function determinePostType( context ) {
 	if ( context.path.startsWith( '/gutenberg/post/' ) ) {
@@ -20,9 +22,25 @@ function determinePostType( context ) {
 	return context.params.customPostType;
 }
 
+//duplicated from post-editor/controller.js. We should import it from there instead
+function getPostID( context ) {
+	if ( ! context.params.post || 'new' === context.params.post ) {
+		return null;
+	}
+
+	// both post and site are in the path
+	return parseInt( context.params.post, 10 );
+}
+
 export const post = ( context, next ) => {
+	const state = context.store.getState();
+
+	const siteId = getSelectedSiteId( state );
+	const postId = getPostID( context );
+	const uniqueDraftKey = uniqueId( 'gutenberg-draft-' );
 	const postType = determinePostType( context );
+
 	//reserved space for adding the post to context see post-editor/controller.js
-	context.primary = <GutenbergEditor postType={ postType } />;
+	context.primary = <GutenbergEditor { ...{ siteId, postId, postType, uniqueDraftKey } } />;
 	next();
 };

client/gutenberg/editor/main.jsx

@@ -1,10 +1,11 @@
 /** @format */
+
 /**
  * External dependencies
  */
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { noop } from 'lodash';
+import { get, noop } from 'lodash';
 import { dispatch } from '@wordpress/data';
 import '@wordpress/core-data'; // Initializes core data store
 import { registerCoreBlocks } from '@wordpress/block-library';
@@ -15,27 +16,27 @@ import { registerCoreBlocks } from '@wordpress/block-library';
 import Editor from './edit-post/editor.js';
 import EditorPostTypeUnsupported from 'post-editor/editor-post-type-unsupported';
 import QueryPostTypes from 'components/data/query-post-types';
-import { getSelectedSiteId } from 'state/ui/selectors';
+import { requestGutenbergDraftPost as createAutoDraft, requestSitePost } from 'state/data-getters';
+import { getHttpData } from 'state/data-layer/http-data';
 import { getSiteSlug } from 'state/sites/selectors';
 import { WithAPIMiddleware } from './api-middleware/utils';
 
 const editorSettings = {};
 
-const mockPost = {
-	type: 'post',
-	content: { raw: 'test content' },
-};
-
 class GutenbergEditor extends Component {
 	componentDidMount() {
 		registerCoreBlocks();
 		// Prevent Guided tour from showing when editor loads.
 		dispatch( 'core/nux' ).disableTips();
+
+		const { siteId, postId, uniqueDraftKey } = this.props;
+		if ( ! postId ) {
+			createAutoDraft( siteId, uniqueDraftKey );
+		}
 	}
 
 	render() {
-		const { postType, siteId, siteSlug } = this.props;
-		const post = { ...mockPost, type: postType };
+		const { postType, siteId, siteSlug, post } = this.props;
 
 		return (
 			<WithAPIMiddleware siteSlug={ siteSlug }>
@@ -52,12 +53,22 @@ class GutenbergEditor extends Component {
 	}
 }
 
-const mapStateToProps = state => {
-	const siteId = getSelectedSiteId( state );
+const getPost = ( siteId, postId ) => {
+	if ( siteId && postId ) {
+		const requestSitePostData = requestSitePost( siteId, postId );
+		return get( requestSitePostData, 'data', null );
+	}
+
+	return null;
+};
+
+const mapStateToProps = ( state, { siteId, postId, uniqueDraftKey } ) => {
+	const draftPostId = get( getHttpData( uniqueDraftKey ), 'data.ID', null );
+	const post = getPost( siteId, postId || draftPostId );
 
 	return {
-		siteId,
 		siteSlug: getSiteSlug( state, siteId ),
+		post,
 	};
 };
 

client/state/data-getters/index.js

@@ -1,4 +1,5 @@
 /** @format */
+
 /**
  * Internal dependencies
  */
@@ -100,3 +101,32 @@ export const requestSiteAlerts = siteId => {
 		}
 	);
 };
+
+export const requestGutenbergDraftPost = ( siteId, draftId ) =>
+	requestHttpData(
+		draftId,
+		http(
+			{
+				path: `/sites/${ siteId }/p2/post`,
+				method: 'GET', //this should be a POST, remember
+				apiNamespace: 'wpcom/v2',
+				body: {}, //this is for a POST verb.
+			},
+			{}
+		),
+		{ formApi: () => data => [ [ draftId, data ] ] }
+	);
+
+export const requestSitePost = ( siteId, postId ) =>
+	requestHttpData(
+		`gutenberg-site-${ siteId }-post-${ postId }`,
+		http(
+			{
+				path: `/sites/${ siteId }/posts/${ postId }?context=edit`,
+				method: 'GET',
+				apiNamespace: 'wp/v2',
+			},
+			{}
+		),
+		{ fromApi: () => post => [ [ `gutenberg-site-${ siteId }-post-${ postId }`, post ] ] }
+	);