Add post featured image

WordPress · Feb 20, 2019 · 8338b08 · 8338b08
1 parent c9eae79
commit 8338b08
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 2 deletions.
diff --git a/packages/block-library/src/latest-posts/edit.js b/packages/block-library/src/latest-posts/edit.js
@@ -78,7 +78,7 @@ class LatestPostsEdit extends Component {
 	render() {
 		const { attributes, setAttributes, latestPosts } = this.props;
 		const { categoriesList } = this.state;
-		const { displayPostDate, displayPostAuthor, align, postLayout, columns, order, orderBy, categories, postsToShow } = attributes;
+		const { displayPostFeaturedImage, displayPostDate, displayPostAuthor, align, postLayout, columns, order, orderBy, categories, postsToShow } = attributes;
 
 		const inspectorControls = (
 			<InspectorControls>
@@ -97,6 +97,14 @@ class LatestPostsEdit extends Component {
 					}
 				</PanelBody>
 
+				<PanelBody title={ __( 'Featured Image Settings' ) }>
+					<ToggleControl
+						label={ __( 'Featured image' ) }
+						checked={ displayPostFeaturedImage }
+						onChange={ ( value ) => this.updateAttribute( 'displayPostFeaturedImage', value ) }
+					/>
+				</PanelBody>
+
 				<PanelBody title={ __( 'Post Meta Settings' ) }>
 					<ToggleControl
 						label={ __( 'Display post date' ) }
@@ -189,6 +197,13 @@ class LatestPostsEdit extends Component {
 				>
 					{ displayPosts.map( ( post, i ) =>
 						<li key={ i }>
+							{ displayPostFeaturedImage && post._embedded[ 'wp:featuredmedia' ] &&
+								<img
+									alt={ post._embedded[ 'wp:featuredmedia' ][ 0 ].title.rendered }
+									src={ post._embedded[ 'wp:featuredmedia' ][ 0 ].source_url }
+									className="wp-block-latest-posts__post-featured-image"
+								/>
+							}
 							<a href={ post.link } target="_blank">{ decodeEntities( post.title.rendered.trim() ) || __( '(Untitled)' ) }</a>
 							{ displayPostDate && post.date_gmt &&
 								<time dateTime={ format( 'c', post.date_gmt ) } className="wp-block-latest-posts__post-date">

diff --git a/packages/block-library/src/latest-posts/index.php b/packages/block-library/src/latest-posts/index.php
@@ -35,8 +35,15 @@ function render_block_core_latest_posts( $attributes ) {
 		if ( ! $title ) {
 			$title = __( '(Untitled)' );
 		}
+
+		$list_items_markup .= "<li>\n";
+
+		if( isset( $attributes['displayPostFeaturedImage'] ) && $attributes['displayPostFeaturedImage']) {
+			$list_items_markup .= get_the_post_thumbnail( $post_id, 'medium', array( 'class' => 'wp-block-latest-posts__post-featured-image' ) );
+		}
+
 		$list_items_markup .= sprintf(
-			'<li><a href="%1$s">%2$s</a>',
+			'<a href="%1$s">%2$s</a>',
 			esc_url( get_permalink( $post_id ) ),
 			esc_html( $title )
 		);
@@ -108,6 +115,10 @@ function register_block_core_latest_posts() {
 					'type'    => 'number',
 					'default' => 5,
 				),
+				'displayPostFeaturedImage' => array(
+					'type'    => 'boolean',
+					'default' => false,
+				),
 				'displayPostDate' => array(
 					'type'    => 'boolean',
 					'default' => false,

diff --git a/packages/block-library/src/latest-posts/style.scss b/packages/block-library/src/latest-posts/style.scss
@@ -28,6 +28,10 @@
 	}
 }
 
+.wp-block-latest-posts__post-featured-image {
+	display: block;
+}
+
 .wp-block-latest-posts__post-date,
 .wp-block-latest-posts__post-author {
 	display: block;