[MOOSE-420] FE: Support Core Tabs Block

[GeoffDusome]

What does this do/fix?

This pull request migrates the custom "Horizontal Tabs" block implementation (tribe/horizontal-tabs and tribe/horizontal-tab) to use the new core core/tabs block, and introduces a new set of styles and block registration for the core tabs. It also updates related dependencies and introduces new CSS mixins for improved accessibility and styling.

Migration to Core Tabs Block:

• Removes the custom tribe/horizontal-tabs and tribe/horizontal-tab blocks, including their registration, block JSON, editor scripts, styles, and variables. [1] [2] [3] [4] [5] [6] [7] [8]
• Updates the block definer to register and use the new core/tabs block instead of the removed custom tabs. [1] [2] [3]
• Adds a PHP class (Tabs.php) for the new core/tabs block.

New Tabs Block Styles and Scripts:

• Introduces new variables and styles specific to the core/tabs block, including theme support for light, dark, and brand themes. [1] [2]
• Adds a new entry point JavaScript file for the tabs block to load its styles.

Accessibility and Styling Improvements:

• Adds a new inset-focus-visible CSS mixin for improved focus styles, enhancing accessibility.
• Minor update to media query variables for animations.

Dependency Update:

• Updates the required WordPress version in composer.json from 7.0.4 to 7.1.

QA

Testing Environment

• http://moose-dev-pr382.d1.moderntribe.qa/

Links to relevant issues

• Link to Issue

Screenshots/video:

• Desktop tabs: https://p.tri.be/i/mKTqFG
• Mobile tabs: https://p.tri.be/i/GtXUX8

Pull request checklist

• I've added a changelog entry for these changes.
• I've linked to a relevant Jira issue.
• I've captured a screenshot or screencast of the changes and linked it above.

[GeoffDusome]

❗ Due to block markup constraints, if we want to support horizontal scrolling of the tabs, we can't have margins between the tabs due to the issue of the tab list bottom border (before pseudo element) no spanning the full width of the scrollable container.

Using a bottom border on the tab list is not an option, as then the border appears below the scrollbar and ruins the active illusion with the tab button.

[dpellenwood]

I love to see us use Core items as they become available. A couple Qs though:

1. Do you feel the Core block is ease enough for us to style/customize vs our custom version?
2. Do you think there's a way to migrate existing project's tab content from our Tribe Tabs block to the Core version? I.e. - a block migration implementation of some sort?

Thanks for tackling this, Geoff!

[GeoffDusome]

@dpellenwood

Do you feel the Core block is ease enough for us to style/customize vs our custom version?

I think if we were to remove the requirement for the "always-on" bottom border on the tab list it would be a lot easier to style and I wouldn't have to jump through loopholes, but other than that one catch the block is easy enough to style. Additionally, the horizontal scrolling is something WP just doesn't handle at all, tabs stack when the tab list is too long. The markup isn't ideal for horizontal scrolling. Not sure what we can do about this though. Horizontal scrolling seems like the only way to handle this.

Do you think there's a way to migrate existing project's tab content from our Tribe Tabs block to the Core version? I.e. - a block migration implementation of some sort?

I think anything is possible, but a manual migration is always easiest with block editor content. I'm not quite sure how a migration between blocks would work unless we're just completely rewriting the post content. Maybe something for BE to look into.

[dpellenwood]

@dpellenwood

Do you feel the Core block is ease enough for us to style/customize vs our custom version?

I think if we were to remove the requirement for the "always-on" bottom border on the tab list it would be a lot easier to style and I wouldn't have to jump through loopholes, but other than that one catch the block is easy enough to style. Additionally, the horizontal scrolling is something WP just doesn't handle at all, tabs stack when the tab list is too long. The markup isn't ideal for horizontal scrolling. Not sure what we can do about this though. Horizontal scrolling seems like the only way to handle this.

I think it's worth discussing a bit w/ Design if this is acceptable/do-able for them. :)

Do you think there's a way to migrate existing project's tab content from our Tribe Tabs block to the Core version? I.e. - a block migration implementation of some sort?

I think anything is possible, but a manual migration is always easiest with block editor content. I'm not quite sure how a migration between blocks would work unless we're just completely rewriting the post content. Maybe something for BE to look into.

It might be worth it to see if a Block Transform could be used for this.

[GeoffDusome]

It might be worth it to see if a Block Transform could be used for this.

I think a Block Transform would assume that the Horizontal Tabs block would stay in the codebase until all instances are converted (which would be case anyway with a manual migration). It would certainly help the time it takes to implement the manual changes but it would still be a manual process.