diff --git a/packages/editor/CHANGELOG.md b/packages/editor/CHANGELOG.md index f3e6172184c4d0..c1850695961c39 100644 --- 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 index 5858f8731fb7ae..1d8561de8d9137 100644 --- 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 index 7cdc45063d4a94..cb707785bcb65e 100644 --- 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
; + return
; } } -export default IgnoreNestedEvents; +const forwardedIgnoreNestedEvents = ( props, ref ) => { + return ; +}; +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 index 533fd26d67c8f8..56ded3e4df3407 100644 --- 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', () => {