feat: support header.level (1-4) on header block#68
Open
programad wants to merge 1 commit into
Open
Conversation
Adds the optional `level` field to `HeaderBlock` and renders the header with the matching semantic h-tag (h1-h4) and a size class. `level` is part of Slack's documented header schema as of the 2026-03-06 Block Kit refresh and was missing from this library. - `src/types/layout.ts` — add `level?: 1 | 2 | 3 | 4` with JSDoc pointing at the Slack docs and changelog. - `src/components/blocks/header.tsx` — pick `<h1>`/`<h2>`/`<h3>`/`<h4>` from `level` and apply a per-level size class. When `level` is omitted, rendering is unchanged (`<h3>` + `text-header`/18px), preserving back-compat with the pre-rollout single-size behavior. - `KNOWLEDGE_BASE.md` — chapter 4.1 mentions the new `level` prop. Docs: - https://docs.slack.dev/reference/block-kit/blocks/header-block - https://docs.slack.dev/changelog/2026/03/06/block-kit-rich-text/
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds support for the
levelfield on theheaderblock. The field is part of Slack's documented public schema as of the 2026-03-06 Block Kit refresh but was missing from this library, so headers all render at one size regardless of intended hierarchy.From Slack's header block reference:
What changed
src/types/layout.ts— extendHeaderBlockwithlevel?: 1 | 2 | 3 | 4and JSDoc pointing at the Slack docs.src/components/blocks/header.tsx— pick the semantic heading tag (<h1>/<h2>/<h3>/<h4>) fromleveland apply a per-level size class. Whenlevelis omitted, rendering is unchanged (<h3>+text-header/ 18px), preserving back-compat with the pre-rollout single-size behavior.KNOWLEDGE_BASE.md— chapter 4.1 mentions the newlevelprop.Back-compat
levelis optional. Existing usage (nolevel) renders identically to before — same<h3>tag, sametext-headerstyling.level: 3is intentionally equivalent to the legacy default so consumers can opt in incrementally.data-header-levelattribute on the heading element for consumers who want to style further.Size class choices
I picked reasonable defaults:
level<h1>text-[28px] leading-[1.2]<h2>text-[22px] leading-[1.27]<h3>text-header(18px) — matches legacy default<h4>text-base(15px)<h3>text-header— legacy fallbackThe library's existing
fontSizetokens (text-header: 18px,text-base: 15px) cover H3 and H4. H1 and H2 use inline arbitrary values since the library didn't have heading-1/heading-2 tokens previously. Happy to switch to dedicated tokens (e.g.,text-header-1,text-header-2) intailwind.config.jsif preferred — wanted to keep this PR minimal.Testing
pnpm lint(tsc) — cleanpnpm build(tsup + postcss) — clean; builtdist/index.d.tsincludes the newlevel?: 1 | 2 | 3 | 4fieldMotivation
Apps syndicating rich content into Slack (e.g., a CMS pushing posts with multi-level headings) want their preview to match what Slack actually renders. Slack now distinguishes H1-H4 visually after the 2026-03-06 rollout, but this library still renders every header at the same size, so any preview built on it diverges from the real Slack message. This change closes that gap.
References
level1-4headerblock is the correct route for size-distinguished headings