From c76ad127bf5dbc9b7169275c59788f1b7f3ce91e Mon Sep 17 00:00:00 2001
From: Weston Ruter <weston@xwp.co>
Date: Fri, 7 Jul 2017 19:50:44 -0700
Subject: [PATCH 1/6] Scope styles to .editor-visual-editor__block container

---
 blocks/library/latest-posts/style.scss | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/blocks/library/latest-posts/style.scss b/blocks/library/latest-posts/style.scss
index d6746c6f0d708..44c28ad91456c 100644
--- a/blocks/library/latest-posts/style.scss
+++ b/blocks/library/latest-posts/style.scss
@@ -1,10 +1,13 @@
 
-.wp-block-latest-posts {
-	padding-left: 2.5em;
-}
+.editor-visual-editor__block[data-type="core/latest-posts"] {
+
+	.wp-block-latest-posts {
+		padding-left: 2.5em;
+	}
 
-.wp-block-latest-posts__post-date {
-	display: block;
-	color: $dark-gray-100;
-	font-size: $default-font-size;
+	.wp-block-latest-posts__post-date {
+		display: block;
+		color: $dark-gray-100;
+		font-size: $default-font-size;
+	}
 }

From 32dc7450b7ec58778cbd9cac69173da562c0731f Mon Sep 17 00:00:00 2001
From: Weston Ruter <weston@xwp.co>
Date: Sat, 8 Jul 2017 00:08:51 -0700
Subject: [PATCH 2/6] Add alignment toolbar to Latest Posts block

---
 blocks/library/latest-posts/index.js | 21 ++++++++++++++++++++-
 lib/blocks/latest-posts.php          |  9 ++++++++-
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/blocks/library/latest-posts/index.js b/blocks/library/latest-posts/index.js
index 77976d40a7620..a36a1ef3061ad 100644
--- a/blocks/library/latest-posts/index.js
+++ b/blocks/library/latest-posts/index.js
@@ -16,6 +16,7 @@ import InspectorControls from '../../inspector-controls';
 import TextControl from '../../inspector-controls/text-control';
 import ToggleControl from '../../inspector-controls/toggle-control';
 import BlockDescription from '../../block-description';
+import BlockAlignmentToolbar from '../../block-alignment-toolbar';
 
 const MIN_POSTS = 1;
 const MAX_POSTS = 100;
@@ -32,6 +33,13 @@ registerBlockType( 'core/latest-posts', {
 		displayPostDate: false,
 	},
 
+	getEditWrapperProps( attributes ) {
+		const { align } = attributes;
+		if ( 'left' === align || 'right' === align || 'wide' === align || 'full' === align ) {
+			return { 'data-align': align };
+		}
+	},
+
 	edit: class extends Component {
 		constructor() {
 			super( ...arguments );
@@ -85,6 +93,7 @@ registerBlockType( 'core/latest-posts', {
 
 		render() {
 			const { latestPosts } = this.state;
+			const { setAttributes } = this.props;
 
 			if ( ! latestPosts.length ) {
 				return (
@@ -98,7 +107,7 @@ registerBlockType( 'core/latest-posts', {
 			}
 
 			const { focus } = this.props;
-			const { displayPostDate } = this.props.attributes;
+			const { displayPostDate, align } = this.props.attributes;
 
 			return [
 				focus && (
@@ -107,6 +116,16 @@ registerBlockType( 'core/latest-posts', {
 							<p>{ __( 'Shows a list of your site\'s most recent posts.' ) }</p>
 						</BlockDescription>
 						<h3>{ __( 'Latest Posts Settings' ) }</h3>
+
+						<p>{ __( 'Alignment' ) }</p>
+						<BlockAlignmentToolbar
+							value={ align }
+							onChange={ ( nextAlign ) => {
+								setAttributes( { align: nextAlign } );
+							} }
+							controls={ [ 'left', 'center', 'right', 'wide', 'full' ] }
+						/>
+
 						<ToggleControl
 							label={ __( 'Display post date' ) }
 							checked={ displayPostDate }
diff --git a/lib/blocks/latest-posts.php b/lib/blocks/latest-posts.php
index 8e2238b34dfbf..052806d774bea 100644
--- a/lib/blocks/latest-posts.php
+++ b/lib/blocks/latest-posts.php
@@ -28,6 +28,11 @@ function gutenberg_render_block_core_latest_posts( $attributes ) {
 		}
 	}
 
+	$align = 'center';
+	if ( isset( $attributes['align'] ) && in_array( $attributes['align'], array( 'left', 'right', 'wide', 'full' ), true ) ) {
+		$align = $attributes['align'];
+	}
+
 	$recent_posts = wp_get_recent_posts( array(
 		'numberposts' => $posts_to_show,
 		'post_status' => 'publish',
@@ -43,8 +48,10 @@ function gutenberg_render_block_core_latest_posts( $attributes ) {
 		$posts_content .= "<li><a href='{$post_permalink}'>{$post_title}</a></li>\n";
 	}
 
+	$class = 'blocks-latest-posts ' . esc_attr( 'align' . $align );
+
 	$block_content = <<<CONTENT
-<div class="blocks-latest-posts">
+<div class="{$class}">
 	<ul>
 		{$posts_content}
 	</ul>

From 201c828f7569b43c998b53ea760b6109d5afc31b Mon Sep 17 00:00:00 2001
From: Weston Ruter <weston@xwp.co>
Date: Sat, 8 Jul 2017 00:18:48 -0700
Subject: [PATCH 3/6] Add margins for floated latest posts block on frontend

---
 blocks/library/latest-posts/block.scss | 6 ++++++
 blocks/library/latest-posts/index.js   | 1 +
 2 files changed, 7 insertions(+)
 create mode 100644 blocks/library/latest-posts/block.scss

diff --git a/blocks/library/latest-posts/block.scss b/blocks/library/latest-posts/block.scss
new file mode 100644
index 0000000000000..18c4db7a12612
--- /dev/null
+++ b/blocks/library/latest-posts/block.scss
@@ -0,0 +1,6 @@
+.blocks-latest-posts.alignright {
+	margin-left: 2em;
+}
+.blocks-latest-posts.alignleft {
+	margin-right: 2em;
+}
diff --git a/blocks/library/latest-posts/index.js b/blocks/library/latest-posts/index.js
index a36a1ef3061ad..a52f16c8c42f4 100644
--- a/blocks/library/latest-posts/index.js
+++ b/blocks/library/latest-posts/index.js
@@ -10,6 +10,7 @@ import moment from 'moment';
  * Internal dependencies
  */
 import './style.scss';
+import './block.scss';
 import { registerBlockType } from '../../api';
 import { getLatestPosts } from './data.js';
 import InspectorControls from '../../inspector-controls';

From 089d62d97eb4f47a30fa5d339114e4d59059c717 Mon Sep 17 00:00:00 2001
From: Weston Ruter <weston@xwp.co>
Date: Sat, 8 Jul 2017 08:23:16 -0700
Subject: [PATCH 4/6] Open latest posts block editor preview links in new
 window

---
 blocks/library/latest-posts/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/blocks/library/latest-posts/index.js b/blocks/library/latest-posts/index.js
index a52f16c8c42f4..dcee3d6666896 100644
--- a/blocks/library/latest-posts/index.js
+++ b/blocks/library/latest-posts/index.js
@@ -145,7 +145,7 @@ registerBlockType( 'core/latest-posts', {
 				<ul className={ this.props.className } key="latest-posts">
 					{ latestPosts.map( ( post, i ) =>
 						<li key={ i }>
-							<a href={ post.link }>{ post.title.rendered }</a>
+							<a href={ post.link } target="_blank">{ post.title.rendered }</a>
 							{ displayPostDate && post.date_gmt &&
 								<span className={ `${ this.props.className }__post-date` }>
 									{ moment( post.date_gmt ).local().format( 'MMM DD h:mm A' ) }

From d87fded92e817b6cad1f879daddefa2873b8368d Mon Sep 17 00:00:00 2001
From: Weston Ruter <weston@xwp.co>
Date: Sat, 8 Jul 2017 12:27:40 -0700
Subject: [PATCH 5/6] Use editor convention for block class names on frontend

---
 blocks/library/latest-posts/block.scss | 4 ++--
 lib/blocks/latest-posts.php            | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/blocks/library/latest-posts/block.scss b/blocks/library/latest-posts/block.scss
index 18c4db7a12612..08d970d3f3e8f 100644
--- a/blocks/library/latest-posts/block.scss
+++ b/blocks/library/latest-posts/block.scss
@@ -1,6 +1,6 @@
-.blocks-latest-posts.alignright {
+.wp-block-latest-posts.alignright {
 	margin-left: 2em;
 }
-.blocks-latest-posts.alignleft {
+.wp-block-latest-posts.alignleft {
 	margin-right: 2em;
 }
diff --git a/lib/blocks/latest-posts.php b/lib/blocks/latest-posts.php
index 052806d774bea..67cc036298c3c 100644
--- a/lib/blocks/latest-posts.php
+++ b/lib/blocks/latest-posts.php
@@ -48,7 +48,7 @@ function gutenberg_render_block_core_latest_posts( $attributes ) {
 		$posts_content .= "<li><a href='{$post_permalink}'>{$post_title}</a></li>\n";
 	}
 
-	$class = 'blocks-latest-posts ' . esc_attr( 'align' . $align );
+	$class = 'wp-block-latest-posts ' . esc_attr( 'align' . $align );
 
 	$block_content = <<<CONTENT
 <div class="{$class}">

From 293a84f1582829d2847f179c443d6dfb0cffb261 Mon Sep 17 00:00:00 2001
From: Weston Ruter <weston@xwp.co>
Date: Sat, 8 Jul 2017 12:35:58 -0700
Subject: [PATCH 6/6] Move block alignment toolbar from inspector to block
 controls

---
 blocks/library/latest-posts/index.js | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/blocks/library/latest-posts/index.js b/blocks/library/latest-posts/index.js
index dcee3d6666896..6709df177f1fd 100644
--- a/blocks/library/latest-posts/index.js
+++ b/blocks/library/latest-posts/index.js
@@ -17,6 +17,7 @@ import InspectorControls from '../../inspector-controls';
 import TextControl from '../../inspector-controls/text-control';
 import ToggleControl from '../../inspector-controls/toggle-control';
 import BlockDescription from '../../block-description';
+import BlockControls from '../../block-controls';
 import BlockAlignmentToolbar from '../../block-alignment-toolbar';
 
 const MIN_POSTS = 1;
@@ -112,13 +113,7 @@ registerBlockType( 'core/latest-posts', {
 
 			return [
 				focus && (
-					<InspectorControls key="inspector">
-						<BlockDescription>
-							<p>{ __( 'Shows a list of your site\'s most recent posts.' ) }</p>
-						</BlockDescription>
-						<h3>{ __( 'Latest Posts Settings' ) }</h3>
-
-						<p>{ __( 'Alignment' ) }</p>
+					<BlockControls key="controls">
 						<BlockAlignmentToolbar
 							value={ align }
 							onChange={ ( nextAlign ) => {
@@ -126,6 +121,14 @@ registerBlockType( 'core/latest-posts', {
 							} }
 							controls={ [ 'left', 'center', 'right', 'wide', 'full' ] }
 						/>
+					</BlockControls>
+				),
+				focus && (
+					<InspectorControls key="inspector">
+						<BlockDescription>
+							<p>{ __( 'Shows a list of your site\'s most recent posts.' ) }</p>
+						</BlockDescription>
+						<h3>{ __( 'Latest Posts Settings' ) }</h3>
 
 						<ToggleControl
 							label={ __( 'Display post date' ) }