Automattic / Automattic/jetpack

Forms: Audit & update default form styles for Global Styles compatibility

Open
#42,357 0 comments 0 reactions 0 assignees View on GitHub
[Block] Form [Feature] Forms [Feature] Forms Blocks [Package] Forms Enhancement Triaged
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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.