Blog · Gutenberg
Salary Guide block for WordPress
Display salary ranges by role and level with visual min/max bars and median markers.
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 salary ranges by role and level with visual min/max bars and median markers.
Inspector panels on this block: Guide Settings, Roles, Appearance. Those titles come from index.js, not from a shared template.
Behavior controls: “Period” options: per year, per month, per hour; “Level” options: Junior, Mid, Senior, Lead, Principal.
Where to find it
Gutenberg inserter → Blog → search “Salary Guide” (block name `blockenberg/salary-guide` in block.json). Style it in the sidebar after insert.
How to use Salary Guide block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Salary Guide”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Guide Settings. Set “Guide Settings — Title”, “Description”, “Show Description”, “Currency Symbol”.
- 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 |
|---|---|
| Guide Settings — Title | Text field in the inspector. block.json default: Software Engineering Salary Guide. Saved as `guideTitle`. |
| Description | Multiline text field in the inspector. block.json default: Compensation ranges based on real market data. Figures represent base salary.. Saved as `description`. |
| Show Description | On/off toggle in the inspector. On by default. Saved as `showDescription`. |
| Currency Symbol | Text field in the inspector. block.json default: $. Saved as `currency`. |
| Period | Select control; the chosen value is saved on the block. Options: per year; per month; per hour. block.json default: year. Saved as `period`. |
| Location | Text field in the inspector. block.json default: San Francisco, CA. Saved as `location`. |
| Show Location | On/off toggle in the inspector. On by default. Saved as `showLocation`. |
| Show Bars | On/off toggle in the inspector. On by default. Saved as `showBars`. |
| Show Median Marker | On/off toggle in the inspector. On by default. Saved as `showMedian`. |
| Show Level Badge | On/off toggle in the inspector. On by default. Saved as `showLevel`. |
| Group by Category | On/off toggle in the inspector. Off by default. Saved as `groupByCategory`. |
| Role Title | Text field in the inspector. Saved as `roles`. |
| Level | Select control; the chosen value is saved on the block. Options: Junior; Mid; Senior; Lead; Principal. Saved as `roles`. |
| Category | Text field in the inspector. Saved as `roles`. |
| Min | Text field in the inspector. Saved as `roles`. |
| Median | Text field in the inspector. Saved as `roles`. |
| Max | Text field in the inspector. Saved as `roles`. |
| Base Font Size | Numeric range control in the inspector. Range 10–22. block.json default: 14. Saved as `fontSize`. |
| 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–32. block.json default: 12. Saved as `borderRadius`. |
| Bar Height (px) | Numeric range control in the inspector. Range 4–24. block.json default: 10. Saved as `barHeight`. |
| 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`. |
| Description | Color control in the inspector. block.json default: #6b7280. Saved as `descColor`. |
| Role Title | Color control in the inspector. block.json default: #1f2937. Saved as `roleTitleColor`. |
| Level Badge BG | Color control in the inspector. block.json default: #f3f4f6. Saved as `levelBg`. |
| Level Badge Text | Color control in the inspector. block.json default: #374151. Saved as `levelColor`. |
| Range Labels | Color control in the inspector. block.json default: #6b7280. Saved as `rangeLabelColor`. |
| Bar Track | Color control in the inspector. block.json default: #e5e7eb. Saved as `barTrackColor`. |
| Bar Fill | Color control in the inspector. block.json default: #3b82f6. Saved as `barFillColor`. |
| Median Marker | Color control in the inspector. block.json default: #0f172a. Saved as `medianColor`. |
| Category Heading | Color control in the inspector. block.json default: #374151. Saved as `categoryHeadColor`. |
| Category Heading BG | Color control in the inspector. block.json default: #f8fafc. Saved as `categoryHeadBg`. |
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 salary ranges by role and level with visual min/max bars and median markers — that is the job of Salary Guide, not a generic content block.
- Use it when you need the editor control labeled “Guide Settings — Title”, which exists on this block’s inspector.
- It matches pages about salary, compensation, pay.
- 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 Salary Guide block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Salary Guide”. It sits under Blog. After insert, open Guide Settings and set “Guide Settings — Title”, “Description”, “Show Description”, “Currency Symbol”.
What makes Salary Guide different from other Blockenberg blocks?
Display salary ranges by role and level with visual min/max bars and median markers. Inspector labels on this block include “Guide Settings — Title”, “Description”, “Show Description”, “Currency Symbol”.
Is the Salary Guide Gutenberg block free?
Yes. Salary Guide ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Salary Guide 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: Guide Settings, Roles, Appearance).
Related blog blocks
Chapter Navigation
Multi-part guide and series navigation with progress, prev/next, and chapter list.
HowTo Schema
Step-by-step How-To guide with automatic Schema.org HowTo JSON-LD structured data for Google rich results. Includes supplies, tools, total time, cost estimate, and numbered steps with images.
Knowledge Base Article
Full knowledge base / help center article with category, difficulty, table of contents, sections, and related articles.
Lesson Objectives
"What You'll Learn" educational objectives box with bullet points, level badge, and estimated read time.
Troubleshooting Guide
Structured problem/cause/solution guide with severity levels, search, and multiple layout options.
Tutorial Card
A structured tutorial block with steps, prerequisites, materials, learning outcomes, and progress tracking.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Salary Guide from the Gutenberg inserter.