Add "Latest Posts" Block #870

lamosty · 2017-05-22T16:01:00Z

@mtias suggested to me to create a simple block to get latest posts with the WP REST API. It should also serve as an example for other developers so they can start experimenting with the API and create some cool blocks.

I've been studying Gutenberg (pretty good editor!) and come up with something really simple. It's still a work in progress since I want to fix a few things and maybe make it a bit better.

I'd like to also open a discussion about some of the things here:

naming: I prefixed it with rest-api- since we could have another 'latest posts' block without using rest api
new category called rest-api: are we planning to have more such components using rest api? If yes, I think it would be nice to give them their own category
getting the posts/using the rest api: I'm using the Backbone rest api js client as it seems to be the officially supported one. It offers a few niceties and it's quite easy to use but: isn't Backbone a bit dated? (I've never used it). Are we okay with this or should we create some custom rest api wrapper/client?

Asking for help: after saving a post with this latest posts block and then reloading the saved post, instead of having the block parsed and displayed as other blocks, it shows with the Gutenberg tags and HTML code. Can you spot what I'm doing wrong, please? It works fine when seeing the post on the front-end though.

Am I using the attributes of registerBlock properly? I use them to store the latest posts retrieved from DB but don't define them in registerBlock.

Thanks!

Nice to have/TODO

have some UI so users can filter the posts by number of them to show, author, categories, etc

youknowriad · 2017-05-22T16:11:01Z

Thanks for doing this.

For now, this block will show the latest post at the moment where we save the block, if we create a new post after that. This new post is not included in the frontend. I think this post is a good opportunity to leverage the Server Side Rendering to address this.

lamosty · 2017-05-22T16:13:27Z

I think this post is a good opportunity to leverage the Server Side Rendering to address this.

Yeah, I've seen your PR but haven't looked into it more. I also agree since it's an expected behavior to always display the latest posts, especially when using REST API (ie it's 'dynamic').

mtias · 2017-05-22T17:49:09Z

Thanks for giving this a try!

I also agree since it's an expected behavior to always display the latest posts, especially when using REST API (ie it's 'dynamic').

Definitely, this is a great example of a purely dynamic block in my book.

mtias · 2017-05-22T17:50:41Z

blocks/library/rest-api-latest-posts/index.js

