Blog · Gutenberg
Project Brief block for WordPress
A structured project brief with goals, deliverables, stakeholders, risks, and budget.
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
A structured project brief with goals, deliverables, stakeholders, risks, and budget.
Inspector panels on this block: Project Info, Overview, Goals, Deliverables, Stakeholders, Risks, Additional Notes, Header Colors. Those titles come from index.js, not from a shared template.
Behavior controls: “Status” options: 📋 Planning, 🚀 Active, 🔍 In Review, ✅ Complete, ⏸ On Hold; “Likelihood” options: Low, Medium, High; “Impact” options: Low, Medium, High.
Where to find it
Gutenberg inserter → Blog → search “Project Brief” (block name `blockenberg/project-brief` in block.json). Style it in the sidebar after insert.
How to use Project Brief block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Project Brief”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Project Info. Set “Project Name”, “Project Type”, “Status”, “Client”.
- 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 |
|---|---|
| Project Name | Text field in the inspector. block.json default: Acme Platform Redesign. Saved as `projectName`. |
| Project Type | Text field in the inspector. block.json default: Web Application. Saved as `projectType`. |
| Status | Select control; the chosen value is saved on the block. Options: 📋 Planning; 🚀 Active; 🔍 In Review; ✅ Complete; ⏸ On Hold. block.json default: active. Saved as `status`. |
| Client | Text field in the inspector. block.json default: Acme Corporation. Saved as `client`. |
| Owner | Text field in the inspector. block.json default: Jane Smith. Saved as `owner`. |
| Show Dates | On/off toggle in the inspector. On by default. Saved as `showDates`. |
| Start Date | Text field in the inspector. block.json default: March 1, 2026. Saved as `startDate`. |
| End Date | Text field in the inspector. block.json default: August 31, 2026. Saved as `endDate`. |
| Show Budget | On/off toggle in the inspector. On by default. Saved as `showBudget`. |
| Budget | Text field in the inspector. block.json default: $240,000. Saved as `budget`. |
| Project Overview | Multiline text field in the inspector. block.json default: A complete redesign of the Acme customer-facing platform focusing on improved user experience, performance, and accessibility. The project encompasses UI/UX redesign, frontend rebuild, and integration with the new API layer.. Saved as `overview`. |
| Name | Text field in the inspector. Saved as `stakeholders`. |
| Role | Text field in the inspector. Saved as `stakeholders`. |
| Risk | Multiline text field in the inspector. Saved as `risks`. |
| Likelihood | Select control; the chosen value is saved on the block. Options: Low; Medium; High. Saved as `risks`. |
| Impact | Select control; the chosen value is saved on the block. Options: Low; Medium; High. Saved as `risks`. |
| Show Notes | On/off toggle in the inspector. Off by default. Saved as `showNotes`. |
| Notes | Multiline text field in the inspector. Saved as `notes`. |
| Typography — Title | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `titleTypo`. |
| Body Text | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `bodyTypo`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–24. block.json default: 12. Saved as `borderRadius`. |
| Header BG | Color control in the inspector. block.json default: #0f172a. Saved as `headerBg`. |
| Header Text | Color control in the inspector. block.json default: #ffffff. Saved as `headerColor`. |
| Meta Text | Color control in the inspector. block.json default: #94a3b8. Saved as `metaColor`. |
| Block BG | Color control in the inspector. block.json default: #ffffff. Saved as `bgColor`. |
| Body Colors — Border | Color control in the inspector. block.json default: #e5e7eb. Saved as `borderColor`. |
| Section BG | Color control in the inspector. block.json default: #f8fafc. Saved as `sectionBg`. |
| Section Heading | Color control in the inspector. block.json default: #111827. Saved as `sectionTitleColor`. |
| Body Text | Color control in the inspector. block.json default: #374151. Saved as `bodyTextColor`. |
| Accent | Color control in the inspector. block.json default: #3b82f6. Saved as `accentColor`. |
| Goal Check | Color control in the inspector. block.json default: #3b82f6. Saved as `goalDotColor`. |
| Deliverable → | Color control in the inspector. block.json default: #10b981. Saved as `delivDotColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- A structured project brief with goals, deliverables, stakeholders, risks, and budget — that is the job of Project Brief, not a generic content block.
- Use it when you need the editor control labeled “Project Name”, which exists on this block’s inspector.
- It matches pages about project, brief, plan.
- 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 Project Brief block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Project Brief”. It sits under Blog. After insert, open Project Info and set “Project Name”, “Project Type”, “Status”, “Client”.
What makes Project Brief different from other Blockenberg blocks?
A structured project brief with goals, deliverables, stakeholders, risks, and budget. Inspector labels on this block include “Project Name”, “Project Type”, “Status”, “Client”.
Is the Project Brief Gutenberg block free?
Yes. Project Brief ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Project Brief 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: Project Info, Overview, Goals, Deliverables).
Related blog blocks
Content Outline
Structured article outline with numbered sections, sub-points, optional status badges, and estimated reading time.
Research Brief
Academic or industry research summary: study details, findings with significance, limitations, and key takeaways.
Article Header
Rich editorial-style article/blog post header with category badge, headline, subheadline, author meta bar, and optional hero image.
Article Series
Multi-part series navigator showing all articles with the current one highlighted and progress indicator.
Book Review
Rich book review block with cover image, star rating, details grid, pros & cons, and Schema.org Book + Review structured data for SEO.
Book Shelf
A visual reading list with a realistic bookshelf view, cards layout, or list — complete with ratings, reading status, and genre tags.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Project Brief from the Gutenberg inserter.