RichText: collapse toolbar (#14233)

* RichText: collapse toolbar

* Move inline image

* Add balanced margin

* Add tooltip

* Update e2e test

* Update e2e test

* Remove RichTextInserterItem

* Ensure there are fills before rendering

* Make toggle button bigger

* Use clickBlockToolbarButton

* Fix e2e test

packages/components/src/dropdown-menu/index.js

@@ -22,6 +22,7 @@ function DropdownMenu( {
 	menuLabel,
 	controls,
 	className,
+	position,
 } ) {
 	if ( ! controls || ! controls.length ) {
 		return null;
@@ -37,6 +38,7 @@ function DropdownMenu( {
 		<Dropdown
 			className={ classnames( 'components-dropdown-menu', className ) }
 			contentClassName="components-dropdown-menu__popover"
+			position={ position }
 			renderToggle={ ( { isOpen, onToggle } ) => {
 				const openOnArrowDown = ( event ) => {
 					if ( ! isOpen && event.keyCode === DOWN ) {

packages/e2e-tests/specs/adding-inline-tokens.test.js

@@ -12,8 +12,9 @@ import uuid from 'uuid/v4';
 import {
 	clickBlockAppender,
 	getEditedPostContent,
-	insertBlock,
 	createNewPost,
+	clickBlockToolbarButton,
+	clickButton,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'adding inline tokens', () => {
@@ -26,7 +27,8 @@ describe( 'adding inline tokens', () => {
 		await clickBlockAppender();
 		await page.keyboard.type( 'a ' );
 
-		await insertBlock( 'Inline Image', 'Inline Elements' );
+		await clickBlockToolbarButton( 'More Rich Text Controls' );
+		await clickButton( 'Inline Image' );
 
 		// Wait for media modal to appear and upload image.
 		await page.waitForSelector( '.media-modal input[type=file]' );

packages/e2e-tests/specs/keyboard-navigable-blocks.test.js

@@ -120,19 +120,19 @@ const tabThroughBlockToolbar = async () => {
 
 	// Tab to focus on the 'Strikethrough' formatting button
 	await page.keyboard.press( 'Tab' );
-	const isFocusedStrikethroughFormattingButton = await page.evaluate( () =>
-		document.activeElement.classList.contains( 'components-toolbar__control' )
+	const isFocusedMoreFormattingDropdown = await page.evaluate( () =>
+		document.activeElement.classList.contains( 'components-dropdown-menu__toggle' )
 	);
-	await expect( isFocusedStrikethroughFormattingButton ).toBe( true );
+	await expect( isFocusedMoreFormattingDropdown ).toBe( true );
 
 	// Tab to focus on the 'More formatting' dropdown toggle
 	await page.keyboard.press( 'Tab' );
-	const isFocusedMoreFormattingDropdown = await page.evaluate( () =>
+	const isFocusedBlockSettingsDropdown = await page.evaluate( () =>
 		document.activeElement.classList.contains(
 			'editor-block-settings-menu__toggle'
 		)
 	);
-	await expect( isFocusedMoreFormattingDropdown ).toBe( true );
+	await expect( isFocusedBlockSettingsDropdown ).toBe( true );
 };
 
 describe( 'Order of block keyboard navigation', () => {

packages/e2e-tests/specs/plugins/__snapshots__/format-api.test.js.snap

@@ -2,6 +2,6 @@
 
 exports[`Using Format API Clicking the control wraps the selected text properly with HTML code 1`] = `
 "<!-- wp:paragraph -->
-<p><a href=\\"#test\\" class=\\"my-plugin-link\\">First paragraph</a></p>
+<p>First <a href=\\"#test\\" class=\\"my-plugin-link\\">paragraph</a></p>
 <!-- /wp:paragraph -->"
 `;

packages/e2e-tests/specs/plugins/format-api.test.js

@@ -9,6 +9,7 @@ import {
 	deactivatePlugin,
 	getEditedPostContent,
 	pressKeyWithModifier,
+	clickButton,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Using Format API', () => {
@@ -24,18 +25,12 @@ describe( 'Using Format API', () => {
 		await createNewPost();
 	} );
 
-	it( 'Format toolbar is present in a paragraph block', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( 'First paragraph' );
-		await clickBlockToolbarButton( 'Custom Link' );
-	} );
-
 	it( 'Clicking the control wraps the selected text properly with HTML code', async () => {
 		await clickBlockAppender();
 		await page.keyboard.type( 'First paragraph' );
 		await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );
-		await pressKeyWithModifier( 'primary', 'A' );
-		await clickBlockToolbarButton( 'Custom Link' );
+		await clickBlockToolbarButton( 'More Rich Text Controls' );
+		await clickButton( 'Custom Link' );
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 } );

packages/editor/src/components/index.js

@@ -22,7 +22,6 @@ export {
 	default as RichText,
 	RichTextShortcut,
 	RichTextToolbarButton,
-	RichTextInserterItem,
 	UnstableRichTextInputEvent,
 } from './rich-text';
 export { default as ServerSideRender } from './server-side-render';

packages/editor/src/components/inserter/menu.js

@@ -40,7 +40,6 @@ import { addQueryArgs } from '@wordpress/url';
 import BlockPreview from '../block-preview';
 import BlockTypesList from '../block-types-list';
 import ChildBlocks from './child-blocks';
-import InserterInlineElements from './inline-elements';
 
 const MAX_SUGGESTED_ITEMS = 9;
 
@@ -291,8 +290,6 @@ export class InserterMenu extends Component {
 						</PanelBody>
 					}
 
-					<InserterInlineElements filterValue={ filterValue } />
-
 					{ map( getCategories(), ( category ) => {
 						const categoryItems = itemsPerCategory[ category.slug ];
 						if ( ! categoryItems || ! categoryItems.length ) {

packages/editor/src/components/rich-text/format-toolbar/index.js

@@ -1,8 +1,15 @@
+/**
+ * External dependencies
+ */
+
+import { orderBy } from 'lodash';
+
 /**
  * WordPress dependencies
  */
 
-import { Toolbar, Slot } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { Toolbar, Slot, DropdownMenu } from '@wordpress/components';
 
 const FormatToolbar = ( { controls } ) => {
 	return (
@@ -11,7 +18,16 @@ const FormatToolbar = ( { controls } ) => {
 				{ controls.map( ( format ) =>
 					<Slot name={ `RichText.ToolbarControls.${ format }` } key={ format } />
 				) }
-				<Slot name="RichText.ToolbarControls" />
+				<Slot name="RichText.ToolbarControls">
+					{ ( fills ) => fills.length &&
+						<DropdownMenu
+							icon={ false }
+							position="bottom left"
+							label={ __( 'More Rich Text Controls' ) }
+							controls={ orderBy( fills.map( ( [ { props } ] ) => props ), 'title' ) }
+						/>
+					}
+				</Slot>
 			</Toolbar>
 		</div>
 	);

packages/editor/src/components/rich-text/format-toolbar/style.scss

@@ -7,3 +7,7 @@
 	position: absolute;
 	transform: translateX(-50%);
 }
+
+.editor-format-toolbar .components-dropdown-menu__toggle .components-dropdown-menu__indicator::after {
+	margin: 7px;
+}

packages/editor/src/components/rich-text/index.js

@@ -1191,5 +1191,4 @@ RichTextContainer.Content.defaultProps = {
 export default RichTextContainer;
 export { RichTextShortcut } from './shortcut';
 export { RichTextToolbarButton } from './toolbar-button';
-export { RichTextInserterItem } from './inserter-list-item';
 export { UnstableRichTextInputEvent } from './input-event';

packages/format-library/src/code/index.js

@@ -2,8 +2,9 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { Fragment } from '@wordpress/element';
 import { toggleFormat } from '@wordpress/rich-text';
-import { RichTextShortcut } from '@wordpress/editor';
+import { RichTextShortcut, RichTextToolbarButton } from '@wordpress/editor';
 
 const name = 'core/code';
 
@@ -12,15 +13,25 @@ export const code = {
 	title: __( 'Code' ),
 	tagName: 'code',
 	className: null,
-	edit( { value, onChange } ) {
+	edit( { value, onChange, isActive } ) {
 		const onToggle = () => onChange( toggleFormat( value, { type: name } ) );
 
 		return (
-			<RichTextShortcut
-				type="access"
-				character="x"
-				onUse={ onToggle }
-			/>
+			<Fragment>
+				<RichTextShortcut
+					type="access"
+					character="x"
+					onUse={ onToggle }
+				/>
+				<RichTextToolbarButton
+					icon="editor-code"
+					title={ __( 'Code' ) }
+					onClick={ onToggle }
+					isActive={ isActive }
+					shortcutType="access"
+					shortcutCharacter="x"
+				/>
+			</Fragment>
 		);
 	},
 };

packages/format-library/src/image/index.js

@@ -5,7 +5,7 @@ import { Path, SVG, TextControl, Popover, IconButton, PositionedAtSelection } fr
 import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
 import { insertObject } from '@wordpress/rich-text';
-import { MediaUpload, RichTextInserterItem, MediaUploadCheck } from '@wordpress/editor';
+import { MediaUpload, RichTextToolbarButton, MediaUploadCheck } from '@wordpress/editor';
 import { LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER } from '@wordpress/keycodes';
 
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
@@ -87,11 +87,11 @@ export const image = {
 
 			return (
 				<MediaUploadCheck>
-					<RichTextInserterItem
-						name={ name }
+					<RichTextToolbarButton
 						icon={ <SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><Path d="M4 16h10c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v9c0 1.1.9 2 2 2zM4 5h10v9H4V5zm14 9v2h4v-2h-4zM2 20h20v-2H2v2zm6.4-8.8L7 9.4 5 12h8l-2.6-3.4-2 2.6z" /></SVG> }
 						title={ __( 'Inline Image' ) }
 						onClick={ this.openModal }
+						isActive={ isActive }
 					/>
 					{ this.state.modal && <MediaUpload
 						allowedTypes={ ALLOWED_MEDIA_TYPES }

packages/format-library/src/strikethrough/index.js

@@ -24,7 +24,6 @@ export const strikethrough = {
 					onUse={ onToggle }
 				/>
 				<RichTextToolbarButton
-					name="strikethrough"
 					icon="editor-strikethrough"
 					title={ __( 'Strikethrough' ) }
 					onClick={ onToggle }