Blog · Gutenberg
Footnotes block for WordPress
Academic-style footnotes with numbered inline markers and a full reference list.
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
Academic-style footnotes with numbered inline markers and a full reference list.
Inspector panels on this block: Footnotes, Settings. Those titles come from index.js, not from a shared template.
Behavior controls: “List style” options: Default (clean rows), Card (bordered), Compact.
Where to find it
Gutenberg inserter → Blog → search “Footnotes” (block name `blockenberg/footnotes` in block.json). Style it in the sidebar after insert.
How to use Footnotes block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Footnotes”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Footnotes. Set “Footnote text”, “Section title”, “Show title”, “Show divider line”.
- Check the published page. The view script reads HTML data attributes: data-opts, data-rendered. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Footnote text | Multiline text field in the inspector. Saved as `notes`. |
| Section title | Text field in the inspector. block.json default: Notes. Saved as `title`. |
| Show title | On/off toggle in the inspector. On by default. Saved as `showTitle`. |
| Show divider line | On/off toggle in the inspector. On by default. Saved as `dividerEnabled`. |
| Show tooltip on hover | On/off toggle in the inspector. On by default. Saved as `showTooltip`. |
| Marker style | Select control; the chosen value is saved on the block. block.json default: number. Saved as `markerStyle`. |
| List style | Select control; the chosen value is saved on the block. Options: Default (clean rows); Card (bordered); Compact. block.json default: default. Saved as `listStyle`. |
| Border radius (px) | Numeric range control in the inspector. Range 0–24. block.json default: 6. Saved as `borderRadius`. |
| Colors — Background | Color control in the inspector. block.json default: #f8fafc. Saved as `bgColor`. |
| Colors — Border | Color control in the inspector. block.json default: #e2e8f0. Saved as `borderColor`. |
| Colors — Title | Color control in the inspector. block.json default: #0f172a. Saved as `titleColor`. |
| Colors — Text | Color control in the inspector. block.json default: #475569. Saved as `textColor`. |
| Marker text | Color control in the inspector. block.json default: #3b82f6. Saved as `markerColor`. |
| Marker background | Color control in the inspector. block.json default: #eff6ff. Saved as `markerBg`. |
| Divider | Color control in the inspector. block.json default: #e2e8f0. Saved as `dividerColor`. |
| Tooltip background | Color control in the inspector. block.json default: #1e293b. Saved as `tooltipBg`. |
| Tooltip text | Color control in the inspector. block.json default: #f1f5f9. Saved as `tooltipColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- Academic-style footnotes with numbered inline markers and a full reference list — that is the job of Footnotes, not a generic content block.
- Use it when you need the editor control labeled “Footnote text”, which exists on this block’s inspector.
- It matches pages about footnotes, references, citations.
- 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 Footnotes block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Footnotes”. It sits under Blog. After insert, open Footnotes and set “Footnote text”, “Section title”, “Show title”, “Show divider line”.
What makes Footnotes different from other Blockenberg blocks?
Academic-style footnotes with numbered inline markers and a full reference list. Inspector labels on this block include “Footnote text”, “Section title”, “Show title”, “Show divider line”.
Is the Footnotes Gutenberg block free?
Yes. Footnotes ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Footnotes 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: Footnotes, Settings).
Related blog blocks
Sources & References
A formatted bibliography/citations section for articles and research. Add numbered references with title, author, publication, URL, and access date. Styles: academic, card list, or minimal.
Study Notes
Cornell-style structured study notes with cue column, notes column, summary, and key terms.
Changelog
Versioned release-notes block with colour-coded categories (New, Improved, Fixed, Deprecated). Perfect for SaaS product pages.
Meeting Recap
Structured meeting notes with attendees, agenda, decisions, action items, and next steps.
Reading Notes
Annotated reading notes for books and articles with quotes, insights, questions, and a star rating.
Release Notes
Structured software or product release notes with versioned sections: Added, Changed, Fixed, Removed, Security, and Deprecated.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Footnotes from the Gutenberg inserter.