google / google/site-kit-wp

Simplify `Typography` styling by removing redundant nesting

Open
#11,274 5 comments 0 reactions 0 assignees View on GitHub
P2 Type: Enhancement
Dominant language
JavaScript
Stars
1.4k
Forks
383
Avg merge
4d 14h
Merged PRs (30d)
77

Description

## Feature Description

Current in the styles https://github.com/google/site-kit-wp/blob/624e894a6be48ae7c145affd3c5dd00ad80812cc/assets/sass/components/global/_googlesitekit-typography.scss#L56-L72 we have redundant nesting/chaining of the classes.

Remove the `.googlesitekit-typography` main selector and define the type and size classes independently, without chaining. This will simplify overrides and reduce unnecessary selector specificity.

---------------

_Do not alter or remove anything below. The following sections will be managed by moderators only._

## Acceptance criteria

* The redundant `.googlesitekit-typography` wrapper selector is removed.
* Type classes (`.googlesitekit-typography--#{$type}`) are defined independently, not chained with a parent.
* Size classes (`.googlesitekit-typography--#{$size}`) are defined independently, not chained with a parent.
* No visual change should be present after the edit

## Implementation Brief

- [ ] In `_googlesitekit-typography.scss`, make the following changes inside the `.googlesitekit-plugin` rule:
* Remove the `.googlesitekit-typography` wrapper class selector. The loops inside should no longer be nested within it.
* Create a new `@each` loop that iterates over the `$typography-font-families` map.
* This loop should generate the "type" classes (e.g., `.googlesitekit-typography--display`, `.googlesitekit-typography--headline`).
* Each class generated in this loop should only contain the `font-family` property.
* Modify the existing primary `@each` loop that iterates over `$typography-settings`.
* Instead of being nested, this loop will now generate compound selectors by chaining the "type" and "size" classes directly (e.g., `.googlesitekit-typography--display.googlesitekit-typography--small`).
* These generated class rules will contain the specific styles for `font-size`, `font-weight`, `letter-spacing`, and `line-height`.

- [ ] In `assets/sass/components/surveys/_googlesitekit-survey-header.scss`
- For following selector:
https://github.com/google/site-kit-wp/blob/3e4fdbe13f68f7c11070a9f25308b7135e665077/assets/sass/components/surveys/_googlesitekit-survey-header.scss#L71
Remove the `.googlesitekit-typography` class.

### Test Coverage

* No tests required.

## QA Brief

* Smoke test the plugin with a focus on typography:
* Ensure headings, paragraphs etc. look normal
* Ensure no regressions were introduced

## Changelog entry

*

Contributor guide

Open the contributing guide

Research direction

Start in assets/sass/components/global/_googlesitekit-typography.scss and inspect the typography loops inside the .googlesitekit-plugin rule. Update the generated selectors as described, then remove the .googlesitekit-typography class from the selector in assets/sass/components/surveys/_googlesitekit-survey-header.scss. Done means the redundant wrapper is gone, type and size rules match the acceptance criteria, and a typography-focused smoke test shows no visual regressions.

Written by the indexing model from the issue text.

Assessment

Tech stack
scss
Domain
frontend
Issue type
Refactor
Difficulty
2/5
Estimated time
Half a day
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.