Latest Post Block (Post Content Support) iteration (#14627)

* Ran npm run test-e2e -- -u * Revert "Ran npm run test-e2e -- -u" This reverts commit 98e9b739b6a1aff6d7357dfef9858959da391ad1. * Rename postsToShow to postCount * Rebased into master branch * Remove redundant calls to updateAttribute and make changes in place under onChange * Fix grid view CSS style error * Fixed editor 55 words error for post content case * Removed HTML tags from excerpt and only displaying text * Changed constant name temp to excerptElement
WordPress · May 2, 2019 · d88977b · d88977b
1 parent 8f0cb51
commit d88977b
Show file tree

Hide file tree

Showing 3 changed files with 136 additions and 39 deletions.
diff --git a/packages/block-library/src/latest-posts/edit.js b/packages/block-library/src/latest-posts/edit.js
@@ -7,11 +7,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import {
-	Component,
-	Fragment,
-	RawHTML,
-} from '@wordpress/element';
+import { Component, Fragment, RawHTML } from '@wordpress/element';
 import {
 	PanelBody,
 	Placeholder,
@@ -20,6 +16,7 @@ import {
 	Spinner,
 	ToggleControl,
 	Toolbar,
+	RadioControl,
 } from '@wordpress/components';
 import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
@@ -45,7 +42,6 @@ class LatestPostsEdit extends Component {
 		this.state = {
 			categoriesList: [],
 		};
-		this.toggleDisplayPostDate = this.toggleDisplayPostDate.bind( this );
 	}
 
 	componentDidMount() {
@@ -71,35 +67,59 @@ class LatestPostsEdit extends Component {
 		this.isStillMounted = false;
 	}
 
-	toggleDisplayPostDate() {
-		const { displayPostDate } = this.props.attributes;
-		const { setAttributes } = this.props;
-
-		setAttributes( { displayPostDate: ! displayPostDate } );
-	}
-
 	render() {
 		const { attributes, setAttributes, latestPosts } = this.props;
 		const { categoriesList } = this.state;
-		const { displayPostDate, postLayout, columns, order, orderBy, categories, postsToShow } = attributes;
+		const { displayPostContentRadio, displayPostContent, displayPostDate, postLayout, columns, order, orderBy, categories, postCount, excerptLength } = attributes;
 
 		const inspectorControls = (
 			<InspectorControls>
-				<PanelBody title={ __( 'Latest Posts Settings' ) }>
+				<PanelBody title={ __( 'Post Content Settings' ) }>
+					<ToggleControl
+						label={ __( 'Post Content' ) }
+						checked={ displayPostContent }
+						onChange={ ( value ) => setAttributes( { displayPostContent: value } ) }
+					/>
+					{ displayPostContent &&
+					<RadioControl
+						label="Show:"
+						selected={ displayPostContentRadio }
+						options={ [
+							{ label: 'Excerpt', value: 'excerpt' },
+							{ label: 'Full Post', value: 'full_post' },
+						] }
+						onChange={ ( value ) => setAttributes( { displayPostContentRadio: value } ) }
+					/>
+					}
+					{ displayPostContent && displayPostContentRadio === 'excerpt' &&
+						<RangeControl
+							label={ __( 'Max number of words in excerpt' ) }
+							value={ excerptLength }
+							onChange={ ( value ) => setAttributes( { excerptLength: value } ) }
+							min={ 10 }
+							max={ 100 }
+						/>
+					}
+				</PanelBody>
+
+				<PanelBody title={ __( 'Post Meta Settings' ) }>
+					<ToggleControl
+						label={ __( 'Display post date' ) }
+						checked={ displayPostDate }
+						onChange={ ( value ) => setAttributes( { displayPostDate: value } ) }
+					/>
+				</PanelBody>
+
+				<PanelBody title={ __( 'Sorting and Filtering' ) }>
 					<QueryControls
 						{ ...{ order, orderBy } }
-						numberOfItems={ postsToShow }
+						numberOfItems={ postCount }
 						categoriesList={ categoriesList }
 						selectedCategoryId={ categories }
 						onOrderChange={ ( value ) => setAttributes( { order: value } ) }
 						onOrderByChange={ ( value ) => setAttributes( { orderBy: value } ) }
 						onCategoryChange={ ( value ) => setAttributes( { categories: '' !== value ? value : undefined } ) }
-						onNumberOfItemsChange={ ( value ) => setAttributes( { postsToShow: value } ) }
-					/>
-					<ToggleControl
-						label={ __( 'Display post date' ) }
-						checked={ displayPostDate }
-						onChange={ this.toggleDisplayPostDate }
+						onNumberOfItemsChange={ ( value ) => setAttributes( { postCount: value } ) }
 					/>
 					{ postLayout === 'grid' &&
 						<RangeControl
@@ -134,8 +154,8 @@ class LatestPostsEdit extends Component {
 		}
 
 		// Removing posts from display should be instant.
-		const displayPosts = latestPosts.length > postsToShow ?
-			latestPosts.slice( 0, postsToShow ) :
+		const displayPosts = latestPosts.length > postCount ?
+			latestPosts.slice( 0, postCount ) :
 			latestPosts;
 
 		const layoutControls = [
@@ -163,13 +183,21 @@ class LatestPostsEdit extends Component {
 				</BlockControls>
 				<ul
 					className={ classnames( this.props.className, {
+						'wp-block-latest-posts__list': true,
 						'is-grid': postLayout === 'grid',
 						'has-dates': displayPostDate,
 						[ `columns-${ columns }` ]: postLayout === 'grid',
 					} ) }
 				>
 					{ displayPosts.map( ( post, i ) => {
 						const titleTrimmed = post.title.rendered.trim();
+						let excerpt = post.excerpt.rendered;
+						if ( post.excerpt.raw === '' ) {
+							excerpt = post.content.raw;
+						}
+						const excerptElement = document.createElement( 'div' );
+						excerptElement.innerHTML = excerpt;
+						excerpt = excerptElement.textContent || excerptElement.innerText || '';
 						return (
 							<li key={ i }>
 								<a href={ post.link } target="_blank" rel="noreferrer noopener">
@@ -186,6 +214,26 @@ class LatestPostsEdit extends Component {
 										{ dateI18n( dateFormat, post.date_gmt ) }
 									</time>
 								}
+								{ displayPostContent && displayPostContentRadio === 'excerpt' &&
+								<div className="wp-block-latest-posts__post-excerpt">
+									<RawHTML
+										key="html"
+									>
+										{ excerptLength < excerpt.trim().split( ' ' ).length ?
+											excerpt.trim().split( ' ', excerptLength ).join( ' ' ) + ' ... <a href=' + post.link + 'target="_blank" rel="noopener noreferrer">Read More</a>' :
+											excerpt.trim().split( ' ', excerptLength ).join( ' ' ) }
+									</RawHTML>
+								</div>
+								}
+								{ displayPostContent && displayPostContentRadio === 'full_post' &&
+								<div className="wp-block-latest-posts__post-full-content">
+									<RawHTML
+										key="html"
+									>
+										{ post.content.raw.trim() }
+									</RawHTML>
+								</div>
+								}
 							</li>
 						);
 					} ) }
@@ -196,13 +244,13 @@ class LatestPostsEdit extends Component {
 }
 
 export default withSelect( ( select, props ) => {
-	const { postsToShow, order, orderBy, categories } = props.attributes;
+	const { postCount, order, orderBy, categories } = props.attributes;
 	const { getEntityRecords } = select( 'core' );
 	const latestPostsQuery = pickBy( {
 		categories,
 		order,
 		orderby: orderBy,
-		per_page: postsToShow,
+		per_page: postCount,
 	}, ( value ) => ! isUndefined( value ) );
 	return {
 		latestPosts: getEntityRecords( 'postType', 'post', latestPostsQuery ),

diff --git a/packages/block-library/src/latest-posts/index.php b/packages/block-library/src/latest-posts/index.php
@@ -14,7 +14,7 @@
  */
 function render_block_core_latest_posts( $attributes ) {
 	$args = array(
-		'posts_per_page'   => $attributes['postsToShow'],
+		'posts_per_page'   => $attributes['postCount'],
 		'post_status'      => 'publish',
 		'order'            => $attributes['order'],
 		'orderby'          => $attributes['orderBy'],
@@ -29,6 +29,8 @@ function render_block_core_latest_posts( $attributes ) {
 
 	$list_items_markup = '';
 
+	$excerpt_length = $attributes['excerptLength'];
+
 	foreach ( $recent_posts as $post ) {
 		$title = get_the_title( $post );
 		if ( ! $title ) {
@@ -48,10 +50,44 @@ function render_block_core_latest_posts( $attributes ) {
 			);
 		}
 
+		if ( isset( $attributes['displayPostContent'] ) && $attributes['displayPostContent']
+			&& isset( $attributes['displayPostContentRadio'] ) && 'excerpt' == $attributes['displayPostContentRadio'] ) {
+			$post_excerpt = $post->post_excerpt;
+			if ( ! ( $post_excerpt ) ) {
+				$post_excerpt = $post->post_content;
+			}
+			$trimmed_excerpt = esc_html( wp_trim_words( $post_excerpt, $excerpt_length, ' &hellip; ' ) );
+
+			$list_items_markup .= sprintf(
+				'<div class="wp-block-latest-posts____post-excerpt">%1$s',
+				$trimmed_excerpt
+			);
+
+			if ( strpos( $trimmed_excerpt, ' &hellip; ' ) !== false ) {
+				$list_items_markup .= sprintf(
+					'<a href="%1$s">%2$s</a></div>',
+					esc_url( get_permalink( $post ) ),
+					__( 'Read More' )
+				);
+			} else {
+				$list_items_markup .= sprintf(
+					'</div>'
+				);
+			}
+		}
+
+		if ( isset( $attributes['displayPostContent'] ) && $attributes['displayPostContent']
+			&& isset( $attributes['displayPostContentRadio'] ) && 'full_post' == $attributes['displayPostContentRadio'] ) {
+			$list_items_markup .= sprintf(
+				'<div class="wp-block-latest-posts__post-full-content">%1$s</div>',
+				wp_kses_post( html_entity_decode( $post->post_content, ENT_QUOTES, get_option( 'blog_charset' ) ) )
+			);
+		}
+
 		$list_items_markup .= "</li>\n";
 	}
 
-	$class = 'wp-block-latest-posts';
+	$class = 'wp-block-latest-posts wp-block-latest-posts__list';
 	if ( isset( $attributes['align'] ) ) {
 		$class .= ' align' . $attributes['align'];
 	}
@@ -89,37 +125,49 @@ function register_block_core_latest_posts() {
 		'core/latest-posts',
 		array(
 			'attributes'      => array(
-				'align'           => array(
+				'align'                   => array(
 					'type' => 'string',
 					'enum' => array( 'left', 'center', 'right', 'wide', 'full' ),
 				),
-				'className'       => array(
+				'className'               => array(
 					'type' => 'string',
 				),
-				'categories'      => array(
+				'categories'              => array(
 					'type' => 'string',
 				),
-				'postsToShow'     => array(
+				'postCount'               => array(
 					'type'    => 'number',
 					'default' => 5,
 				),
-				'displayPostDate' => array(
+				'displayPostContent'      => array(
+					'type'    => 'boolean',
+					'default' => false,
+				),
+				'displayPostContentRadio' => array(
+					'type'    => 'string',
+					'default' => 'excerpt',
+				),
+				'excerptLength'           => array(
+					'type'    => 'number',
+					'default' => 55,
+				),
+				'displayPostDate'         => array(
 					'type'    => 'boolean',
 					'default' => false,
 				),
-				'postLayout'      => array(
+				'postLayout'              => array(
 					'type'    => 'string',
 					'default' => 'list',
 				),
-				'columns'         => array(
+				'columns'                 => array(
 					'type'    => 'number',
 					'default' => 3,
 				),
-				'order'           => array(
+				'order'                   => array(
 					'type'    => 'string',
 					'default' => 'desc',
 				),
-				'orderBy'         => array(
+				'orderBy'                 => array(
 					'type'    => 'string',
 					'default' => 'date',
 				),

diff --git a/packages/block-library/src/latest-posts/style.scss b/packages/block-library/src/latest-posts/style.scss
@@ -7,11 +7,13 @@
 		/*rtl:ignore*/
 		margin-left: 2em;
 	}
+	&.wp-block-latest-posts__list {
+		list-style: none;
+	}
 	&.is-grid {
 		display: flex;
 		flex-wrap: wrap;
 		padding: 0;
-		list-style: none;
 
 		li {
 			margin: 0 16px 16px 0;
@@ -33,4 +35,3 @@
 	color: $dark-gray-300;
 	font-size: $default-font-size;
 }
-