Convert new additions

WordPress · Feb 8, 2021 · b3d1a12 · b3d1a12
1 parent 620598f
commit b3d1a12
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 32 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json
@@ -60,7 +60,6 @@
 		"lodash": "^4.17.19",
 		"memize": "^1.1.0",
 		"react-autosize-textarea": "^7.1.0",
-		"react-merge-refs": "^1.0.0",
 		"react-spring": "^8.0.19",
 		"redux-multi": "^0.1.12",
 		"rememo": "^3.0.0",

diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import mergeRefs from 'react-merge-refs';
 import { compact, map } from 'lodash';
 import tinycolor from 'tinycolor2';
 
@@ -16,6 +15,7 @@ import {
 	forwardRef,
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { useMergeRefs } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -211,7 +211,7 @@ function Iframe( { contentRef, editorStyles, children, head, ...props }, ref ) {
 	return (
 		<iframe
 			{ ...props }
-			ref={ useCallback( mergeRefs( [ ref, setRef ] ), [] ) }
+			ref={ useMergeRefs( [ ref, setRef ] ) }
 			tabIndex="0"
 			title={ __( 'Editor canvas' ) }
 			name="editor-canvas"

diff --git a/packages/edit-post/package.json b/packages/edit-post/package.json
@@ -52,7 +52,6 @@
 		"classnames": "^2.2.5",
 		"lodash": "^4.17.19",
 		"memize": "^1.1.0",
-		"react-merge-refs": "^1.0.0",
 		"rememo": "^3.0.0"
 	},
 	"publishConfig": {

diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import mergeRefs from 'react-merge-refs';
-
 /**
  * WordPress dependencies
  */
@@ -24,7 +19,8 @@ import {
 	__unstableUseEditorStyles as useEditorStyles,
 } from '@wordpress/block-editor';
 import { Popover } from '@wordpress/components';
-import { useRef, useCallback } from '@wordpress/element';
+import { useRef } from '@wordpress/element';
+import { useMergeRefs } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -64,17 +60,13 @@ export default function VisualEditor( { styles } ) {
 	useTypingObserver( ref );
 	useCanvasClickRedirect( ref );
 	const editorStylesRef = useEditorStyles( styles );
-	const mergedRefs = useCallback( mergeRefs( [ ref, editorStylesRef ] ), [
-		ref,
-		editorStylesRef,
-	] );
 
 	return (
 		<div className="edit-post-visual-editor">
 			<VisualEditorGlobalKeyboardShortcuts />
 			<Popover.Slot name="block-toolbar" />
 			<div
-				ref={ mergedRefs }
+				ref={ useMergeRefs( [ ref, editorStylesRef ] ) }
 				className="editor-styles-wrapper"
 				style={ resizedCanvasStyles || desktopCanvasStyles }
 			>

diff --git a/packages/interface/package.json b/packages/interface/package.json
@@ -30,6 +30,7 @@
 	"dependencies": {
 		"@babel/runtime": "^7.12.5",
 		"@wordpress/components": "file:../components",
+		"@wordpress/compose": "file:../compose",
 		"@wordpress/data": "file:../data",
 		"@wordpress/deprecated": "file:../deprecated",
 		"@wordpress/element": "file:../element",
@@ -38,8 +39,7 @@
 		"@wordpress/plugins": "file:../plugins",
 		"@wordpress/viewport": "file:../viewport",
 		"classnames": "^2.2.5",
-		"lodash": "^4.17.19",
-		"react-merge-refs": "^1.0.0"
+		"lodash": "^4.17.19"
 	},
 	"publishConfig": {
 		"access": "public"

diff --git a/packages/interface/src/components/interface-skeleton/index.js b/packages/interface/src/components/interface-skeleton/index.js
@@ -2,14 +2,14 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import mergeRefs from 'react-merge-refs';
 
 /**
  * WordPress dependencies
  */
-import { forwardRef, useCallback, useEffect, useRef } from '@wordpress/element';
+import { forwardRef, useEffect, useRef } from '@wordpress/element';
 import { __unstableUseNavigateRegions as useNavigateRegions } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { useMergeRefs } from '@wordpress/compose';
 
 function useHTMLClass( className ) {
 	useEffect( () => {
@@ -66,10 +66,7 @@ function InterfaceSkeleton(
 
 	return (
 		<div
-			ref={ useCallback( mergeRefs( [ ref, fallbackRef ] ), [
-				ref,
-				fallbackRef,
-			] ) }
+			ref={ useMergeRefs( [ ref, fallbackRef ] ) }
 			className={ classnames(
 				className,
 				'interface-interface-skeleton',