I'm trying to emulate what these folks do with their "Copy code" button: https://gutenberghub.com/templates/team-56

Their approach is great for copying to clipboard and pasting directly to the Wordpress block editor - either on the back end of the editor or via the front end (just paste it in the new block field and it creates the blocks automatically).

I developed a plugin which works great and pastes the code I need to the clipboard.

Works great if I paste to the code editor.

But when I paste the code into the front end of the block editor it transforms it into preformatted content instead of automatically converting to the blocks represented by the code.

Yet, if I drop the same code from the clipboard into an editor first, e.g. BBEdit, and then copy that, it works fine. So it seems as if the content is right, but the format is off. Like I need to get it to plain text?

Please see what I mean in this video:


This doesn't happen with the Gutenberg Hub clipboard content.

Any help would be very much appreciated.



  • Note that I don't want to strip all HTML, e.g. this is a sample of the Wordpress editor code: <!-- wp:heading {"className":"eplus-ssm9jN","epGeneratedClass":"eplus-ssm9jN","epAnimationGeneratedClass":"edplus_anim-RLE50x"} --> <h2 class="eplus-ssm9jN">Nice one.</h2> <!-- /wp:heading -->
    – user210686
    Aug 26, 2021 at 2:55

1 Answer 1


I figured this out.

I'm using clipboard.js and found that making the data-clipboard-target a textarea, i.e. doing the copying from a text-only element, it had the same effect as pasting into a text editor.



Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.