From 630256ecfa15e32327f5a1839160df817d8029da Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew@andrewduthie.com>
Date: Wed, 17 May 2017 17:28:20 -0400
Subject: [PATCH 1/2] Try: Block controls rendering by block's `edit`

---
 blocks/block-controls/index.js  | 22 +++++++++++++++++++++
 blocks/library/heading/index.js | 34 ++++++++++++++++++---------------
 2 files changed, 41 insertions(+), 15 deletions(-)
 create mode 100644 blocks/block-controls/index.js

diff --git a/blocks/block-controls/index.js b/blocks/block-controls/index.js
new file mode 100644
index 0000000000000..b3c93c7e840d5
--- /dev/null
+++ b/blocks/block-controls/index.js
@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import { Fill } from 'react-slot-fill';
+
+/**
+ * WordPress dependencies
+ */
+import Toolbar from 'components/toolbar';
+
+export default function BlockControls( { controls } ) {
+	controls = controls.map( ( control ) => ( {
+		...control,
+		isActive: !! control.isActive && control.isActive(),
+	} ) );
+
+	return (
+		<Fill name="Formatting.Toolbar">
+			<Toolbar controls={ controls } />
+		</Fill>
+	);
+}
diff --git a/blocks/library/heading/index.js b/blocks/library/heading/index.js
index e8f8753af03f9..b0a5376082fb7 100644
--- a/blocks/library/heading/index.js
+++ b/blocks/library/heading/index.js
@@ -9,6 +9,7 @@ import { isString } from 'lodash';
 import './style.scss';
 import { registerBlock, createBlock, query } from '../../api';
 import Editable from '../../editable';
+import BlockControls from '../../block-controls';
 
 const { children, prop } = query;
 
@@ -24,18 +25,6 @@ registerBlock( 'core/heading', {
 		nodeName: prop( 'h1,h2,h3,h4,h5,h6', 'nodeName' ),
 	},
 
-	controls: [
-		...'123456'.split( '' ).map( ( level ) => ( {
-			icon: 'heading',
-			title: wp.i18n.sprintf( wp.i18n.__( 'Heading %s' ), level ),
-			isActive: ( { nodeName } ) => 'H' + level === nodeName,
-			onClick( attributes, setAttributes ) {
-				setAttributes( { nodeName: 'H' + level } );
-			},
-			subscript: level,
-		} ) ),
-	],
-
 	transforms: {
 		from: [
 			{
@@ -90,8 +79,23 @@ registerBlock( 'core/heading', {
 	edit( { attributes, setAttributes, focus, setFocus, mergeBlocks } ) {
 		const { content, nodeName = 'H2' } = attributes;
 
-		return (
+		return [
+			focus && (
+				<BlockControls
+					key="controls"
+					controls={
+						'123456'.split( '' ).map( ( level ) => ( {
+							icon: 'heading',
+							title: wp.i18n.sprintf( wp.i18n.__( 'Heading %s' ), level ),
+							isActive: () => 'H' + level === nodeName,
+							onClick: () => setAttributes( { nodeName: 'H' + level } ),
+							subscript: level,
+						} ) )
+					}
+				/>
+			),
 			<Editable
+				key="editable"
 				tagName={ nodeName.toLowerCase() }
 				value={ content }
 				focus={ focus }
@@ -99,8 +103,8 @@ registerBlock( 'core/heading', {
 				onChange={ ( value ) => setAttributes( { content: value } ) }
 				onMerge={ mergeBlocks }
 				inline
-			/>
-		);
+			/>,
+		];
 	},
 
 	save( { attributes } ) {

From 8c42fdd10e496fb9fd4432c787611b8877cc0b86 Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew@andrewduthie.com>
Date: Wed, 17 May 2017 17:36:48 -0400
Subject: [PATCH 2/2] Avoid passing isActive as callback
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Since it’s known at time of render
---
 blocks/block-controls/index.js  | 5 -----
 blocks/library/heading/index.js | 2 +-
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/blocks/block-controls/index.js b/blocks/block-controls/index.js
index b3c93c7e840d5..d95c6c7cb422f 100644
--- a/blocks/block-controls/index.js
+++ b/blocks/block-controls/index.js
@@ -9,11 +9,6 @@ import { Fill } from 'react-slot-fill';
 import Toolbar from 'components/toolbar';
 
 export default function BlockControls( { controls } ) {
-	controls = controls.map( ( control ) => ( {
-		...control,
-		isActive: !! control.isActive && control.isActive(),
-	} ) );
-
 	return (
 		<Fill name="Formatting.Toolbar">
 			<Toolbar controls={ controls } />
diff --git a/blocks/library/heading/index.js b/blocks/library/heading/index.js
index b0a5376082fb7..069e273c63bf6 100644
--- a/blocks/library/heading/index.js
+++ b/blocks/library/heading/index.js
@@ -87,7 +87,7 @@ registerBlock( 'core/heading', {
 						'123456'.split( '' ).map( ( level ) => ( {
 							icon: 'heading',
 							title: wp.i18n.sprintf( wp.i18n.__( 'Heading %s' ), level ),
-							isActive: () => 'H' + level === nodeName,
+							isActive: 'H' + level === nodeName,
 							onClick: () => setAttributes( { nodeName: 'H' + level } ),
 							subscript: level,
 						} ) )