Automattic / Automattic/jetpack
Forms: Audit & update default form styles for Global Styles compatibility
- Dominant language
- PHP
- Stars
- 1.8k
- Forks
- 898
- Avg merge
- 1d 18h
- Merged PRs (30d)
- 774
Description
Part of: https://github.com/Automattic/jetpack/issues/42353
Related: https://github.com/Automattic/jetpack/pull/41281
Project Thread: __TBA__
## Description
We’ll lower CSS specificity in Jetpack Form’s default stylesheet to ensure theme and Global Style overrides can take precedence. This is crucial for a user-friendly theming experience.
## Scope & Requirements
- Audit all form-related CSS rules and assess specificity levels against Global Styles' `0-1-0` specificity.
- Rewrite high-specificity selectors (e.g., using `:where()` or more generic class-based rules).
- Verify that default styling remains consistent across typical user scenarios and any known themes that bundle Jetpack Form overrides.
## Tasks
- [ ] Review & reduce high-specificity selectors
- Identify rules exceeding `0-1-0` specificity.
- Update them to lower or more generic selectors.
- [ ] Test against multiple themes
- Check both block-based and classic themes.
- Identify any known themes that ship custom Jetpack Forms styling and validate changes there as well.
- [ ] Confirm no regressions
- Ensure forms still look as before.
- Potentially add automated tests for computed styles as is starting to be introduced into Gutenberg.
- [ ] Document the style changes
- Provide a short summary explaining how themes can now override these styles more easily.
Contributor guide
Research direction
Start with Jetpack Form’s default stylesheet and audit selectors against Global Styles’ stated 0-1-0 specificity. Check the revised styles against block-based and classic themes, including themes with custom Jetpack Forms styling, and confirm that existing form appearance is preserved. Done means themes can override the defaults more easily without regressions and the style changes are documented.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100