[WIP] Core blocks: Refactor heading styles to use dropdown

components/toolbar/style.scss

@@ -38,12 +38,15 @@ div.components-toolbar {
 	display: inline-flex;
 	align-items: flex-end;
 	margin: 0;
-	padding: 3px;
 	outline: none;
 	cursor: pointer;
 	position: relative;
-	width: $icon-button-size;
 	height: $icon-button-size;
+	padding: 3px 1px;
+
+	@include break-small() {
+		padding: 3px;
+	}
 
 	// unset icon button styles
 	&:active,

core-blocks/heading/edit.js

@@ -1,17 +1,16 @@
 /**
  * WordPress dependencies
  */
-
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { Fragment } from '@wordpress/element';
-import { PanelBody, Toolbar } from '@wordpress/components';
 import { createBlock } from '@wordpress/blocks';
-import { RichText, BlockControls, InspectorControls, AlignmentToolbar } from '@wordpress/editor';
+import { RichText, BlockControls, AlignmentToolbar } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import './editor.scss';
+import HeadingStylesToolbar from './styles-toolbar';
 
 export default function HeadingEdit( {
 	attributes,
@@ -26,37 +25,19 @@ export default function HeadingEdit( {
 	return (
 		<Fragment>
 			<BlockControls>
-				<Toolbar
-					controls={ '234'.split( '' ).map( ( level ) => ( {
-						icon: 'heading',
-						title: sprintf( __( 'Heading %s' ), level ),
-						isActive: 'H' + level === nodeName,
-						onClick: () => setAttributes( { nodeName: 'H' + level } ),
-						subscript: level,
-					} ) ) }
+				<HeadingStylesToolbar
+					value={ nodeName }
+					onChange={ ( nextNodeName ) => {
+						setAttributes( { nodeName: nextNodeName } );
+					} }
+				/>
+				<AlignmentToolbar
+					value={ align }
+					onChange={ ( nextAlign ) => {
+						setAttributes( { align: nextAlign } );
+					} }
 				/>
 			</BlockControls>
-			<InspectorControls>
-				<PanelBody title={ __( 'Heading Settings' ) }>
-					<p>{ __( 'Level' ) }</p>
-					<Toolbar
-						controls={ '123456'.split( '' ).map( ( level ) => ( {
-							icon: 'heading',
-							title: sprintf( __( 'Heading %s' ), level ),
-							isActive: 'H' + level === nodeName,
-							onClick: () => setAttributes( { nodeName: 'H' + level } ),
-							subscript: level,
-						} ) ) }
-					/>
-					<p>{ __( 'Text Alignment' ) }</p>
-					<AlignmentToolbar
-						value={ align }
-						onChange={ ( nextAlign ) => {
-							setAttributes( { align: nextAlign } );
-						} }
-					/>
-				</PanelBody>
-			</InspectorControls>
 			<RichText
 				wrapperClassName="wp-block-heading"
 				tagName={ nodeName.toLowerCase() }

core-blocks/heading/editor.scss

@@ -33,3 +33,45 @@
 		font-size: 0.8em;
 	}
 }
+
+.core-blocks-heading__icon {
+	height: 20px;
+	width: 20px;
+	display: inline-flex;
+	position: relative;
+
+	/*&:after {
+		content: attr( data-subscript );
+		font-family: $default-font;
+		font-size: $default-font-size;
+		font-weight: 600;
+		position: absolute;
+		bottom: 0;
+		left: 16px;
+	}*/
+
+	// subscript for numbered icon buttons, like headings
+	/*&[data-subscript] svg {
+		padding: 4px 8px 4px 0;
+	}*/
+
+	&[data-subscript]:after {
+		content: attr( data-subscript );
+		font-family: $default-font;
+		font-size: $default-font-size;
+		font-weight: 600;
+		position: absolute;
+		right: -5px;
+		bottom: 0;
+	}
+}
+
+.core-blocks-heading__styles-toolbar {
+	.components-icon-button {
+		padding: 8px 4px;
+
+		@include break-small() {
+			padding: 8px;
+		}
+	}
+}

core-blocks/heading/styles-toolbar.js

@@ -0,0 +1,85 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { Dropdown, Dashicon, IconButton, Toolbar, NavigableMenu } from '@wordpress/components';
+import { keycodes } from '@wordpress/utils';
+
+const HeadingIcon = ( { subscript } ) => (
+	<span className="core-blocks-heading__icon" data-subscript={ subscript }>
+		<Dashicon icon="heading" />
+	</span>
+);
+
+const HeadingStylesToolbar = ( { value, onChange } ) => (
+	<Dropdown
+		className="core-blocks-heading__styles-toolbar"
+		contentClassName="core-blocks-heading__styles-toolbar-popover"
+		renderToggle={ ( { onToggle, isOpen } ) => {
+			const openOnArrowDown = ( event ) => {
+				if ( ! isOpen && event.keyCode === keycodes.DOWN ) {
+					event.preventDefault();
+					event.stopPropagation();
+					onToggle();
+				}
+			};
+			const label = __( 'Change heading style' );
+
+			return (
+				<Toolbar>
+					<IconButton
+						icon={ <HeadingIcon subscript={ value.substring( 1 ) } /> }
+						onClick={ onToggle }
+						aria-haspopup="true"
+						aria-expanded={ isOpen }
+						label={ label }
+						tooltip={ label }
+						onKeyDown={ openOnArrowDown }
+					>
+						<Dashicon icon="arrow-down" />
+					</IconButton>
+				</Toolbar>
+			);
+		} }
+		renderContent={ ( { onClose } ) => (
+			<div>
+				<span
+					className="core-blocks-heading__styles-toolbar-menu-title"
+				>
+					{ __( 'Heading style:' ) }
+				</span>
+				<NavigableMenu
+					role="menu"
+					aria-label={ __( 'Heading styles' ) }
+				>
+					{ '123456'.split( '' ).map( ( level ) => (
+						<IconButton
+							key={ `heading${ level }` }
+							icon={ <HeadingIcon subscript={ level } /> }
+							subscript={ level }
+							className={ classnames(
+								'core-blocks-heading__styles-toolbar-menu-item', {
+									'is-active': value === 'H' + level,
+								}
+							) }
+							onClick={ () => {
+								onChange( 'H' + level );
+								onClose();
+							} }
+							role="menuitem"
+						>
+							{ sprintf( __( 'Heading %s' ), level ) }
+						</IconButton>
+					) ) }
+				</NavigableMenu>
+			</div>
+		) }
+	/>
+);
+
+export default HeadingStylesToolbar;

editor/components/block-switcher/style.scss

@@ -9,8 +9,12 @@
 .editor-block-switcher__toggle {
 	width: auto;
 	margin: 0;
-	padding: 8px;
 	border-radius: 0;
+	padding: 8px 4px;
+
+	@include break-small() {
+		padding: 8px;
+	}
 
 	&:focus:before {
 		top: -3px;