Automattic / Automattic/wp-calypso
Blog Posts Page: Older Posts with Twitter Embeds not Rendering
- Dominant language
- TypeScript
- Stars
- 12.6k
- Forks
- 2k
- Avg merge
- 1d 17h
- Merged PRs (30d)
- 538
Description
### Quick summary
On the blog posts page, on first load, Twitter posts will show in an attractive iframe-looking container. However, if there are older posts on a page, these will not load the embed container, and only show a text version of the Twitter content inside.
Other embeds I looked at (YouTube, Imgur) seemed to work, so I am not sure if this is just Twitter embeds or not.
https://user-images.githubusercontent.com/71042895/140669229-dc7076c1-670e-41b2-ba83-3e7f9b7e2b60.mp4
### Steps to reproduce
1. Make some number of post with twitter embeds greater than the number of displayed posts, so that an older posts button appears.
2. Look at blog posts page, and load Older Posts
### What you expected to happen
The display of Twitter embeds would remain consistent for older posts as they seem with the older ones.
### What actually happened
The older posts appear to be missing some styling.
### Context
#29399820-hc , #4437154-zen
We temporarily postponed the problem by increasing the number of displayed posts.
Incidentally, I had tried Infinite Scroll, but saw the same issue there.
### Operating System
_No response_
### Browser
_No response_
### Simple, Atomic or both?
_No response_
### Theme-specific issue?
Tested in Baskerville 2, but seems to be the case in other themes too. Could not find a theme where this works as expected.
### Other notes
_No response_
### Reproducibility
_No response_
### Severity
_No response_
### Available workarounds?
_No response_
### Workaround details
_No response_
Contributor guide
Research direction
Reproduce the blog posts page with Twitter embeds on the initial posts and after selecting Older Posts, using the linked video as a visual reference. Compare the embed behavior with YouTube or Imgur and verify that Twitter content renders consistently after older posts load; the issue names no source files or tests to begin from.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100