Add underline button to mobile version.

WordPress · Sep 19, 2019 · 1ed9583 · 1ed9583
1 parent 264b178
commit 1ed9583
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
diff --git a/packages/block-editor/src/components/rich-text/format-toolbar/index.native.js b/packages/block-editor/src/components/rich-text/format-toolbar/index.native.js
@@ -7,7 +7,7 @@ import { Toolbar, Slot } from '@wordpress/components';
 const FormatToolbar = () => {
 	return (
 		<Toolbar>
-			{ [ 'bold', 'italic', 'link' ].map( ( format ) =>
+			{ [ 'bold', 'italic', 'link', 'underline' ].map( ( format ) =>
 				<Slot name={ `RichText.ToolbarControls.${ format }` } key={ format } />
 			) }
 			<Slot name="RichText.ToolbarControls" />

diff --git a/packages/format-library/src/default-formats.native.js b/packages/format-library/src/default-formats.native.js
@@ -5,10 +5,12 @@ import { bold } from './bold';
 import { italic } from './italic';
 import { link } from './link';
 import { strikethrough } from './strikethrough';
+import { underline } from './underline';
 
 export default [
 	bold,
 	italic,
 	link,
+	underline,
 	strikethrough,
 ];
diff --git a/packages/format-library/src/underline/index.js b/packages/format-library/src/underline/index.js
@@ -3,9 +3,10 @@
  */
 import { __ } from '@wordpress/i18n';
 import { toggleFormat } from '@wordpress/rich-text';
-import { RichTextShortcut, __unstableRichTextInputEvent } from '@wordpress/block-editor';
+import { RichTextToolbarButton, RichTextShortcut, __unstableRichTextInputEvent } from '@wordpress/block-editor';
 
 const name = 'core/underline';
+const title = __( 'Underline' );
 
 export const underline = {
 	name,
@@ -15,7 +16,7 @@ export const underline = {
 	attributes: {
 		style: 'style',
 	},
-	edit( { value, onChange } ) {
+	edit( { isActive, value, onChange } ) {
 		const onToggle = () => {
 			onChange(
 				toggleFormat( value, {
@@ -33,6 +34,15 @@ export const underline = {
 					character="u"
 					onUse={ onToggle }
 				/>
+				<RichTextToolbarButton
+					name="underline"
+					icon="editor-underline"
+					title={ title }
+					onClick={ onToggle }
+					isActive={ isActive }
+					shortcutType="primary"
+					shortcutCharacter="u"
+				/>
 				<__unstableRichTextInputEvent
 					inputType="formatUnderline"
 					onInput={ onToggle }