Описание

WordPress 7.1 added a basic Tabs block. Metro Tabs uses the same accessible tabs pattern and adds what Core doesn’t do:

Vertical tabs – tab list on the side, with Up/Down arrow keys.
Accordion on mobile – below a width you choose, the tabs turn into an accordion.
Shareable links – optionally update the address bar when a tab opens, so every tab has its own #link. Links work on page load and when the hash changes.
Remember the last tab a visitor opened on a page.
Icons in tab labels (Dashicons).
Style presets – Metro (underline), Pills, Boxed and Segmented, plus Color, Typography and Spacing panels.
Fade or slide panel animation, switched off for visitors who prefer reduced motion.
Style pack for core Tabs – the same four presets for the core Tabs block.
No lock-in – transform Metro Tabs to core Tabs and back.
Tabs are rendered on the server, so there is no flash of unstyled content, and the small script only loads on pages with tabs.

Add a Metro Tabs block, then edit the Tab Item blocks inside it. Each tab has a heading (the label visitors click) and a content area that takes any blocks.

How to use

In the block editor, add a Metro Tabs block (search for “Metro Tabs” or “tabs”).
Inside it, you’ll see placeholder Tab Items (e.g. “Tab 1”, “Tab 2”). Click each Metro Tabs: Tab Item block and:
- Edit the tab heading (the text shown on the tab) and, optionally, pick an icon in the sidebar.
- Add any blocks in the tab content area (paragraphs, images, etc.).
Select the Metro Tabs block to choose the orientation, accordion breakpoint, animation, links and style.
Publish or update. You can use several Metro Tabs blocks on the same page.

Explore more WordPress Plugins.

Compatibility

Requires WordPress 7.1 or higher.
Requires PHP 8.0 or higher.

From the same author

Скриншоты

Отзывы

Нет отзывов об этом плагине.

Участники и разработчики

«Metro Tabs – Vertical, Responsive & Linkable Tabs Block» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

Ciprian Popescu

Перевести «Metro Tabs – Vertical, Responsive & Linkable Tabs Block» на ваш язык.

Заинтересованы в разработке?

Посмотрите код, проверьте SVN репозиторий, или подпишитесь на журнал разработки по RSS.

Журнал изменений

1.2.0

FEATURE: Vertical tabs (Up/Down arrow keys, aria-orientation="vertical")
FEATURE: Accordion below a chosen screen width
FEATURE: Optional address bar update on tab change, and remember the last opened tab
FEATURE: Dashicons in tab labels
FEATURE: Style presets (Metro, Pills, Boxed, Segmented), Color, Typography, Spacing and anchor support
FEATURE: Fade/slide panel animation (respects reduced motion)
FEATURE: Style pack for the core Tabs block, and transforms between Metro Tabs and core Tabs
PERFORMANCE: Tabs are rendered on the server (no layout shift); the script is a small ES module loaded only on pages with tabs; the stylesheet only loads with the block
UPDATE: The tab list is now a div of buttons instead of ul/li. Existing tab links (#metrotabs-g0-…) keep working. Update any custom CSS that targeted .metro-tabs-block ul li
UPDATE: Tab items saved outside a tab group (very old content) render as a native disclosure
UPDATE: Requires WordPress 7.1

1.1.7

UPDATE: Tested up to WordPress 7.1
DOCS: Add WordPress Plugins directory and donation link

1.1.6

UPDATE: Tested up to WordPress 7.1
DOCS: Add WordPress Plugins directory and donation link

1.1.5

Add WAI-ARIA Tabs pattern (roles, states, and properties)
Add keyboard navigation (Arrow keys, Home, End) with automatic activation
Add roving tabindex and visible focus styles for keyboard users
Rename .simple-tabs-block CSS class to .metro-tabs-block

1.1.4

Rename all internal references from TabX to Metro Tabs
Rename asset files to use metrotabs prefix
Add docblocks for all PHP functions

1.1.3

Use plugin_dir_path() and plugin_dir_url() for correct path/URL resolution
Remove updater
Shorten readme short description
Add version and $in_footer to enqueued scripts and styles

1.1.2

Fixed plugin name

1.1.1

Fixed block registration

1.1.0

First release