Connectors: Alignment and layout issue with RTL

[gziolo]

The new Connectors screen (Settings > Connectors) has two RTL-related layout issues, reported against beta5:

1. Admin menu layout breaks when navigating to the Connectors page — double collapse arrows appear and spacing between menu items is visually broken.
2. Page heading is not direction-aware — the "Connectors" heading remains left-aligned instead of flipping to the right in RTL locales.

Steps to Reproduce

1. Install WordPress 7.0-beta5 (or trunk).
2. Switch the site language to an RTL locale (e.g., Central Kurdish — ckb).
3. Navigate to Settings → Connectors.
4. Observe the admin menu sidebar and the page heading alignment.

Expected Behavior

The admin menu should render identically to other settings sub-pages in RTL mode, and the page heading should respect direction: rtl.

Actual Behavior

The sidebar menu shows duplicate collapse arrows and inconsistent spacing. The page heading stays left-aligned.

Screenshots & Video

Visual references (before/after comparison and a video walkthrough) are available in the original support forum report:
​https://wordpress.org/support/topic/alignment-and-layout-issue-with-the-connectors/

Props

@rebeensarbast for the detailed report and visual references.

[suhan2411]

I can reproduce the RTL layout issue locally and will work on a patch.

[ozgursar]

Reproduction Report

Environment

• WordPress: 7.0-beta5
• PHP: 8.3.30
• Server: PHP.wasm
• Database: WP_SQLite_Driver (Server: 8.0.38 / Client: 3.51.0)
• Browser: Opera
• OS: macOS
• Theme: Twenty Twenty-Five 1.4
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.1

Steps taken

1. Choose any RTL language
2. View Settings > Connectors
3. Observe the page title and incorrect double arrows
4. 🐞 Bug occurs

Screenshots/Screencast with results

Addresses two RTL issues on Settings → Connectors when the admin locale is RTL (e.g. Arabic, Hebrew, Central Kurdish):

• Page heading alignment

The "Connectors" heading remained left-aligned in RTL. The page header used justify-content: left, which does not respect document direction. This patch adds an RTL override so the heading aligns to the inline-start edge (right in RTL).

• Admin menu current-item arrow

The Connectors page injected border-right-color: #fff for the current menu item arrow, which is correct in LTR. In RTL, WordPress uses border-left-color, causing a duplicate arrow to appear. This patch removes the right border color and applies border-left-color: #fff for RTL so only the correct arrow is displayed.

Additionally sets $submenu_file = 'options-connectors.php' so the Settings → Connectors menu item highlights correctly.

Fixes https://core.trac.wordpress.org/ticket/64857

[jorgefilipecosta]

Turns out this is an issue affecting any route based page e.g: it also happened to the font library. I proposed a general fix at ​https://github.com/WordPress/gutenberg/pull/76496.

[sabernhardt]

The Gutenberg plugin apparently fixed the heading alignment already

by changing justify-content: left

<div data-wp-c16t="true" data-wp-component="HStack" class="components-flex components-h-stack css-1910ara-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"><div class="admin-ui-page__sidebar-toggle-slot css-1ragr82-PolymorphicDiv e19lxcc00"></div><h2 data-wp-c16t="true" data-wp-component="Heading" class="components-truncate components-text components-heading css-80qjs7-PolymorphicDiv-Truncate-Text-sx-Base-block e19lxcc00">Connectors</h2></div>

.css-1910ara-PolymorphicDiv-Flex-base-ItemsRow {
  display: flex;
  -moz-box-align: center;
  align-items: center;
  flex-direction: row;
  gap: calc(8px);
  justify-content: left;
  width: 100%;
}

to start

<div style="gap: var(--wpds-dimension-gap-sm, 8px); align-items: center; justify-content: start; flex-direction: row;" class="_19ce0419607e1896__stack"><div class="admin-ui-page__sidebar-toggle-slot css-0 e19lxcc00"></div><h2 class="admin-ui-page__header-title">Connectors</h2></div>

[suhan2411]

Linking the core PR that addresses the RTL issues on the Connectors screen.

PR: ​https://github.com/WordPress/wordpress-develop/pull/11247

Summary:

• Fixes duplicate admin menu arrow in RTL caused by border-right-color being applied where RTL expects border-left-color.
• Adjusts page heading alignment so the "Connectors" title respects RTL direction.
• Sets $submenu_file = 'options-connectors.php' so the Connectors submenu is correctly highlighted under Settings.

Note: Gutenberg has introduced a broader fix for route-based page header alignment (justify-content: left → start). Once that update lands in core, the heading override here may no longer be necessary.

@tejas0306 Check https://core.trac.wordpress.org/ticket/64857#comment:7, @jorgefilipecosta open PR ​https://github.com/WordPress/gutenberg/pull/76496 that fix the issue.

Closing in favour of GB PR

[sabernhardt]

Font library in 7.0-beta6-62094

[sabernhardt]

Connectors screen in 7.0-beta6-62094

[sabernhardt]

GB76496 was merged.

Both the heading and the menu issues seem resolved in the nightly build 7.0-beta6-62094.