Tabs Block

[dhanson-wp]

See https://github.com/WordPress/gutenberg/issues/34079.

A block that allows users to organize content into tabs. I’m not sure about all the UX yet (the relationship between the actual tab element and its content is tricky to get right in the editor), but it could be a good starting point.

[gziolo]

I wrapped up the week-long exploration of the Tabs block. I shared where I left in https://github.com/a8cteam51/special-projects-blocks-monorepo/pull/12#issuecomment-2238997046. I recreated the Example of Tabs with Automatic Activation from ARIA Authoring Practices Guide (APG). This is how it looks in action:

https://github.com/user-attachments/assets/8936fd42-126b-4b0c-8741-a4b955431841

I discussed some of the design choices more in-depth with @jarekmorawski in the issue created in the Gutenberg repository:

• https://github.com/WordPress/gutenberg/issues/34079.

@creativecoder is experimenting now with how the Tabs block could get implemented in the Gutenberg plugin:

• https://github.com/WordPress/gutenberg/pull/63689

[ahmad-aziz-web]

@gziolo I have came across your tabs block, the issue arises when we use multiple tabs blocks in same page then switching between tabs items of second tabs block changes the panel of the first tabs block.

[gziolo]

@gziolo I have came across your tabs block, the issue arises when we use multiple tabs blocks in same page then switching between tabs items of second tabs block changes the panel of the first tabs block.

Yes, that's a known issue, as I didn't finish the implementation. The IDs generated for the tab elements aren't unique between different instances on the same page. The work continues in the Gutenberg repository:

• https://github.com/WordPress/gutenberg/pull/63689

I quickly skimmed the code, and it might suffer from the same issue.