From 3d54d33bb5e73ee75a3126696164eef138a163ae Mon Sep 17 00:00:00 2001
From: Grzegorz Ziolkowski <grzegorz@gziolo.pl>
Date: Thu, 16 Nov 2017 13:56:47 +0100
Subject: [PATCH] Blocks: Try to fix rerender issue for custom class name

---
 blocks/block-edit/index.js         | 8 +++-----
 blocks/hooks/anchor.js             | 9 +++++----
 blocks/hooks/custom-class-name.js  | 9 +++++----
 blocks/inspector-controls/index.js | 4 ++--
 components/slot-fill/fill.js       | 4 ++--
 5 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/blocks/block-edit/index.js b/blocks/block-edit/index.js
index ee1cb389cb47b..7d497ba1217a3 100644
--- a/blocks/block-edit/index.js
+++ b/blocks/block-edit/index.js
@@ -15,12 +15,10 @@ function BlockEdit( props ) {
 	// `edit` and `save` are functions or components describing the markup
 	// with which a block is displayed. If `blockType` is valid, assign
 	// them preferencially as the render value for the block.
-	let Edit;
-	if ( blockType ) {
-		Edit = blockType.edit || blockType.save;
-	}
+	const Edit = blockType.edit || blockType.save;
+	Edit.displayName = 'Edit';
 
-	return applyFilters( 'BlockEdit', <Edit { ...editProps } />, props );
+	return applyFilters( 'BlockEdit', <Edit key="edit" { ...editProps } />, props );
 }
 
 export default BlockEdit;
diff --git a/blocks/hooks/anchor.js b/blocks/hooks/anchor.js
index 88a8bb275dd4a..149431318c6e0 100644
--- a/blocks/hooks/anchor.js
+++ b/blocks/hooks/anchor.js
@@ -6,6 +6,7 @@ import { assign } from 'lodash';
 /**
  * WordPress dependencies
  */
+import { concatChildren } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -54,9 +55,9 @@ export function addAttribute( settings ) {
  */
 export function addInspectorControl( element, props ) {
 	if ( hasBlockSupport( props.name, 'anchor' ) && props.focus ) {
-		element = [
+		element = concatChildren(
 			element,
-			<InspectorControls key="inspector-anchor">
+			<InspectorControls>
 				<InspectorControls.TextControl
 					label={ __( 'HTML Anchor' ) }
 					help={ __( 'Anchors lets you link directly to a section on a page.' ) }
@@ -68,8 +69,8 @@ export function addInspectorControl( element, props ) {
 							anchor: nextValue,
 						} );
 					} } />
-			</InspectorControls>,
-		];
+			</InspectorControls>
+		);
 	}
 
 	return element;
diff --git a/blocks/hooks/custom-class-name.js b/blocks/hooks/custom-class-name.js
index 4cae9cd193e18..2133197429c6f 100644
--- a/blocks/hooks/custom-class-name.js
+++ b/blocks/hooks/custom-class-name.js
@@ -7,6 +7,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
+import { concatChildren } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -45,9 +46,9 @@ export function addAttribute( settings ) {
  */
 export function addInspectorControl( element, props ) {
 	if ( hasBlockSupport( props.name, 'customClassName', true ) && props.focus ) {
-		element = [
+		element = concatChildren(
 			element,
-			<InspectorControls key="inspector-custom-classname">
+			<InspectorControls force>
 				<InspectorControls.TextControl
 					label={ __( 'Additional CSS Class' ) }
 					value={ props.attributes.className || '' }
@@ -57,8 +58,8 @@ export function addInspectorControl( element, props ) {
 						} );
 					} }
 				/>
-			</InspectorControls>,
-		];
+			</InspectorControls>
+		);
 	}
 
 	return element;
diff --git a/blocks/inspector-controls/index.js b/blocks/inspector-controls/index.js
index f5db4830647ca..6b59c69af1fa9 100644
--- a/blocks/inspector-controls/index.js
+++ b/blocks/inspector-controls/index.js
@@ -15,9 +15,9 @@ import TextControl from './text-control';
 import TextareaControl from './textarea-control';
 import ToggleControl from './toggle-control';
 
-export default function InspectorControls( { children } ) {
+export default function InspectorControls( { force = false, children } ) {
 	return (
-		<Fill name="Inspector.Controls">
+		<Fill name="Inspector.Controls" force={ force }>
 			{ children }
 		</Fill>
 	);
diff --git a/components/slot-fill/fill.js b/components/slot-fill/fill.js
index 91824106fe277..45c7d15008199 100644
--- a/components/slot-fill/fill.js
+++ b/components/slot-fill/fill.js
@@ -27,13 +27,13 @@ class Fill extends Component {
 	}
 
 	componentWillReceiveProps( nextProps ) {
-		const { name } = nextProps;
+		const { name, force } = nextProps;
 		const {
 			unregisterFill = noop,
 			registerFill = noop,
 		} = this.context;
 
-		if ( this.props.name !== name ) {
+		if ( this.props.name !== name || force ) {
 			unregisterFill( this.props.name, this );
 			registerFill( name, this );
 		}