Avoid inline functions for performance reasons

WordPress · Feb 26, 2018 · 375b201 · 375b201
1 parent 802106c
commit 375b201
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 16 deletions.
diff --git a/edit-post/assets/stylesheets/_z-index.scss b/edit-post/assets/stylesheets/_z-index.scss
@@ -20,7 +20,7 @@ $z-layers: (
 	'.editor-block-contextual-toolbar': 21,
 	'.editor-block-switcher__menu': 2,
 	'.components-popover__close': 2,
-	'.editor-block-list__block > .editor-block-list__insertion-point':2,
+	'.editor-block-list__block > .editor-block-list__insertion-point': 2,
 	'.blocks-format-toolbar__link-modal': 3,
 	'.editor-block-mover': 1,
 	'.blocks-gallery-item__inline-menu': 20,

diff --git a/editor/components/block-list/insertion-point.js b/editor/components/block-list/insertion-point.js
@@ -8,6 +8,7 @@ import { connect } from 'react-redux';
  */
 import { __ } from '@wordpress/i18n';
 import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
+import { Component } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -25,24 +26,33 @@ import {
 	startTyping,
 } from '../../store/actions';
 
-function BlockInsertionPoint( { showInsertionPoint, showInserter, index, layout, rootUID, ...props } ) {
-	const onClick = () => {
+class BlockInsertionPoint extends Component {
+	constructor() {
+		super( ...arguments );
+		this.onClick = this.onClick.bind( this );
+	}
+	onClick() {
+		const { layout, rootUID, index, ...props } = this.props;
 		props.insertDefaultBlock( { layout }, rootUID, index );
 		props.startTyping();
-	};
+	}
 
-	return (
-		<div className="editor-block-list__insertion-point">
-			{ showInsertionPoint && <div className="editor-block-list__insertion-point-indicator" /> }
-			{ showInserter && (
-				<button
-					className="editor-block-list__insertion-point-inserter"
-					onClick={ onClick }
-					aria-label={ __( 'Insert block' ) }
-				/>
-			) }
-		</div>
-	);
+	render() {
+		const { showInsertionPoint, showInserter } = this.props;
+
+		return (
+			<div className="editor-block-list__insertion-point">
+				{ showInsertionPoint && <div className="editor-block-list__insertion-point-indicator" /> }
+				{ showInserter && (
+					<button
+						className="editor-block-list__insertion-point-inserter"
+						onClick={ this.onClick }
+						aria-label={ __( 'Insert block' ) }
+					/>
+				) }
+			</div>
+		);
+	}
 }
 
 export default connect(