Make copy button smaller / move it to the side?

Hi
I stumbled on the same problem and figured out a solution to it.

In the “Copy to Clipboard” settings page I have added “.code-block-wrap” as the selector and “copy content as” is set to “text”.

In my function.php file I added

add_action( 'wp_footer', 'add_code_block_wrapper' );
function add_code_block_wrapper() { ?>
	<script>
		jQuery( ".wp-block-code" ).wrap( "<div class='code-block-wrap' style='position:relative;''></div>" );
	</script>
<?php
}

It adds a div around my code and that div is the selector for the copy to clipboard button

So the end HTML looks like this in the end

<div class="code-block-wrap" style="position:relative;">
	<pre class="wp-block-code copy-code-block">
		<code>CODE HERE</code>
	</pre>
	<button class="copy-the-code-button" title="Copy to Clipboard">Copy</button>
</div>

• This reply was modified 5 years, 2 months ago by kim.oj.

Thanks, @kimoj for answering.

I have now added the option Button Position which add the button to inside or outside the provided selector. Default inside.

Please update the plugin and check it once.

For now, I’m setting this topic as resolved. If do you have any other issues then don’t hesitate to create a new topic or comment on this one.