Skip to content

Tabs: Fix classic theme styles selector for tab buttons - #85504

Open
t-hamano wants to merge 1 commit into
trunkfrom
fix/tab-list-classic-theme-selector
Open

t-hamano wants to merge 1 commit into
trunkfrom
fix/tab-list-classic-theme-selector

Conversation

@t-hamano

@t-hamano t-hamano commented Oct 24, 2026 •

Copy link
Copy Markdown
Contributor

What?

Follow up to #77607 and #77439.

Updates the selector of the Tabs reset styles in classic.scss from .wp-block-tab to .wp-block-tab-list button.

Why?

#77607 added reset styles for tab buttons in themes without a theme.json, targeting .wp-block-tab. The Tab block was later removed in #77439, and tab buttons are now rendered by the Tab List block as button elements without the wp-block-tab class. As a result, .wp-block-tab no longer matches anything, and the color, hover/focus, and focus outline resets are not applied in classic themes.

How?

Target the button elements inside the Tab List block.

Testing Instructions

  1. Activate a classic theme that applies colors and hover/focus styles to button elements (e.g. Twenty Twenty or Twenty Twenty-One).
  2. Insert a Tabs block and save the post.
  3. On the front end and in the editor, confirm that the tab buttons inherit the surrounding text and background colors, have no text decoration on hover/focus, and show an outline when focused with the keyboard.
  4. Set a text color and background color on the Tab List block, and confirm they are applied to the tab buttons.

Screenshots

Twenty Twenty-One

twentytwentyone-comparison

Twenty Twenty

twentytwenty-comparison

Twenty Nineteen

twentynineteen-comparison

Twenty Seventeen

twentyseventeen-comparison

Use of AI Tools

This PR was authored with Claude Code, and reviewed by me.

The Tab block was removed in #77439, and tab buttons are now rendered by
the Tab List block without the wp-block-tab class, so the classic theme
reset styles added in #77607 no longer apply. Target the buttons inside
the Tab List block instead.

Co-authored-by: t-hamano <54422211+t-hamano@users.noreply.github.com>
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EMtGRwVR85RzV9cmdeqr9c
@t-hamano
t-hamano requested a review from fabiankaegy as a code owner October 24, 2026 10:42
@t-hamano t-hamano added [Type] Bug An existing feature does not function as intended [Block] Tabs Affects the Tabs Block labels Oct 24, 2026
@t-hamano t-hamano self-assigned this Oct 24, 2026
@github-actions github-actions Bot added the [Package] Block library /packages/block-library label Oct 24, 2026
@github-actions

github-actions Bot commented Oct 24, 2026 •

Copy link
Copy Markdown

🤖 PR meta 🤖

Preview in WordPress Playground

🎉 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: t-hamano <wildworks@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: +36 B (0%)

Total Size: 9.07 MB

📦 View Changed
Filename Size Change
build/styles/block-library/classic-rtl.css 412 B +10 B (+2.49%)
build/styles/block-library/classic-rtl.min.css 366 B +8 B (+2.23%)
build/styles/block-library/classic.css 412 B +10 B (+2.49%)
build/styles/block-library/classic.min.css 366 B +8 B (+2.23%)

6b79bc7 Run

⚡ Performance

Show the results

Client side metrics exclude the server response time.

front-end-block-theme

Metric f261820 trunk % Change
timeToFirstByte 58.6 ms +7.59% -8.87% 53.7 ms +15.08% -1.21% 9.12%
largestContentfulPaint 94 ms +6.38% -6.38% 92 ms +4.35% -4.35% 2.17%
lcpMinusTtfb 34.8 ms +13.51% -4.31% 34.6 ms +21.24% -6.94% 0.58%
wpBeforeTemplate 30.17 ms +13.99% -4.38% 29.07 ms +18.51% -1.1% 3.78%
wpTemplate 21.46 ms +8.11% -4.61% 21.12 ms +3.03% -3.6% 1.61%
wpTotal 54.84 ms +6.25% -9.17% 50.03 ms +14.35% -1.3% 9.61%
wpMemoryUsage 7.68 MB +0% -0% 7.65 MB +0% -0% 0.43%
wpDbQueries 16 +0% -0% 16 +0% -0% 0%

