{"id":29150214,"url":"https://github.com/humanmade/hm-tabs-block","last_synced_at":"2025-06-30T23:09:52.054Z","repository":{"id":203103187,"uuid":"708815489","full_name":"humanmade/hm-tabs-block","owner":"humanmade","description":"Simple tab block. ","archived":false,"fork":false,"pushed_at":"2024-02-14T10:26:02.000Z","size":394,"stargazers_count":18,"open_issues_count":2,"forks_count":1,"subscribers_count":16,"default_branch":"main","last_synced_at":"2025-06-30T16:14:52.673Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/humanmade.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2023-10-23T12:58:12.000Z","updated_at":"2025-06-20T07:06:01.000Z","dependencies_parsed_at":"2024-02-13T18:29:04.631Z","dependency_job_id":"10b22a08-f164-41e6-8d24-46ea0ba96258","html_url":"https://github.com/humanmade/hm-tabs-block","commit_stats":null,"previous_names":["humanmade/hm-tabs-block"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/humanmade/hm-tabs-block","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/humanmade%2Fhm-tabs-block","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/humanmade%2Fhm-tabs-block/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/humanmade%2Fhm-tabs-block/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/humanmade%2Fhm-tabs-block/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/humanmade","download_url":"https://codeload.github.com/humanmade/hm-tabs-block/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/humanmade%2Fhm-tabs-block/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262864258,"owners_count":23376461,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-06-30T23:09:51.432Z","updated_at":"2025-06-30T23:09:52.050Z","avatar_url":"https://github.com/humanmade.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# HM Tabs Block\n\nSuper simple tab block for the WordPress block editor.\n\nThe Objective is to create something incredibly flexible, providing simple markup without any styling, allowing you to integrate with your theme easily.\n\nIt 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).\n\nPerformance is also important. The JS is lightweight and has no dependencies.\n\nThe 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.\n\n## Saved markup.\n\nOne of the aims of this block is to keep the saved HTML really minimal. It should look OK even if this plugin is deactivated.\n\nAll of the functionality and interactive elements are created on the fly either rendered server side or constructed in JS.\n\n## Styling the tabs.\n\nThe tabs are functional but unstyled.\n\nHere is a sample of the markup to show the classes you can use to style the tabs.\n\n```html\n\u003cdiv class=\"hm-tabs hm-tabs--is-initialized\"\u003e\n    \u003cdiv class=\"hm-tabs__nav\" role=\"tablist\"\u003e\n        \u003cbutton class=\"hm-tabs__nav-button hm-tabs__nav-button--is-active\"\u003eTab 1\u003c/button\u003e\n        \u003cbutton class=\"hm-tabs__nav-button\"\u003eTab 2\u003c/button\u003e\n        ...\n    \u003c/div\u003e\n    \u003cdiv class=\"hm-tabs__content\"\u003e\n        \u003cdiv class=\"wp-block-hm-tabs-item hm-tabs-item\"\u003e\n            \u003ch2 class=\"hm-tabs-item__title\"\u003eTab 1\u003c/h2\u003e\n            \u003cdiv class=\"hm-tabs-item__content\"\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"wp-block-hm-tabs-item hm-tabs-item\"\u003e\n            \u003ch2 class=\"hm-tabs-item__title\"\u003eTab 2\u003c/h2\u003e\n            \u003cdiv class=\"hm-tabs-item__content\"\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n        ...\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Example styling\n\nAnd here's some CSS to style up some nice old school looking tabs.\n\n```css\n.hm-tabs__nav {\n\tdisplay: flex;\n\tposition: relative;\n\tz-index: 1;\n\tmargin: 0 0 -1px 0;\n}\n\n.hm-tabs__nav-button {\n\tbackground-color: #ddd;\n\tborder: 1px solid #aaa;\n\tpadding: 12px 16px;\n\tmargin: 0;\n\tfont-size: 12px;\n}\n\n.hm-tabs__nav-button + .hm-tabs__nav-button {\n\tborder-left: none;\n}\n\n.hm-tabs__nav-button--is-active {\n\tbackground-color: #fff;\n\tborder-bottom-color: #fff;\n}\n\n.hm-tabs__content {\n\tbackground-color: #fff;\n\tborder: 1px solid #aaa;\n\tpadding: 16px;\n}\n```\n\n### Some useful classes for styling and animation.\n\n* `.hm-tabs--is-initialized` Added once JS has initialized the tab functionality.\n* `.hm-tabs--is-visible` Added when the tab if first scrolled into view.\n* `.hm-tabs--is-focused`` Added when a tab is active.\n* `.hm-tabs-item--is-active` Added when the tab is shown and removed after.\n\n### Example of animation\n\nUse this in addition to the styles above to create a slide/fade effect when switching tabs\n\n```\n@keyframes testFadeInLeft {\n\tfrom {\n\t\tvisibility: hidden;\n\t\topacity: 0;\n\t\t-webkit-transform: translate3d(-100%, 0, 0);\n\t\ttransform: translate3d(-100%, 0, 0);\n\t}\n\n\t1% {\n\t\tvisibility: visible;\n\t}\n\n\tto {\n\t\topacity: 1;\n\t\t-webkit-transform: translateZ(0);\n\t\ttransform: translateZ(0);\n\t}\n}\n\n@keyframes testFadeOutRight {\n\tfrom {\n\t\topacity: 1;\n\t\tvisibility: visible;\n\t}\n\n\t99% {\n\t\tvisibility: visible;\n\t}\n\n\tto {\n\t\topacity: 0;\n\t\t-webkit-transform: translate3d(100%, 0, 0);\n\t\ttransform: translate3d(100%, 0, 0);\n\t\tvisibility: hidden;\n\t}\n}\n\n.hm-tabs__content {\n\tposition: relative;\n\tdisplay: grid;\n\toverflow: hidden;\n\n\t.hm-tabs-item {\n\t\tgrid-column: 1;\n\t\tgrid-row: 1;\n\n\t\t\u0026[hidden=\"true\"] {\n\t\t\tdisplay: block;\n\t\t\topacity: 0;\n\t\t\tvisibility: hidden;\n\t\t}\n\t}\n}\n\n.hm-tabs-item {\n\tposition: relative;\n\n\t\u0026:not(.hm-tabs-item--is-active) {\n\t\tanimation-duration: 0.25s;\n\t\tanimation-name: testFadeOutRight;\n\t}\n\n\t\u0026--is-active {\n\t\topacity: 1;\n\t\tanimation-duration: 0.25s;\n\t\tanimation-name: testFadeInLeft;\n\t}\n}\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhumanmade%2Fhm-tabs-block","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhumanmade%2Fhm-tabs-block","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhumanmade%2Fhm-tabs-block/lists"}