Marketing · Gutenberg
Coupon block for WordPress
Eye-catching promo/discount coupon card with copyable code, expiry countdown, and flexible styling.
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
Eye-catching promo/discount coupon card with copyable code, expiry countdown, and flexible styling.
Inspector panels on this block: Content, Coupon Code, Expiry, CTA Button, Badge, Appearance. Those titles come from index.js, not from a shared template.
Behavior controls: “Discount type” options: Percentage (%), Fixed amount, Free shipping, Buy one get one, Custom label; “Expiry date” (Format: YYYY-MM-DD or any readable date); “Badge shape” options: Circle, Rounded, Pill; “Badge position” options: Top right, Top left, Inline.
Where to find it
Gutenberg inserter → Marketing → search “Coupon” (block name `blockenberg/coupon` in block.json). Style it in the sidebar after insert.
How to use Coupon block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Coupon”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Content. Set “Content — Title”, “Description”, “Discount type”, “Discount value / label”.
- Check the published page. The view script reads HTML data attributes: data-copied-label, data-copy, data-expiry. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Content — Title | Text field in the inspector. block.json default: Exclusive Offer. Saved as `title`. |
| Description | Multiline text field in the inspector. block.json default: Use this code at checkout and save on your order.. Saved as `description`. |
| Discount type | Select control; the chosen value is saved on the block. Options: Percentage (%); Fixed amount; Free shipping; Buy one get one; Custom label. block.json default: percent. Saved as `discountType`. |
| Discount value / label | Text field in the inspector. block.json default: 40. Saved as `discountValue`. |
| Show code | On/off toggle in the inspector. On by default. Saved as `showCode`. |
| Code | Text field in the inspector. block.json default: SAVE40. Saved as `code`. |
| Code label | Text field in the inspector. block.json default: Coupon Code. Saved as `codeLabel`. |
| Copy button label | Text field in the inspector. block.json default: Copy. Saved as `copyLabel`. |
| Copied! label | Text field in the inspector. block.json default: Copied!. Saved as `copiedLabel`. |
| Show expiry | On/off toggle in the inspector. On by default. Saved as `showExpiry`. |
| Expiry date | Text field in the inspector. Format: YYYY-MM-DD or any readable date. Saved as `expiryDate`. |
| Expiry label | Text field in the inspector. block.json default: Offer expires:. Saved as `expiryLabel`. |
| Show live countdown | On/off toggle in the inspector. On by default. Saved as `showCountdown`. |
| Show button | On/off toggle in the inspector. On by default. Saved as `showButton`. |
| Button text | Text field in the inspector. block.json default: Claim Discount. Saved as `buttonText`. |
| Button URL | Text field in the inspector. block.json default: #. Saved as `buttonUrl`. |
| Open in new tab | On/off toggle in the inspector. Off by default. Saved as `buttonNewTab`. |
| Show fine print / note | On/off toggle in the inspector. On by default. Saved as `showNote`. |
| Note text | Text field in the inspector. block.json default: * Terms and conditions apply.. Saved as `note`. |
| Show badge | On/off toggle in the inspector. On by default. Saved as `showBadge`. |
| Badge shape | Select control; the chosen value is saved on the block. Options: Circle; Rounded; Pill. block.json default: circle. Saved as `badgeShape`. |
| Badge position | Select control; the chosen value is saved on the block. Options: Top right; Top left; Inline. block.json default: top-right. Saved as `badgePosition`. |
| Card style | Select control; the chosen value is saved on the block. Options: Classic (strip); Card (flat); Minimal; Ribbon (accent). block.json default: classic. Saved as `style`. |
| Accent strip side | Select control; the chosen value is saved on the block. Options: Left; Top; Right; Bottom. block.json default: left. Saved as `stripSide`. |
| Border radius (px) | Numeric range control in the inspector. Range 0–40. block.json default: 16. Saved as `borderRadius`. |
| Max width (px) | Numeric range control in the inspector. Range 280–900. block.json default: 540. Saved as `maxWidth`. |
| Accent / strip | Color control in the inspector. block.json default: #6c3fb5. Saved as `accentColor`. |
| Card background | Color control in the inspector. block.json default: #ffffff. Saved as `bgColor`. |
| Title text | Color control in the inspector. block.json default: #1f2937. Saved as `textColor`. |
| Description text | Color control in the inspector. block.json default: #6b7280. Saved as `descColor`. |
| Badge background | Color control in the inspector. block.json default: #6c3fb5. Saved as `badgeBg`. |
| Badge text | Color control in the inspector. block.json default: #ffffff. Saved as `badgeColor`. |
| Code background | Color control in the inspector. block.json default: #f5f0ff. Saved as `codeBg`. |
| Code text | Color control in the inspector. block.json default: #6c3fb5. Saved as `codeColor`. |
| Button background | Color control in the inspector. block.json default: #6c3fb5. Saved as `btnBg`. |
| Button text | Color control in the inspector. block.json default: #ffffff. Saved as `btnColor`. |
| Typography — Title | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoTitle`. |
| Description (Typo Desc) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoDesc`. |
| Code font size (px) | Numeric range control in the inspector. Range 14–36. block.json default: 22. Saved as `codeFontSize`. |
| Button font size (px) | Numeric range control in the inspector. Range 11–24. block.json default: 16. Saved as `btnFontSize`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-copied-label, data-copy, data-expiry.
When this is the right block
- Eye-catching promo/discount coupon card with copyable code, expiry countdown, and flexible styling — that is the job of Coupon, 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 coupon, discount, promo.
- Inserter grouping: landing pages, campaign sections, and conversion layouts.
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 Coupon block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Coupon”. It sits under Marketing. After insert, open Content and set “Content — Title”, “Description”, “Discount type”, “Discount value / label”.
What makes Coupon different from other Blockenberg blocks?
Eye-catching promo/discount coupon card with copyable code, expiry countdown, and flexible styling. Inspector labels on this block include “Content — Title”, “Description”, “Discount type”, “Discount value / label”.
Is the Coupon Gutenberg block free?
Yes. Coupon ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Coupon 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, Coupon Code, Expiry, CTA Button).
Related marketing blocks
Offer Card
Special offer and deal card with urgency badge, original/sale price, includes list, CTA, and optional countdown timer.
Promo Banner
Dismissible announcement ribbon with message, link/button, gradient background and cookie memory.
Announcement Strip
A thin dismissible announcement bar — ideal above the site header for promotions, launches, or alerts.
Call to Action
Headline + sub-headline + 1-2 buttons with optional color/gradient background. Perfect inside Row/Column blocks.
CTA with Countdown
Urgency-driven CTA section with a live countdown timer, headline, and call-to-action buttons.
Gradient CTA
A bold full-width call-to-action section with a gradient or solid background, headline, subtitle, and buttons.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Coupon from the Gutenberg inserter.