Automattic / Automattic/jetpack

Related Posts block in Single template shows as a list block on sites where related posts prerequisites are not met

Open
#30,577 20 comments 0 reactions 0 assignees View on GitHub
[Block] Related Posts [Feature] Related Posts [Platform] Simple [Plugin] Jetpack [Pri] Low Bug Customer Report [LEGACY] Triaged
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

**2023-06-01 Update** - This has been narrowed down to pretty specific parameters: _The Related Posts block CSS does not loading correctly when used on a Single Template AND when the Related Posts requirements are not met on the site._

**Workaround / Solution for now**

Testing and user examples show that the issue resolves once the requirements are met, and the related posts cache is refreshed. With that in mind, users who encounter this issue should remove the block from their template until they have met all the requirements [listed here](https://wordpress.com/support/related-posts/#requirements) (and possibly 12 hours has past since that point). After that, they should be fine to set up the block on their single template. -[cuemarie](https://github.com/Automattic/jetpack/issues/30577#issuecomment-1572926047)

---

### Quick summary

If you add the Related Posts block to a template, the posts are shown vertically and with list markers. It looks correct in the Editor, but on the live site, it doesn't.
I tested it with the themes Rainfall and Iotix, and it happens on both. I didn't test on other blockbase themes.

### Steps to reproduce

1. Activate the Rainfall theme.
2. Open the Single template in the Site Editor.
3. Add the Related Posts block.
4. Save the changes and open the live site.

### What you expected to happen

The related posts should appear in a horizontal format if you are using the grid view, or a vertical format if you are using the list view as seen using the Site Editor.

### What actually happened

The Related posts are shown always in a vertical format regardless of what you have chosen and as a list with markers that shouldn't be there even when using the List View.

### Impact

Some (< 50%)

### Available workarounds?

Yes, difficult to implement

### Platform (Simple and/or Atomic)

Simple

### Logs or notes

I found that if you also add a related posts block, directly inside the content of the post, both of them, the one in the template and the one in the post, are shown correctly. As a workaround, I inserted a related posts block as the content of a post, making it show only the title of one post in white so it can't be seen. Not the best workaround.

Here is a video of the problem and the workaround.

https://user-images.githubusercontent.com/46269032/235639852-ae5e876e-ddb1-47ac-906e-cc84689edb79.mp4

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the Related Posts block in the Single template with the site's prerequisites unmet, comparing the Site Editor with the live site and checking the grid and list views. Done means the live block uses the selected layout and does not show unwanted list markers under those conditions.

Written by the indexing model from the issue text.

Assessment

Tech stack
wordpress
Domain
content, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 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.