front-end-classic-theme

Metric f261820 trunk % Change
timeToFirstByte 47.3 ms +7.29% -2.64% 46.3 ms +5.08% -1.51% 2.16%
largestContentfulPaint 104 ms +1.92% -3.85% 100 ms +4% -0% 4%
lcpMinusTtfb 56 ms +2.23% -3.48% 54 ms +1.48% -0.56% 3.7%
wpBeforeTemplate 26.94 ms +7.61% -1.48% 27.32 ms +0.95% -2.34% -1.39%
wpTemplate 16.47 ms +5.53% -1.21% 15.88 ms +4.22% -0.57% 3.72%
wpTotal 43.99 ms +6.34% -2.39% 43.18 ms +5.28% -1.34% 1.88%
wpMemoryUsage 6.37 MB +0% -0% 6.34 MB +0% -0% 0.54%
wpDbQueries 13 +0% -0% 13 +0% -0% 0%

media-processing

Metric f261820 trunk % Change
mediaProcessingJpeg 400.92 ms +0.19% -0.89% 405.1 ms +1.09% -0.07% -1.03%
mediaProcessingAvif 6071.07 ms +0.27% -0.14% 6102.63 ms +0.03% -0.22% -0.52%
mediaProcessingJpegToAvif 4193.1 ms +0.06% -0.11% 4207.4 ms +0.44% -0.08% -0.34%

media-upload

Metric f261820 trunk % Change
jpegUploadProcessing 1453.66 ms +32.79% -2.1% 1431.81 ms +1.55% -0.73% 1.53%
pngUploadProcessing 219.46 ms +14.32% -3.74% 213.13 ms +5.35% -16.44% 2.97%
largeJpegUploadProcessing 1420.72 ms +1.44% -0.46% 1436.81 ms +2.42% -1.01% -1.12%
multipleImageUploadProcessing 1602.52 ms +10.28% -2.6% 1617.21 ms +25.74% -1.86% -0.91%

post-editor

Metric f261820 trunk % Change
serverResponse 415.38 ms +2.37% -8.6% 396.56 ms +9.43% -4.25% 4.75%
firstPaint 319.59 ms +44.93% -26.86% 266.21 ms +85.28% -10.31% 20.05%
domContentLoaded 1196.62 ms +1.95% -2.08% 1150.08 ms +1.72% -1.68% 4.05%
loaded 1197.79 ms +1.93% -2.09% 1151.33 ms +1.72% -1.69% 4.04%
firstContentfulPaint 508.7 ms +3.14% -8.95% 497.73 ms +2.27% -7.49% 2.2%
firstBlock 3353.44 ms +1.45% -1.53% 3203.26 ms +2.78% -1.07% 4.69%
type 17.32 ms +6% -1.1% 17.46 ms +11.34% -2.58% -0.8%
typeWithoutInspector 17.83 ms +3.93% -6.11% 17.58 ms +3.64% -1.93% 1.42%
typeWithTopToolbar 21.89 ms +0.87% -2.83% 23.84 ms +2.22% -6.29% -8.18%
typeContainer 7.86 ms +6.49% -6.62% 7.71 ms +13.49% -6.23% 1.95%
focus 113.55 ms +5.13% -3.49% 106.35 ms +11.99% -4.38% 6.77%
firstFocus 222.8 ms +0% -0% 220.37 ms +0% -0% 1.1%
selectAll 505.1 ms +0.28% -1.82% 523.49 ms +4.24% -1.65% -3.51%
listViewOpen 77.79 ms +15.52% -9.8% 73.21 ms +9.49% -5.91% 6.26%
inserterOpen 40.66 ms +13.77% -0.49% 41.36 ms +4.81% -10.98% -1.69%
inserterHover 12.1 ms +4.13% -8.43% 11.73 ms +5.12% -7.59% 3.15%
inserterSearch 8.88 ms +2.82% -2.82% 8.45 ms +4.97% -7.81% 5.09%
loadPatterns 603.16 ms +3.61% -3.78% 630.46 ms +5.5% -7.64% -4.33%
wpTotal 404.88 ms +2.36% -8.88% 386.03 ms +9.67% -4.26% 4.88%
wpMemoryUsage 14.71 MB +0% -0% 14.68 MB +0% -0% 0.24%
wpDbQueries 55 +0% -1.82% 55 +0% -1.82% 0%

