From 03170d9c6592d406a1b27d842da27ddc0b9fe23c Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Sun, 28 Oct 2018 10:49:17 +0100 Subject: [PATCH 1/4] Leverage forwardRef to remove findDOMNode from the block component --- .../editor/src/components/block-list/block.js | 16 ++-------------- .../src/components/ignore-nested-events/index.js | 10 ++++++---- 2 files changed, 8 insertions(+), 18 deletions(-) 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..62c51d9dfdef39 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 @@ -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,10 @@ class IgnoreNestedEvents extends Component { return result; }, {} ); - return
; + return
; } } -export default IgnoreNestedEvents; +export default forwardRef( ( props, ref ) => { + return ; +} ); From b39f48b5361bca6b6b2ce0109ba0793c7e8105dc Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 31 Oct 2018 15:20:23 +0100 Subject: [PATCH 2/4] Update changelog --- packages/editor/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) 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) From 111d823471267e675b8e72727a14da973fc31a36 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 31 Oct 2018 15:30:34 +0100 Subject: [PATCH 3/4] Fix unit tests --- packages/editor/src/components/ignore-nested-events/index.js | 2 +- .../editor/src/components/ignore-nested-events/test/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/editor/src/components/ignore-nested-events/index.js b/packages/editor/src/components/ignore-nested-events/index.js index 62c51d9dfdef39..ceb3283274586d 100644 --- a/packages/editor/src/components/ignore-nested-events/index.js +++ b/packages/editor/src/components/ignore-nested-events/index.js @@ -22,7 +22,7 @@ import { Component, forwardRef } from '@wordpress/element'; * * @type {Component} */ -class IgnoreNestedEvents extends Component { +export class IgnoreNestedEvents extends Component { constructor() { super( ...arguments ); 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', () => { From 460acf9e73af2a5de208233339a17fa7617227c5 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 2 Nov 2018 11:04:00 +0100 Subject: [PATCH 4/4] Add a display name --- .../editor/src/components/ignore-nested-events/index.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/editor/src/components/ignore-nested-events/index.js b/packages/editor/src/components/ignore-nested-events/index.js index ceb3283274586d..cb707785bcb65e 100644 --- a/packages/editor/src/components/ignore-nested-events/index.js +++ b/packages/editor/src/components/ignore-nested-events/index.js @@ -100,6 +100,9 @@ export class IgnoreNestedEvents extends Component { } } -export default forwardRef( ( props, ref ) => { +const forwardedIgnoreNestedEvents = ( props, ref ) => { return ; -} ); +}; +forwardedIgnoreNestedEvents.displayName = 'IgnoreNestedEvents'; + +export default forwardRef( forwardedIgnoreNestedEvents );