Blog · Gutenberg
Sidenote block for WordPress
Floated editorial annotation or margin note — pull text aside left or right with full styling.
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
Floated editorial annotation or margin note — pull text aside left or right with full styling.
Inspector panels on this block: Sidenote. Those titles come from index.js, not from a shared template.
Behavior controls: “Position” options: Float Right, Float Left, Inline (no float); “Sidenote — Style” options: Bordered (left accent), Filled card, Minimal (text only), Sticky note.
Where to find it
Gutenberg inserter → Blog → search “Sidenote” (block name `blockenberg/sidenote` in block.json). Style it in the sidebar after insert.
How to use Sidenote block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Sidenote”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Sidenote. Set “Position”, “Width (px)”, “Sidenote — Style”, “Show Label”.
- 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 |
|---|---|
| Position | Select control; the chosen value is saved on the block. Options: Float Right; Float Left; Inline (no float). block.json default: right. Saved as `position`. |
| Width (px) | Numeric range control in the inspector. Range 140–480. block.json default: 260. Saved as `width`. |
| Sidenote — Style | Select control; the chosen value is saved on the block. Options: Bordered (left accent); Filled card; Minimal (text only); Sticky note. block.json default: bordered. Saved as `style`. |
| Show Label | On/off toggle in the inspector. On by default. Saved as `showLabel`. |
| Label Text | Text field in the inspector. block.json default: Note. Saved as `label`. |
| Show Icon | On/off toggle in the inspector. On by default. Saved as `showIcon`. |
| Border Radius | Numeric range control in the inspector. Range 0–20. block.json default: 6. Saved as `borderRadius`. |
| Padding Top | Numeric range control in the inspector. Range 0–60. block.json default: 0. Saved as `paddingTop`. |
| Padding Bottom | Numeric range control in the inspector. Range 0–60. block.json default: 0. Saved as `paddingBottom`. |
| Colors — Background | Color control in the inspector. block.json default: #fffbeb. Saved as `bgColor`. |
| Colors — Border | Color control in the inspector. block.json default: #fbbf24. Saved as `borderColor`. |
| Accent / Left Strip | Color control in the inspector. block.json default: #d97706. Saved as `accentColor`. |
| Label | Color control in the inspector. block.json default: #92400e. Saved as `labelColor`. |
| Colors — Text | Color control in the inspector. block.json default: #78350f. Saved as `textColor`. |
| Colors — Icon | Color control in the inspector. block.json default: #d97706. Saved as `iconColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- Floated editorial annotation or margin note — pull text aside left or right with full styling — that is the job of Sidenote, not a generic content block.
- Use it when you need the editor control labeled “Position”, which exists on this block’s inspector.
- It matches pages about sidenote, annotation, aside.
- 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 Sidenote block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Sidenote”. It sits under Blog. After insert, open Sidenote and set “Position”, “Width (px)”, “Sidenote — Style”, “Show Label”.
What makes Sidenote different from other Blockenberg blocks?
Floated editorial annotation or margin note — pull text aside left or right with full styling. Inspector labels on this block include “Position”, “Width (px)”, “Sidenote — Style”, “Show Label”.
Is the Sidenote Gutenberg block free?
Yes. Sidenote ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Sidenote 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: Sidenote).
Related blog blocks
Article Header
Rich editorial-style article/blog post header with category badge, headline, subheadline, author meta bar, and optional hero image.
Fact Check
Editorial fact-check verdict box with claim, verdict rating, explanation, and sources.
Listicle
Rich numbered list article format for Top 10, Best of, and ranked editorial content. Each item has number badge, title, image, description, verdict and tags.
Opinion Box
Editorial 'My Take' opinion callout with author attribution, badge, and signed commentary.
Quote Collection
Curated editorial multi-quote grid — inspirational quotes, expert opinions, notable sayings.
Reading Notes
Annotated reading notes for books and articles with quotes, insights, questions, and a star rating.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Sidenote from the Gutenberg inserter.