BorderBoxControl: Fix unlink button positioning after View Emotion migration

[aaronrobertshaw]

What?

Fixes the broken positioning of the BorderBoxControl link/unlink button, which was overlapping the border control instead of sitting in its right-hand gutter.

Why?

#79443 (migrate View away from Emotion) introduced a visual regression.

The unlink button is absolutely positioned (right: 0) inside a 24px gutter created by the linked control's margin-right: 24px (linkedBorderControl). That class and BorderControl's own base styles (borderControl, margin: 0) land on the same fieldset at equal specificity, so the cascade winner is decided by stylesheet insertion order.

Previously the Emotion styled View re-serialized the composed className so the passed class won. Now that View renders a plain element, useContextSystem inserts the passed className before the component's own base styles, so borderControl's margin: 0 wins, the gutter collapses, and the button overlaps the control.

How?

Doubles the linkedBorderControl selector specificity via && so its margin-right wins deterministically, regardless of insertion order.

Testing Instructions

1. Add a Group block (or any block with border support).
2. In the sidebar, open Border.
3. Confirm the link/unlink button sits cleanly to the right of the slider
4. Toggle link/unlink and confirm the button stays correctly positioned.

Screenshots

Before	After

Use of AI Tools

Used claude to debug and pinpoint root cause of the visual regression this PR fixes as well as confirm that cx() use does prevent our ability to control the style load order here.

[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: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@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]

Size Change: +3 B (0%)

Total Size: 7.67 MB

📦 View Changed

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

_{compressed-size-action}

[github-actions]

Flaky tests detected in c3f2c59.
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/28918154215
📝 Reported issues:

• [Flaky Test] can use appender in site editor sidebar list view #79632 in /test/e2e/specs/site-editor/navigation-sidebar-list-view.spec.js

[ramonjd]

Compared trunk/this PR. LGTM

Before	After

[ciampo]

Thank you for catching and fixing this!

The solution in this PR works, but a better fix would be to migrate this part to CSS Modules sooner, avoiding Emotion's insertion-order behavior entirely. Let's keep it in mind if we spot similar regressions in the future 👍