Gutenberg Glossary

Gutenberg Glossary lets editors link words and phrases in the Gutenberg editor to glossary terms. On the front end, visitors can hover over or click the linked text to see the definition in a popup. They stay in place and keep reading.

It's built for content that uses technical terms, abbreviations or jargon, like reports, health information, legal text or public sector pages. You can explain a term where it appears without cluttering the text or sending readers to another page.

Features

• Glossary button in the Gutenberg toolbar. Select text, search the glossary as you type and apply a term in one click.
• Create terms from the editor. If a term doesn't exist yet, authors with permission can create it with a name and description without leaving the page.
• Definition popups. Linked text gets a dotted underline. Hovering or clicking opens a popup with the term name and description. The popup positions itself to stay inside the viewport, and it closes on Escape or a click elsewhere
• Uses Drupal taxonomy. Terms live in a dedicated Gutenberg glossary vocabulary. You manage them like any other taxonomy terms, including translations and access control
• Always up to date. Popups are added by a text filter when the content is rendered, so editing a term updates every page that uses it. Cache tags are handled correctly
• Access controlled. Separate permissions for applying glossary terms and for creating them. Creating terms requires a CSRF token, and popups only show terms the visitor is allowed to view
• Themeable. Override the glossary-popup.html.twig template or restyle the provided CSS classes.

Additional Requirements

• Drupal 10 or 11
• Gutenberg 8.x-2.14 or later, or 3.x

Installation & Configuration

1. Install with Composer: composer require drupal/gutenberg_glossary
2. Enable the module.
3. Enable the Gutenberg glossary filter on the text format that Gutenberg uses.
4. Grant Use the Gutenberg glossary format to content authors. To let authors create terms from the editor, also grant Gutenberg glossary: Create terms.
5. In the editor, select some text and choose Glossary from the toolbar.

The README covers the full setup, including how to configure "Limit allowed HTML".