site-editor

Metric f261820 trunk % Change
serverResponse 334.02 ms +7.72% -0.5% 340.68 ms +3.34% -2.29% -1.95%
firstPaint 201.11 ms +10.03% -1.48% 216.79 ms +28% -7.46% -7.23%
domContentLoaded 1011.47 ms +0.62% -2.43% 1004.22 ms +1.05% -1.8% 0.72%
loaded 1012.45 ms +0.63% -2.44% 1005.12 ms +1.05% -1.8% 0.73%
firstContentfulPaint 403.95 ms +4.56% -12.82% 421.09 ms +3.62% -7.72% -4.07%
firstBlock 3542.99 ms +0.97% -0.49% 3479.88 ms +1.2% -0.29% 1.81%
type 16.13 ms +1.86% -5.52% 16.06 ms +3.42% -2.12% 0.44%
navigate 92.38 ms +10.33% -5.68% 96.55 ms +10.04% -8.67% -4.32%
loadPatterns 1105.7 ms +20.73% -6.99% 1039.68 ms +5.44% -12.54% 6.35%
loadPages 982.17 ms +4.19% -1.85% 966.32 ms +3.48% -0.29% 1.64%
wpTotal 325.93 ms +7.8% -0.58% 332.53 ms +3.28% -2.28% -1.98%
wpMemoryUsage 12.73 MB +0% -0% 12.70 MB +0% -0% 0.24%
wpDbQueries 44.5 +1.12% -1.12% 44 +2.27% -0% 1.14%

6b79bc7 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.

Custom Completer: should allow newlines after multiple option completions in /test/e2e/specs/editor/various/autocomplete-and-mentions.spec.js, passed after 1 failed attempt.
Error: expect(received).toBe(expected) // Object.is equality

- Expected  - 2
+ Received  + 2

@@ -1,15 +1,15 @@
  <!-- wp:paragraph -->
- <p>🫐 test</p>
+ <p>🍎 test</p>
  <!-- /wp:paragraph -->

  <!-- wp:paragraph -->
  <p>🫐 test</p>
  <!-- /wp:paragraph -->

  <!-- wp:paragraph -->
- <p>🫐 test</p>
+ <p>🍎 test</p>
  <!-- /wp:paragraph -->

  <!-- wp:paragraph -->
  <p>🫐 test</p>
  <!-- /wp:paragraph -->

Call Log:
- Timeout 5000ms exceeded while waiting on the predicate
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/autocomplete-and-mentions.spec.js:466:6
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": 1,
+   "offset": 1,
  }

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
should change the indented list type in /test/e2e/specs/editor/blocks/list.spec.js, passed after 1 failed attempt.
TimeoutError: locator.click: Timeout 10000ms exceeded.
Call log:
  - waiting for locator('role=toolbar[name="Block tools"i]').locator('role=button[name="Indent"]')
    - locator resolved to <button id="_r_1b_" type="button" tabindex="-1" aria-label="Indent" aria-disabled="true" data-toolbar-item="true" data-truly-disabled="false" aria-describedby="components-button__description-19" class="components-button components-toolbar-button is-compact has-icon">…</button>
  - attempting click action
    2 × waiting for element to be visible, enabled and stable
      - element is not enabled
    - retrying click action
    - waiting 20ms
    2 × waiting for element to be visible, enabled and stable
      - element is not enabled
    - retrying click action
      - waiting 100ms
    18 × waiting for element to be visible, enabled and stable
       - element is not enabled
     - retrying click action
       - waiting 500ms

    at Editor.clickBlockToolbarButton (/home/runner/work/gutenberg/gutenberg/packages/e2e-test-utils-playwright/src/editor/click-block-toolbar-button.ts:17:15)
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/blocks/list.spec.js:727:3
should create paragraph on split at end and merge back with content 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 --></ul>
  <!-- /wp:list -->

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

