Gutenberg: Update Related Posts block to pull real time related posts #27659

tyxla · 2018-10-05T20:41:12Z

Changes proposed in this Pull Request

Update the Related Posts block to pull real time related posts.
No longer parse dates using moment - use the API provided date, as it's already localized.
Revert example post dates to human readable format as we're no longer parsing them.

Preview

The demo shows related posts for a draft post that has never been published, where you'll notice the following highlights:

Inserting a block in an empty post without a title results in displaying the default placeholder related posts.
Updating the title results in retrieving fresh related posts after successful autosave.
Updating the title results in retrieving fresh related posts after successful manual draft save.

Testing instructions

~~Sandbox public-api.wordpress.com~~ (not needed anymore, merged already).
~~Apply D19169-code to your WP.com sandbox~~ (not needed anymore, merged already).
If you run Jetpack locally:
- Run the latest Jetpack.
- Setup and run the Jetpack docker environment.
- Expose the Jetpack docker environment to public using ngrok.
- ~~Apply REST API: Add a related posts endpoint jetpack#10265 on your local Jetpack repo~~ (not needed anymore, merged already).
- Checkout this branch.
- Build the blocks in Calypso running the following command:
  npm run sdk gutenberg client/gutenberg/extensions/presets/jetpack -- --output-dir=DIR_TO_JETPACK/jetpack/_inc/blocks where DIR_TO_JETPACK is the directory that leads to your local Jetpack.
If you run Jetpack on Jurassic Ninja:
- Spin up a site in Jurassic Ninja: https://jurassic.ninja/create/?shortlived&gutenpack&gutenberg&calypsobranch=try/gutenberg-related-posts-real-time&jetpack-beta
- ~~Change JETPACK__SANDBOX_DOMAIN to the domain of the WP.com test site that your WP.com sandbox is mapped to~~ (not needed anymore).
Connect your Jetpack to WP.com.
Make sure to enable recommended modules after connecting Jetpack.
Make sure to create 10-ish posts with similar titles.
Edit one of the posts.
Insert the Related Posts block.
Verify that related posts are pulled accordingly and that they are updated on save/autosave.
Verify that in case there are no related posts, the block still falls back to the default content.

matticbot · 2018-10-05T20:41:13Z

Test live: https://calypso.live/?branch=try/gutenberg-related-posts-real-time

ghost · 2018-10-05T20:41:29Z

That's a great PR description, thank you so much for your effort!

Generated by 🚫 dangerJS

MichaelArestad · 2018-10-08T21:46:45Z

I'm having trouble testing this. Could you upload a short video of it in action?

tyxla · 2018-10-09T11:57:24Z

Oh, sorry for that @MichaelArestad. It seems JN doesn't want to load with this branch - @oskosk do you have any idea what might be happening?

In the meantime, here's a demo (added to the PR description too):

https://cloudup.com/cCqjmXeOfLT

The demo shows related posts for a draft post that has never been published, where you'll notice the following highlights:

Inserting a block in an empty post without a title results in displaying the default placeholder related posts.
Updating the title results in retrieving fresh related posts after successful autosave.
Updating the title results in retrieving fresh related posts after successful manual draft save.

tyxla · 2018-10-10T12:54:20Z

@MichaelArestad note that it's easier now to test this PR - see the updated testing instructions. Note that some amount of posts should be created and synced (which could sometimes take some minutes) in order for you to test the functionality.

MichaelArestad · 2018-10-10T17:07:49Z

Awesome! Tested! Thanks for making it easier to test.

On my test, I added related posts blocks to each post I created as I created them. Once I had cranked out 3 or 4 with similar content, it was quite magical in how it updated.

However, one thing I did notice is that those first already published posts did not update the related posts section as more posts were added. I even tried updating it a few times, removing the blocks and readding them.

What I would expect is that the related posts are always changing as the site grows and more content is written. I expect this would happen without having to ever go back to the older posts to "update" the related posts content. Does that make sense?

tyxla · 2018-10-11T11:56:41Z

@MichaelArestad thanks for testing!

Regarding the freshness of related posts - yeah, this is something I've noticed too, and it seems we will need to tackle it on an API level, so it's not related with the block work we're doing here. I've opened #27786 to keep track of it.

@MichaelArestad do you have any other design feedback before we mark this "design approved"?

MichaelArestad · 2018-10-11T21:03:59Z

@MichaelArestad do you have any other design feedback before we mark this "design approved"?

No. It's awesome. #design-approved

sirreal

This is working quite nicely, thanks @tyxla!

Do you think we should re-fetch posts as the content changes? They seem to be fetched once when the block is loaded.

Not for this PR, but as we begin to consider targeting different environments, what do you think of adding fromApi + makeJsonSchemaParser to these apiFetch calls?

sirreal · 2018-10-15T15:17:17Z

client/gutenberg/extensions/related-posts/edit.jsx

+				posts: response.posts,
+				fetchingPosts: false,
+			} );
+		} );


What if there's a problem fetching? I think apiFetch will reject, which we don't appear to handle.

Do we need to handle rejection? It looks like the placeholders will work and fetchingPosts will be stuck to true, but I'm wondering if these details are intentional.

Good point, we're now handling fetching errors in 9f750ae

client/gutenberg/extensions/related-posts/edit.jsx

client/gutenberg/extensions/related-posts/constants.js

tyxla · 2018-10-16T15:26:28Z

Thanks for the reviews, this is ready for another look.

tyxla · 2018-10-16T15:28:52Z

Ah, also to answer your questions @sirreal:

