Business · Gutenberg
Certificate block for WordPress
Display a digital certificate or diploma with recipient name, issuer, date, credentials, and optional signatures. Ideal for online courses and certifications.
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 digital certificate or diploma with recipient name, issuer, date, credentials, and optional signatures. Ideal for online courses and certifications.
Inspector panels on this block: Content, Issuer Logo, Signatures. Those titles come from index.js, not from a shared template.
Behavior controls: “Certificate Style” options: Classic, Modern, Minimal; “Font Family” options: Serif (Traditional), Sans-serif (Modern).
Where to find it
Gutenberg inserter → Business → search “Certificate” (block name `blockenberg/certificate` in block.json). Style it in the sidebar after insert.
How to use Certificate block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Certificate”, insert it. Category: Business.
- Configure inspector controls that exist on this block. Open Content. Set “Certificate Style”, “Max Width (px)”, “Border Width”, “Border Radius”.
- 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 |
|---|---|
| Certificate Style | Select control; the chosen value is saved on the block. Options: Classic; Modern; Minimal. block.json default: classic. Saved as `style`. |
| Max Width (px) | Numeric range control in the inspector. Range 480–1200. block.json default: 800. Saved as `maxWidth`. |
| Border Width | Numeric range control in the inspector. Range 0–20. block.json default: 6. Saved as `borderWidth`. |
| Border Radius | Numeric range control in the inspector. Range 0–20. block.json default: 4. Saved as `borderRadius`. |
| Style — Shadow | Numeric range control in the inspector. Range 0–5. block.json default: 2. Saved as `shadowSize`. |
| Inner Border Frame | On/off toggle in the inspector. On by default. Saved as `innerBorder`. |
| Show Badge / Emoji | On/off toggle in the inspector. On by default. Saved as `showBadge`. |
| Badge Emoji | Text field in the inspector. block.json default: 🏆. Saved as `badgeEmoji`. |
| Pre-title (e.g. "Certificate of Completion") | Text field in the inspector. block.json default: Certificate of Completion. Saved as `preTitle`. |
| Awarded-to text | Text field in the inspector. block.json default: This certifies that. Saved as `awardedTo`. |
| Recipient Name | Text field in the inspector. block.json default: Jane Doe. Saved as `recipientName`. |
| Course / Achievement Title | Text field in the inspector. block.json default: Advanced Web Development. Saved as `courseTitle`. |
| Description | Multiline text field in the inspector. block.json default: has successfully completed the full course curriculum and demonstrated proficiency in all required competencies.. Saved as `courseDesc`. |
| Issuer Name | Text field in the inspector. block.json default: Blockenberg Academy. Saved as `issuerName`. |
| Show Date | On/off toggle in the inspector. On by default. Saved as `showDate`. |
| Completion Date | Text field in the inspector. block.json default: February 24, 2026. Saved as `completionDate`. |
| Show Credential ID | On/off toggle in the inspector. On by default. Saved as `showCredentialId`. |
| Credential ID | Text field in the inspector. block.json default: CERT-2026-0001. Saved as `credentialId`. |
| Signature 1 | On/off toggle in the inspector. On by default. Saved as `showSignature1`. |
| Name | Text field in the inspector. block.json default: Alex Johnson. Saved as `signature1Name`. |
| Signatures — Title | Text field in the inspector. block.json default: Course Director. Saved as `signature1Title`. |
| Signature 2 | On/off toggle in the inspector. Off by default. Saved as `showSignature2`. |
| Name (Signature2Name) | Text field in the inspector. block.json default: Maria Santos. Saved as `signature2Name`. |
| Signatures — Title (Signature2Title) | Text field in the inspector. block.json default: Academic Dean. Saved as `signature2Title`. |
| Font Family | Select control; the chosen value is saved on the block. Options: Serif (Traditional); Sans-serif (Modern). block.json default: serif. Saved as `fontFamily`. |
| Colors — Background | Color control in the inspector. block.json default: #fffef7. Saved as `bgColor`. |
| Border / Frame | Color control in the inspector. block.json default: #c9a84c. Saved as `borderColor`. |
| Accent | Color control in the inspector. block.json default: #8b6914. Saved as `accentColor`. |
| Pre-title | Color control in the inspector. block.json default: #8b6914. Saved as `preTitleColor`. |
| Recipient Name | Color control in the inspector. block.json default: #1e293b. Saved as `recipientColor`. |
| Course Title | Color control in the inspector. block.json default: #1a3a6b. Saved as `courseTitleColor`. |
| Description | Color control in the inspector. block.json default: #475569. Saved as `descColor`. |
| Issuer Name | Color control in the inspector. block.json default: #1e293b. Saved as `issuerColor`. |
| Meta / Signature Title | Color control in the inspector. block.json default: #64748b. Saved as `metaColor`. |
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 digital certificate or diploma with recipient name, issuer, date, credentials, and optional signatures. Ideal for online courses and certifications — that is the job of Certificate, not a generic content block.
- Use it when you need the editor control labeled “Certificate Style”, which exists on this block’s inspector.
- It matches pages about certificate, diploma, award.
- 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 Certificate block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Certificate”. It sits under Business. After insert, open Content and set “Certificate Style”, “Max Width (px)”, “Border Width”, “Border Radius”.
What makes Certificate different from other Blockenberg blocks?
Display a digital certificate or diploma with recipient name, issuer, date, credentials, and optional signatures. Ideal for online courses and certifications. Inspector labels on this block include “Certificate Style”, “Max Width (px)”, “Border Width”, “Border Radius”.
Is the Certificate Gutenberg block free?
Yes. Certificate ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Certificate 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, Issuer Logo, Signatures).
Related business blocks
Community Section
Social community proof section with overlapping member avatars, member count, heading, CTA button, and trust badges.
Stats Counter
Display animated number counters with icons, labels, and rich customization.
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.
Author Box
Display a blog author profile card with avatar, name, bio, role and social media links.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Certificate from the Gutenberg inserter.