Automattic / Automattic/jetpack

Comments: allow CSS customizations

Open
#13,277 2 comments 1 reaction 0 assignees View on GitHub
[Feature] Comments [Pri] Low Enhancement
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.