Developers · Gutenberg
Keyboard Shortcuts block for WordPress
Display a keyboard shortcut reference sheet with Mac and Windows variants, categories, and rich 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
Display a keyboard shortcut reference sheet with Mac and Windows variants, categories, and rich styling.
Inspector panels on this block: Sheet Settings, Sections & Shortcuts. Those titles come from index.js, not from a shared template.
Behavior controls: “Platform” options: Mac only, Windows only, Both (Mac / Win).
Where to find it
Gutenberg inserter → Developers → search “Keyboard Shortcuts” (block name `blockenberg/keyboard-shortcut` in block.json). Style it in the sidebar after insert.
How to use Keyboard Shortcuts block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Keyboard Shortcuts”, insert it. Category: Developers.
- Configure inspector controls that exist on this block. Open Sheet Settings. Set “Sheet Settings — Title”, “Show Title”, “Platform”, “Section Heading”.
- 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 |
|---|---|
| Sheet Settings — Title | Text field in the inspector. block.json default: Keyboard Shortcuts. Saved as `sheetTitle`. |
| Show Title | On/off toggle in the inspector. On by default. Saved as `showTitle`. |
| Platform | Select control; the chosen value is saved on the block. Options: Mac only; Windows only; Both (Mac / Win). block.json default: both. Saved as `platform`. |
| Section Heading | Text field in the inspector. Saved as `sections`. |
| Description | Text field in the inspector. Saved as `sections`. |
| Mac Keys (space-separated) | Text field in the inspector. Saved as `sections`. |
| Win Keys (space-separated) | Text field in the inspector. Saved as `sections`. |
| Font Size | Numeric range control in the inspector. Range 10–20. block.json default: 14. Saved as `fontSize`. |
| Section Heading Size | Numeric range control in the inspector. Range 9–18. block.json default: 12. Saved as `headingFontSize`. |
| Key Font Size | Numeric range control in the inspector. Range 9–18. block.json default: 12. Saved as `keyFontSize`. |
| Line Height (%) | Numeric range control in the inspector. Range 120–220. block.json default: 160. Saved as `lineHeight`. |
| Border Radius | Numeric range control in the inspector. Range 0–24. block.json default: 12. Saved as `borderRadius`. |
| Key Radius | Numeric range control in the inspector. Range 2–12. block.json default: 6. Saved as `keyRadius`. |
| Colors — Background | Color control in the inspector. block.json default: #ffffff. Saved as `bgColor`. |
| Colors — Border | Color control in the inspector. block.json default: #e5e7eb. Saved as `borderColor`. |
| Colors — Title | Color control in the inspector. block.json default: #111827. Saved as `titleColor`. |
| Section BG | Color control in the inspector. block.json default: #f8fafc. Saved as `headingBg`. |
| Section Text | Color control in the inspector. block.json default: #374151. Saved as `headingColor`. |
| Section Border | Color control in the inspector. block.json default: #e5e7eb. Saved as `headingBorderColor`. |
| Description Text | Color control in the inspector. block.json default: #374151. Saved as `descColor`. |
| Key BG | Color control in the inspector. block.json default: #f1f5f9. Saved as `keyBg`. |
| Key Border | Color control in the inspector. block.json default: #cbd5e1. Saved as `keyBorderColor`. |
| Key Text | Color control in the inspector. block.json default: #1e293b. Saved as `keyColor`. |
| Mac Label | Color control in the inspector. block.json default: #6366f1. Saved as `macAccentColor`. |
| Win Label | Color control in the inspector. block.json default: #0ea5e9. Saved as `winAccentColor`. |
| Row Separator | Color control in the inspector. block.json default: #f1f5f9. Saved as `separatorColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- Display a keyboard shortcut reference sheet with Mac and Windows variants, categories, and rich styling — that is the job of Keyboard Shortcuts, not a generic content block.
- Use it when you need the editor control labeled “Sheet Settings — Title”, which exists on this block’s inspector.
- It matches pages about keyboard, shortcut, hotkey.
- Inserter grouping: docs sites, utilities, and developer landing 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 Keyboard Shortcuts block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Keyboard Shortcuts”. It sits under Developers. After insert, open Sheet Settings and set “Sheet Settings — Title”, “Show Title”, “Platform”, “Section Heading”.
What makes Keyboard Shortcuts different from other Blockenberg blocks?
Display a keyboard shortcut reference sheet with Mac and Windows variants, categories, and rich styling. Inspector labels on this block include “Sheet Settings — Title”, “Show Title”, “Platform”, “Section Heading”.
Is the Keyboard Shortcuts Gutenberg block free?
Yes. Keyboard Shortcuts ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Keyboard Shortcuts 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: Sheet Settings, Sections & Shortcuts).
Related developers blocks
API Reference
Display API endpoint documentation with method badge, parameters table, and request/response code examples.
Barcode Generator
Generate Code128 barcodes from any text or number. Customize bar height, width, colors, and download as PNG.
Base64 Encoder / Decoder
Encode plain text to Base64 or decode Base64 back to text. Supports Unicode, URL-safe Base64 and one-click copy.
Browser Mockup
Display a realistic browser chrome window around a customizable mini page preview — perfect for product screenshots, UI demos, and tutorials.
Clipboard Copy
Display a copyable code, coupon, or text with a one-click copy button.
Code Block
Syntax-highlighted code block with copy button, line numbers, and multiple themes.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Keyboard Shortcuts from the Gutenberg inserter.