Call Log:
- Timeout 5000ms exceeded while waiting on the predicate
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/blocks/list.spec.js:461:52
should indent and outdent level 2 in /test/e2e/specs/editor/blocks/list.spec.js, passed after 1 failed attempt.
TimeoutError: locator.click: Timeout 10000ms exceeded.
Call log:
  - waiting for locator('role=toolbar[name="Block tools"i]').locator('role=button[name="Indent"]')

    at Editor.clickBlockToolbarButton (/home/runner/work/gutenberg/gutenberg/packages/e2e-test-utils-playwright/src/editor/click-block-toolbar-button.ts:17:15)
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/blocks/list.spec.js:933:3
should keep a full selection when outdenting nested items with Shift+Tab in /test/e2e/specs/editor/blocks/list.spec.js, passed after 1 failed attempt.
TimeoutError: locator.click: Timeout 10000ms exceeded.
Call log:
  - waiting for locator('role=toolbar[name="Block tools"i]').locator('role=button[name="Indent"]')

    at Editor.clickBlockToolbarButton (/home/runner/work/gutenberg/gutenberg/packages/e2e-test-utils-playwright/src/editor/click-block-toolbar-button.ts:17:15)
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/blocks/list.spec.js:1166:3
should leave nested list intact when deleting the parent item in /test/e2e/specs/editor/blocks/list.spec.js, passed after 1 failed attempt.
Error: expect(received).toMatchObject(expected)

- Expected  -  0
+ Received  + 13

@@ -3,17 +3,29 @@
      "innerBlocks": Array [
        Object {
          "attributes": Object {
            "content": "1",
          },
+         "innerBlocks": Array [],
+         "name": "core/list-item",
+       },
+       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",
                },
              ],
              "name": "core/list",
            },
