Add "Copy Block Data" button

README.md

@@ -34,6 +34,10 @@ Once you move beyond version `1.1.0`, you should no longer experience this probl
 
 ## Changelog
 
+### Unreleased
+
+* Add `Copy Block Data` button ([#17 Add button to copy data](https://github.com/salcode/block-xray-attributes/issues/17))
+
 ### 1.1.1
 
 * Remove "Update URI" from plugin headers

src/components/CopyButton/LegacyCopyButton/index.js

@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+
+import { ClipboardButton } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * This component uses the now deprecated ClipboardButton component
+ * but it provides support back to WordPress 5.4.x (Gutenberg 6.7.0).
+ */
+export default function LegacyCopyButton({
+  content,
+}) {
+  const [ hasCopied, setHasCopied ] = useState( false );
+  return (
+    <ClipboardButton
+      className="is-primary"
+      text={content}
+      onCopy={ () => setHasCopied( true ) }
+      onFinishCopy={ () => setHasCopied( false ) }
+    >
+      {
+        hasCopied ?
+        __( 'Copied!', 'block-xray-attributes' ) :
+        __( 'Copy Block Data', 'block-xray-attributes' )
+      }
+    </ClipboardButton>
+  );
+}
+
+LegacyCopyButton.propTypes = {
+  content: PropTypes.string.isRequired,
+};

src/components/CopyButton/ModernCopyButton/index.js

@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types';
+
+import { useCopyToClipboard } from '@wordpress/compose';
+import { dispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+const onCopySuccess = () => dispatch('core/notices').createSuccessNotice(
+  __('Block Data copied!', 'block-xray-attributes'),
+  {
+    id: 'block-xray-attributes-block-data-copied',
+    isDismissible: true,
+    type: 'snackbar',
+  }
+);
+
+export default function ModernCopyButton({
+  content,
+}) {
+  const ref = useCopyToClipboard(content, onCopySuccess);
+  return (
+    <button
+      ref={ref}
+    >
+      {__( 'Copy Block Data', 'block-xray-attributes' )}
+    </button>
+  );
+}
+
+ModernCopyButton.propTypes = {
+  content: PropTypes.string.isRequired,
+};

src/components/CopyButton/index.js

@@ -0,0 +1,29 @@
+/* global */
+
+import PropTypes from 'prop-types';
+
+import LegacyCopyButton from './LegacyCopyButton';
+import ModernCopyButton from './ModernCopyButton';
+
+export default function CopyButton({
+  content,
+}) {
+  if ( wp?.compose?.useCopyToClipboard ) {
+    // useCopyToClipboard is supported.
+    return (
+      <ModernCopyButton
+        content={content}
+      />
+    );
+  }
+  // Use legacy CopyButton since useCopyToClipboard is not supported.
+  return (
+    <LegacyCopyButton
+      content={content}
+    />
+  );
+};
+
+CopyButton.propTypes = {
+  content: PropTypes.string.isRequired,
+};

src/components/JavaScriptObject/index.js

@@ -1,5 +1,7 @@
 import PropTypes from 'prop-types';
 
+import CopyButton from '../CopyButton';
+
 const pretty = (object) => {
   return JSON.stringify(object, null, 2);
 };
@@ -10,12 +12,18 @@ const codeStyles = {
 };
 
 export default function JavaScriptObject({ object }) {
+  const prettyCode = pretty(object);
   return (
-    <pre>
-      <code style={codeStyles}>
-        {pretty(object)}
-      </code>
-    </pre>
+    <>
+      <pre>
+        <code style={codeStyles}>
+          {prettyCode}
+        </code>
+      </pre>
+      <CopyButton
+        content={prettyCode}
+      />
+    </>
   );
 }