Merge pull request #1803 from WordPress/add/latest-posts-alignment-2

Add alignment for latest posts block
WordPress · Jul 10, 2017 · 08cab89 · 08cab89
2 parents 7779f79 + 293a84f
commit 08cab89
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 10 deletions.
diff --git a/blocks/library/latest-posts/block.scss b/blocks/library/latest-posts/block.scss
@@ -0,0 +1,6 @@
+.wp-block-latest-posts.alignright {
+	margin-left: 2em;
+}
+.wp-block-latest-posts.alignleft {
+	margin-right: 2em;
+}
diff --git a/blocks/library/latest-posts/index.js b/blocks/library/latest-posts/index.js
@@ -10,12 +10,15 @@ 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';
 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;
 const MAX_POSTS = 100;
@@ -32,6 +35,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 +95,7 @@ registerBlockType( 'core/latest-posts', {
 
 		render() {
 			const { latestPosts } = this.state;
+			const { setAttributes } = this.props;
 
 			if ( ! latestPosts.length ) {
 				return (
@@ -98,15 +109,27 @@ registerBlockType( 'core/latest-posts', {
 			}
 
 			const { focus } = this.props;
-			const { displayPostDate } = this.props.attributes;
+			const { displayPostDate, align } = this.props.attributes;
 
 			return [
+				focus && (
+					<BlockControls key="controls">
+						<BlockAlignmentToolbar
+							value={ align }
+							onChange={ ( nextAlign ) => {
+								setAttributes( { align: nextAlign } );
+							} }
+							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' ) }
 							checked={ displayPostDate }
@@ -125,7 +148,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' ) }

diff --git 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;
+	}
 }
diff --git 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 = 'wp-block-latest-posts ' . esc_attr( 'align' . $align );
+
 	$block_content = <<<CONTENT
-<div class="blocks-latest-posts">
+<div class="{$class}">
 	<ul>
 		{$posts_content}
 	</ul>