Add an image thumbnail to wp-admin post list.

[DustyReagan]

We've created a Composer package in Jetpack to add an image thumbnail to the post-list wp-admin page similar to Calypso. For the thumbnail, we use the "featured image" if one exists, else we look in the post itself for the first media-library hosted image.

Design

Does this pull request change what data or activity we track or use?

No

Testing instructions:

Setup Environment

1. Checkout this branch

git checkout update/add-posts-list-featured-image

2. Add this dependency to Jetpack plugin

cd projects/plugins/jetpack && composer require automattic/jetpack-post-list

3. Update pnpm

pnpm install

4. Update Jetpack dependencies

jetpack install -r && jetpack install --all

5. Run posts-list package compiling process

jetpack build packages/post-list

6. Run watch in case you'd like to edit the code in the client.

jetpack watch packages/post-list

7. In a new terminal run the web server

jetpack docker up

Compiling

Production

jetpack build -p packages/post-list

Development

jetpack build packages/post-list

Development watching mode 👀

jetpack watch packages/post-list

Unit Tests

To run the package unit tests:

1. go the post-list folder cd projects/packages/post-list
2. and run the command composer test-php.

If you're running the PHP interpreter that shipped with your Mac you may get the error: /usr/bin/php declares an invalid value for PHP_VERSION. StackOverflow has the solution here.

Load The Post List Package

To load the post list package you need to call it from the "Must Use Plugins" directory. To do that:

1. Create a file named 0-functions.php in the tools/docker/mu-plugins/ directory.
2. In that file add this code: add_action( 'admin_init', array( '\Automattic\Jetpack\Post_List\Post_List', 'configure' ) );

Test Feature

1. Go to http://localhost/wp-admin/edit.php?post-list=true
   Note that post-list=true must be set in the URL.
2. Create a post with a featured image.
3. Create another post without a featured image, but add an image to the post content.
4. You should see those images as thumbnails on the post list page http://localhost/wp-admin/edit.php?post-list=true

[retrofox]

I think it isn't possible to change the title in the wp-admin list.

We can inject the element in the client, though.

[jeherve]

This looks good to me. I had a few comments below.

I couldn't get the build to work on my local machine, for some reason. This is the error I got:

pnpm run build

> [email protected] build /Users/jeherve/code/jetpack/projects/packages/post-list
> wp-scripts build src/index.js

TypeError: Cannot destructure property 'info' of 'TerserPlugin.getAsset(...)' as it is undefined.
    at TerserPlugin.taskGenerator (/Users/jeherve/code/jetpack/node_modules/.pnpm/[email protected][email protected]/node_modules/terser-webpack-plugin/dist/index.js:183:7)
    at taskGenerator.next (<anonymous>)

---

I think it would be really good to have tests for all methods in this new package, especially since it plays with post content and fetches specific parts of it.

[github-actions]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• ✅ Include a description of your PR changes.
  
• ⚠️ All commits were linted before commit.
  
• ✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
  
• ✅ Add testing instructions.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  
• ✅ Add changelog entries to affected projects
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

---

The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.

---

Once your PR is ready for review, check one last time that all required checks (other than "Required review") appearing at the bottom of this PR are passing or skipped.
Then, add the "[Status] Needs Team review" label and ask someone from your team review the code.
Once you’ve done so, switch to the "[Status] Needs Review" label; someone from Jetpack Crew will then review this PR and merge it to be included in the next Jetpack release.

[pablinos]

It's looking good. I think it would it be worth us slimming this down in order to get the skeleton of the package working and merged.

I wonder whether we should disable (or perhaps just by default, with an option to turn it on via Screen Options) the post thumbnail when the theme doesn't have support for them? It's rare, but we could call get_theme_support to check. There's an argument that we should display the post's image regardless of theme support of course.

We should probably check that the post type supports featured images though via post_type_supports( $post_type, 'thumbnail' ), but that might be at the point we use the package, rather than in the library code.

[retrofox]

This looks good to me. I had a few comments below.

I couldn't get the build to work on my local machine, for some reason. This is the error I got:

pnpm run build

> [email protected] build /Users/jeherve/code/jetpack/projects/packages/post-list
> wp-scripts build src/index.js

TypeError: Cannot destructure property 'info' of 'TerserPlugin.getAsset(...)' as it is undefined.
    at TerserPlugin.taskGenerator (/Users/jeherve/code/jetpack/node_modules/.pnpm/[email protected][email protected]/node_modules/terser-webpack-plugin/dist/index.js:183:7)
    at taskGenerator.next (<anonymous>)

I think it would be really good to have tests for all methods in this new package, especially since it plays with post content and fetches specific parts of it.

Already fixed when updating the @wordpress/scripts package dependency. Props to @pablinos

[pablinos]

There is a some discussion about using the Config package for handling this on the other PoC PR.

I think it would be a good plan to not have the package autoload like this, so it would be worth investigating.

[allilevine]

@kraftbj 👋 We've been trying out your suggestion to use the Config package here, but we're not seeing any examples of the packages being loaded on wpcom. Once we've followed Adding your package to the config class, what's the next step?

[retrofox]

I left a couple of minor suggestions.
Tested and it works as expected. :-)

✅ Set the post thumbnail via featured-image
✅ Set the post thumbnail via the first mage into the post content

Thanks!

[DustyReagan]

@jeherve How does it look? Are we mergeable? -- Thanks for all your help on this PR. 😅

[retrofox]

LGTM :-)

[jeherve]

This looks good to me. Let's merge this! :) 🚢

[retrofox]

Thanks, folks. Let me merge it for you, @DustyReagan