Skip to content

Tabs (experimental): apply border styles to accordion header button#74003

Closed
Shekhar0109 wants to merge 0 commit intoWordPress:trunkfrom
Shekhar0109:tabs-border-radius
Closed

Tabs (experimental): apply border styles to accordion header button#74003
Shekhar0109 wants to merge 0 commit intoWordPress:trunkfrom
Shekhar0109:tabs-border-radius

Conversation

@Shekhar0109
Copy link
Copy Markdown
Contributor

What?

This PR updates the experimental Tabs (Accordion) block so that existing
border styles—especially border radius—are applied to the actual tab
button element instead of the heading wrapper.

Why?

Currently, border styles for experimental Tabs are applied to the heading
element rather than the clickable tab button. This leads to confusing and
unexpected visuals when users adjust border radius in the Styles panel.

Applying border styles to the button itself better matches user
expectations and improves visual consistency as part of the Tabs
stabilization work.

How?

The implementation reuses existing experimental border props and moves the
border-related styles from the heading wrapper to the accordion header
button (accordion-content__toggle). No new attributes, controls, or block
supports are introduced.

##Issue links
See #73932
Related to #73230

Testing Instructions

  1. Enable experimental blocks.
  2. Insert a Tabs / Accordion block.
  3. Select a tab header.
  4. Open the Styles panel.
  5. Adjust Border Radius.

Expected result:
The tab button displays rounded corners, while the heading wrapper does not.

Testing Instructions for Keyboard

  1. Navigate to the Tabs block using the Tab key.
  2. Focus a tab header using keyboard navigation.
  3. Verify that focus styles and border radius are applied correctly to the
    tab button without affecting keyboard interaction.

@github-actions
Copy link
Copy Markdown

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

  • Required label: Any label starting with [Type].
  • Labels found: .

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

1 similar comment
@github-actions
Copy link
Copy Markdown

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

  • Required label: Any label starting with [Type].
  • Labels found: .

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

@github-actions
Copy link
Copy Markdown

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: Shekhar0109 <shekh0109@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 github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Dec 15, 2025
@github-actions
Copy link
Copy Markdown

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @Shekhar0109! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

@Shekhar0109
Copy link
Copy Markdown
Contributor Author

Closing this PR because the experimental Tabs / Accordion implementation
was refactored upstream and
packages/block-library/src/accordion-header/edit.js no longer exists on
trunk.

Happy to rework this once the new Tabs header implementation location is
finalized.

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

Labels

First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant