Gutenberg: Add a Jetpack Related Posts block by tyxla · Pull Request #26530 · Automattic/wp-calypso

tyxla · 2018-08-07T15:21:27Z

Description

This PR introduces a Jetpack Related Posts block for Gutenberg, written entirely in Calypso, intended to be built with the Calypso SDK.

Preview

Grid view with block controls, no alignment specified

List view with block controls, no alignment specified

Grid view with block controls, center alignment specified

Grid view with block controls, wide alignment specified

Grid view with block controls, full-width alignment specified

Inspector controls

Testing

Short instructions (no local dev env setup necessary)

Go to Gutenberg: Add a Related Posts block jetpack#10132 and follow the instructions

Long instructions (local dev env setup necessary)

Checkout this branch on your local Calypso
Checkout the latest Jetpack on your local machine.
Checkout Gutenberg: Add a Related Posts block jetpack#10132 on your Jetpack.
Setup Jetpack's Docker environment.
Add the following as a mu-plugin in the Jetpack docker env:
- add_filter( 'jetpack_gutenberg', '__return_true', 10 );
- add_filter( 'jetpack_gutenberg_cdn', '__return_false', 10 );
Make sure Jetpack is connected on your install.
Make sure you got the latest Gutenberg installed.
Run the following command in Calypso (where PATH_TO_JETPACK is the path to your Jetpack repo) to build the Jetpack preset of blocks:

npm run sdk -- gutenberg \
--editor-script=client/gutenberg/extensions/presets/jetpack/editor.js \
--output-dir=/PATH_TO_JETPACK/_inc/blocks \
--output-editor-file=jetpack-editor \

Write a post, insert a Related Posts block.
Play the block settings, verify it looks and works well both in wp-admin and in the frontend of your site.

matticbot · 2018-08-07T15:21:28Z

Test live: https://calypso.live/?branch=sdk/add-jetpack-related-posts-block

sirreal · 2018-09-11T14:12:12Z

I see related posts!

I had to remove .js from the --output-editor-file=block.js in the testing instructions. The SDK was building block.js.js block.js.css….

tyxla · 2018-09-11T14:17:07Z

Oops, test instructions haven't been updated in a while 😉 The ones in #27126 would work better these days.

MichaelArestad · 2018-09-11T17:08:18Z

How can we test this? Do you want @mapk and I to test this? I'm not aware of any prior designs for this feature. Is this just largely a test/learning PR?

simison · 2018-09-12T06:53:00Z

+		date: 'August 5, 2018',
+		context: 'In "Upgrade"',
+	},
+];


These example texts and images are straight from the current version in Jetpack — since we're at it, we should probably look up some more fresh demo content. Won't stop merging though, just noting down.

Good point 👍

However, I'll defer that decision to @MichaelArestad and @mapk - I'm not planning any changes, as that would affect other bits that already use this content.

Also, FWIW, if we decide to change the content, we should do in all instances - both Jetpack (the plugin) and Calypso (site settings).

I take it that if we plan to pull in actual site content even in editor mode (in a subsequent iteration), we'll be able to drop the demo content?

That's correct @ockham.

simison · 2018-09-12T07:10:02Z

