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
index 91de619ffdeb73..086ff5eb1e332a 100644
--- 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
@@ -6,7 +6,12 @@ import { partial, first, castArray, last, compact } from 'lodash';
/**
* WordPress dependencies
*/
-import { ClipboardContext, ToolbarButton, Picker } from '@wordpress/components';
+import {
+ getClipboard,
+ setClipboard,
+ ToolbarButton,
+ Picker,
+} from '@wordpress/components';
import {
getBlockType,
getDefaultBlockName,
@@ -19,7 +24,7 @@ import { __, sprintf } from '@wordpress/i18n';
import { withDispatch, withSelect } from '@wordpress/data';
import { withInstanceId, compose } from '@wordpress/compose';
import { moreHorizontalMobile } from '@wordpress/icons';
-import { useRef, useContext } from '@wordpress/element';
+import { useRef } from '@wordpress/element';
/**
* Internal dependencies
*/
@@ -49,7 +54,7 @@ const BlockActionsMenu = ( {
} ) => {
const pickerRef = useRef();
const moversOptions = { keys: [ 'icon', 'actionTitle' ] };
- const { clipboard, updateClipboard } = useContext( ClipboardContext );
+ const clipboard = getClipboard();
const {
actionTitle: {
@@ -162,7 +167,7 @@ const BlockActionsMenu = ( {
break;
case copyButtonOption.value:
const copyBlock = getBlocksByClientId( selectedBlockClientId );
- updateClipboard( serialize( copyBlock ) );
+ setClipboard( serialize( copyBlock ) );
createSuccessNotice(
// translators: displayed right after the block is copied.
__( 'Block copied' )
@@ -170,7 +175,7 @@ const BlockActionsMenu = ( {
break;
case cutButtonOption.value:
const cutBlock = getBlocksByClientId( selectedBlockClientId );
- updateClipboard( serialize( cutBlock ) );
+ setClipboard( serialize( cutBlock ) );
removeBlocks( selectedBlockClientId );
createSuccessNotice(
// translators: displayed right after the block is cut.
diff --git a/packages/block-editor/src/components/inserter/menu.native.js b/packages/block-editor/src/components/inserter/menu.native.js
index 42657dea749db1..11cfedb17aa619 100644
--- a/packages/block-editor/src/components/inserter/menu.native.js
+++ b/packages/block-editor/src/components/inserter/menu.native.js
@@ -25,7 +25,7 @@ import {
BottomSheet,
BottomSheetConsumer,
InserterButton,
- ClipboardConsumer,
+ getClipboard,
} from '@wordpress/components';
/**
@@ -116,7 +116,7 @@ export class InserterMenu extends Component {
this.setState( { numberOfColumns, itemWidth, maxWidth } );
}
- getItems( clipboard ) {
+ getItems() {
const {
items,
canInsertBlockType,
@@ -124,6 +124,7 @@ export class InserterMenu extends Component {
getBlockType,
} = this.props;
+ const clipboard = getClipboard();
const clipboardBlock =
clipboard && rawHandler( { HTML: clipboard } )[ 0 ];
const shouldAddClipboardBlock =
@@ -163,52 +164,44 @@ export class InserterMenu extends Component {
const { numberOfColumns } = this.state;
return (
-
- { ( { clipboard } ) => (
-
-
-
- { ( { listProps, safeAreaBottomInset } ) => (
- (
-
-
-
- ) }
- keyExtractor={ ( item ) => item.name }
- renderItem={ this.renderItem }
- { ...listProps }
- contentContainerStyle={ [
- ...listProps.contentContainerStyle,
- {
- paddingBottom:
- safeAreaBottomInset ||
- styles.list.paddingBottom,
- },
- ] }
- />
+
+
+
+ { ( { listProps, safeAreaBottomInset } ) => (
+ (
+
+
+
) }
-
-
-
- ) }
-
+ keyExtractor={ ( item ) => item.name }
+ renderItem={ this.renderItem }
+ { ...listProps }
+ contentContainerStyle={ [
+ ...listProps.contentContainerStyle,
+ {
+ paddingBottom:
+ safeAreaBottomInset ||
+ styles.list.paddingBottom,
+ },
+ ] }
+ />
+ ) }
+
+
+
);
}
}
diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js
index f96d21550c1888..f03892096361fd 100644
--- a/packages/components/src/index.native.js
+++ b/packages/components/src/index.native.js
@@ -81,11 +81,7 @@ export { default as LinkSettingsNavigation } from './mobile/link-settings/link-s
export { default as Image, IMAGE_DEFAULT_FOCAL_POINT } from './mobile/image';
export { default as ImageEditingButton } from './mobile/image/image-editing-button';
export { default as InserterButton } from './mobile/inserter-button';
-export {
- default as ClipboardProvider,
- ClipboardContext,
- ClipboardConsumer,
-} from './mobile/clipboard';
+export { setClipboard, getClipboard } from './mobile/clipboard';
// Utils
export { colorsUtils } from './mobile/color-settings/utils';
diff --git a/packages/components/src/mobile/clipboard/index.native.js b/packages/components/src/mobile/clipboard/index.native.js
index 3a1fbf1de87899..1079fb2f60ce1f 100644
--- a/packages/components/src/mobile/clipboard/index.native.js
+++ b/packages/components/src/mobile/clipboard/index.native.js
@@ -1,21 +1,18 @@
-/**
- * WordPress dependencies
- */
-import { createContext, useCallback, useState } from '@wordpress/element';
+const createClipboard = () => {
+ let currentClipboard;
-export const ClipboardContext = createContext( {} );
-const { Provider, Consumer } = ClipboardContext;
-export { Consumer as ClipboardConsumer };
+ const setClipboard = ( clipboard ) => {
+ currentClipboard = clipboard;
+ };
-export default function ClipboardProvider( { children } ) {
- const [ clipboard, setClipboard ] = useState();
- const updateClipboard = useCallback( ( clipboardUpdate ) => {
- setClipboard( clipboardUpdate );
- }, [] );
+ const getClipboard = () => currentClipboard;
- return (
-
- { children }
-
- );
-}
+ return {
+ setClipboard,
+ getClipboard,
+ };
+};
+
+const clipboard = createClipboard();
+
+export const { setClipboard, getClipboard } = clipboard;
diff --git a/packages/edit-post/src/editor.native.js b/packages/edit-post/src/editor.native.js
index c4c0affe8243c6..34ea06067cca48 100644
--- a/packages/edit-post/src/editor.native.js
+++ b/packages/edit-post/src/editor.native.js
@@ -19,7 +19,7 @@ import {
import { withDispatch, withSelect } from '@wordpress/data';
import { compose } from '@wordpress/compose';
import { subscribeSetFocusOnTitle } from '@wordpress/react-native-bridge';
-import { SlotFillProvider, ClipboardProvider } from '@wordpress/components';
+import { SlotFillProvider } from '@wordpress/components';
import { Preview } from '@wordpress/block-editor';
/**
@@ -151,17 +151,15 @@ class Editor extends Component {
return (
-
-
- { this.editorMode( initialHtml, editorMode ) }
-
-
+
+ { this.editorMode( initialHtml, editorMode ) }
+
);
}