+ */
+import { registerBlock } from '../../api';
+
+function getLatestPosts( postsToShow = 5 ) {


Thinking... this could be a good example for breaking some logic into a separate file. Perhaps rest-api-latest-posts/data.js? Or maybe too much abstraction at this stage.

mtias · 2017-05-22T17:50:56Z

blocks/library/rest-api-latest-posts/index.js

@@ -0,0 +1,71 @@
+/**


Let's call this block just latest-posts.

westonruter · 2017-05-22T18:19:14Z

There's good overlap here with the Recent Posts widget.

jasmussen · 2017-05-23T08:22:09Z

Sweet deal, and awesome work!

I was so inspired I took a stab at the design of this, as suggested in your ToDo. Note: the following is very mockuppy and conceptual, and I expect some pushback here. The implementation is also probably something that can happen best in a separate PR, but nonetheless to keep the discussion grouped for now, here it is.

Neutral:

Selected:

This leverages both the "block-first" UI of putting the most basic stuff right on the block, and the more advanced stuff in the Inspector on the right. For this concept, I arbitrarily decided to put the post date and number of posts in the inspector, but this was also done in order to grease the discussion on what we put there (see #672 ).

mtias · 2017-05-23T09:41:48Z

@jasmussen I like this, but I think we could also avoid it looking like a form if we just made the title an optional editable field like caption/quote-source with placeholder text instead of a label and an input.

jasmussen · 2017-05-23T09:45:41Z

I like this, but I think we could also avoid it looking like a form if we just made the title an optional editable field like caption/quote-source with placeholder text instead of a label and an input.

This was my first instinct as well. I do think we'll want some further iteration here, as to what feels right. But I specifically like the gray background which is a callback to placeholders. Not only does this help the block feel distinct from the others, in that it's dynamic, but it also literally "grays" the content, implying you can't edit it directly.

lamosty · 2017-05-23T09:47:30Z

Question: can attributes contain an object? For example, I'm storing the retrieved posts as JS objects in attributes and upon calling save, they get rendered into the comment as:

However, it seems like Gutenberg doesn't like if attribute is "[object Object]" and doesn't render the block properly when loading a saved instance.

youknowriad · 2017-05-23T09:49:13Z

@lamosty attributes should not store objects (At least it can't for now). I'd suggest you store the posts in a local state (the edit function can be a React Component). And I'd just return null in the save function right now.

lamosty · 2017-05-24T10:40:47Z

In 497cee8, I added simple server-side rendering. However, I had to rename the component to core/latestposts from core/latest-posts because if there's a hyphen in the name, the server-side parser will ignore it. I think that's a bug and opened a new issue: #882.

Now, I have some more questions :):

when doing server-side rendering of a block, we have to write the render logic again and try to match it as closely as possible to how it works in JS. Are there some plans/ideas to add ability to write just one render logic and have it render on both client and server?
is it possible to use the same code that runs in the editor to render stuff on site's front-end? I.e. use the edit method to work on front-end? If not, are there any plans to support this?

youknowriad · 2017-05-24T12:11:21Z

when doing server-side rendering of a block, we have to write the render logic again and try to match it as closely as possible to how it works in JS. Are there some plans/ideas to add ability to write just one render logic and have it render on both client and server?

Yes, @notnownikki proposed a SSR endpoint see (#780) and implemented it in the WIP pr #816
I think this endpoint should be extracted to its own PR

is it possible to use the same code that runs in the editor to render stuff on site's front-end? I.e. use the edit method to work on front-end? If not, are there any plans to support this?

For now, the frontend is just a raw HTML, saved from the editor (the savefunction can share some of the edit elements) or Server side rendered. I guess you're proposing to use a React component as an output, It's the first time I'm seeing this proposal, it raises so many questions, maybe worth creating an issue to discuss this possibility (but I don't see this for a v1 personally)

youknowriad · 2017-05-24T12:13:46Z

blocks/library/latest-posts/index.js

+
+				this.props.setAttributes( {
+					poststoshow
+				} );


I have mixed feelings here, we're calling setAttributes in the constructor which could change the markup directly. I think it's better to use defaultAttributes property for this (see usage in the table block I think).

Ah, I didn't know we have defaultAttributes. Thanks!

I'm happy to put the SSR endpoint into its own PR, can start on it now if it's wanted :)

I'm happy to put the SSR endpoint into its own PR, can start on it now if it's wanted :)

No rush, I think I'll leave the SSR part as it is now and we can improve it in a future PR. :)

paaljoachim · 2017-05-24T18:05:27Z

Here are the various options that are used in the Genesis featured posts widget. I am posting it to give additional information on options that might be good to include.

lamosty · 2017-05-24T21:02:44Z

Here are the various options that are used in the Genesis featured posts widget. I am posting it to give additional information on options that might be good to include.

Wow, that's quite a list!

I think I'll try to keep this simple though and try to implement @jasmussen's design for now. We can always improve. :)

paaljoachim · 2017-05-24T21:18:48Z

Yeah a lot of options in there. That list is good to have as some of the options might be good to add at a later date.

westonruter · 2017-05-25T05:56:59Z

blocks/library/latest-posts/data.js

+ * Returns a Promise with the latest posts or an error on failure.
+ *
+ * @param   {Number} postsToShow
+ * @returns {Object}


Instead of {Object} this can be {wp.api.collections.Posts}

westonruter · 2017-05-25T06:01:05Z

blocks/library/latest-posts/index.php

+	foreach( $recent_posts as $post ) {
+		$post_permalink = get_permalink( $post['ID'] );
+
+		$posts_content .= "<li><a href='{$post_permalink}'>{$post['post_title']}</a></li>\n";


Instead of $post['post_title'] this should use get_the_title( $post['ID'] ) so that filters apply.

westonruter · 2017-05-25T06:01:49Z

index.php

@@ -473,3 +476,8 @@ function the_gutenberg_project() {
 	</div>
 	<?php
 }
+
+function gutenberg_load_blocks_server_side_redering() {


Typo s/redering/rendering/

westonruter · 2017-05-25T06:02:38Z

blocks/library/latest-posts/index.php

+<?php
+
+function gutenberg_block_core_latest_posts( $attributes ) {
+	$postsToShow = 5;


Shouldn't this be $posts_to_show?

nylen · 2017-05-26T01:03:52Z

After #849 which added a bunch of tests for block parsing and serialization, this PR should probably be rebased against master, either because the build will fail upon merge, or because this PR can add some new tests using this structure (details here).

lamosty · 2017-06-07T09:32:13Z

In c9c7146, I added a basically blank full post content fixtures. since latest posts block returns null in save, it doesn't save anything in database. This is what I added in core-latestposts.html file:

<!-- wp:core/latestposts poststoshow="5" --><!-- /wp:core/latestposts -->

But that doesn't test anything (except the poststoshow attribute). Should we instead use the HTML which gets rendered from the server-side rendering?

youknowriad

Aside avoiding to store the request in the state, this looks solid to me 👍

jasmussen · 2017-06-07T11:13:24Z

Nice work! 🎉

westonruter · 2017-06-07T19:30:34Z

blocks/library/latest-posts/index.php

+	$posts_to_show = 5;
+
+	if ( array_key_exists( 'poststoshow', $attributes ) ) {
+		$posts_to_show = $attributes['poststoshow'];


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)

lamosty · 2017-06-08T09:27:00Z

Thank you very much for all the great tips and reviews! @youknowriad @notnownikki @aduth @mtias @westonruter @jasmussen

I've learned quite a lot here and refreshed my JS skills. :)

mtias · 2017-06-08T09:38:00Z

Thank you @lamosty for working on this one.

nylen · 2017-06-08T13:54:46Z

gutenberg.php

@@ -9,6 +9,8 @@
 * @package gutenberg
 */

+define( 'GUTENBERG__PLUGIN_DIR', plugin_dir_path( __FILE__ ) );


These defines are duplicating code already in place elsewhere:

gutenberg/lib/client-assets.php

Lines 13 to 22 in 3f727da

/**

* Retrieves the root plugin path.

*

* @return string Root path to the gutenberg plugin.

*

* @since 0.1.0

*/

function gutenberg_dir_path() {

return plugin_dir_path( dirname( __FILE__ ) );

}

The GUTENBERG__ (double underscore) convention is unique to the constants introduced here; others in the codebase do not use this convention. It seems unnecessary to me.

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, gutenberg.php should contain the bare minimum necessary to initialize the plugin, because it is going to be rewritten during the build process. These defines should probably happen in a new lib/constants.php or similar.

Ah, I didn't notice that, my bad.

In a new PR, I'll fix those things.

Thanks!

nylen · 2017-06-09T20:14:32Z

lib/blocks.php

+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' );


I think there are a few other issues here, not least that npm run package-plugin is currently broken because this file was not added to the plugin zip package. I'll open a PR to try to fix.

lamosty added [Feature] Blocks Overall functionality of blocks [Status] In Progress Tracking issues with work in progress labels May 22, 2017

lamosty self-assigned this May 22, 2017

lamosty requested a review from mtias May 22, 2017 16:01

lamosty force-pushed the try/block-rest-api-posts branch 2 times, most recently from 969a0ed to ffcd2a1 Compare May 22, 2017 16:09

mtias reviewed May 22, 2017

View reviewed changes

blocks/library/rest-api-latest-posts/index.js Outdated

@@ -0,0 +1,71 @@

/**

Copy link

Member

mtias May 22, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's call this block just latest-posts.

lamosty force-pushed the try/block-rest-api-posts branch from 3330a77 to 9ab5f7c Compare May 24, 2017 08:00

lamosty mentioned this pull request May 24, 2017

The server-side rendering block matcher doesn't match blocks with - (hyphen) #882

Closed

youknowriad reviewed May 24, 2017

View reviewed changes

notnownikki mentioned this pull request May 24, 2017

Server side rendering API endpoint #780

Closed

westonruter reviewed May 25, 2017

View reviewed changes

lamosty force-pushed the try/block-rest-api-posts branch from 497cee8 to ce45015 Compare May 25, 2017 09:42

aduth mentioned this pull request May 25, 2017

Our Data Approach #902

Closed

Add full post content fixture

c9c7146

lamosty added 2 commits June 7, 2017 12:02

Abort the latest posts query if component is unmounted before response

64b30f1

Import __ from i18n instead of using wp.i18n.__

efb8746

youknowriad approved these changes Jun 7, 2017

View reviewed changes

westonruter reviewed Jun 7, 2017

View reviewed changes

lamosty added 2 commits June 8, 2017 11:04

Use class prop instead of React state to store posts request

3168983

Add basic posts to show attribute validation

d312525

lamosty merged commit e94c30d into master Jun 8, 2017

lamosty deleted the try/block-rest-api-posts branch June 8, 2017 09:33

nylen reviewed Jun 8, 2017

View reviewed changes

nylen mentioned this pull request Jun 9, 2017

De-duplicate parsing logic across PHP and JS #1086

Closed

westonruter mentioned this pull request Jun 9, 2017

Blocks: Merge parsed attributes on top of default attributes, instead of reverse #1087

Merged

aduth mentioned this pull request Jun 9, 2017

Do not download vendor JS files in released plugin versions #1025

Merged

nylen reviewed Jun 9, 2017

View reviewed changes

lamosty mentioned this pull request Jun 15, 2017

Add "display post date" and "number of posts to show" Inspector options for Latest Posts block #1191

Merged

2 tasks

melchoyce mentioned this pull request Jun 29, 2017

Iterations on "Latest Posts" Block #1594

Closed

9 tasks

afercia added the [Feature] Widgets Screen The block-based screen that replaced widgets.php. label Jan 30, 2019

snyk-bot mentioned this pull request Apr 25, 2023

[Snyk] Fix for 1 vulnerabilities yassine4999/gutenberg#11

Open

npneeraj mentioned this pull request Apr 25, 2023

[Snyk] Fix for 1 vulnerabilities npneeraj/gutenberg#13

Open

Verdinjoshua26 mentioned this pull request Apr 25, 2023

[Snyk] Fix for 1 vulnerabilities Verdinjoshua26/gutenberg#69

Open

snyk-bot mentioned this pull request Apr 25, 2023

[Snyk] Fix for 1 vulnerabilities naiba4/gutenberg#7

Open

soloinovator mentioned this pull request Apr 25, 2023

[Snyk] Fix for 1 vulnerabilities soloinovator/gutenberg#84

Open

MaxMood96 mentioned this pull request Apr 25, 2023

[Snyk] Fix for 1 vulnerabilities MaxMood96/gutenberg#96

Open

snyk-bot mentioned this pull request Apr 25, 2023

[Snyk] Fix for 1 vulnerabilities captainbarber99/gutenberg#11

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add "Latest Posts" Block #870

Add "Latest Posts" Block #870

lamosty commented May 22, 2017

youknowriad commented May 22, 2017 •

edited

Loading

lamosty commented May 22, 2017

mtias commented May 22, 2017

mtias May 22, 2017 •

edited

Loading

mtias May 22, 2017

westonruter commented May 22, 2017

jasmussen commented May 23, 2017

mtias commented May 23, 2017

jasmussen commented May 23, 2017

lamosty commented May 23, 2017

youknowriad commented May 23, 2017

lamosty commented May 24, 2017

youknowriad commented May 24, 2017

youknowriad May 24, 2017 •

edited

Loading

lamosty May 24, 2017

notnownikki May 24, 2017

lamosty May 24, 2017

paaljoachim commented May 24, 2017

lamosty commented May 24, 2017

paaljoachim commented May 24, 2017 •

edited

Loading

westonruter May 25, 2017

westonruter May 25, 2017

westonruter May 25, 2017

westonruter May 25, 2017

nylen commented May 26, 2017

lamosty commented Jun 7, 2017

youknowriad left a comment

jasmussen commented Jun 7, 2017

westonruter Jun 7, 2017

lamosty commented Jun 8, 2017

mtias commented Jun 8, 2017

nylen Jun 8, 2017

lamosty Jun 9, 2017

nylen Jun 9, 2017

	/**
	* Retrieves the root plugin path.
	*
	* @return string Root path to the gutenberg plugin.
	*
	* @since 0.1.0
	*/
	function gutenberg_dir_path() {
	return plugin_dir_path( dirname( __FILE__ ) );
	}

Add "Latest Posts" Block #870

Add "Latest Posts" Block #870

Conversation

lamosty commented May 22, 2017

Nice to have/TODO

youknowriad commented May 22, 2017 • edited Loading

lamosty commented May 22, 2017

mtias commented May 22, 2017

mtias May 22, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

westonruter commented May 22, 2017

jasmussen commented May 23, 2017

mtias commented May 23, 2017

jasmussen commented May 23, 2017

lamosty commented May 23, 2017

youknowriad commented May 23, 2017

lamosty commented May 24, 2017

youknowriad commented May 24, 2017

youknowriad May 24, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

paaljoachim commented May 24, 2017

lamosty commented May 24, 2017

paaljoachim commented May 24, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nylen commented May 26, 2017

lamosty commented Jun 7, 2017

youknowriad left a comment

Choose a reason for hiding this comment

jasmussen commented Jun 7, 2017

Choose a reason for hiding this comment

lamosty commented Jun 8, 2017

mtias commented Jun 8, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

youknowriad commented May 22, 2017 •

edited

Loading

mtias May 22, 2017 •

edited

Loading

youknowriad May 24, 2017 •

edited

Loading

paaljoachim commented May 24, 2017 •

edited

Loading