Components: migrate Divider to SCSS module

[ciampo]

What?

Part of #66806

Migrates Divider away from Emotion to a local SCSS Module.

Why?

Divider is one of the low-risk canary components for validating the SCSS Modules migration pattern before moving through more complex component families.

How?

• Replaces the Emotion styles.ts file with style.module.scss.
• Preserves the existing public components-divider class name from the context system.
• Moves dynamic margins to CSS custom properties set from the component props.
• Uses logical CSS properties for orientation-aware margin and border styles.
• Updates tests to assert CSS custom properties and orientation rather than Emotion style snapshots.
• Removes the remaining Divider snapshot tests.
• Removes the stale Divider entry from the Emotion migration bulk suppressions added in Components: add Emotion migration guardrails #79442.
• Adds an Internal changelog entry.

Testing Instructions

1. Run npm run format -- tools/eslint/suppressions.json.
2. Run npm run lint:js -- packages/components/src/divider.
3. Run npm run lint:css -- packages/components/src/divider/style.module.scss.
4. Run npm run test:unit -- packages/components/src/divider/test/index.tsx.
5. Run npx tsgo --noEmit -p packages/components/tsconfig.json.
6. Run npm run lint:js -- packages/components/src --pass-on-unpruned-suppressions.
7. Confirm all commands pass.

Testing Instructions for Keyboard

Not applicable; Divider is non-interactive and this PR preserves its existing rendering behavior.

Screenshots or screencast

Not applicable; no visual change is intended.

Use of AI Tools

Drafted with assistance from ChatGPT/Codex. The changes were reviewed before opening this PR.

[github-actions]

Size Change: +438 B (+0.01%)

Total Size: 7.51 MB

📦 View Changed

Filename	Size	Change
build/scripts/components/index.min.js	264 kB	+438 B (+0.17%)

_{compressed-size-action}

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: jsnajdr <jsnajdr@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

Flaky tests detected in 3a1ad4a.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/28042817258
📝 Reported issues:

• [Flaky Test] Should save the changes #78689 in /test/e2e/specs/editor/plugins/wp-editor-meta-box.spec.js

[mirka]

I smoke tested with both Divider and CardDivider. No regressions found.

[mirka]

Kind of surprised how things got much simpler 😂

[ciampo]

Logical properties FTW + a lot of conditional logic implicitly converted to CSS selector matching + some of the code moved to the render function. Maybe I'm old fashioned, but I like the new version better.

[t-hamano]

The specificity of the CSS has increased, which may override the custom border color applied to the divider. Is it possible to lower the specificity of the divider's CSS?

[ciampo]

I have a few thoughts on this:

• The complementary area blanket assertion feels poorly architected — why would we want to override the DS in the first place? And why do we have such a broad, low specificity selector?
• The Divider component itself uses currentColor, maybe we should change it to use a DS stroke color token?

But for the sake of retaining the same behaviour as prior to the refactor (and to prevent scope creep), I will simply undo these changes, which should restore the original specificity.

Restoring original specificity in #79534

[t-hamano]

The complementary area blanket assertion feels poorly architected — why would we want to override the DS in the first place? And why do we have such a broad, low specificity selector?

This style was added at least six years ago.

https://github.com/WordPress/gutenberg/pull/20698/changes#diff-f6012769a71b3b8b71d12af8b6eeb62f5def7807e972f2024f44ac9a0df27e77R64

At that time, there was likely neither a design system nor a components/divider component, so that might have been the best approach back then.

[mirka]

I think the specificity change also regressed the CardDivider. I'm pretty sure it wasn't like this when I reviewed this PR.

[ciampo]

I think the specificity change also regressed the CardDivider. I'm pretty sure it wasn't like this when I reviewed this PR.

That will be also fixed by #79534