Revert to using useCopyToCliboard hook

WordPress · Jun 16, 2023 · 601a07e · 601a07e
1 parent b53783e
commit 601a07e
Showing 1 changed file with 27 additions and 89 deletions.
diff --git a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js
@@ -17,13 +17,13 @@ import {
 } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { moreVertical } from '@wordpress/icons';
-import { useCallback, useRef, useEffect, useState } from '@wordpress/element';
+import { useCallback, useRef, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	store as keyboardShortcutsStore,
 	__unstableUseShortcutEventMatch,
 } from '@wordpress/keyboard-shortcuts';
-import { pipe } from '@wordpress/compose';
+import { pipe, useCopyToClipboard } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -44,73 +44,20 @@ const {
 	DropdownMenuSeparatorV2,
 } = unlock( componentsPrivateApis );
 
-const clipboardPermissionCache = {
-	read: undefined,
-	write: undefined,
-};
-
-async function hasClipboardPermission( type ) {
-	if ( type !== 'write' && type !== 'read' ) {
-		return false;
-	}
-	if ( clipboardPermissionCache[ type ] !== undefined ) {
-		return clipboardPermissionCache[ type ];
-	}
-
-	let hasSupport = false;
-	try {
-		const result = await window.navigator.permissions.query( {
-			name: `clipboard-${ type }`,
-		} );
-		hasSupport = result.state === 'granted' || result.state === 'prompt';
-	} catch ( error ) {
-		// Possibly the permission is denied.
-		// TODO: show an error notice
-	}
-
-	clipboardPermissionCache[ type ] = hasSupport;
-	return hasSupport;
-}
-
-async function writeToClipboard( { text, onSuccess } ) {
-	try {
-		// Only available on sites using `https` (and localhost)
-		if ( ! window.navigator.clipboard ) {
-			// TODO: show an error notice
-			return;
-		}
-
-		await window.navigator.clipboard.writeText( text );
-		onSuccess?.();
-	} catch ( error ) {
-		// Possibly the permission is denied.
-		// TODO: show an error notice
-	}
-}
-
-function CopyMenuItem( { blocks, onCopy, label } ) {
-	const [ supportsClipboard, setSupportsClipboard ] = useState( false );
+function CopyMenuItem( { blocks, onCopy, label, clipboardContainer } ) {
+	const ref = useCopyToClipboard(
+		() => serialize( blocks ),
+		onCopy,
+		clipboardContainer
+	);
 	const copyMenuItemBlocksLabel =
 		blocks.length > 1 ? __( 'Copy blocks' ) : __( 'Copy' );
 	const copyMenuItemLabel = label ? label : copyMenuItemBlocksLabel;
 
-	useEffect( () => {
-		async function testSupport() {
-			const hasPermission = await hasClipboardPermission( 'write' );
-			setSupportsClipboard( hasPermission );
-		}
-
-		testSupport();
-	}, [] );
-
 	return (
 		<DropdownMenuItemV2
-			disabled={ ! supportsClipboard }
+			ref={ ref }
 			onSelect={ async ( event ) => {
-				await writeToClipboard( {
-					text: serialize( blocks ),
-					onSuccess: onCopy,
-				} );
 				// Keep the dropdown menu open.
 				event.preventDefault();
 			} }
@@ -120,31 +67,6 @@ function CopyMenuItem( { blocks, onCopy, label } ) {
 	);
 }
 
-function PasteStylesMenuItem( { onSelect } ) {
-	const [ supportsClipboard, setSupportsClipboard ] = useState( false );
-	useEffect( () => {
-		async function testSupport() {
-			const hasPermission = await hasClipboardPermission( 'read' );
-			setSupportsClipboard( hasPermission );
-		}
-
-		testSupport();
-	}, [] );
-
-	return (
-		<DropdownMenuItemV2
-			disabled={ ! supportsClipboard }
-			onSelect={ ( event ) => {
-				onSelect?.();
-				// Keep the dropdown menu open.
-				event.preventDefault();
-			} }
-		>
-			{ __( 'Paste styles' ) }
-		</DropdownMenuItemV2>
-	);
-}
-
 const Shortcut = ( { shortcut } ) => {
 	if ( ! shortcut ) {
 		return null;
@@ -325,6 +247,8 @@ export function BlockSettingsDropdown( {
 	// external id from the parent `ToolbarItem` that can't be ignored.
 	const dropdownTriggerId = toggleProps?.id;
 
+	const dropdownMenuRef = useRef( null );
+
 	return (
 		<BlockActions
 			clientIds={ clientIds }
@@ -346,6 +270,7 @@ export function BlockSettingsDropdown( {
 				blocks,
 			} ) => (
 				<DropdownMenuV2
+					ref={ dropdownMenuRef }
 					open={ isDropdownOpen }
 					onOpenChange={ setIsDropdownOpen }
 					trigger={
@@ -444,7 +369,11 @@ export function BlockSettingsDropdown( {
 								clientId={ firstBlockClientId }
 							/>
 						) }
-						<CopyMenuItem blocks={ blocks } onCopy={ onCopy } />
+						<CopyMenuItem
+							blocks={ blocks }
+							onCopy={ onCopy }
+							clipboardContainer={ dropdownMenuRef.current }
+						/>
 						{ canDuplicate && (
 							<DropdownMenuItemV2
 								onSelect={ pipe(
@@ -492,8 +421,17 @@ export function BlockSettingsDropdown( {
 								blocks={ blocks }
 								onCopy={ onCopy }
 								label={ __( 'Copy styles' ) }
+								clipboardContainer={ dropdownMenuRef.current }
 							/>
-							<PasteStylesMenuItem onSelect={ onPasteStyles } />
+							<DropdownMenuItemV2
+								onSelect={ ( event ) => {
+									onPasteStyles();
+									// Keep the dropdown menu open.
+									event.preventDefault();
+								} }
+							>
+								{ __( 'Paste styles' ) }
+							</DropdownMenuItemV2>
 						</DropdownMenuGroupV2>
 					) }
 					<BlockSettingsMenuControls.Slot