HM Block Hash Tabs

URL-hash-driven tab panels for WordPress group blocks.

Requires WordPress 6.5+.

Features

• Container group: Mark any core/group block as a "hash visibility container". All hash logic is scoped within this boundary.
• Panel groups: Child core/group blocks can be shown or hidden based on the current URL hash.
• Default panel: One panel can be designated as the default — visible when no hash is present in the URL.
• Accessibility: aria-hidden and aria-current are managed automatically on panels and navigation links.
• No-JS support: The default panel is pre-activated server-side so content is visible before JavaScript runs.
• Editor badges: Container and panel groups get visual badges in the block editor canvas.
• Focus retention: Click interception prevents fragment navigation from moving focus to the panel target, preserving any open navigation menus.

Usage

1. Add a core/group block and enable Hash Tabs → Enable hash visibility in the Inspector Controls. This becomes the container.
2. Add core/button blocks inside the container whose href values point to hash anchors (e.g. #tab-one, #tab-two).
3. Add child core/group blocks inside the container and set their Show based on URL hash to the corresponding hash value.
4. Optionally mark one panel as Also show when no hash (default).

Installation

composer require humanmade/hm-block-hash-tabs

Or download the latest release ZIP and install via the WordPress plugin uploader.

Architecture

• src/index.js — Editor extension. Registers hashVisibility, hashIsDefault, and hashContainer attributes on core/group. Renders the Hash Tabs inspector panel and editor badge.
• src/view.js — Frontend script. Reads data-ol-hash-visibility attributes and toggles ol-hash-active / aria-hidden on hash changes. Pure vanilla JS.
• src/view.scss — Transition styles for hash panels.
• src/editor.scss — Badge styles for the editor canvas.
• inc/render.php — render_block_core/group filter (prio 25) that stamps data-ol-hash-container, data-ol-hash-visibility, data-ol-hash-default, and aria-hidden onto the block HTML.
• webpack.config.js — Two-entry config: index (editor, regular script) and view (frontend, regular script).

Developer workflow

npm install
npm run build        # production build
npm run start        # watch mode
npm run lint:js      # lint JavaScript
npm run lint:css     # lint CSS
npm run playground:start  # start WordPress Playground at http://127.0.0.1:9400
npm run test:e2e     # run Playwright tests

Release workflow

See RELEASE.md.