João Carmo Pereira

<p>This plugin will add a new copy to clipboard functionality to Gutenberg Code Block.<br />
It will add a copy button at the top right corner of the block. After clicked, it will select the text, copy to clipboard, and after copy it will deselect the copied text.  No markup here.</p>
<p>This plugin makes use of two javascript libraries:<br />
Clipboard.js and Prism.js</p>


Carmo Copy to Clipboard

This plugin will add a new copy to clipboard functionality to Gutenberg Code Block.

webcodingplace

<p><strong>Clipboard Snippet Copier</strong> lets you share ready-to-use shortcodes, demo layouts, or any reusable code snippets with your visitors. Click a button and the snippet is copied straight to their clipboard. No manual selection, no copy/paste errors.</p>
<p>You decide whether the snippet stays hidden (fetched only when copied) or is displayed inline as a styled code block. Either mode is one click away for the visitor.</p>
<h4>Why use it?</h4>
<ul>
<li><strong>Sell or showcase shortcodes</strong> — give buyers a “Copy Demo” button without exposing messy markup.</li>
<li><strong>Document your code</strong> — share PHP / JS / CSS examples on tutorial pages with a proper copy button.</li>
<li><strong>Reduce support tickets</strong> — eliminate “the shortcode didn’t work” issues caused by smart quotes, missing brackets, or whitespace mangling.</li>
<li><strong>Track engagement</strong> — built-in per-snippet copy counter shows what your audience actually uses.</li>
</ul>
<h4>Key features</h4>
<ul>
<li>📋 One-click copy to clipboard with success/failure tooltip.</li>
<li>🔒 <strong>Hidden mode</strong> — the snippet is stored in the admin and fetched via AJAX only when copied (never rendered in the HTML).</li>
<li>👁️ <strong>Inline mode</strong> — render the snippet visibly as a <code><pre><code></code> block with a copy button on top.</li>
<li>🧱 <strong>Gutenberg block</strong> with sidebar controls (snippet ID, label, inline toggle, language hint).</li>
<li>🔢 <strong>Shortcode</strong> for the Classic Editor, WPBakery, Elementor and any other builder.</li>
<li>🧮 <strong>Copy counter</strong> — sortable “Copies” column on the admin list, so you can see what’s popular.</li>
<li>⚙️ <strong>Settings page</strong> — default label, default CSS class, tooltip text, guest-access toggle.</li>
<li>📝 <strong>CodeMirror editor</strong> on the snippet edit screen — keeps your indentation and angle brackets intact.</li>
<li>⚡ Tiny footprint — no jQuery dependency on the frontend, no external libraries.</li>
<li>🌐 Translation-ready.</li>
</ul>
<h4>How it works</h4>
<ol>
<li>You add a snippet in <strong>Code Snippets <span aria-hidden="true" class="wp-exclude-emoji">→</span> Add New</strong> and note its ID.</li>
<li>You drop the <strong>Clipboard Snippet</strong> block (or the <code>[clipsnco_code_copy_btn]</code> shortcode) onto any page.</li>
<li>When a visitor clicks the button, the snippet is fetched over AJAX and written to their clipboard — without ever appearing in the page source (unless you turned on inline mode).</li>
</ol>
<h3>Usage</h3>
<h4>Quick start (shortcode)</h4>
<pre><code>[clipsnco_code_copy_btn id="123" label="Copy Code"]
</code></pre>
<p>Where <code>123</code> is the ID of your snippet (visible in the <strong>Code Snippets</strong> admin list).</p>
<h4>Shortcode attributes</h4>
<ul>
<li><code>id</code> <em>(required, integer)</em> — the snippet ID.</li>
<li><code>label</code> <em>(optional, string)</em> — button text. Defaults to the value set on the Settings page.</li>
<li><code>class</code> <em>(optional, string)</em> — extra CSS classes added to the button.</li>
<li><code>inline</code> <em>(optional, “yes” / “no”)</em> — when <code>yes</code>, the snippet is rendered as a <code><pre><code></code> block with a copy button on top. Default <code>no</code>.</li>
<li><code>language</code> <em>(optional, string)</em> — e.g. <code>php</code>, <code>js</code>, <code>css</code>. Adds a <code>language-xxx</code> class on the <code><code></code> element so syntax-highlighter libraries (Prism.js, highlight.js) can colourise it.</li>
</ul>
<p>Examples:</p>
<ul>
<li>Hidden snippet, custom label: <code>[clipsnco_code_copy_btn id="42" label="Copy shortcode"]</code></li>
<li>Inline display with PHP highlighting: <code>[clipsnco_code_copy_btn id="42" inline="yes" language="php"]</code></li>
<li>Extra CSS class for theme styling: <code>[clipsnco_code_copy_btn id="42" class="my-cta-btn"]</code></li>
</ul>
<h4>Gutenberg block</h4>
<p>In the block editor, search for <strong>“Clipboard Snippet”</strong> and insert it. The sidebar lets you set:</p>
<ul>
<li><strong>Snippet ID</strong> — the post ID of the snippet to copy.</li>
<li><strong>Button label</strong> — overrides the default label.</li>
<li><strong>Show code inline</strong> — toggle hidden vs inline display.</li>
<li><strong>Language hint</strong> — optional syntax-highlighter class.</li>
</ul>
<p>The block is server-rendered, so you can switch between block and shortcode usage freely.</p>
<h4>Alternative button markup</h4>
<p>If your page builder won’t let you drop a <code><button></code> element, you can put any element on the page with the data attribute or the helper class — the plugin’s frontend script picks it up automatically:</p>
<pre><code><a href="#" class="wcp-code-copy-btn" data-codecopy-id="123">Copy</a>
</code></pre>
<p>…or, when even attributes aren’t allowed, use the class-only form:</p>
<pre><code><span class="wcp-code-copy-btn data-codecopy-id-123">Copy</span>
</code></pre>
<h4>Settings</h4>
<p><strong>Code Snippets <span aria-hidden="true" class="wp-exclude-emoji">→</span> Settings</strong> lets you configure:</p>
<ul>
<li>Default button label</li>
<li>Default CSS class applied to every button</li>
<li>Tooltip text shown on copy success / failure</li>
<li>Whether non-logged-in visitors are allowed to copy snippets</li>
</ul>
<h4>Copy counter</h4>
<p>Every successful copy by a non-editor user bumps a <code>_clipsnco_copy_count</code> post meta value. The count is shown in the <strong>Copies</strong> column on the snippets admin list. Click the column header to sort by most-copied.</p>
<h4>Styling</h4>
<p>The button receives the class <code>wcp-code-copy-btn</code> plus anything you add via the shortcode/block <code>class</code> attribute. The inline-mode wrapper uses these classes (override them from your theme):</p>
<ul>
<li><code>.clipsnco-inline-wrap</code> — outer container</li>
<li><code>.clipsnco-inline-toolbar</code> — top bar containing the copy button</li>
<li><code>.clipsnco-pre</code> — the <code><pre></code> element</li>
<li><code>.clipsnco-code</code> — the <code><code></code> element (also gets <code>language-xxx</code> when set)</li>
</ul>


Clipboard Snippet Copier

One-click copy-to-clipboard for shortcodes & code snippets. Hide the raw code or show it inline. Works with a shortcode or Gutenberg block.

Carmo Copy to Clipboard vs Clipboard Snippet Copier