diff --git a/packages/block-library/src/latest-posts/edit.js b/packages/block-library/src/latest-posts/edit.js index e8b6896ae514d3..433810e467b0fb 100644 --- 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 = ( - + + setAttributes( { displayPostContent: value } ) } + /> + { displayPostContent && + setAttributes( { displayPostContentRadio: value } ) } + /> + } + { displayPostContent && displayPostContentRadio === 'excerpt' && + setAttributes( { excerptLength: value } ) } + min={ 10 } + max={ 100 } + /> + } + + + + setAttributes( { displayPostDate: value } ) } + /> + + + setAttributes( { order: value } ) } onOrderByChange={ ( value ) => setAttributes( { orderBy: value } ) } onCategoryChange={ ( value ) => setAttributes( { categories: '' !== value ? value : undefined } ) } - onNumberOfItemsChange={ ( value ) => setAttributes( { postsToShow: value } ) } - /> - setAttributes( { postCount: value } ) } /> { postLayout === 'grid' && postsToShow ? - latestPosts.slice( 0, postsToShow ) : + const displayPosts = latestPosts.length > postCount ? + latestPosts.slice( 0, postCount ) : latestPosts; const layoutControls = [ @@ -163,6 +183,7 @@ class LatestPostsEdit extends Component {
    { 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 (
  • @@ -186,6 +214,26 @@ class LatestPostsEdit extends Component { { dateI18n( dateFormat, post.date_gmt ) } } + { displayPostContent && displayPostContentRadio === 'excerpt' && + + } + { displayPostContent && displayPostContentRadio === 'full_post' && +
    + + { post.content.raw.trim() } + +
    + }
  • ); } ) } @@ -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 index e3ec985bab9c82..d3a7a30c90c2f5 100644 --- 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, ' … ' ) ); + + $list_items_markup .= sprintf( + '
    %1$s', + $trimmed_excerpt + ); + + if ( strpos( $trimmed_excerpt, ' … ' ) !== false ) { + $list_items_markup .= sprintf( + '%2$s
    ', + esc_url( get_permalink( $post ) ), + __( 'Read More' ) + ); + } else { + $list_items_markup .= sprintf( + '' + ); + } + } + + if ( isset( $attributes['displayPostContent'] ) && $attributes['displayPostContent'] + && isset( $attributes['displayPostContentRadio'] ) && 'full_post' == $attributes['displayPostContentRadio'] ) { + $list_items_markup .= sprintf( + '
    %1$s
    ', + wp_kses_post( html_entity_decode( $post->post_content, ENT_QUOTES, get_option( 'blog_charset' ) ) ) + ); + } + $list_items_markup .= "\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 index 0877c3d5dee9cc..a72331d6eed09f 100644 --- 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; } -