Latest Posts: add grid option and improve front-end rendering (#1992)

* LatestPosts: add toolbar options for grid and list layouts.

* Apply grid styles and move date to block scss.

* Render the date (if present) and grid class on the front-end.

* Use smaller font on the front-end as well.

* Escape output, use time element, use yoda condition

* Fix handling of postsToShow in frontend rendering since JSON block attrs added camelCasing

* Fix latest-posts block tests by updating fixtures with layout prop

* Use untitled as fallback title when missing in listing latest-posts

Fixes #1990

* Removing posts to display should be instant.

* Use F j, Y date format.

It would be good to use _wpDateSettings.formats.date at some point.

blocks/library/latest-posts/block.scss

@@ -1,6 +1,26 @@
-.wp-block-latest-posts.alignright {
-	margin-left: 2em;
+.wp-block-latest-posts {
+	&.alignleft {
+		margin-right: 2em;
+	}
+	&.alignright {
+		margin-left: 2em;
+	}
+	&.is-grid {
+		display: flex;
+		flex-wrap: wrap;
+		padding: 0;
+		list-style: none;
+
+		li {
+			flex-grow: 1;
+			margin: 0 16px 16px 0;
+		}
+	}
 }
-.wp-block-latest-posts.alignleft {
-	margin-right: 2em;
+
+.wp-block-latest-posts__post-date {
+	display: block;
+	color: $dark-gray-100;
+	font-size: $default-font-size;
 }
+

blocks/library/latest-posts/index.js

@@ -2,9 +2,10 @@
  * WordPress dependencies
  */
 import { Component } from 'element';
-import { Placeholder, Spinner } from 'components';
+import { Placeholder, Toolbar, Spinner } from 'components';
 import { __ } from 'i18n';
 import moment from 'moment';
+import classnames from 'classnames';
 
 /**
  * Internal dependencies
@@ -33,6 +34,7 @@ registerBlockType( 'core/latest-posts', {
 	defaultAttributes: {
 		postsToShow: 5,
 		displayPostDate: false,
+		layout: 'list',
 	},
 
 	getEditWrapperProps( attributes ) {
@@ -89,7 +91,6 @@ registerBlockType( 'core/latest-posts', {
 
 		changePostsToShow( postsToShow ) {
 			const { setAttributes } = this.props;
-
 			setAttributes( { postsToShow: parseInt( postsToShow, 10 ) || 0 } );
 		}
 
@@ -108,8 +109,28 @@ registerBlockType( 'core/latest-posts', {
 				);
 			}
 
+			// Removing posts from display should be instant.
+			const postsDifference = latestPosts.length - this.props.attributes.postsToShow;
+			if ( postsDifference > 0 ) {
+				latestPosts.splice( this.props.attributes.postsToShow, postsDifference );
+			}
+
 			const { focus } = this.props;
-			const { displayPostDate, align } = this.props.attributes;
+			const { displayPostDate, align, layout } = this.props.attributes;
+			const layoutControls = [
+				{
+					icon: 'list-view',
+					title: __( 'List View' ),
+					onClick: () => setAttributes( { layout: 'list' } ),
+					isActive: layout === 'list',
+				},
+				{
+					icon: 'grid-view',
+					title: __( 'Grid View' ),
+					onClick: () => setAttributes( { layout: 'grid' } ),
+					isActive: layout === 'grid',
+				},
+			];
 
 			return [
 				focus && (
@@ -121,6 +142,7 @@ registerBlockType( 'core/latest-posts', {
 							} }
 							controls={ [ 'left', 'center', 'right', 'wide', 'full' ] }
 						/>
+						<Toolbar controls={ layoutControls } />
 					</BlockControls>
 				),
 				focus && (
@@ -145,14 +167,19 @@ registerBlockType( 'core/latest-posts', {
 						/>
 					</InspectorControls>
 				),
-				<ul className={ this.props.className } key="latest-posts">
+				<ul
+					className={ classnames( this.props.className, {
+						'is-grid': layout === 'grid',
+					} ) }
+					key="latest-posts"
+				>
 					{ latestPosts.map( ( post, i ) =>
 						<li key={ i }>
-							<a href={ post.link } target="_blank">{ post.title.rendered }</a>
+							<a href={ post.link } target="_blank">{ post.title.rendered.trim() || __( '(Untitled)' ) }</a>
 							{ displayPostDate && post.date_gmt &&
-								<span className={ `${ this.props.className }__post-date` }>
-									{ moment( post.date_gmt ).local().format( 'MMM DD h:mm A' ) }
-								</span>
+								<time dateTime={ moment( post.date_gmt ).utc().format() } className={ `${ this.props.className }__post-date` }>
+									{ moment( post.date_gmt ).local().format( 'MMMM DD, Y' ) }
+								</time>
 							}
 						</li>
 					) }

blocks/library/latest-posts/style.scss

@@ -3,11 +3,8 @@
 
 	.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;
+		&.is-grid {
+			padding-left: 0;
+		}
 	}
 }

blocks/test/fixtures/core__latest-posts.json

@@ -4,6 +4,7 @@
         "name": "core/latest-posts",
         "attributes": {
             "postsToShow": 5,
+            "layout": "list",
             "displayPostDate": false
         }
     }

blocks/test/fixtures/core__latest-posts.serialized.html

@@ -1 +1 @@
-<!-- wp:core/latest-posts {"postsToShow":5,"displayPostDate":false} /-->
+<!-- wp:core/latest-posts {"postsToShow":5,"displayPostDate":false,"layout":"list"} /-->

lib/blocks/latest-posts.php

@@ -15,16 +15,22 @@
 function gutenberg_render_block_core_latest_posts( $attributes ) {
 	$posts_to_show = 5;
 
-	if ( array_key_exists( 'poststoshow', $attributes ) ) {
+	$posts_to_show_attr = null;
+	if ( array_key_exists( 'postsToShow', $attributes ) ) {
+		$posts_to_show_attr = $attributes['postsToShow'];
+	} elseif ( array_key_exists( 'poststoshow', $attributes ) ) {
 		$posts_to_show_attr = $attributes['poststoshow'];
+	}
+	if ( null !== $posts_to_show_attr ) {
+		$posts_to_show_attr = $attributes['postsToShow'];
 
 		// Basic attribute validation.
 		if (
 			is_numeric( $posts_to_show_attr ) &&
 			$posts_to_show_attr > 0 &&
 			$posts_to_show_attr < 100
 		) {
-			$posts_to_show = $attributes['poststoshow'];
+			$posts_to_show = intval( $posts_to_show_attr );
 		}
 	}
 
@@ -42,21 +48,37 @@ function gutenberg_render_block_core_latest_posts( $attributes ) {
 
 	foreach ( $recent_posts as $post ) {
 		$post_id = $post['ID'];
-		$post_permalink = get_permalink( $post_id );
-		$post_title = get_the_title( $post_id );
 
-		$posts_content .= "<li><a href='{$post_permalink}'>{$post_title}</a></li>\n";
+		$title = get_the_title( $post_id );
+		if ( ! $title ) {
+			$title = __( '(Untitled)', 'gutenberg' );
+		}
+		$posts_content .= sprintf(
+			'<li><a href="%1$s">%2$s</a>',
+			esc_url( get_permalink( $post_id ) ),
+			esc_html( $title )
+		);
+
+		if ( $attributes['displayPostDate'] ) {
+			$posts_content .= sprintf(
+				'<time datetime="%1$s" class="wp-block-latest-posts__post-date">%2$s</time>',
+				esc_attr( get_the_date( 'c', $post_id ) ),
+				esc_html( get_the_date( '', $post_id ) )
+			);
+		}
+
+		$posts_content .= "</li>\n";
 	}
 
 	$class = 'wp-block-latest-posts ' . esc_attr( 'align' . $align );
+	if ( 'grid' === $attributes['layout'] ) {
+		$class .= ' is-grid';
+	}
 
 	$block_content = <<<CONTENT
-<div class="{$class}">
-	<ul>
-		{$posts_content}
-	</ul>
-</div>
-
+<ul class="{$class}">
+	{$posts_content}
+</ul>
 CONTENT;
 
 	return $block_content;