Divider: Restore lower border specificity

[ciampo]

Follow up to #79444 (comment)

What?

Restores Divider custom border overrides after the #79444 SCSS Module migration.

Why?

The migration moved divider border declarations into orientation selectors such as .divider[aria-orientation="horizontal"]. That made the default border styles more specific than legacy hr overrides, such as complementary-area rules that set a full border shorthand.

How?

Keeps the separate horizontal and vertical orientation blocks from trunk, but wraps both orientation selectors in :where().

This preserves the orientation-specific CSS structure while removing the additional attribute-selector specificity, so existing border overrides can continue to win.

Testing Instructions

1. Start Storybook with npm run storybook:dev.
2. Open Components / Divider.
3. Confirm the horizontal Divider still renders.
4. Confirm the vertical Divider still renders.
5. In a complementary area or equivalent wrapper that styles hr with a custom border shorthand, confirm the custom border style wins over the Divider default border style.

Testing Instructions for Keyboard

No keyboard-specific behavior changed. Divider remains a non-interactive separator.

Screenshots or screencast

N/A: CSS specificity regression fix only.

Use of AI Tools

This PR was prepared with assistance from OpenAI Codex and reviewed before publishing.

[ciampo]

It's unfortunate that we need to revert to this, horizontal and vertical styles will have different specificity 😅

One alternative is to use where() for both orientations, but that can also have unwanted effects, since the vertical orientation styles will lose specificity.

[github-actions]

Size Change: +4 B (0%)

Total Size: 7.5 MB

📦 View Changed

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

_{compressed-size-action}

[ciampo]

Necessary, since the Emotion refactor is part of previous release

[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.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @foufounounou680-svg.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

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

Unlinked contributors: foufounounou680-svg.

Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@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 0fdd286.
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/28224299095
📝 Reported issues:

• [Flaky Test] Text blocks sync modifications between users #78855 in /test/e2e/specs/editor/collaboration/collaboration-block-gauntlet.spec.ts

[t-hamano]

Thanks for the PR! Is it possible to apply :where only in the vertical direction to align the CSS specificity of the two directions to 0-1-0?

.divider {
	&:where([aria-orientation="vertical"]) {
	}
}

[ciampo]

Thanks for the PR! Is it possible to apply :where only in the vertical direction to align the CSS specificity of the two directions to 0-1-0?

.divider {
	&:where([aria-orientation="vertical"]) {
	}
}

Done! Code diff is a lot cleaner, too

[jsnajdr]

Maybe the root cause is that the specific selector defines also the border style and color, although it doesn't need to. What if we moved up everything we can?

.divider {
  border-width: 0;
  border-style: solid;
  border-color: currentColor;

  .horizontal {
    border-width-block-end: 1px;
  }
  .vertical {
    border-with-inline-end: 1px;
  }
}

Does that solve the conflict with .interface-complementary-are hr? From #79444 (comment) it's not entirely clear to me which selector should win.

[ciampo]

I like this approach.

[ciampo]

Although I don't think it's safe — for example, complementary area overrides the whole border property (ie. border-bottom: 1px solid #f0f0f0), and if we're trying to make the most backwards compatible change, I believe we should keep the previous behaviour, ie. allow consumers to overrides the whole border, not just its color.

I'll switch back to the solution proposed here

[jsnajdr]

complementary area overrides the whole border property

It should still win and apply its color, because the selector is "longer": two classes instead of one.

The only thing that is not back-compatible and really requires :where would be the 1px border color. If .interface-complementary-are hr specified 2px, it would no longer win as it did before.