+import edit from './edit';
+import { MAX_POSTS_TO_SHOW } from './constants';
+
+registerBlockType( 'jetpack/related-posts', {


Considering this will be used elsewhere than just Jetpack, should we stick to a8c namespace?

Yup, I agree.

Done in dcef260.

We can always change it back if we reconsider for any reason (like grouping blocks under the same category/group in the block inserter).

simison · 2018-09-12T07:11:03Z

+				<Toolbar controls={ layoutControls } />
+			</BlockControls>
+
+			<div className="related-posts__main">


Should we rely on generated className prop here? Both edit and save have className prop available and it should be wp-block-a8c-related-posts (or wp-block-jetpack-related-posts) for this block.

https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/#classname

Good point 👍

I think the generated className weren't there yet when I started working on this block 😉

I've updated the block to use that class and cleaned up any unnecessary instances in b9e6a6e

tyxla · 2018-09-12T08:00:22Z

I'm not aware of any prior designs for this feature.

There aren't any designs as far as I know.

Is this just largely a test/learning PR?

It started as an exploration to help showcase how the SDK can be used to build a block from scratch, but eventually turned out to work pretty well, so we can actually use it for building the production block.

How can we test this? Do you want @mapk and I to test this?

Thanks, I'd love to get that tested; let me take some time to prepare the PR and a playground and I'll ping you folks.

tyxla · 2018-09-12T11:12:47Z

This is now ready for review and testing ✅

mapk · 2018-09-12T16:33:05Z

@tyxla Can we see a recorded video of how this works posted in this thread? At least until we can get a more simplified testing environment going?

dmsnell · 2018-09-12T18:10:40Z

+	];
+
+	const displayPosts =
+		DEFAULT_POSTS.length > postsToShow ? DEFAULT_POSTS.slice( 0, postsToShow ) : DEFAULT_POSTS;


Fun fact! This should be equivalent to the inner case…

const displayPosts = DEFAULT_POSTS.slice( 0, postToShow );

the only difference is that we are cloning the array each time and as-written we're not cloning when the array is empty. since this is inside a render() function it won't trigger additional re-renders

unless there's a reason to leave it here we should be able to remove the conditional altogether.

Good point 👍 Done in be96069.

tyxla · 2018-09-26T14:25:10Z

@mapk thanks for the great feedback, I've been working today on addressing it - see my comments below; also I'd appreciate reviews and feedback on the proposed solutions.

Can we change the selector icon to match the "Latest Posts" icon? Should we?

I've suggested that in #27451. It's worth to mention that @mtias suggested that we use something unique - what can we do to make the icon similar, but still unique?

Will we iterate on the content prior to any users actually using this block, or will there be a chance they see it? If they'll see it, can we edit the content to something else for the new PR? I'd love to use some images and text that visually improve that space if possible.

Well, I'm planning to work on getting real-time content working, but it seems it'll be after the GM. Also, it's not clear whether we'll be able to ship it in the v1, considering the fact that it would require a premium plan feature (Jetpack Search). So I'd really appreciate if you have suggestions for some better images and text - I'd love to implement them.

The font style and size of the date should match that of the Image caption and Pullquote citation in the Gutenberg core blocks. It needs to decrease in importance.

Nice - I've suggested that in #27456.

You bring up good points, @tyxla. I'm okay with not having a complete 1:1 parity with the current design pattern of our Jetpack feature. I think it's more important to shift to the "everything is a block" concept and separate it out.

Okay, that's fair enough. I've opted for removing the headline bit in #27454.

5. TAGS/CATEGORIES
@MichaelArestad and I were discussing that maybe, for now, we don't include this as part of the block. We'd like to research this further. We can always add it later, but it would be much more difficult to remove it once it's included.

Sounds good, let's skip categories/tags for the v1 👍

tyxla added Jetpack [Status] In Progress [Project] SDK labels Aug 7, 2018

tyxla self-assigned this Aug 7, 2018

tyxla force-pushed the sdk/add-jetpack-related-posts-block branch from 193d110 to d11976e Compare September 11, 2018 09:14

tyxla changed the title ~~SDK: Add a Jetpack Related Posts block~~ Gutenberg: Add a Jetpack Related Posts block Sep 11, 2018

tyxla added [Goal] Gutenberg Working towards full integration with Gutenberg [Type] New feature and removed [Project] SDK labels Sep 11, 2018

simison reviewed Sep 12, 2018

View reviewed changes

tyxla mentioned this pull request Sep 12, 2018

Gutenberg: Add a Related Posts block Automattic/jetpack#10132

Merged

tyxla added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. [Status] Needs Design Review Add this when you'd like to get a review / feedback from the Design team on your PR and removed [Status] In Progress labels Sep 12, 2018

tyxla requested review from a team, MichaelArestad and mapk September 12, 2018 11:11

dmsnell reviewed Sep 12, 2018

View reviewed changes

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

dmsnell reviewed Sep 12, 2018

View reviewed changes

Comment thread client/gutenberg/extensions/related-posts/index.js

tyxla added 21 commits September 20, 2018 14:23

Update main classname to satisfy linter

d918210

Update block namespace to a8c

04f82ce

Use generated classname and clean up unnecessary classes

9d08d83

Add an empty line between controls

fd843d1

Fix empty headline case

7cf9d48

Don't allow more than the max number of posts

61e8864

Reorder inspector controls

e83ff52

Remove displayed posts conditional slicing

b6e1815

Add transformation from shortcode

9ae0d80

Implement alignment options

08cdbca

Handle full width alignment properly

f74d71f

Proper support for center alignment

67fd442

Reuse the same alignment options

e077879

Add keywords to Related Posts block

66decb2

view -> editor

281bab9

Fix lodash import path

c1bf0d0

Use flex for grid columns

01ba2e6

Use time tag for post date

638225b

Use classname for styling alignment

d25bb71

Use moment.toISOString()

906350e

Use wordpress/date instead of moment directly

5d766d3

tyxla force-pushed the sdk/add-jetpack-related-posts-block branch from 5cea80a to 5d766d3 Compare September 20, 2018 11:25

tyxla merged commit 9fda0ac into master Sep 20, 2018

tyxla deleted the sdk/add-jetpack-related-posts-block branch September 20, 2018 11:41

matticbot removed [Status] Needs Design Review Add this when you'd like to get a review / feedback from the Design team on your PR [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Sep 20, 2018

This was referenced Sep 26, 2018

Gutenberg: Update Related Posts icon to use the Latest Posts one #27451

Merged

Gutenberg: Remove headline from Related Posts block #27454

Merged

Gutenberg: Update style of Related Posts post date #27456

Merged

Conversation

tyxla commented Aug 7, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Preview

Testing

Short instructions (no local dev env setup necessary)

Long instructions (local dev env setup necessary)

Uh oh!

matticbot commented Aug 7, 2018

Uh oh!

sirreal commented Sep 11, 2018

Uh oh!

tyxla commented Sep 11, 2018

Uh oh!

MichaelArestad commented Sep 11, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

simison Sep 12, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tyxla commented Sep 12, 2018

Uh oh!

tyxla commented Sep 12, 2018

Uh oh!

mapk commented Sep 12, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

tyxla commented Sep 26, 2018

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

9 participants

tyxla commented Aug 7, 2018 •

edited

Loading

simison Sep 12, 2018 •

edited

Loading