Mobile - ClipboardProvider - Use state

WordPress · Nov 25, 2020 · d163761 · d163761
1 parent cc9044a
commit d163761
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 13 deletions.
diff --git a/packages/block-editor/src/components/block-mobile-toolbar/block-actions-menu.native.js b/packages/block-editor/src/components/block-mobile-toolbar/block-actions-menu.native.js
@@ -49,10 +49,7 @@ const BlockActionsMenu = ( {
 } ) => {
 	const pickerRef = useRef();
 	const moversOptions = { keys: [ 'icon', 'actionTitle' ] };
-	const {
-		clipboard: { current: currentClipboard },
-		updateClipboard,
-	} = useContext( ClipboardContext );
+	const { clipboard, updateClipboard } = useContext( ClipboardContext );
 
 	const {
 		actionTitle: {
@@ -125,16 +122,19 @@ const BlockActionsMenu = ( {
 	] );
 
 	function onPasteBlock() {
-		if ( ! currentClipboard ) {
+		if ( ! clipboard ) {
 			return;
 		}
 
-		pasteBlock( rawHandler( { HTML: currentClipboard } )[ 0 ] );
+		pasteBlock( rawHandler( { HTML: clipboard } )[ 0 ] );
 	}
 
 	function isPasteEnabled() {
-		const clipboardBlock =
-			currentClipboard && rawHandler( { HTML: currentClipboard } )[ 0 ];
+		if ( ! clipboard ) {
+			return false;
+		}
+
+		const clipboardBlock = rawHandler( { HTML: clipboard } )[ 0 ];
 
 		return (
 			clipboardBlock &&

diff --git a/packages/block-editor/src/components/inserter/menu.native.js b/packages/block-editor/src/components/inserter/menu.native.js
@@ -120,9 +120,8 @@ export class InserterMenu extends Component {
 			getBlockType,
 		} = this.props;
 
-		const { current: currentClipboard } = clipboard;
 		const clipboardBlock =
-			currentClipboard && rawHandler( { HTML: currentClipboard } )[ 0 ];
+			clipboard && rawHandler( { HTML: clipboard } )[ 0 ];
 		const shouldAddClipboardBlock =
 			clipboardBlock &&
 			canInsertBlockType( clipboardBlock.name, destinationRootClientId );

diff --git a/packages/components/src/mobile/clipboard/index.native.js b/packages/components/src/mobile/clipboard/index.native.js
@@ -1,16 +1,16 @@
 /**
  * WordPress dependencies
  */
-import { createContext, useCallback, useRef } from '@wordpress/element';
+import { createContext, useCallback, useState } from '@wordpress/element';
 
 export const ClipboardContext = createContext( {} );
 const { Provider, Consumer } = ClipboardContext;
 export { Consumer as ClipboardConsumer };
 
 export default function ClipboardProvider( { children } ) {
-	const clipboard = useRef();
+	const [ clipboard, setClipboard ] = useState();
 	const updateClipboard = useCallback( ( clipboardUpdate ) => {
-		clipboard.current = clipboardUpdate;
+		setClipboard( clipboardUpdate );
 	}, [] );
 
 	return (