diff --git a/blocks/block-controls/index.js b/blocks/block-controls/index.js
new file mode 100644
index 0000000000000..d95c6c7cb422f
--- /dev/null
+++ b/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 (
+
+
+
+ );
+}
diff --git a/blocks/library/heading/index.js b/blocks/library/heading/index.js
index e8f8753af03f9..069e273c63bf6 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 && (
+ ( {
+ icon: 'heading',
+ title: wp.i18n.sprintf( wp.i18n.__( 'Heading %s' ), level ),
+ isActive: 'H' + level === nodeName,
+ onClick: () => setAttributes( { nodeName: 'H' + level } ),
+ subscript: level,
+ } ) )
+ }
+ />
+ ),
setAttributes( { content: value } ) }
onMerge={ mergeBlocks }
inline
- />
- );
+ />,
+ ];
},
save( { attributes } ) {