Do you think we should re-fetch posts as the content changes? They seem to be fetched once when the block is loaded.

We already do that after any save / autosave - see https://github.com/Automattic/wp-calypso/pull/27659/files#diff-8957a4bfff8bf0279290b1093440645cR30

Not for this PR, but as we begin to consider targeting different environments, what do you think of adding fromApi + makeJsonSchemaParser to these apiFetch calls?

I've been thinking about it, but we're still far from that - we need a good, reliable, portable data system first. Maybe this use case could be a good start for experiments, but definitely in a separate PR, and probably not for the v1.

sirreal · 2018-10-16T19:21:18Z

We already do that after any save / autosave

That is when this related posts block is saved, right? I was wondering if it makes sense to update more frequently, perhaps on revision save.

Once inserted, there's not much to do with this block, so I suspect save will happen infrequently. Consider a case where this block is part of a template and someone starts building out a post around it, the related posts will be outdated and not relevant as the post changes.

Not a blocker, just something to consider.

sirreal · 2018-10-16T19:32:10Z

That is when this related posts block is saved, right? I was wondering if it makes sense to update more frequently, perhaps on revision save.

This seems to be completely wrong. It appears related posts are refetched on post (or revision) save just as I was suggesting.

sirreal

e2e canaries had some failures, I've just re-run them.

Changes here are good, nice work 🙂

When tests are green, go ahead and 🚢 – please make sure we have some way to track translations for the placeholders.

tyxla · 2018-10-17T08:11:53Z

Thanks @sirreal!

please make sure we have some way to track translations for the placeholders.

Sure - I've opened #27899 for that.

🚀

tyxla self-assigned this Oct 5, 2018

tyxla requested review from mapk, MichaelArestad and a team October 5, 2018 20:41

tyxla mentioned this pull request Oct 5, 2018

REST API: Add a related posts endpoint Automattic/jetpack#10265

Merged

tyxla force-pushed the try/gutenberg-related-posts-real-time branch 2 times, most recently from 3ddac75 to ed892ae Compare October 10, 2018 11:12

This was referenced Oct 10, 2018

Gutenberg: Use ISO 8601 date for related posts example dates #27582

Merged

REST API: Activate Related Posts module if not active when requesting related posts Automattic/jetpack#10288

Closed

MichaelArestad removed the [Status] Needs Design Review Add this when you'd like to get a review / feedback from the Design team on your PR label Oct 11, 2018

tyxla added 5 commits October 12, 2018 10:24

Gutenberg: Fetch real time related posts

733b632

Gutenberg: Use realtime related posts in block preview

ec46a21

Gutenberg: No request duplication, refresh after save

bd1ff15

Use dates provided from the API

d076a4c

Use human readable dates in example posts

74f1080

tyxla force-pushed the try/gutenberg-related-posts-real-time branch from d98eaed to 74f1080 Compare October 12, 2018 07:29

Fix image schema in example posts

0ee36e4

sirreal reviewed Oct 15, 2018

View reviewed changes

Handle related posts request failures

9f750ae

sirreal added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. and removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Oct 16, 2018

sirreal approved these changes Oct 16, 2018

View reviewed changes

tyxla mentioned this pull request Oct 17, 2018

Related posts block: Translate placeholder copy #27899

Closed

tyxla merged commit a5c963f into master Oct 17, 2018

tyxla deleted the try/gutenberg-related-posts-real-time branch October 17, 2018 08:13

matticbot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Oct 17, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Gutenberg: Update Related Posts block to pull real time related posts #27659

Gutenberg: Update Related Posts block to pull real time related posts #27659

tyxla commented Oct 5, 2018 •

edited

Loading

matticbot commented Oct 5, 2018

ghost commented Oct 5, 2018

MichaelArestad commented Oct 8, 2018

tyxla commented Oct 9, 2018

tyxla commented Oct 10, 2018

MichaelArestad commented Oct 10, 2018

tyxla commented Oct 11, 2018

MichaelArestad commented Oct 11, 2018

sirreal left a comment

sirreal Oct 15, 2018

tyxla Oct 16, 2018 •

edited

Loading

tyxla commented Oct 16, 2018

tyxla commented Oct 16, 2018

sirreal commented Oct 16, 2018

sirreal commented Oct 16, 2018

sirreal left a comment

tyxla commented Oct 17, 2018

Gutenberg: Update Related Posts block to pull real time related posts #27659

Gutenberg: Update Related Posts block to pull real time related posts #27659

Conversation

tyxla commented Oct 5, 2018 • edited Loading

Changes proposed in this Pull Request

Preview

Testing instructions

matticbot commented Oct 5, 2018

ghost commented Oct 5, 2018

MichaelArestad commented Oct 8, 2018

tyxla commented Oct 9, 2018

tyxla commented Oct 10, 2018

MichaelArestad commented Oct 10, 2018

tyxla commented Oct 11, 2018

MichaelArestad commented Oct 11, 2018

sirreal left a comment

Choose a reason for hiding this comment

sirreal Oct 15, 2018

Choose a reason for hiding this comment

tyxla Oct 16, 2018 • edited Loading

Choose a reason for hiding this comment

tyxla commented Oct 16, 2018

tyxla commented Oct 16, 2018

sirreal commented Oct 16, 2018

sirreal commented Oct 16, 2018

sirreal left a comment

Choose a reason for hiding this comment

tyxla commented Oct 17, 2018

tyxla commented Oct 5, 2018 •

edited

Loading

tyxla Oct 16, 2018 •

edited

Loading