Automattic / Automattic/jetpack
Comments: allow CSS customizations
- Dominant language
- PHP
- Stars
- 1.8k
- Forks
- 898
- Avg merge
- 1d 18h
- Merged PRs (30d)
- 774
Description
#### Steps to reproduce the issue
1. Enable Jetpack discussion comments.
2. Try to style them with CSS
3. Realize it is pointless since it's in an iframe (cross-origin policy).
#### What I expected
To be able to apply custom styles to Jetpack comments.
#### What happened instead
The browser ignored my stylesheet settings.
### Requested functionality
Add a new argument for the iframe URL to include a CSS path, or hard-code it for the source domain. For example, the current URL looks like this:
https://jetpack.wordpress.com/jetpack-comment/?blogid=[#]&postid=[#]&comment_registration=0&require_name_email=1&stc_enabled=0&stb_enabled=0&show_avatars=1&avatar_default=gravatar_default&greeting=Leave+a+Reply&greeting_reply=Leave+a+Reply+to+%25s&color_scheme=dark&lang=en_US&jetpack_version=7.6&hc_post_as=jetpack&hc_userid=2&hc_username=[username]&hc_userurl=[url]&_wp_unfiltered_html_comment=[value]&token_key=[value]&sig=[value]#parent=[url]
The custom URL attribute could be added to this request and passed back from the server in the iframe head's link tags, or it could be derived from the blog URL and set to a static stylesheet path (e.g. blogurl.com/jetpack.css). This would enable us to make Jetpack comment styling consistent with our sites.
Contributor guide
Research direction
Start with the Jetpack comments iframe URL and the server-rendered iframe head, which the issue identifies as the integration points. Determine how a stylesheet path could be passed through the request and included in the iframe, then verify that CSS from the site is applied to Jetpack comments without violating cross-origin restrictions.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100