Developers · Gutenberg
Font Scale block for WordPress
Type specimen / typography scale block showing font sizes from xs to 9xl. Displays sample text at each step with optional metadata (size, weight, line-height). Perfect for design systems and style guides.
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
Type specimen / typography scale block showing font sizes from xs to 9xl. Displays sample text at each step with optional metadata (size, weight, line-height). Perfect for design systems and style guides.
Inspector panels on this block: Content, Scale Steps, Spacing & Style. Those titles come from index.js, not from a shared template.
Behavior controls: “Specimen Font Family” options: Theme default, System UI (San Francisco / Segoe), Georgia (Serif), Courier (Mono), Arial / Helvetica.
Font Scale has no render.php and no frontend.js. The saved Gutenberg HTML is what visitors see, plus Blockenberg layout/typography CSS.
Where to find it
Gutenberg inserter → Developers → search “Font Scale” (block name `blockenberg/font-scale` in block.json). Style it in the sidebar after insert.
How to use Font Scale block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Font Scale”, insert it. Category: Developers.
- Configure inspector controls that exist on this block. Open Content. Set “Content — Title”, “Show title”, “Subtitle”, “Show subtitle”.
- Publish. Save the page. Output is the saved block HTML; typography/colors follow Blockenberg shared panels.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Content — Title | Text field in the inspector. block.json default: Type Scale. Saved as `title`. |
| Show title | On/off toggle in the inspector. On by default. Saved as `showTitle`. |
| Subtitle | Text field in the inspector. block.json default: A consistent typographic system for clear, readable content. Saved as `subtitle`. |
| Show subtitle | On/off toggle in the inspector. On by default. Saved as `showSubtitle`. |
| Show size/weight meta | On/off toggle in the inspector. On by default. Saved as `showMeta`. |
| Show row dividers | On/off toggle in the inspector. On by default. Saved as `showDividers`. |
| Step name | Text field in the inspector. Saved as `steps`. |
| Size (px) | Numeric range control in the inspector. Range 8–128. Saved as `steps`. |
| Weight | Numeric range control in the inspector. Range 100–900. Saved as `steps`. |
| Line height (×10) | Numeric range control in the inspector. Range 8–25. Saved as `steps`. |
| Sample text | Text field in the inspector. Saved as `steps`. |
| Border radius | Numeric range control in the inspector. Range 0–32. block.json default: 16. Saved as `borderRadius`. |
| Padding top | Numeric range control in the inspector. Range 0–120. block.json default: 48. Saved as `paddingTop`. |
| Padding bottom | Numeric range control in the inspector. Range 0–120. block.json default: 48. Saved as `paddingBottom`. |
| Specimen Font Family | Select control; the chosen value is saved on the block. Options: Theme default; System UI (San Francisco / Segoe); Georgia (Serif); Courier (Mono); Arial / Helvetica; Palatino (Serif); Trebuchet MS; Verdana. block.json default: inherit. Saved as `fontFamily`. |
| Colors — Background | Color control in the inspector. block.json default: #ffffff. Saved as `bgColor`. |
| Colors — Title | Color control in the inspector. block.json default: #0f172a. Saved as `titleColor`. |
| Subtitle | Color control in the inspector. block.json default: #64748b. Saved as `subtitleColor`. |
| Sample text | Color control in the inspector. block.json default: #0f172a. Saved as `textColor`. |
| Meta text | Color control in the inspector. block.json default: #94a3b8. Saved as `metaColor`. |
| Name badge BG | Color control in the inspector. block.json default: #f1f5f9. Saved as `nameBg`. |
| Name badge text | Color control in the inspector. block.json default: #475569. Saved as `nameColor`. |
| Divider | Color control in the inspector. block.json default: #f1f5f9. Saved as `dividerColor`. |
When this is the right block
- Type specimen / typography scale block showing font sizes from xs to 9xl. Displays sample text at each step with optional metadata (size, weight, line-height). Perfect for design systems and style guides — that is the job of Font Scale, not a generic content block.
- Use it when you need the editor control labeled “Content — Title”, which exists on this block’s inspector.
- It matches pages about font, typography, scale.
- Inserter grouping: docs sites, utilities, and developer landing pages.
Notes from the implementation
Static block: markup is saved in post content; no PHP render callback in this folder.
FAQ
How do I add the Font Scale block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Font Scale”. It sits under Developers. After insert, open Content and set “Content — Title”, “Show title”, “Subtitle”, “Show subtitle”.
What makes Font Scale different from other Blockenberg blocks?
Type specimen / typography scale block showing font sizes from xs to 9xl. Displays sample text at each step with optional metadata (size, weight, line-height). Perfect for design systems and style guides. Inspector labels on this block include “Content — Title”, “Show title”, “Subtitle”, “Show subtitle”.
Is the Font Scale Gutenberg block free?
Yes. Font Scale ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Font Scale 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: Content, Scale Steps, Spacing & Style).
Related developers blocks
Color Tokens
Design-system colour token reference. Displays named colour swatches grouped into palettes (Primary, Neutral, Semantic, etc.) with hex/RGB values. Visitors can click any swatch to copy its hex code.
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.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Font Scale from the Gutenberg inserter.