Block: add copy action (#22214)

* Block: add copy action * Only serialise on copy
WordPress · May 8, 2020 · fca4e02 · fca4e02
1 parent 0984ca0
commit fca4e02
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 0 deletions.
diff --git a/packages/block-editor/src/components/block-actions/index.js b/packages/block-editor/src/components/block-actions/index.js
@@ -21,6 +21,7 @@ function BlockActions( {
 	onInsertBefore,
 	onRemove,
 	onUngroup,
+	blocks,
 } ) {
 	return children( {
 		canDuplicate,
@@ -32,6 +33,7 @@ function BlockActions( {
 		onInsertBefore,
 		onRemove,
 		onUngroup,
+		blocks,
 	} );
 }
 

diff --git a/packages/block-editor/src/components/block-settings-menu/index.js b/packages/block-editor/src/components/block-settings-menu/index.js
@@ -13,9 +13,12 @@ import {
 	DropdownMenu,
 	MenuGroup,
 	MenuItem,
+	ClipboardButton,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { moreHorizontal } from '@wordpress/icons';
+import { useState } from '@wordpress/element';
+import { serialize } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -56,6 +59,8 @@ export function BlockSettingsMenu( { clientIds } ) {
 		};
 	}, [] );
 
+	const [ hasCopied, setHasCopied ] = useState();
+
 	return (
 		<BlockActions clientIds={ clientIds }>
 			{ ( {
@@ -66,6 +71,7 @@ export function BlockSettingsMenu( { clientIds } ) {
 				onInsertAfter,
 				onInsertBefore,
 				onRemove,
+				blocks,
 			} ) => (
 				<ToolbarGroup>
 					<ToolbarItem>
@@ -98,6 +104,23 @@ export function BlockSettingsMenu( { clientIds } ) {
 													}
 												/>
 											) }
+											<ClipboardButton
+												text={ () =>
+													serialize( blocks )
+												}
+												role="menuitem"
+												className="components-menu-item__button"
+												onCopy={ () => {
+													setHasCopied( true );
+												} }
+												onFinishCopy={ () =>
+													setHasCopied( false )
+												}
+											>
+												{ hasCopied
+													? __( 'Copied!' )
+													: __( 'Copy' ) }
+											</ClipboardButton>
 											{ canDuplicate && (
 												<MenuItem
 													onClick={ flow(