Blog · Gutenberg
Glossary block for WordPress
A–Z alphabetical glossary / dictionary with a clickable alphabet navigation bar, terms grouped by first letter, and expandable or always-visible definitions.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
A–Z alphabetical glossary / dictionary with a clickable alphabet navigation bar, terms grouped by first letter, and expandable or always-visible definitions.
Inspector panels on this block: Terms, Display. Those titles come from index.js, not from a shared template.
Behavior controls: “Columns” options: 1, 2.
Where to find it
Gutenberg inserter → Blog → search “Glossary” (block name `blockenberg/glossary` in block.json). Style it in the sidebar after insert.
How to use Glossary block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Glossary”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Terms. Set “Term”, “Definition”, “Show title”, “Show subtitle”.
- Check the published page. The view script reads HTML data attributes: data-opts, data-term. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Term | Text field in the inspector. |
| Definition | Multiline text field in the inspector. |
| Show title | On/off toggle in the inspector. On by default. Saved as `showTitle`. |
| Show subtitle | On/off toggle in the inspector. On by default. Saved as `showSubtitle`. |
| A–Z navigation bar | On/off toggle in the inspector. On by default. Saved as `showAlphaNav`. |
| Search box | On/off toggle in the inspector. On by default. Saved as `showSearch`. |
| Group by letter | On/off toggle in the inspector. On by default. Saved as `groupByLetter`. |
| Show letter headings | On/off toggle in the inspector. On by default. Saved as `showLetterHead`. |
| Expandable definitions (accordion) | On/off toggle in the inspector. Off by default. Saved as `expandable`. |
| Columns | Select control; the chosen value is saved on the block. Options: 1; 2. block.json default: 1. Saved as `columns`. |
| Card radius (px) | Numeric range control in the inspector. Range 0–24. block.json default: 10. Saved as `cardRadius`. |
| Padding Top (px) | Numeric range control in the inspector. Range 0–200. block.json default: 60. Saved as `paddingTop`. |
| Padding Bottom (px) | Numeric range control in the inspector. Range 0–200. block.json default: 60. Saved as `paddingBottom`. |
| Accent | Color control in the inspector. block.json default: #6c3fb5. Saved as `accentColor`. |
| Colors — Title | Color control in the inspector. block.json default: #1e1b4b. Saved as `titleColor`. |
| Subtitle | Color control in the inspector. block.json default: #6b7280. Saved as `subtitleColor`. |
| Term text | Color control in the inspector. block.json default: #1e1b4b. Saved as `termColor`. |
| Definition text | Color control in the inspector. block.json default: #374151. Saved as `defColor`. |
| Letter heading text | Color control in the inspector. block.json default: #6c3fb5. Saved as `letterHeadColor`. |
| Letter heading background | Color control in the inspector. block.json default: #f5f3ff. Saved as `letterHeadBg`. |
| Nav bar background | Color control in the inspector. block.json default: #f3f4f6. Saved as `navBg`. |
| Nav active button | Color control in the inspector. block.json default: #ffffff. Saved as `navActiveColor`. |
| Item border | Color control in the inspector. block.json default: #e5e7eb. Saved as `itemBorder`. |
| Block background | Color control in the inspector. Saved as `bgColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-term.
- Headers keep aria-expanded in sync so screen readers hear open vs closed.
When this is the right block
- A–Z alphabetical glossary / dictionary with a clickable alphabet navigation bar, terms grouped by first letter, and expandable or always-visible definitions — that is the job of Glossary, not a generic content block.
- Use it when you need the editor control labeled “Term”, which exists on this block’s inspector.
- It matches pages about glossary, dictionary, terms.
- Inserter grouping: posts, magazines, and editorial WordPress pages.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Glossary block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Glossary”. It sits under Blog. After insert, open Terms and set “Term”, “Definition”, “Show title”, “Show subtitle”.
What makes Glossary different from other Blockenberg blocks?
A–Z alphabetical glossary / dictionary with a clickable alphabet navigation bar, terms grouped by first letter, and expandable or always-visible definitions. Inspector labels on this block include “Term”, “Definition”, “Show title”, “Show subtitle”.
Is the Glossary Gutenberg block free?
Yes. Glossary ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Glossary to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Terms, Display).
Related blog blocks
Knowledge Base Article
Full knowledge base / help center article with category, difficulty, table of contents, sections, and related articles.
Table of Contents
Auto-generated table of contents from headings on the page, with smooth scroll and active-link highlighting.
Taxonomy List
Display categories, tags or custom taxonomy as a styled list, grid, chips or cards — with icons, counts and links.
Troubleshooting Guide
Structured problem/cause/solution guide with severity levels, search, and multiple layout options.
Article Header
Rich editorial-style article/blog post header with category badge, headline, subheadline, author meta bar, and optional hero image.
Article Series
Multi-part series navigator showing all articles with the current one highlighted and progress indicator.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Glossary from the Gutenberg inserter.