GT Table Block
| 开发者 | bph |
|---|---|
| 更新时间 | 2026年5月20日 01:57 |
| PHP版本: | 7.4 及以上 |
| WordPress版本: | 6.9 |
| 版权: | GPL-2.0-or-later |
| 版权网址: | 版权信息 |
详情介绍:
GT Table Block extends the built-in
core/table block with optional features that compose cleanly — each feature is an independent toggle, not a block style, so any combination can be active on the same table.
Available in this release:
- Sticky header row — the
<thead>row pins to the top of the viewport while the table body scrolls. Includes a numeric offset control for sites with a fixed admin bar or site header. Pure CSS at runtime (no frontend JavaScript). The sticky background is an opaque CSS variable with full theme.json customization support (see FAQ below). - Styled first column — gives the first column the same visual weight as the header row (bold, optional themeable background) and adds
scope="row"to those cells in the saved markup so screen readers announce them as row headers. Addresses Gutenberg core issue #1470 (open since 2017). Pure CSS for the styling; the a11y attribute is added at save time only, so the editor preview stays unchanged.
- Sticky first column for wide tables with horizontal scroll — v0.3.0.
- Merge / unmerge cells via a block toolbar control — v0.4.0.
core/table rather than forking it, so existing tables stay compatible with core as it evolves. Independent boolean attributes also let any combination of features be active at once — which block styles (a mutually exclusive radio group) cannot offer.
安装:
- Upload the plugin folder to
/wp-content/plugins/or install via the Plugins screen. - Activate through the Plugins menu.
- Insert the Enhanced Table variation from the block inserter, or convert an existing Table block via the Block Settings panel.
常见问题:
Does it replace the core Table block?
No. It registers a variation. Existing core Table blocks are unaffected until you enable a feature toggle on them.
Does it need frontend JavaScript?
No. Sticky header, header column styling, and sticky first column are pure CSS. Only the editor ships JS.
Does it work with block themes?
Yes. It targets core/table and uses the wp-block-table class chain for specificity without !important.
How do I change the sticky header background color?
The sticky header is painted with an opaque background so body rows don't show through it. It resolves in this order:
--gt-sticky-header-bg— a per-block or local override (wins over everything).--wp--custom--gt-sticky-header-bg— a theme.jsonsettings.customvalue.Canvas— the CSS system color (browser document background, adapts to light/dark mode).
{ "settings": { "custom": { "gtStickyHeaderBg": "#f5f5f5" } } }
Theme-wide via theme.json (reference a theme preset):
{ "settings": { "custom": { "gtStickyHeaderBg": "var(--wp--preset--color--base)" } } }
The value is emitted into the CSS variable as-is, so any WP-generated preset works — --wp--preset--color--accent, --wp--preset--color--contrast-2, or any palette slug your theme registers.
In both cases WordPress serializes settings.custom.gtStickyHeaderBg as the CSS variable --wp--custom--gt-sticky-header-bg, which the plugin reads as a fallback.
Theme-wide via raw CSS in theme.json:
{ "styles": { "css": ".wp-block-table.has-sticky-header { --gt-sticky-header-bg: var(--wp--preset--color--base); } " } }
Per-block override: add an inline style or Additional CSS class that sets --gt-sticky-header-bg on the <figure>.
更新日志:
0.2.0
- New feature: Style first column. Toggle in the Enhanced Table panel makes the first body/foot cells bold and adds
scope="row"to them in the saved HTML for screen-reader semantics (Gutenberg #1470). Includes a colour picker for the column background, or theme-wide via the--gt-first-column-bgCSS variable.
- Documentation: shorter Short Description (Plugin Check 150-char limit), align GitHub README with readme.txt scope. No code changes.
- Initial release — sticky header row with optional offset control. Further features ship in subsequent releases.