Fix format toolbar

WordPress · May 5, 2020 · fad752a · fad752a
1 parent 2d10ca6
commit fad752a
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 15 deletions.
diff --git a/packages/block-editor/src/components/rich-text/format-toolbar/index.js b/packages/block-editor/src/components/rich-text/format-toolbar/index.js
@@ -1,20 +1,16 @@
-/**
- * External dependencies
- */
-
-import { orderBy } from 'lodash';
-
 /**
  * WordPress dependencies
  */
-
 import { __ } from '@wordpress/i18n';
 import {
 	Toolbar,
 	Slot,
-	DropdownMenu,
+	Dropdown,
+	Button,
+	NavigableMenu,
 	__experimentalUseSlot as useSlot,
 } from '@wordpress/components';
+import { DOWN } from '@wordpress/keycodes';
 import { chevronDown } from '@wordpress/icons';
 
 const POPOVER_PROPS = {
@@ -25,7 +21,6 @@ const POPOVER_PROPS = {
 const FormatToolbar = () => {
 	const slot = useSlot( 'RichText.ToolbarControls' );
 	const hasFills = Boolean( slot.fills && slot.fills.length );
-	// This still needs to be fixed.
 
 	return (
 		<div className="block-editor-format-toolbar">
@@ -40,11 +35,41 @@ const FormatToolbar = () => {
 					)
 				) }
 				{ hasFills && (
-					<DropdownMenu
-						icon={ chevronDown }
-						label={ __( 'More rich text controls' ) }
-						controls={ [] }
+					<Dropdown
 						popoverProps={ POPOVER_PROPS }
+						renderToggle={ ( { isOpen, onToggle } ) => {
+							const openOnArrowDown = ( event ) => {
+								if ( ! isOpen && event.keyCode === DOWN ) {
+									event.preventDefault();
+									event.stopPropagation();
+									onToggle();
+								}
+							};
+
+							return (
+								<Button
+									icon={ chevronDown }
+									onClick={ onToggle }
+									onKeyDown={ openOnArrowDown }
+									aria-haspopup="true"
+									aria-expanded={ isOpen }
+									label={ __( 'More rich text controls' ) }
+									showTooltip
+								/>
+							);
+						} }
+						renderContent={ ( { onClose } ) => (
+							<NavigableMenu
+								aria-label={ __( 'More rich text controls' ) }
+								role="menu"
+							>
+								<Slot
+									name="RichText.ToolbarControls"
+									bubblesVirtually
+									fillProps={ { onClose } }
+								/>
+							</NavigableMenu>
+						) }
 					/>
 				) }
 			</Toolbar>

diff --git a/packages/block-editor/src/components/rich-text/style.scss b/packages/block-editor/src/components/rich-text/style.scss
@@ -64,3 +64,9 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 		padding-right: $grid-unit-15;
 	}
 }
+
+
+.block-editor-rich-text__advanced-toolbar-button {
+	display: flex;
+	width: 100%;
+}
diff --git a/packages/block-editor/src/components/rich-text/toolbar-button.js b/packages/block-editor/src/components/rich-text/toolbar-button.js
@@ -1,7 +1,12 @@
+/**
+ * External dependencies
+ */
+import { omit } from 'lodash';
+
 /**
  * WordPress dependencies
  */
-import { Fill, ToolbarButton } from '@wordpress/components';
+import { Fill, ToolbarButton, Button } from '@wordpress/components';
 import { displayShortcut } from '@wordpress/keycodes';
 
 export function RichTextToolbarButton( {
@@ -21,9 +26,31 @@ export function RichTextToolbarButton( {
 		shortcut = displayShortcut[ shortcutType ]( shortcutCharacter );
 	}
 
+	if ( name ) {
+		return (
+			<Fill name={ fillName }>
+				<ToolbarButton { ...props } shortcut={ shortcut } />
+			</Fill>
+		);
+	}
+
 	return (
 		<Fill name={ fillName }>
-			<ToolbarButton { ...props } shortcut={ shortcut } />
+			{ ( { onClose } ) => (
+				<Button
+					className="block-editor-rich-text__advanced-toolbar-button"
+					role="menuitem"
+					{ ...omit( props, [ 'title', 'onClick' ] ) }
+					onClick={ ( event ) => {
+						if ( props.onClick ) {
+							props.onClick( event );
+						}
+						onClose();
+					} }
+				>
+					{ props.title }
+				</Button>
+			) }
 		</Fill>
 	);
 }