@@ -22,10 +34,11 @@
        },
        Object {
          "attributes": Object {
            "content": "3",
          },
+         "innerBlocks": Array [],
          "name": "core/list-item",
        },
      ],
      "name": "core/list",
    },
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/blocks/list.spec.js:3017:38
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 with children in /test/e2e/specs/editor/blocks/list.spec.js, passed after 1 failed attempt.
TimeoutError: locator.click: Timeout 10000ms exceeded.
Call log:
  - waiting for locator('role=toolbar[name="Block tools"i]').locator('role=button[name="Indent"]')

    at Editor.clickBlockToolbarButton (/home/runner/work/gutenberg/gutenberg/packages/e2e-test-utils-playwright/src/editor/click-block-toolbar-button.ts:17:15)
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/blocks/list.spec.js:1055:3
should preserve dragged selection on move in /test/e2e/specs/editor/various/multi-block-selection.spec.js, passed after 1 failed attempt.
TimeoutError: locator.hover: Timeout 10000ms exceeded.
Call log:
  - waiting for locator('[name="editor-canvas"]').contentFrame().getByRole('document', { name: 'Block: Paragraph' }).nth(1)
    - locator resolved to <p role="document" data-empty="false" aria-multiline="true" aria-readonly="false" data-title="Paragraph" contenteditable="true" data-type="core/paragraph" aria-label="Block: Paragraph" data-wp-block-attribute-key="content" id="block-68fa971d-806b-4655-aaf1-a440e74c78d9" data-block="68fa971d-806b-4655-aaf1-a440e74c78d9" class="block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-paragraph rich-text">2</p>
  - attempting hover action
    2 × waiting for element to be visible and stable
      - element is visible and stable
      - scrolling into view if needed
      - done scrolling
      - <button id="_r_5u_" type="button" tabindex="-1" aria-label="Link" aria-pressed="false" aria-haspopup="true" aria-expanded="false" data-toolbar-item="true" class="components-button components-toolbar-button is-compact has-icon">…</button> from <div tabindex="-1" data-wp-c16t="true" data-wp-component="Popover" class="components-popover block-editor-block-popover block-editor-block-list__block-popover is-positioned is-unstyled">…</div> subtree intercepts pointer events
    - retrying hover action
    - waiting 20ms
    2 × waiting for element to be visible and stable
      - element is visible and stable
      - scrolling into view if needed
      - done scrolling
      - <button id="_r_5u_" type="button" tabindex="-1" aria-label="Link" aria-pressed="false" aria-haspopup="true" aria-expanded="false" data-toolbar-item="true" class="components-button components-toolbar-button is-compact has-icon">…</button> from <div tabindex="-1" data-wp-c16t="true" data-wp-component="Popover" class="components-popover block-editor-block-popover block-editor-block-list__block-popover is-positioned is-unstyled">…</div> subtree intercepts pointer events
    - retrying hover action
      - waiting 100ms
    13 × waiting for element to be visible and stable
       - element is visible and stable
       - scrolling into view if needed
       - done scrolling
       - <button id="_r_5u_" type="button" tabindex="-1" aria-label="Link" aria-pressed="false" aria-haspopup="true" aria-expanded="false" data-toolbar-item="true" class="components-button components-toolbar-button is-compact has-icon">…</button> from <div tabindex="-1" data-wp-c16t="true" data-wp-component="Popover" class="components-popover block-editor-block-popover block-editor-block-list__block-popover is-positioned is-unstyled">…</div> subtree intercepts pointer events
     - retrying hover action
       - waiting 500ms

    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/multi-block-selection.spec.js:816:20
should replace the selection across blocks with an inline image 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:2372:41
should update the URL from the last navigation if only varies in the URL fragment in /test/e2e/specs/interactivity/router-navigate.spec.ts, passed after 1 failed attempt.
Error: expect(locator).toHaveText(expected) failed

Locator:  getByTestId('title')
Expected: "Link 1"
Received: "Main"
Timeout:  5000ms

Call log:
  - Expect "toHaveText" getByTestId('title') with timeout 5000ms
  - waiting for getByTestId('title')
    14 × locator resolved to <h2 data-testid="title">Main</h2>
       - unexpected value "Main"

    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/interactivity/router-navigate.spec.ts:160:25
shows title and sync status while creating a new synced pattern in the post editor in /test/e2e/specs/editor/various/post-summary/post-summary.spec.js, passed after 1 failed attempt.
Error: expect(locator).toBeVisible() failed

Locator: getByRole('dialog', { name: 'Create pattern' })
Expected: visible
Timeout: 5000ms
Error: element(s) not found

Call log:
  - Expect "toBeVisible" getByRole('dialog', { name: 'Create pattern' }) with timeout 5000ms
  - waiting for getByRole('dialog', { name: 'Create pattern' })

    at createPatternFromModal (/home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/post-summary/post-summary.spec.js:179:26)
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/post-summary/post-summary.spec.js:101:4

6b79bc7 Run

@t-hamano t-hamano added [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. [Block] Accordion Affects the Accordion Block labels Oct 24, 2026
@t-hamano

Copy link
Copy Markdown
Contributor Author

P.S. I noticed that Core has its own equivalent stylesheet, which has become outdated. I have submitted WordPress/wordpress-develop#14826 to reference the latest stylesheet synced from Gutenberg.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Block] Accordion Affects the Accordion Block [Block] Tabs Affects the Tabs Block [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. [Package] Block library /packages/block-library [Type] Bug An existing feature does not function as intended

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants