[ciampo]

See #80405. Companion to #84087 for @wordpress/components; this PR targets trunk independently.

What?

Use solid brand highlights for active popup items, with consistent pointer and keyboard states.

Why?

Match WordPress UI's solid brand Button treatment and keep text and icons readable on the highlight.

How?

Share paired WPDS foreground and background tokens through CSS. Active submenu parents use the brand highlight; open parents become neutral when focus moves into the submenu, matching #84087. Disabled items retain a visible focus ring.

CustomSelectControl temporarily replaces custom option colors with brand colors while an option is active and restores them when inactive. The With Custom Colors story demonstrates this supported API. No production whole-option color overrides were found in Gutenberg; BackgroundClipControl uses preview swatches instead. This search does not cover external plugins.

Focus or selection controls the brand fill. Existing menu and Autocomplete pointer handlers update that active state, so the shared hover selector is removed. URLInput now selects suggestions on pointer movement without moving focus from the input; LinkControl inherits that behavior. Block style labels inherit their menu item's color. Button's generic hover accent excludes menu-item and option roles, so inactive popup items keep their resting colors.

Opening-focus and navigation changes are covered by #85486 and #85487. #85488 adds the matching disabled-item focus cue to @wordpress/ui. The corner-joining rules are removed.

Testing Instructions

1. Open MenuItem With Info and With Suffix, and Menu Default and With Submenu. Hover items and check their text and icons. An active submenu parent should use the brand highlight; after entering its submenu, the parent should be neutral.
2. Open CustomSelectControl With Hints, ComboboxControl Default, and FormTokenField Default. Check square corners on their flush option rows. Hover suggestions and check that empty-results messages remain inactive.
3. In FormTokenField, hover one suggestion and use ArrowDown to select another. Only the selected suggestion should have the brand fill. In CustomSelectControl With Custom Colors, hover Aquamarine and Rose. Active options should use brand colors, with custom colors restored when inactive. Bold and italic styling should remain.
4. In the post editor, check slash completion, block transforms, user mentions, and LinkControl results with the pointer and keyboard. In the block switcher's Styles section, active labels and icons should remain readable.
5. Open an Image block's link popup. Hover a suggestion, then use arrow keys while the pointer stays still. Only the active suggestion should have a brand fill, and its text should remain readable. Repeat in LinkControl. In the image-link action menu, hover one action and use arrow keys to focus the other; only the focused action should have a brand fill.
6. Repeat in light, dark, and custom themes and with WordPress global CSS enabled.

Testing Instructions for Keyboard

1. Tab to a DropdownMenu trigger and open it. Navigate with arrow keys, select an item with Enter, and dismiss with Escape. Existing focus and focus return should remain.
2. Navigate the input-based options and With Custom Colors with arrow keys. Check matching active colors, restored inactive colors, and selection with Enter.
3. In Menu Default, navigate to a disabled item. It should retain a visible ring and remain unavailable for selection. Repeat with forced colors enabled.
4. Enter and leave a submenu. Its active parent should use brand colors, while its inactive open parent should be neutral. Forced colors should retain visible system outlines.

Verification and limits

Production build, components, block-editor and Storybook typechecks, JS/CSS lint, published dependency checks, changelog validation, and 609 existing tests across 32 files passed on 97c9ae3402c7. The final independent local review found no actionable issues. Chromium checks cover submenu states, disabled focus, custom option colors, themes, WordPress global CSS, block style labels, image-link actions, native URLInput, and LinkControl. Pointer and keyboard changes preserve one active fill and input focus; hovering stale suggestions during a pending search does not leave an invalid active-item reference. No test files or test bodies were added. Button's generic hover accent excludes popup-item roles; ordinary Button hover styling and explicit variant styling remain.

Safari, real touch hardware, screen readers, and native Windows high-contrast mode were not tested locally. Editor consumer checks used the integrated Storybook editor; the local wp-env site could not start because Docker address pools were exhausted. The preexisting popup width shift remains in #85831.

Screenshots or screencast

Editor checks after review feedback

Commit 97c9ae3402c7. Integrated Storybook block editor, WordPress global CSS, light theme, LTR, reduced motion. Editor captures are 700 × 440; the block styles capture is cropped to the popup.

Image-link actions: inactive hovered row stays neutral	Native URLInput: selected and hovered suggestion

LinkControl: inactive hovered result stays neutral during keyboard navigation	Block styles: active text inherits the menu color

Commit cb830dea3bb0. Local Storybook standalone canvas, LTR, reduced motion. Menu captures are 520 × 510, submenus 600 × 250, option controls 520 × 290, and theme examples 520 × 190. Menu and option captures use basic global CSS; theme examples use WordPress global CSS. These are fresh captures of the rebased source.

Menu hover with help text	Menu keyboard focus with suffix

Active submenu parent	Focus inside the submenu

Square option rows and custom colors

CustomSelectControl With Custom Colors. Active options use paired brand colors. Inactive options restore their custom colors, while bold and italic text remain.

Aquamarine active	Aquamarine restored, Rose active

FormTokenField Dropdown Selector, after ArrowDown. One suggestion has the brand fill; flush rows have square corners.

Light, dark, and custom themes with WordPress global CSS

MenuItem With Info. Light uses keyboard focus; dark and custom use pointer hover. The custom theme uses primary #007cba and background #f5f0e8.

Use of AI Tools

Implemented, reviewed, and verified with Codex. I reviewed the changes and remain responsible for them.

[github-actions]

🤖 PR meta 🤖

🎉 Props

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: jameskoster <jameskoster@git.wordpress.org>

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

---

Props Bot commands

You can trigger Props Bot actions by commenting on this PR:

• @propsbot add <username> to give props to a GitHub user. Requires write access.
• @propsbot remove <username> to leave a user out of the props. Requires write access.
• @propsbot refresh to refresh this list. Adding the props-bot label works too.

Updated as activity occurs, without notifying anyone named here. Add the props-bot label to refresh.

📦 Bundle size

Size Change: +2.43 kB (+0.03%)

Total Size: 8.56 MB

📦 View Changed

Filename	Size	Change
build/scripts/block-editor/index.min.js	542 kB	+30 B (+0.01%)
build/scripts/components/index.min.js	329 kB	+281 B (+0.09%)
build/styles/block-editor/style-rtl.css	20.7 kB	+123 B (+0.6%)
build/styles/block-editor/style-rtl.min.css	17.6 kB	+117 B (+0.67%)
build/styles/block-editor/style.css	20.7 kB	+125 B (+0.61%)
build/styles/block-editor/style.min.css	17.6 kB	+117 B (+0.67%)
build/styles/components/style-rtl.css	17.3 kB	+554 B (+3.3%)
build/styles/components/style-rtl.min.css	14.5 kB	+238 B (+1.67%)
build/styles/components/style.css	17.4 kB	+557 B (+3.31%)
build/styles/components/style.min.css	14.5 kB	+247 B (+1.74%)
build/styles/editor/style-rtl.css	30.2 kB	+13 B (+0.04%)
build/styles/editor/style-rtl.min.css	25.9 kB	+7 B (+0.03%)
build/styles/editor/style.css	30.2 kB	+13 B (+0.04%)
build/styles/editor/style.min.css	25.8 kB	+7 B (+0.03%)

_{97c9ae3 Run}

⚡ Performance

Show the results

Client side metrics exclude the server response time.

front-end-block-theme

Metric	fd40ee3	trunk	% Change
timeToFirstByte	45.5 ms +9.89% -1.65%	44.5 ms +16.63% -2.47%	2.25%
largestContentfulPaint	80 ms +5% -5%	82 ms +7.32% -7.32%	-2.44%
lcpMinusTtfb	32.05 ms +7.02% -1.87%	33.35 ms +20.39% -4.5%	-3.9%
wpBeforeTemplate	22.97 ms +11.62% -0.52%	22.8 ms +16.01% -1.54%	0.75%
wpTemplate	18.63 ms +3.44% -1.56%	18.36 ms +5.28% -4.08%	1.47%
wpTotal	42.01 ms +8.78% -1.67%	40.94 ms +15.85% -2.32%	2.61%
wpMemoryUsage	7.70 MB +0% -0%	7.67 MB +0% -0%	0.42%
wpDbQueries	16 +0% -0%	16 +0% -0%	0%

front-end-classic-theme

Metric	fd40ee3	trunk	% Change
timeToFirstByte	38.45 ms +4.16% -1.17%	37.8 ms +3.57% -1.19%	1.72%
largestContentfulPaint	88 ms +4.55% -0%	88 ms +0% -2.27%	0%
lcpMinusTtfb	50.9 ms +4.13% -2.06%	49.55 ms +1.72% -4.84%	2.72%
wpBeforeTemplate	20.89 ms +2.58% -1.63%	20.79 ms +1.06% -2.26%	0.48%
wpTemplate	14.48 ms +3.25% -2.28%	14.21 ms +1.83% -1.2%	1.9%
wpTotal	35.45 ms +4.74% -0.96%	34.98 ms +4.06% -0.91%	1.34%
wpMemoryUsage	6.39 MB +0% -0%	6.36 MB +0% -0%	0.52%
wpDbQueries	13 +0% -0%	13 +0% -0%	0%

media-processing

Metric	fd40ee3	trunk	% Change
mediaProcessingJpeg	409.81 ms +4.69% -0.58%	411.04 ms +0.59% -0.5%	-0.3%
mediaProcessingAvif	6306.82 ms +0.28% -0.35%	6268.66 ms +0.11% -0.28%	0.61%
mediaProcessingJpegToAvif	4320.77 ms +0.16% -0.13%	4308.45 ms +0.37% -0.08%	0.29%

media-upload

Metric	fd40ee3	trunk	% Change
jpegUploadProcessing	1443.54 ms +1.27% -1.12%	1436.56 ms +1.05% -1.23%	0.49%
pngUploadProcessing	237.66 ms +9.49% -8.36%	225.31 ms +6.36% -3.91%	5.48%
largeJpegUploadProcessing	1438.83 ms +0.78% -0.25%	1430.33 ms +1.23% -0.58%	0.59%
multipleImageUploadProcessing	1501.64 ms +1.45% -1.39%	1517.91 ms +0.52% -0.46%	-1.07%

post-editor

Metric	fd40ee3	trunk	% Change
serverResponse	267.16 ms +10.96% -2.21%	289 ms +7.73% -8.27%	-7.56%
firstPaint	202.12 ms +61.35% -23.63%	205.47 ms +84.83% -15.19%	-1.63%
domContentLoaded	585.52 ms +0.38% -4.23%	635.59 ms +1.99% -4.84%	-7.88%
loaded	586.25 ms +0.43% -4.21%	636.88 ms +1.96% -4.89%	-7.95%
firstContentfulPaint	353.47 ms +2.56% -8.46%	392.22 ms +1.11% -7.64%	-9.88%
firstBlock	1933.17 ms +0.84% -1.62%	2052.61 ms +3.31% -2.26%	-5.82%
type	13 ms +6.62% -4.54%	13.68 ms +7.31% -1.9%	-4.97%
typeWithoutInspector	13.84 ms +5.78% -5.35%	14.3 ms +7.06% -1.68%	-3.22%
typeWithTopToolbar	16.3 ms +8.83% -10.37%	19.3 ms +5.34% -4.87%	-15.54%
typeContainer	6.07 ms +18.12% -10.54%	7.36 ms +2.04% -1.49%	-17.53%
focus	76.06 ms +13.73% -3.12%	85.56 ms +22.97% -2.38%	-11.1%
firstFocus	155.76 ms +0% -0%	171.32 ms +0% -0%	-9.08%
selectAll	330.76 ms +1.01% -2.35%	330.99 ms +0.92% -3.31%	-0.07%
undo	25.32 ms +8.77% -3.95%	26.79 ms +6.79% -8.66%	-5.49%
listViewOpen	52.15 ms +2.51% -9.93%	53.22 ms +8.93% -12.04%	-2.01%
inserterOpen	28.29 ms +4.7% -7.67%	32.11 ms +4.8% -13.92%	-11.9%
inserterHover	9.9 ms +5.56% -7.68%	9.57 ms +6.58% -7.52%	3.45%
inserterSearch	6.66 ms +7.06% -3.3%	7 ms +7.14% -4.29%	-4.86%
loadPatterns	464.16 ms +3.01% -1.5%	458.27 ms +1% -1.14%	1.29%
wpTotal	259.73 ms +11.25% -2.29%	280.82 ms +8.31% -8.24%	-7.51%
wpMemoryUsage	14.75 MB +0% -0%	14.72 MB +0% -0%	0.24%
wpDbQueries	55 +0% -0%	55 +0% -0%	0%

site-editor

Metric	fd40ee3	trunk	% Change
serverResponse	308.38 ms +11.53% -3.54%	315.43 ms +4.83% -9%	-2.24%
firstPaint	212.96 ms +13.53% -8.07%	180.14 ms +13.75% -11.47%	18.22%
domContentLoaded	715.54 ms +0.83% -1.65%	678.05 ms +0.99% -2.06%	5.53%
loaded	716.47 ms +0.82% -1.67%	678.98 ms +0.96% -2.05%	5.52%
firstContentfulPaint	409.52 ms +1.53% -4.51%	392.03 ms +1.93% -4.83%	4.46%
firstBlock	3131.69 ms +0.35% -0.45%	2958.86 ms +1.95% -0.61%	5.84%
type	17.74 ms +2.14% -8.68%	15.26 ms +4.39% -4.33%	16.25%
navigate	99.02 ms +8.55% -1.73%	100.36 ms +4.97% -2.03%	-1.34%
loadPatterns	984.19 ms +27.42% -2.68%	928.71 ms +13.72% -6.79%	5.97%
loadPages	986.67 ms +4.01% -7.02%	1015.92 ms +0.96% -7.63%	-2.88%
wpTotal	300.11 ms +11.85% -3.6%	307.48 ms +4.9% -9.29%	-2.4%
wpMemoryUsage	12.77 MB +0% -0%	12.74 MB +0% -0%	0.24%
wpDbQueries	44 +2.27% -0%	44 +2.27% -0%	0%

_{97c9ae3 Run}

🏁 Flaky tests

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.

As a user I want to be able to add multiple close buttons so that users can close the overlay from different positions in /test/e2e/specs/site-editor/navigation-overlay-template-part.spec.js, passed after 1 failed attempt.

Error: expect(locator).toHaveCount(expected) failed

Locator:  getByRole('button', { name: 'Close' })
Expected: 2
Received: 1
Timeout:  5000ms

Call log:
  - Expect "toHaveCount" getByRole('button', { name: 'Close' }) with timeout 5000ms
  - waiting for getByRole('button', { name: 'Close' })
    14 × locator resolved to 1 element
       - unexpected value "1"

    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/site-editor/navigation-overlay-template-part.spec.js:228:33

Delete (forward) in /test/e2e/specs/editor/blocks/list.spec.js, passed after 1 failed attempt.

Error: expect(received).toMatchObject(expected)

- Expected  -  2
+ Received  + 25

