PHPackages                             humanmade/hm-tabs-block - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. humanmade/hm-tabs-block

ActiveWordpress-plugin[Utility & Helpers](/categories/utility)

humanmade/hm-tabs-block
=======================

Simple tab block for the WordPress block editor

1.0.0(2y ago)182.2k↓33.3%1[2 issues](https://github.com/humanmade/hm-tabs-block/issues)GPL-2.0-or-laterJavaScript

Since Feb 13Pushed 3mo ago14 watchersCompare

[ Source](https://github.com/humanmade/hm-tabs-block)[ Packagist](https://packagist.org/packages/humanmade/hm-tabs-block)[ RSS](/packages/humanmade-hm-tabs-block/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (1)DependenciesVersions (3)Used By (0)

HM Tabs Block
=============

[](#hm-tabs-block)

Super simple tab block for the WordPress block editor.

The Objective is to create something incredibly flexible, providing simple markup without any styling, allowing you to integrate with your theme easily.

It also aims to be accessible. The implementation is adapted from the [MDN Aria tab role documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role).

Performance is also important. The JS is lightweight and has no dependencies.

The tabs block is made up of 2 blocks. A container tabs block, and a child tabs-item block. The tabs item block is simply a wrapper, allowing you to add any content you wish.

Saved markup.
-------------

[](#saved-markup)

One of the aims of this block is to keep the saved HTML really minimal. It should look OK even if this plugin is deactivated.

All of the functionality and interactive elements are created on the fly either rendered server side or constructed in JS.

Styling the tabs.
-----------------

[](#styling-the-tabs)

The tabs are functional but unstyled.

Here is a sample of the markup to show the classes you can use to style the tabs.

```

        Tab 1
        Tab 2
        ...

            Tab 1

            Tab 2

        ...

```

### Example styling

[](#example-styling)

And here's some CSS to style up some nice old school looking tabs.

```
.hm-tabs__nav {
	display: flex;
	position: relative;
	z-index: 1;
	margin: 0 0 -1px 0;
}

.hm-tabs__nav-button {
	background-color: #ddd;
	border: 1px solid #aaa;
	padding: 12px 16px;
	margin: 0;
	font-size: 12px;
}

.hm-tabs__nav-button + .hm-tabs__nav-button {
	border-left: none;
}

.hm-tabs__nav-button--is-active {
	background-color: #fff;
	border-bottom-color: #fff;
}

.hm-tabs__content {
	background-color: #fff;
	border: 1px solid #aaa;
	padding: 16px;
}
```

### Some useful classes for styling and animation.

[](#some-useful-classes-for-styling-and-animation)

- `.hm-tabs--is-initialized` Added once JS has initialized the tab functionality.
- `.hm-tabs--is-visible` Added when the tab if first scrolled into view.
- `.hm-tabs--is-focused`` Added when a tab is active.
- `.hm-tabs-item--is-active` Added when the tab is shown and removed after.

### Example of animation

[](#example-of-animation)

Use this in addition to the styles above to create a slide/fade effect when switching tabs

```
@keyframes testFadeInLeft {
	from {
		visibility: hidden;
		opacity: 0;
		-webkit-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0);
	}

	1% {
		visibility: visible;
	}

	to {
		opacity: 1;
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
	}
}

@keyframes testFadeOutRight {
	from {
		opacity: 1;
		visibility: visible;
	}

	99% {
		visibility: visible;
	}

	to {
		opacity: 0;
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
		visibility: hidden;
	}
}

.hm-tabs__content {
	position: relative;
	display: grid;
	overflow: hidden;

	.hm-tabs-item {
		grid-column: 1;
		grid-row: 1;

		&[hidden="true"] {
			display: block;
			opacity: 0;
			visibility: hidden;
		}
	}
}

.hm-tabs-item {
	position: relative;

	&:not(.hm-tabs-item--is-active) {
		animation-duration: 0.25s;
		animation-name: testFadeOutRight;
	}

	&--is-active {
		opacity: 1;
		animation-duration: 0.25s;
		animation-name: testFadeInLeft;
	}
}

```

###  Health Score

37

—

LowBetter than 83% of packages

Maintenance51

Moderate activity, may be stable

Popularity31

Limited adoption so far

Community15

Small or concentrated contributor base

Maturity42

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 96.9% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

824d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/77dbeefb7745010589603f2ffc6ff310d8f700b58e08d52af190744c43342526?d=identicon)[roborourke](/maintainers/roborourke)

![](https://avatars.githubusercontent.com/u/494927?v=4)[Matthew Haines-Young](/maintainers/mattheu)[@mattheu](https://github.com/mattheu)

---

Top Contributors

[![mattheu](https://avatars.githubusercontent.com/u/494927?v=4)](https://github.com/mattheu "mattheu (31 commits)")[![roborourke](https://avatars.githubusercontent.com/u/23417?v=4)](https://github.com/roborourke "roborourke (1 commits)")

### Embed Badge

![Health badge](/badges/humanmade-hm-tabs-block/health.svg)

```
[![Health](https://phpackages.com/badges/humanmade-hm-tabs-block/health.svg)](https://phpackages.com/packages/humanmade-hm-tabs-block)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)