Refactor post list thumbnail preview to function server side. All javascript removed.

[DustyReagan]

Refactor post list thumbnail preview (originating from this PR) to function server side. All javascript removed.

This allows us to leverage the built in functionality of the screen options toggle.

Changes proposed in this Pull Request:

• Remove all Javascript from post-list thumbnail preview.
• Functionality unchanged.

Jetpack product discussion

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/post-list-thumbnail-preview

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. In a new terminal run the web server

jetpack docker up

Test Features

• If a "featured image" is set on the post, its thumbnail should show up in the post list
• If no "featured image" is set, the first image on the post that's hosted via "media library" (this includes the image block, slideshow block, gallery block, possibly others) should show up in the post list.
• If no "featured image" or "media library" image is associated with a post, it should show a placeholder image in the post list.
• You should be able to sort by "Title" and the image thumbnails should sort with the post.
• You should be able to hide the the image thumbnail by toggling off the checkbox in "Screen Options" (found in the upper right of the screen.)
• Changing the width of your browser window should adjust the post list so that it is still readable and properly aligned.

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.

[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.

[DustyReagan]

Hi, @JanaMW27! Can we get your perspective on this: Should we hide thumbnails on mobile view or always keep the thumbnails visible?

Hide Thumbnails on Mobile (starts at 16s) post-list-thumbnail-css.mp4

Always Show Thumbnails post-list-css-no-hide.mp4

[pablinos]

Only some minor comments really. This is working well for me, and feels better than using JS for this feature. Good job!

[retrofox]

LGTM, too 🎉

[pablinos]

Nice. This is working well for me and we're handling RTL properly too.

I just had a minor thought about moving where we register one of the hooks. I was thinking that we could keep the check to see what screen we're on to one place, but it's just a thought - take it or leave it :)

[retrofox]

LGTM

Just FYI, I did the following steps to add this feature to the Jetpack plugin

git checkout update/post-list-thumbnail-preview

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

Add post_list into the features array:

foreach (
	array(
		'sync',
		'jitm',
		'post_list',
	)
	as $feature
) {
	$config->ensure( $feature );
}

[retrofox]

LGTM

[retrofox]

LGTM