@@ -1,25 +1,48 @@
  Array [
    Object {
      "innerBlocks": Array [
        Object {
          "attributes": Object {
-           "content": "1",
+           "content": "‸",
          },
          "innerBlocks": Array [
            Object {
+             "attributes": Object {
+               "ordered": false,
+               "values": "",
+             },
              "innerBlocks": Array [
                Object {
                  "attributes": Object {
-                   "content": "a‸2",
+                   "content": "a",
                  },
+                 "innerBlocks": Array [],
                  "name": "core/list-item",
+               },
+             ],
+             "name": "core/list",
            },
+         ],
+         "name": "core/list-item",
+       },
+       Object {
+         "attributes": Object {
+           "content": "2",
+         },
+         "innerBlocks": Array [
            Object {
              "attributes": Object {
+               "ordered": false,
+               "values": "",
+             },
+             "innerBlocks": Array [
+               Object {
+                 "attributes": Object {
                    "content": "b",
                  },
+                 "innerBlocks": Array [],
                  "name": "core/list-item",
                },
              ],
              "name": "core/list",
            },

Call Log:
- Timeout 5000ms exceeded while waiting on the predicate
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/blocks/list.spec.js:2056:42

Undo restores the post selection when another synced entity is loaded (RTC WebSocket) in /test/e2e/specs/editor/collaboration/collaboration-undo-redo.spec.ts, passed after 1 failed attempt.

Error: expect(received).toMatchObject(expected)

- Expected  - 2
+ Received  + 2

  Object {
    "attributeKey": "content",
    "blockIndex": 0,
    "content": "abcdef",
-   "endOffset": 3,
-   "offset": 3,
+   "endOffset": 6,
+   "offset": 6,
  }

Call Log:
- Timeout 5000ms exceeded while waiting on the predicate
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/collaboration/collaboration-undo-redo.spec.ts:363:5

can be converted when nested to paragraphs in /test/e2e/specs/editor/blocks/list.spec.js, passed after 1 failed attempt.

Error: expect(received).toBe(expected) // Object.is equality

- Expected  - 1
+ Received  + 1

  <!-- wp:paragraph -->
- <p>one</p>
+ <p>ne</p>
  <!-- /wp:paragraph -->

  <!-- wp:paragraph -->
  <p>two</p>
  <!-- /wp:paragraph -->

Call Log:
- Timeout 5000ms exceeded while waiting on the predicate
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/blocks/list.spec.js:417:52

should cut and paste individual blocks with collapsed selection in /test/e2e/specs/editor/various/copy-cut-paste.spec.js, passed after 1 failed attempt.

Error: expect(string).toMatchSnapshot(expected) failed

  @@ -1,3 +1,3 @@
   <!-- wp:paragraph -->
  -<p>2Cut - collapsed selection</p>
  +<p>2</p>
   <!-- /wp:paragraph -->


    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/copy-cut-paste.spec.js:45:49

should format text across blocks in /test/e2e/specs/editor/various/multi-block-selection.spec.js, passed after 1 failed attempt.

Error: expect(received).toMatchObject(expected)

- Expected  - 1
+ Received  + 1

@@ -1,9 +1,9 @@
  Array [
    Object {
      "attributes": Object {
-       "content": "ab",
+       "content": "b",
      },
      "name": "core/paragraph",
    },
    Object {
      "attributes": Object {

Call Log:
- Timeout 5000ms exceeded while waiting on the predicate
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/multi-block-selection.spec.js:2219:41

should gradually multi-select in /test/e2e/specs/editor/various/multi-block-selection.spec.js, passed after 1 failed attempt.

Error: expect(received).toMatchObject(expected)

- Expected  - 1
+ Received  + 1

  Array [
    Object {
-     "name": "core/column",
+     "name": "core/paragraph",
    },
  ]

Call Log:
- Timeout 5000ms exceeded while waiting on the predicate
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/multi-block-selection.spec.js:1194:5

should indent and outdent a list item when its content is fully selected in /test/e2e/specs/editor/blocks/list.spec.js, passed after 1 failed attempt.

Error: expect(received).toBe(expected) // Object.is equality

- Expected  - 7
+ Received  + 7

  <!-- wp:list -->
  <ul class="wp-block-list"><!-- wp:list-item -->
- <li>a<!-- wp:list -->
- <ul class="wp-block-list"><!-- wp:list-item -->
- <li>b</li>
+ <li></li>
+ <!-- /wp:list-item --></ul>
- <!-- /wp:list-item --></ul>
+ <!-- /wp:list -->
+
- <!-- /wp:list --></li>
- <!-- /wp:list-item --></ul>
+ <!-- wp:paragraph -->
+ <p>b</p>
- <!-- /wp:list -->
+ <!-- /wp:paragraph -->

Call Log:
- Timeout 5000ms exceeded while waiting on the predicate
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/blocks/list.spec.js:819:52

should indent with Space and outdent with Shift+Space at the start in /test/e2e/specs/editor/blocks/list.spec.js, passed after 1 failed attempt.

Error: expect(received).toBe(expected) // Object.is equality

- Expected  - 5
+ Received  + 1

  <!-- wp:list -->
  <ul class="wp-block-list"><!-- wp:list-item -->
- <li>a<!-- wp:list -->
- <ul class="wp-block-list"><!-- wp:list-item -->
- <li>b</li>
- <!-- /wp:list-item --></ul>
- <!-- /wp:list --></li>
+ <li></li>
  <!-- /wp:list-item --></ul>
  <!-- /wp:list -->

Call Log:
- Timeout 5000ms exceeded while waiting on the predicate
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/blocks/list.spec.js:875:52

should insert a line break on shift+enter in a non trailing list item in /test/e2e/specs/editor/blocks/list.spec.js, passed after 1 failed attempt.

Error: expect(received).toBe(expected) // Object.is equality

- Expected  - 10
+ Received  + 10

  <!-- wp:list -->
  <ul class="wp-block-list"><!-- wp:list-item -->
- <li>a</li>
+ <li></li>
- <!-- /wp:list-item -->
-
+ <!-- /wp:list-item --></ul>
- <!-- wp:list-item -->
+ <!-- /wp:list -->
+
+ <!-- wp:paragraph -->
- <li>b<br></li>
+ <p>b<br></p>
- <!-- /wp:list-item -->
+ <!-- /wp:paragraph -->

- <!-- wp:list-item -->
+ <!-- wp:paragraph -->
- <li>c</li>
+ <p>c</p>
- <!-- /wp:list-item --></ul>
- <!-- /wp:list -->
+ <!-- /wp:paragraph -->

Call Log:
- Timeout 5000ms exceeded while waiting on the predicate
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/blocks/list.spec.js:1233:52

should keep the list type when indenting an ordered list item in /test/e2e/specs/editor/blocks/list.spec.js, passed after 1 failed attempt.

Error: expect(received).toBe(expected) // Object.is equality

- Expected  - 1
+ Received  + 1

@@ -1,8 +1,8 @@
  <!-- wp:list {"ordered":true} -->
  <ol class="wp-block-list"><!-- wp:list-item -->
- <li>one<!-- wp:list {"ordered":true} -->
+ <li>ne<!-- wp:list {"ordered":true} -->
  <ol class="wp-block-list"><!-- wp:list-item -->
  <li>two</li>
  <!-- /wp:list-item --></ol>
  <!-- /wp:list --></li>
  <!-- /wp:list-item --></ol>

Call Log:
- Timeout 5000ms exceeded while waiting on the predicate
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/blocks/list.spec.js:916:52

should merge a following sibling list into the outermost list with Delete from a nested item (#77245) in /test/e2e/specs/editor/blocks/list.spec.js, passed after 1 failed attempt.

Error: expect(received).toMatchObject(expected)

- Expected  - 2
+ Received  + 2

@@ -8,11 +8,11 @@
          "innerBlocks": Array [
            Object {
              "innerBlocks": Array [
                Object {
                  "attributes": Object {
-                   "content": "b‸",
+                   "content": "b",
                  },
                  "name": "core/list-item",
                },
              ],
              "name": "core/list",
@@ -25,11 +25,11 @@
    },
    Object {
      "innerBlocks": Array [
        Object {
          "attributes": Object {
-           "content": "1",
+           "content": "‸1",
          },
          "innerBlocks": Array [
            Object {
              "innerBlocks": Array [
                Object {

Call Log:
- Timeout 5000ms exceeded while waiting on the predicate
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/blocks/list.spec.js:2854:41

should outdent list items when deleting an empty parent at the top in /test/e2e/specs/editor/blocks/list.spec.js, passed after 1 failed attempt.

Error: expect(received).toMatchObject(expected)

- Expected  -  0
+ Received  + 19

@@ -1,18 +1,37 @@
  Array [
    Object {
      "innerBlocks": Array [
        Object {
          "attributes": Object {
+           "content": "",
+         },
+         "innerBlocks": Array [
+           Object {
+             "attributes": Object {
+               "ordered": false,
+               "values": "",
+             },
+             "innerBlocks": Array [
+               Object {
+                 "attributes": Object {
                    "content": "a",
                  },
+                 "innerBlocks": Array [],
                  "name": "core/list-item",
                },
                Object {
                  "attributes": Object {
                    "content": "b",
                  },
+                 "innerBlocks": Array [],
+                 "name": "core/list-item",
+               },
+             ],
+             "name": "core/list",
+           },
+         ],
          "name": "core/list-item",
        },
      ],
      "name": "core/list",
    },

Call Log:
- Timeout 5000ms exceeded while waiting on the predicate
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/blocks/list.spec.js:3074:41

should replace selected non-breaking spaces from the toolbar in /test/e2e/specs/editor/various/rich-text.spec.js, passed after 1 failed attempt.

Error: expect(received).toMatchObject(expected)

- Expected  - 1
+ Received  + 1

  Array [
    Object {
      "attributes": Object {
-       "content": "one two three",
+       "content": "e two three",
      },
      "name": "core/paragraph",
    },
  ]

Call Log:
- Timeout 5000ms exceeded while waiting on the predicate
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/rich-text.spec.js:1050:41

should split indented list item in /test/e2e/specs/editor/blocks/list.spec.js, passed after 1 failed attempt.

Error: expect(received).toBe(expected) // Object.is equality

- Expected  - 1
+ Received  + 1

@@ -1,8 +1,8 @@
  <!-- wp:list -->
  <ul class="wp-block-list"><!-- wp:list-item -->
- <li>one<!-- wp:list -->
+ <li>ne<!-- wp:list -->
  <ul class="wp-block-list"><!-- wp:list-item -->
  <li>two</li>
  <!-- /wp:list-item -->

  <!-- wp:list-item -->

Call Log:
- Timeout 5000ms exceeded while waiting on the predicate
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/blocks/list.spec.js:668:52

should split into two with paragraph and merge lists in /test/e2e/specs/editor/blocks/list.spec.js, passed after 1 failed attempt.

Error: expect(received).toBe(expected) // Object.is equality

- Expected  - 1
+ Received  + 1

@@ -1,8 +1,8 @@
  <!-- wp:list -->
  <ul class="wp-block-list"><!-- wp:list-item -->
- <li>one</li>
+ <li>ne</li>
  <!-- /wp:list-item -->

  <!-- wp:list-item -->
  <li></li>
  <!-- /wp:list-item -->

Call Log:
- Timeout 5000ms exceeded while waiting on the predicate
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/blocks/list.spec.js:502:52

_{Truncated. See the full report.}

_{97c9ae3 Run}

[ciampo]

@WordPress/gutenberg-components @WordPress/gutenberg-design This PR is also updated following the latest approach used also in #84087.

Ready for a review ! (Note: I'm still finishing locally a finaly code push that uses more WPDS tokens, should be pushed soon)

[jameskoster]

I noticed the items in unpadded popovers have a radius which I don't think they have on trunk, is that intentional?

This interaction in the editor is a bit strange, it looks like a rogue hover style on the first item:

Screen.Recording.2026-10-22.at.19.39.58.mov

[ciampo]

@jameskoster well spotted.

The border radius should be better now, and I also made a change to DropdownMenu so that the first item get auto focused only when opening via keyboard

[ciampo]

I opened a few side-quest PRs that should probably be merged before this one.

Flush option rows are square again. The opening-focus change is now separate in #85486, and #85487 handles competing hover and keyboard highlights.

[Copilot]

🟢 Approval recommended

No active review issues remain for the popup highlight styling changes.

No open issues 🎉

What changed in this PR

Aligns popup highlights in @wordpress/components with the solid brand treatment in @wordpress/ui, including supporting text and icons in editor consumers.

Changes:

• Shares paired foreground/background styles for active popup items while retaining disabled focus cues and neutral inactive submenu parents.
• Updates menu, select, and autocomplete highlights without adding navigation behavior.
• Documents custom option color behavior and adds a demonstration story and package changelog entries.

File	Description
packages/​editor/​src/​components/​autocompleters/​style.scss	Makes mention slugs inherit active item colors.
packages/​editor/​CHANGELOG.md	Records mention styling changes.
packages/​components/​src/​utils/​popup-item.scss	Defines hover suppression around keyboard targets.
packages/​components/​src/​utils/​composite-item.scss	Shares brand highlights and open-parent styles.
packages/​components/​src/​menu/​style.module.scss	Updates menu colors, supporting content, and disabled focus cues.
packages/​components/​src/​menu-item/​style.scss	Applies shared highlights to MenuItem.
packages/​components/​src/​form-token-field/​style.scss	Updates selected suggestions and disabled focus styling.
packages/​components/​src/​dropdown/​style.scss	Applies shared highlights to dropdown menu buttons.
packages/​components/​src/​custom-select-control/​stories/​index.story.tsx	Demonstrates custom option colors.
packages/​components/​src/​custom-select-control/​README.md	Documents active and inactive custom color behavior.
packages/​components/​src/​custom-select-control-v2/​style.module.scss	Pairs active option colors and inherits hint colors.
packages/​components/​src/​autocomplete/​style.scss	Adds shared highlights and disabled focus cues.
packages/​components/​src/​autocomplete/​autocompleter-ui.tsx	Uses selection styling instead of the primary Button variant.
packages/​components/​CHANGELOG.md	Records popup highlight changes.
packages/​block-editor/​src/​components/​link-control/​style.scss	Aligns result labels with active item colors.
packages/​block-editor/​src/​components/​block-switcher/​style.scss	Makes highlighted transform icons inherit item colors.
packages/​block-editor/​src/​autocompleters/​style.scss	Clears custom icon backgrounds on active results.
packages/​block-editor/​CHANGELOG.md	Records result label and block icon updates.

_{Review effort: Balanced}

[mirka]

Thanks for all the follow up!

[github-actions]

There was a conflict while trying to cherry-pick the commit to the wp/7.2 branch. Please resolve the conflict manually and create a PR to the wp/7.2 branch.

PRs to wp/7.2 are similar to PRs to trunk, but you should base your PR on the wp/7.2 branch instead of trunk.

# Checkout the wp/7.2 branch instead of trunk.
git checkout wp/7.2

# Create a new branch for your PR.
git checkout -b my-branch

# Cherry-pick the commit.
git cherry-pick 5c21fdfad49abdb23c567a5c2aa18beadf264465

# Check which files have conflicts.
git status

# Resolve the conflict...
# Add the resolved files to the staging area.
git status
git add .
git cherry-pick --continue

# Push the branch to the repository
git push origin my-branch

# Create a PR and set the base to the wp/7.2 branch.
# See https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/changing-the-base-branch-of-a-pull-request.

[Mamaduka]

@ciampo, could you create backport PRs for both release branches? A conflict in wp/7.2 means there is a high chance of a conflict in release/24.3. Had to resolve similar conflicts in #85836.

[ciampo]

• Backported to WP 7.2 in Components: Use solid brand highlights for popup items (7.2 backport) #85848
• Backported to Gutenberg 24.3 in Components: Use solid brand highlights for popup items (24.3 backport) #85849