Developers · Gutenberg
Clipboard Copy block for WordPress
Display a copyable code, coupon, or text with a one-click copy button.
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 copyable code, coupon, or text with a one-click copy button.
Inspector panels on this block: Content, Layout, Card Colors. Those titles come from index.js, not from a shared template.
Behavior controls: “Card Style” options: Card (bordered), Inline, Minimal; “Layout — Size” options: Small, Medium, Large; “Layout — Alignment” options: Left, Center, Right.
Where to find it
Gutenberg inserter → Developers → search “Clipboard Copy” (block name `blockenberg/clipboard-copy` in block.json). Style it in the sidebar after insert.
How to use Clipboard Copy block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Clipboard Copy”, insert it. Category: Developers.
- Configure inspector controls that exist on this block. Open Content. Set “Text to Copy”, “Button Label”, “Copied State Label”, “Description text (optional)”.
- Check the published page. The view script reads HTML data attributes: data-text. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Text to Copy | Text field in the inspector. block.json default: SAVE20. Saved as `textToCopy`. |
| Button Label | Text field in the inspector. block.json default: Copy Code. Saved as `label`. |
| Copied State Label | Text field in the inspector. block.json default: Copied! ✓. Saved as `copiedLabel`. |
| Description text (optional) | Multiline text field in the inspector. Saved as `description`. |
| Show code display area | On/off toggle in the inspector. On by default. Saved as `showCode`. |
| Show copy icon on button | On/off toggle in the inspector. On by default. Saved as `iconEnabled`. |
| Card Style | Select control; the chosen value is saved on the block. Options: Card (bordered); Inline; Minimal. block.json default: card. Saved as `style`. |
| Layout — Size | Select control; the chosen value is saved on the block. Options: Small; Medium; Large. block.json default: md. Saved as `size`. |
| Layout — Alignment | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: left. Saved as `alignment`. |
| Border Radius | Numeric range control in the inspector. Range 0–30. block.json default: 8. Saved as `borderRadius`. |
| Toast Duration (ms) | Numeric range control in the inspector. Range 500–5000. block.json default: 2000. Saved as `toastDuration`. |
| Card Background | Color control in the inspector. block.json default: #f9fafb. Saved as `bgColor`. |
| Border Color | Color control in the inspector. block.json default: #e5e7eb. Saved as `borderColor`. |
| Code Area BG | Color control in the inspector. block.json default: #f3f4f6. Saved as `codeBg`. |
| Code Text Color | Color control in the inspector. block.json default: #111827. Saved as `codeColor`. |
| Button BG | Color control in the inspector. block.json default: #111827. Saved as `btnBg`. |
| Button Text | Color control in the inspector. block.json default: #ffffff. Saved as `btnColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-text.
When this is the right block
- Display a copyable code, coupon, or text with a one-click copy button — that is the job of Clipboard Copy, not a generic content block.
- Use it when you need the editor control labeled “Text to Copy”, which exists on this block’s inspector.
- It matches pages about copy, clipboard, coupon.
- Inserter grouping: docs sites, utilities, and developer landing 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 Clipboard Copy block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Clipboard Copy”. It sits under Developers. After insert, open Content and set “Text to Copy”, “Button Label”, “Copied State Label”, “Description text (optional)”.
What makes Clipboard Copy different from other Blockenberg blocks?
Display a copyable code, coupon, or text with a one-click copy button. Inspector labels on this block include “Text to Copy”, “Button Label”, “Copied State Label”, “Description text (optional)”.
Is the Clipboard Copy Gutenberg block free?
Yes. Clipboard Copy ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Clipboard Copy 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, Layout, Card Colors).
Related developers blocks
API Reference
Display API endpoint documentation with method badge, parameters table, and request/response code examples.
Code Block
Syntax-highlighted code block with copy button, line numbers, and multiple themes.
Code Comparison
Side-by-side code comparison block with syntax highlighting, diff markers, labeled panels, copy buttons, line numbers, and a draggable split divider.
Code Playground
Interactive HTML/CSS/JS editor with live preview. Let visitors experiment with code directly on the page.
Code Tabs
Multi-language tabbed code viewer with syntax highlighting. Show the same snippet in JavaScript, Python, PHP, and more.
File Tree
Display a visual file and folder tree structure — ideal for documentation, project overviews, and tutorials.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Clipboard Copy from the Gutenberg inserter.