Leverage forwardRef to remove findDOMNode from the block component (#…

…11170)
WordPress · Nov 2, 2018 · d3d6f93 · d3d6f93
1 parent ccb199e
commit d3d6f93
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 20 deletions.
diff --git a/packages/editor/CHANGELOG.md b/packages/editor/CHANGELOG.md
@@ -3,6 +3,7 @@
 ### Polish
 
 - Remove `findDOMNode` usage from the `Inserter` component.
+- Remove `findDOMNode` usage from the `Block` component.
 
 ## 6.1.0 (2018-10-30)
 

diff --git a/packages/editor/src/components/block-list/block.js b/packages/editor/src/components/block-list/block.js
@@ -7,7 +7,7 @@ import { get, reduce, size, first, last } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { Component, findDOMNode, Fragment } from '@wordpress/element';
+import { Component, Fragment } from '@wordpress/element';
 import {
 	focus,
 	isTextField,
@@ -102,24 +102,12 @@ export class BlockListBlock extends Component {
 	}
 
 	setBlockListRef( node ) {
-		// Disable reason: The root return element uses a component to manage
-		// event nesting, but the parent block list layout needs the raw DOM
-		// node to track multi-selection.
-		//
-		// eslint-disable-next-line react/no-find-dom-node
-		node = findDOMNode( node );
-
 		this.wrapperNode = node;
-
 		this.props.blockRef( node, this.props.clientId );
 	}
 
 	bindBlockNode( node ) {
-		// Disable reason: The block element uses a component to manage event
-		// nesting, but we rely on a raw DOM node for focusing.
-		//
-		// eslint-disable-next-line react/no-find-dom-node
-		this.node = findDOMNode( node );
+		this.node = node;
 	}
 
 	/**

diff --git a/packages/editor/src/components/ignore-nested-events/index.js b/packages/editor/src/components/ignore-nested-events/index.js
@@ -6,7 +6,7 @@ import { reduce } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
+import { Component, forwardRef } from '@wordpress/element';
 
 /**
  * Component which renders a div with passed props applied except the optional
@@ -22,7 +22,7 @@ import { Component } from '@wordpress/element';
  *
  * @type {Component}
  */
-class IgnoreNestedEvents extends Component {
+export class IgnoreNestedEvents extends Component {
 	constructor() {
 		super( ...arguments );
 
@@ -66,7 +66,7 @@ class IgnoreNestedEvents extends Component {
 	}
 
 	render() {
-		const { childHandledEvents = [], ...props } = this.props;
+		const { childHandledEvents = [], forwardedRef, ...props } = this.props;
 
 		const eventHandlers = reduce( [
 			...childHandledEvents,
@@ -96,8 +96,13 @@ class IgnoreNestedEvents extends Component {
 			return result;
 		}, {} );
 
-		return <div { ...props } { ...eventHandlers } />;
+		return <div ref={ forwardedRef } { ...props } { ...eventHandlers } />;
 	}
 }
 
-export default IgnoreNestedEvents;
+const forwardedIgnoreNestedEvents = ( props, ref ) => {
+	return <IgnoreNestedEvents { ...props } forwardedRef={ ref } />;
+};
+forwardedIgnoreNestedEvents.displayName = 'IgnoreNestedEvents';
+
+export default forwardRef( forwardedIgnoreNestedEvents );
diff --git a/packages/editor/src/components/ignore-nested-events/test/index.js b/packages/editor/src/components/ignore-nested-events/test/index.js
@@ -6,7 +6,7 @@ import { mount } from 'enzyme';
 /**
  * Internal dependencies
  */
-import IgnoreNestedEvents from '../';
+import { IgnoreNestedEvents } from '../';
 
 describe( 'IgnoreNestedEvents', () => {
 	it( 'passes props to its rendered div', () => {