Business · Gutenberg
Job Listing block for WordPress
Display a job posting card with title, company, location, salary, job type, skills, apply CTA, and rich styling options.
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 job posting card with title, company, location, salary, job type, skills, apply CTA, and rich styling options.
Inspector panels on this block: Job Details, Salary, Dates, Content, Buttons, Company Logo, Badges, Card Style. Those titles come from index.js, not from a shared template.
Behavior controls: “Location Type” options: On‑site, Remote, Hybrid; “Job Type” options: Full‑time, Part‑time, Contract, Freelance, Internship; “Period” options: per year, per month, per hour, per project.
Job Listing 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 → Business → search “Job Listing” (block name `blockenberg/job-listing` in block.json). Style it in the sidebar after insert.
How to use Job Listing block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Job Listing”, insert it. Category: Business.
- Configure inspector controls that exist on this block. Open Job Details. Set “Job Title”, “Company”, “Department”, “Location”.
- 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 |
|---|---|
| Job Title | Text field in the inspector. block.json default: Senior Frontend Developer. Saved as `jobTitle`. |
| Company | Text field in the inspector. block.json default: Acme Corp. Saved as `company`. |
| Department | Text field in the inspector. block.json default: Engineering. Saved as `department`. |
| Location | Text field in the inspector. block.json default: New York, NY. Saved as `location`. |
| Location Type | Select control; the chosen value is saved on the block. Options: On‑site; Remote; Hybrid. block.json default: hybrid. Saved as `locationType`. |
| Job Type | Select control; the chosen value is saved on the block. Options: Full‑time; Part‑time; Contract; Freelance; Internship; Temporary. block.json default: full-time. Saved as `jobType`. |
| Show Salary | On/off toggle in the inspector. On by default. Saved as `showSalary`. |
| Currency Symbol | Text field in the inspector. block.json default: $. Saved as `salaryCurrency`. |
| Min Salary | Text field in the inspector. block.json default: 80,000. Saved as `salaryMin`. |
| Max Salary | Text field in the inspector. block.json default: 120,000. Saved as `salaryMax`. |
| Period | Select control; the chosen value is saved on the block. Options: per year; per month; per hour; per project. block.json default: year. Saved as `salaryPeriod`. |
| Show Posted Date | On/off toggle in the inspector. On by default. Saved as `showPostedDate`. |
| Posted Date | Text field in the inspector. Saved as `postedDate`. |
| Show Deadline | On/off toggle in the inspector. Off by default. Saved as `showDeadline`. |
| Application Deadline | Text field in the inspector. Saved as `deadline`. |
| Show Description | On/off toggle in the inspector. On by default. Saved as `showDescription`. |
| Show Skills | On/off toggle in the inspector. On by default. Saved as `showSkills`. |
| Skills (comma-separated) | Text field in the inspector. block.json default: React, TypeScript, CSS, REST APIs. Saved as `skills`. |
| Show Apply Button | On/off toggle in the inspector. On by default. Saved as `showApplyBtn`. |
| Apply Label | Text field in the inspector. block.json default: Apply Now. Saved as `applyLabel`. |
| Apply URL | Text field in the inspector. block.json default: #. Saved as `applyUrl`. |
| Open in New Tab | On/off toggle in the inspector. Off by default. Saved as `applyNewTab`. |
| Show Secondary Button | On/off toggle in the inspector. Off by default. Saved as `showSecondaryBtn`. |
| Secondary Label | Text field in the inspector. block.json default: Learn More. Saved as `secondaryLabel`. |
| Secondary URL | Text field in the inspector. Saved as `secondaryUrl`. |
| Button Border Radius | Numeric range control in the inspector. Range 0–50. block.json default: 8. Saved as `primaryBtnRadius`. |
| Show Logo | On/off toggle in the inspector. On by default. Saved as `showLogo`. |
| Logo Size (px) | Numeric range control in the inspector. Range 32–100. block.json default: 56. Saved as `logoSize`. |
| Featured | On/off toggle in the inspector. Off by default. Saved as `featured`. |
| Featured Label | Text field in the inspector. block.json default: Featured. Saved as `featuredLabel`. |
| Mark as Urgent | On/off toggle in the inspector. Off by default. Saved as `urgent`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 12. Saved as `cardBorderRadius`. |
| Padding (px) | Numeric range control in the inspector. Range 12–60. block.json default: 28. Saved as `cardPadding`. |
| Show Shadow | On/off toggle in the inspector. On by default. Saved as `showShadow`. |
| Show Border | On/off toggle in the inspector. Off by default. Saved as `showBorder`. |
| Show Divider | On/off toggle in the inspector. On by default. Saved as `showDivider`. |
| Card Background | Color control in the inspector. block.json default: #ffffff. Saved as `cardBg`. |
| Colors — Title | Color control in the inspector. block.json default: #1e1e1e. Saved as `titleColor`. |
| Company | Color control in the inspector. block.json default: #6c3fb5. Saved as `companyColor`. |
| Body Text | Color control in the inspector. block.json default: #374151. Saved as `bodyColor`. |
| Meta Text | Color control in the inspector. block.json default: #6b7280. Saved as `metaColor`. |
| Apply Button Bg | Color control in the inspector. block.json default: #6c3fb5. Saved as `primaryBtnBg`. |
| Apply Button Text | Color control in the inspector. block.json default: #ffffff. Saved as `primaryBtnText`. |
| Job Type Badge Bg | Color control in the inspector. block.json default: #ede9fe. Saved as `jobTypeBg`. |
| Job Type Badge Text | Color control in the inspector. block.json default: #6c3fb5. Saved as `jobTypeText`. |
| Skill Bg | Color control in the inspector. block.json default: #f3f4f6. Saved as `skillBg`. |
| Skill Text | Color control in the inspector. block.json default: #374151. Saved as `skillText`. |
| Featured Color | Color control in the inspector. block.json default: #f59e0b. Saved as `featuredColor`. |
| Border / Divider | Color control in the inspector. block.json default: #e5e7eb. Saved as `borderColor`. |
When this is the right block
- Display a job posting card with title, company, location, salary, job type, skills, apply CTA, and rich styling options — that is the job of Job Listing, not a generic content block.
- Use it when you need the editor control labeled “Job Title”, which exists on this block’s inspector.
- It matches pages about job, listing, career.
- Inserter grouping: company, service, and operations 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 Job Listing block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Job Listing”. It sits under Business. After insert, open Job Details and set “Job Title”, “Company”, “Department”, “Location”.
What makes Job Listing different from other Blockenberg blocks?
Display a job posting card with title, company, location, salary, job type, skills, apply CTA, and rich styling options. Inspector labels on this block include “Job Title”, “Company”, “Department”, “Location”.
Is the Job Listing Gutenberg block free?
Yes. Job Listing ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Job Listing 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: Job Details, Salary, Dates, Content).
Related business blocks
Job Openings
Careers section with filterable job listings, department tags, location info, and apply links.
Portfolio Grid
Project showcase cards with category filter, hover overlay, tech tags and CTA links. Perfect for portfolio, case studies, and work samples.
Resume / CV
A complete professional resume or CV with experience timeline, education, skills, and contact header.
About Section
Ready-made About Us section with split image/video + text layout, optional company stats row, badge label, CTA buttons, and full background/color controls.
Address Card
Business address card with contact details, opening hours, and optional map link.
App Screenshot
SaaS/app product screenshot section with annotated callout points, device frame, heading, subtext, and CTA. Perfect for software landing pages.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Job Listing from the Gutenberg inserter.