Automattic / Automattic/jetpack

Related Posts Block: No styles on archive pages

Open
#14,063 2 comments 0 reactions 0 assignees View on GitHub
[Feature] Related Posts [Focus] Blocks [Pri] Low [Status] Stale Bug
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

Whilst working through https://github.com/Automattic/jetpack/issues/14020 I noticed that the styles for the related post block are not loaded on the archive page, so in `twentytwenty` it currently looks like this on the homepage:

![Screenshot 2019-11-18 at 15 44 51](https://user-images.githubusercontent.com/411945/69067516-191dce80-0a1b-11ea-894e-cfa40f268882.png)

#### Steps to reproduce the issue

1. Go to wp-admin and create a new post
2. Add the Jetpack related posts block to the post and set it up how you like
3. Use any theme that shows the entire `the_content` on the archive page
4. See if the correct styles are shown on the single post
5. Compare those styles to the archive view

#### What I expected

I expect the block to look the same regardless of where it appears on my site. I have a feeling this may impact other blocks too. It is possibly being caused by the conditional style loading in `jetpack-related-posts.php` line 1658:

```
$enqueue_script = ! ( class_exists( 'Jetpack_AMP_Support' ) && Jetpack_AMP_Support::is_amp_request() );
```

#### What happened instead

The block looks incorrect.

Contributor guide

Open the contributing guide

Research direction

Start by inspecting jetpack-related-posts.php around line 1658, then reproduce the related posts block on a single post and an archive page using a theme that shows the full the_content. Compare whether the block styles are loaded in both views; done means the block looks the same on the archive and single-post pages.

Written by the indexing model from the issue text.

Assessment

Tech stack
php, wordpress
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.