-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add "Latest Posts" Block #870
Changes from 16 commits
d9ab526
b939cce
a120720
4426fe9
6facd28
484506a
ec72c14
219c2ff
ca5cc8e
6e5fe1e
1ab4e32
74cc4aa
3927d22
c9c7146
64b30f1
efb8746
3168983
d312525
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -11,3 +11,4 @@ import './pullquote'; | |
import './table'; | ||
import './preformatted'; | ||
import './code'; | ||
import './latest-posts'; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
/** | ||
* Returns a Promise with the latest posts or an error on failure. | ||
* | ||
* @param {Number} postsToShow Number of posts to display. | ||
* | ||
* @returns {wp.api.collections.Posts} Returns a Promise with the latest posts. | ||
*/ | ||
export function getLatestPosts( postsToShow = 5 ) { | ||
const postsCollection = new wp.api.collections.Posts(); | ||
|
||
const posts = postsCollection.fetch( { | ||
data: { | ||
per_page: postsToShow, | ||
}, | ||
} ); | ||
|
||
return posts; | ||
} | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,75 @@ | ||
/** | ||
* WordPress dependencies | ||
*/ | ||
import { Placeholder } from 'components'; | ||
import { __ } from 'i18n'; | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
import { registerBlockType } from '../../api'; | ||
import { getLatestPosts } from './data.js'; | ||
|
||
registerBlockType( 'core/latestposts', { | ||
title: __( 'Latest Posts' ), | ||
|
||
icon: 'list-view', | ||
|
||
category: 'rest-api', | ||
|
||
defaultAttributes: { | ||
poststoshow: 5, | ||
}, | ||
|
||
edit: class extends wp.element.Component { | ||
constructor() { | ||
super( ...arguments ); | ||
|
||
const { poststoshow } = this.props.attributes; | ||
|
||
this.state = { | ||
latestPosts: [], | ||
latestPostsRequest: getLatestPosts( poststoshow ), | ||
}; | ||
|
||
this.state.latestPostsRequest | ||
.then( latestPosts => this.setState( { latestPosts } ) ); | ||
} | ||
|
||
render() { | ||
const { latestPosts } = this.state; | ||
|
||
if ( ! latestPosts.length ) { | ||
return ( | ||
<Placeholder | ||
icon="update" | ||
label={ __( 'Loading latest posts, please wait' ) } | ||
> | ||
</Placeholder> | ||
); | ||
} | ||
|
||
return ( | ||
<div className="blocks-latest-posts"> | ||
<ul> | ||
{ latestPosts.map( ( post, i ) => | ||
<li key={ i }><a href={ post.link }>{ post.title.rendered }</a></li> | ||
) } | ||
</ul> | ||
</div> | ||
); | ||
} | ||
}, | ||
|
||
componentWillUnmount() { | ||
const { latestPostsRequest } = this.state; | ||
|
||
if ( latestPostsRequest.state() === 'pending' ) { | ||
latestPostsRequest.abort(); | ||
} | ||
}, | ||
|
||
save() { | ||
return null; | ||
}, | ||
} ); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
<?php | ||
/** | ||
* Server-side rendering of the `core/latest-posts` block. | ||
* | ||
* @package gutenberg | ||
*/ | ||
|
||
/** | ||
* Renders the `core/latest-posts` block on server. | ||
* | ||
* @param array $attributes The block attributes. | ||
* | ||
* @return string Returns the post content with latest posts added. | ||
*/ | ||
function gutenberg_block_core_latest_posts( $attributes ) { | ||
$posts_to_show = 5; | ||
|
||
if ( array_key_exists( 'poststoshow', $attributes ) ) { | ||
$posts_to_show = $attributes['poststoshow']; | ||
} | ||
|
||
$recent_posts = wp_get_recent_posts( array( | ||
'numberposts' => $posts_to_show, | ||
'post_status' => 'publish', | ||
) ); | ||
|
||
$posts_content = ''; | ||
|
||
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"; | ||
} | ||
|
||
$block_content = <<<CONTENT | ||
<div class="blocks-latest-posts"> | ||
<ul> | ||
{$posts_content} | ||
</ul> | ||
</div> | ||
|
||
CONTENT; | ||
|
||
return $block_content; | ||
} | ||
|
||
register_block_type( 'core/latestposts', array( | ||
'render' => 'gutenberg_block_core_latest_posts', | ||
) ); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
<!-- wp:core/latestposts poststoshow="5" --><!-- /wp:core/latestposts --> | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
[ | ||
{ | ||
"uid": "_uid_0", | ||
"name": "core/latestposts", | ||
"attributes": { | ||
"poststoshow": 5 | ||
} | ||
} | ||
] |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
<!-- wp:core/latestposts poststoshow="5" --><!-- /wp:core/latestposts --> | ||
|
Original file line number | Diff line number | Diff line change | ||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
@@ -9,6 +9,8 @@ | |||||||||||||||||||||
* @package gutenberg | ||||||||||||||||||||||
*/ | ||||||||||||||||||||||
|
||||||||||||||||||||||
define( 'GUTENBERG__PLUGIN_DIR', plugin_dir_path( __FILE__ ) ); | ||||||||||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. These gutenberg/lib/client-assets.php Lines 13 to 22 in 3f727da
The I don't have a preference on whether this is done as a function or constants (the function is pretty fast), but it needs to be consistent in approach and naming. Also, There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Ah, I didn't notice that, my bad. In a new PR, I'll fix those things. Thanks! |
||||||||||||||||||||||
|
||||||||||||||||||||||
require_once dirname( __FILE__ ) . '/lib/blocks.php'; | ||||||||||||||||||||||
require_once dirname( __FILE__ ) . '/lib/client-assets.php'; | ||||||||||||||||||||||
require_once dirname( __FILE__ ) . '/lib/i18n.php'; | ||||||||||||||||||||||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -9,6 +9,8 @@ | |
die( 'Silence is golden.' ); | ||
} | ||
|
||
define( 'GUTENBERG__BLOCKS_LIBRARY_DIR', GUTENBERG__PLUGIN_DIR . 'blocks/library' ); | ||
|
||
$wp_registered_blocks = array(); | ||
|
||
/** | ||
|
@@ -128,3 +130,12 @@ function do_blocks( $content ) { | |
return $new_content; | ||
} | ||
add_filter( 'the_content', 'do_blocks', 10 ); // BEFORE do_shortcode(). | ||
|
||
/** | ||
* Loads the server-side rendering of blocks. If your block supports | ||
* server-side rendering, add it here. | ||
*/ | ||
function gutenberg_load_blocks_server_side_rendering() { | ||
require_once GUTENBERG__BLOCKS_LIBRARY_DIR . '/latest-posts/index.php'; | ||
} | ||
add_action( 'init', 'gutenberg_load_blocks_server_side_rendering' ); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think there are a few other issues here, not least that |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Since there is no sanitization or validation of block attributes (yet), it should probably be done here, ensuring it is a number and that it is greater than 0, but less than (maybe) 100.
See also #886 (comment)