Update Picard so that it uses v2 of WP-API

README.md

@@ -8,11 +8,11 @@ It means, that instead of loading new page every time you click a link, it uses
 ## Installation
 
 ### 1. Working WordPress installation
-First, prepare a proper WordPress environment:
+Ensure you have a proper WordPress development environment for working with the REST API. You will need:
 
-* You will obviously need a working *WordPress* installation,
-* You will also need *WP REST API*. It is a plugin (with plans to incorporate into the WordPress core) that creates REST API to be used by the theme. Plugin is currently **NOT** in plugins repository, you have to upload the files manually. Install and activate the [WP REST API](https://github.com/WP-API/WP-API/tree/master) plugin (make sure that you are using the `master` branch – the default is currently develop),
-* Set your permlink structure to `/%year%/%monthnum%/%day%/%postname%/`.
+* a working WordPress <a href="https://codex.wordpress.org/Installing_WordPress">installation</a>
+* the <a href="https://wordpress.org/plugins/rest-api/">REST API version 2 plugin</a> from the WordPress.org plugin repository, installed and activated
+* your <a href="https://codex.wordpress.org/Settings_Permalinks_Screen">permalink</a> structure set to `/%year%/%monthnum%/%day%/%postname%/`
 
 ### 2. Theme building (for _team_ building go to your local meetup)
 Unlike other themes, this one uses a build process. JavaScript is an interpreted language, but we need to take certain steps (like transpiling React JSX syntax or SASS CSS syntax) to take the files from development phase to production. You will need the following tools:

components/content/loop/comments/comment-form/comment-form.jsx

@@ -16,7 +16,7 @@ var commentForm = React.createClass({
 		if ( !text || !author ) {
 			return;
 		}
-		this.props.onCommentSubmit({comment_author: author, comment_author_email: emailAddress, comment_author_url: website, content: text });
+		this.props.onCommentSubmit({author_name: author, author_email: emailAddress, author_url: website, content: text });
 		this.refs.author.getDOMNode().value = '';
 		this.refs.emailAddress.getDOMNode().value = '';
 		this.refs.website.getDOMNode().value = '';
@@ -48,4 +48,4 @@ var commentForm = React.createClass({
 
 });
 
-module.exports = commentForm;
+module.exports = commentForm;

components/content/loop/comments/comment-list/comment/comment.jsx

@@ -23,16 +23,16 @@ var Comment = React.createClass({
 				<article id={"div-comment-" + comment.ID} className="comment-body">
 					<footer className="comment-meta">
 						<div className="comment-author vcard">
-							<img src={author.avatar} className="avatar avatar-56" height="56" width="56" />
+							<img src={comment.author_avatar_urls[48]} className="avatar avatar-56" height="56" width="56" />
 							<b className="fn">
-								<a href={author.URL} rel="external nofollow" className="url">{author.name}</a>
+								<a href={comment.author_url} rel="external nofollow" className="url">{comment.author_name}</a>
 							</b>
 						</div>
 						<div className="comment-metadata">
 							<time dateTime={d}>{formattedDate + " " + formattedTime}</time>
 						</div>
 					</footer>
-					<div className="comment-content" dangerouslySetInnerHTML={{__html: comment.content}} />
+					<div className="comment-content" dangerouslySetInnerHTML={{__html: comment.content.rendered}} />
 					<div className="reply">
 						<a className="comment-reply-link">Reply</a>
 					</div>
@@ -43,4 +43,4 @@ var Comment = React.createClass({
 
 });
 
-module.exports = Comment;
+module.exports = Comment;

components/content/loop/comments/comments.jsx

@@ -16,7 +16,7 @@ var CommentList = require( './comment-list/comment-list.jsx' ),
 var Comments = React.createClass({
 
 	loadCommentsFromServer: function() {
-		var repliesLink = '/wp-json/posts/' + this.props.postID + '/comments/';
+		var repliesLink = '/wp-json/wp/v2/comments?post=' + this.props.postID;
 
 		var self = this;
 
@@ -34,7 +34,7 @@ var Comments = React.createClass({
 
 		var newComment,
 			self = this,
-			url = '/wp-json/picard/comments';
+				url = '/wp-json/wp/v2/comments?post=' + this.props.postID;
 		request
 			.post( url )
 			.type( 'form' )
@@ -44,7 +44,7 @@ var Comments = React.createClass({
 					newComment = JSON.parse( res.text );
 					self.setState( { data: self.state.data.concat( [ newComment ] ) } );
 				} else {
-					console.error( '/wp-json/picard/comments', err.toString() );
+					console.error( '/wp-json/wp/v2/comments?post=' + self.props.postID, err.toString() );
 				}
 			});
 
@@ -57,7 +57,7 @@ var Comments = React.createClass({
 	componentDidMount: function() {
 		this.loadCommentsFromServer();
 	},
-	
+
 	render: function() {
 		return (
 			<div id="comments" className="comments-area">
@@ -70,4 +70,4 @@ var Comments = React.createClass({
 
 });
 
-module.exports = Comments;
+module.exports = Comments;

components/content/loop/hentry/entry-content/entry-content.jsx

@@ -10,10 +10,10 @@ var EntryContent = React.createClass({
 
 	render: function() {
 		return (
-			<div className="entry-content" dangerouslySetInnerHTML={{__html: this.props.content}} />
+			<div className="entry-content" dangerouslySetInnerHTML={{__html: this.props.content.rendered}} />
 		);
 	}
 
 });
 
-module.exports = EntryContent;
+module.exports = EntryContent;

components/content/loop/hentry/hentry.jsx

@@ -89,4 +89,4 @@ Hentry = React.createClass({
 	}
 });
 
-module.exports = Hentry;
+module.exports = Hentry;

components/content/loop/loop.jsx

@@ -28,7 +28,7 @@ Loop = React.createClass({
 
 		var postNodes = this.props.data.map( function ( post ) {
 			return (
-				<Hentry key={post.ID} id={post.ID} post_class={post.post_class} link={post.link} title={post.title} date={post.date} content={post.content} featured_image={ post.featured_image } context={ context } showExtra={ showExtra } />
+				<Hentry key={post.id} id={post.id} post_class={post.post_class} link={post.link} title={post.title} date={post.date} content={post.content} featured_image={ post.featured_image } context={ context } showExtra={ showExtra } />
 			);
 		});
 
@@ -51,4 +51,4 @@ Loop = React.createClass({
 	}
 });
 
-module.exports = Loop;
+module.exports = Loop;

components/router/router.jsx

@@ -19,7 +19,7 @@ var Router = React.createClass({
 		page( '/', function ( ctx ) {
 			var data,
 				slug = ctx.params.slug,
-				url = "/wp-json/posts";
+					url = "/wp-json/wp/v2/posts";
 			request
 				.get( url )
 				.end( function( err, res ) {
@@ -31,7 +31,7 @@ var Router = React.createClass({
 		page( '/:year/:month/:day/:slug', function ( ctx ) {
 			var data,
 				slug = ctx.params.slug,
-				url = "/wp-json/posts/?filter[name]=" + slug;
+					url = "/wp-json/wp/v2/posts/?filter[name]=" + slug;
 			request
 				.get( url )
 				.end( function( err, res ) {
@@ -56,7 +56,7 @@ var Router = React.createClass({
 					slug = slug.substr(0, slug.length - 1);
 				}
 				var part = slug.substring(slug.lastIndexOf('/') + 1);
-				var url = "/wp-json/posts/?type[]=page&filter[name]=" + part;
+				var url = "/wp-json/wp/v2/pages/?filter[name]=" + part;
 				request
 					.get( url )
 					.end( function( err, res ) {
@@ -82,4 +82,4 @@ var Router = React.createClass({
 
 });
 
-module.exports = Router;
+module.exports = Router;

functions.php

@@ -151,41 +151,3 @@ function picard_get_json( $_post ) {
 }
 
 add_filter( 'json_prepare_post', 'picard_get_json' );
-
-function picard_api_init() {
-	global $picard_api_comments;
-
-	$picard_api_comments = new Picard_API_Comments();
-	add_filter( 'json_endpoints', array( $picard_api_comments, 'register_routes' ) );
-}
-add_action( 'wp_json_server_before_serve', 'picard_api_init' );
-
-class Picard_API_Comments extends WP_JSON_Comments {
-	public function register_routes( $routes ) {
-		$routes['/picard/comments'] = array(
-			array( array( $this, 'new_post' ), WP_JSON_Server::CREATABLE ),
-		);
-
-		return $routes;
-	}
-
-	public function new_post() {
-
-		$commentdata = array(
-			'comment_post_ID'      => $_POST['comment_post_ID'],
-			'comment_author'       => $_POST['comment_author'],
-			'comment_author_email' => $_POST['comment_author_email'],
-			'comment_author_url'   => $_POST['comment_author_url'],
-			'comment_content'      => $_POST['content'],
-			'comment_author_IP'    => $_SERVER['REMOTE_ADDR'],
-			'comment_type'         => '',
-		);
-		$comment_id = wp_new_comment( $commentdata );
-
-		$new_comment = get_comment( $comment_id );
-
-		$prepared_comment = $this->prepare_comment( $new_comment );
-
-		return ( $comment_id ) ? $prepared_comment : array();
-	}
-}