Merge pull request #830 from WordPress/try/block-controls-fill

Try: Block controls rendering by block's `edit`

blocks/block-controls/index.js

@@ -0,0 +1,17 @@
+/**
+ * External dependencies
+ */
+import { Fill } from 'react-slot-fill';
+
+/**
+ * WordPress dependencies
+ */
+import Toolbar from 'components/toolbar';
+
+export default function BlockControls( { controls } ) {
+	return (
+		<Fill name="Formatting.Toolbar">
+			<Toolbar controls={ controls } />
+		</Fill>
+	);
+}

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,17 +79,32 @@ 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 }
 				onFocus={ setFocus }
 				onChange={ ( value ) => setAttributes( { content: value } ) }
 				onMerge={ mergeBlocks }
 				inline
-			/>
-		);
+			/>,
+		];
 	},
 
 	save( { attributes } ) {