From e6a096eb51faff3efef374971aa25ab0e26d4c7f Mon Sep 17 00:00:00 2001
From: Chris Alexander <cmalex@gmail.com>
Date: Fri, 28 Aug 2020 03:10:28 -0600
Subject: [PATCH] Refactor BlockMover to use React hooks (#24774)

---
 .../src/components/block-mover/index.js       | 118 +++++++-----------
 1 file changed, 46 insertions(+), 72 deletions(-)

diff --git a/packages/block-editor/src/components/block-mover/index.js b/packages/block-editor/src/components/block-mover/index.js
index 0b454962220431..2a201e41b18ee4 100644
--- a/packages/block-editor/src/components/block-mover/index.js
+++ b/packages/block-editor/src/components/block-mover/index.js
@@ -12,7 +12,7 @@ import {
 	__experimentalToolbarItem as ToolbarItem,
 } from '@wordpress/components';
 import { getBlockType } from '@wordpress/blocks';
-import { Component } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import { withSelect } from '@wordpress/data';
 
 /**
@@ -20,81 +20,55 @@ import { withSelect } from '@wordpress/data';
  */
 import { BlockMoverUpButton, BlockMoverDownButton } from './button';
 
-export class BlockMover extends Component {
-	constructor() {
-		super( ...arguments );
-		this.state = {
-			isFocused: false,
-		};
-		this.onFocus = this.onFocus.bind( this );
-		this.onBlur = this.onBlur.bind( this );
-	}
+function BlockMover( {
+	isFirst,
+	isLast,
+	clientIds,
+	isLocked,
+	isHidden,
+	rootClientId,
+	orientation,
+} ) {
+	const [ isFocused, setIsFocused ] = useState( false );
 
-	onFocus() {
-		this.setState( {
-			isFocused: true,
-		} );
-	}
+	const onFocus = () => setIsFocused( true );
+	const onBlur = () => setIsFocused( false );
 
-	onBlur() {
-		this.setState( {
-			isFocused: false,
-		} );
+	if ( isLocked || ( isFirst && isLast && ! rootClientId ) ) {
+		return null;
 	}
 
-	render() {
-		const {
-			isFirst,
-			isLast,
-			clientIds,
-			isLocked,
-			isHidden,
-			rootClientId,
-			orientation,
-		} = this.props;
-		const { isFocused } = this.state;
-		if ( isLocked || ( isFirst && isLast && ! rootClientId ) ) {
-			return null;
-		}
-
-		// We emulate a disabled state because forcefully applying the `disabled`
-		// attribute on the buttons while it has focus causes the screen to change
-		// to an unfocused state (body as active element) without firing blur on,
-		// the rendering parent, leaving it unable to react to focus out.
-		return (
-			<div
-				className={ classnames( 'block-editor-block-mover', {
-					'is-visible': isFocused || ! isHidden,
-					'is-horizontal': orientation === 'horizontal',
-				} ) }
-			>
-				<ToolbarGroup>
-					<ToolbarItem
-						onFocus={ this.onFocus }
-						onBlur={ this.onBlur }
-					>
-						{ ( itemProps ) => (
-							<BlockMoverUpButton
-								clientIds={ clientIds }
-								{ ...itemProps }
-							/>
-						) }
-					</ToolbarItem>
-					<ToolbarItem
-						onFocus={ this.onFocus }
-						onBlur={ this.onBlur }
-					>
-						{ ( itemProps ) => (
-							<BlockMoverDownButton
-								clientIds={ clientIds }
-								{ ...itemProps }
-							/>
-						) }
-					</ToolbarItem>
-				</ToolbarGroup>
-			</div>
-		);
-	}
+	// We emulate a disabled state because forcefully applying the `disabled`
+	// attribute on the buttons while it has focus causes the screen to change
+	// to an unfocused state (body as active element) without firing blur on,
+	// the rendering parent, leaving it unable to react to focus out.
+	return (
+		<div
+			className={ classnames( 'block-editor-block-mover', {
+				'is-visible': isFocused || ! isHidden,
+				'is-horizontal': orientation === 'horizontal',
+			} ) }
+		>
+			<ToolbarGroup>
+				<ToolbarItem onFocus={ onFocus } onBlur={ onBlur }>
+					{ ( itemProps ) => (
+						<BlockMoverUpButton
+							clientIds={ clientIds }
+							{ ...itemProps }
+						/>
+					) }
+				</ToolbarItem>
+				<ToolbarItem onFocus={ onFocus } onBlur={ onBlur }>
+					{ ( itemProps ) => (
+						<BlockMoverDownButton
+							clientIds={ clientIds }
+							{ ...itemProps }
+						/>
+					) }
+				</ToolbarItem>
+			</ToolbarGroup>
+		</div>
+	);
 }
 
 export default withSelect( ( select, { clientIds } ) => {