Merge pull request #389 from WordPress/update/mode-switcher

Change mode switcher to a select box
WordPress · Apr 10, 2017 · 5bb1e4c · 5bb1e4c
2 parents f328798 + fe4cf93
commit 5bb1e4c
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 99 deletions.
diff --git a/editor/assets/stylesheets/main.scss b/editor/assets/stylesheets/main.scss
@@ -33,6 +33,11 @@ body.toplevel_page_gutenberg {
 	ol {
 		list-style-type: decimal;
 	}
+
+	select {
+		font-size: 13px;
+		color: $dark-gray-500;
+	}
 }
 
 .gutenberg__editor {

diff --git a/editor/header/mode-switcher/index.js b/editor/header/mode-switcher/index.js
@@ -9,56 +9,46 @@ import { connect } from 'react-redux';
 import './style.scss';
 import Dashicon from '../../components/dashicon';
 
-class ModeSwitcher extends wp.element.Component {
-	constructor() {
-		super( ...arguments );
-		this.toggle = this.toggle.bind( this );
-		this.state = {
-			opened: false
-		};
-	}
-
-	toggle() {
-		this.setState( {
-			opened: ! this.state.opened
-		} );
+/**
+ * Set of available mode options.
+ *
+ * @type {Array}
+ */
+const MODES = [
+	{
+		value: 'visual',
+		label: wp.i18n.__( 'Visual' )
+	},
+	{
+		value: 'text',
+		label: wp.i18n._x( 'Text', 'Name for the Text editor tab (formerly HTML)' )
 	}
+];
 
-	render() {
-		const { opened } = this.state;
-		const modes = [
-			{ value: 'visual', label: wp.i18n.__( 'Visual' ) },
-			{ value: 'text', label: wp.i18n._x( 'Text', 'Name for the Text editor tab (formerly HTML)' ) },
-		];
-		const switchMode = ( mode ) => () => {
-			this.setState( { opened: false } );
-			this.props.onSwitch( mode );
-		};
-		const currentMode = modes.find( ( { value } ) => value === this.props.mode );
+function ModeSwitcher( { mode, onSwitch } ) {
+	// Disable reason: Toggling between modes should take effect immediately,
+	// arguably even with keyboard navigation. `onBlur` only would require
+	// another action to remove focus from the select (tabbing or clicking
+	// outside the field), which is unexpected when submit button is omitted.
 
-		return (
-			<div className="editor-mode-switcher">
-				<button
-					className="editor-mode-switcher__toggle"
-					onClick={ this.toggle }
-					aria-label={ wp.i18n.__( 'Switch the editor mode' ) }
-				>
-					{ currentMode.label }
-					<Dashicon icon="arrow-down" />
-				</button>
-				{ opened &&
-					<div className="editor-mode-switcher__content">
-						<div className="editor-mode-switcher__arrow" />
-						{ modes.map( ( mode ) =>
-							<button key={ mode.value } type="button" onClick={ switchMode( mode.value ) }>
-								{ mode.label }
-							</button>
-						) }
-					</div>
-				}
-			</div>
-		);
-	}
+	/* eslint-disable jsx-a11y/no-onchange */
+	return (
+		<div className="editor-mode-switcher">
+			<select
+				value={ mode }
+				onChange={ ( event ) => onSwitch( event.target.value ) }
+				className="editor-mode-switcher__input"
+			>
+				{ MODES.map( ( { value, label } ) =>
+					<option key={ value } value={ value }>
+						{ label }
+					</option>
+				) }
+			</select>
+			<Dashicon icon="arrow-down" />
+		</div>
+	);
+	/* eslint-enable jsx-a11y/no-onchange */
 }
 
 export default connect(

diff --git a/editor/header/mode-switcher/style.scss b/editor/header/mode-switcher/style.scss
@@ -1,64 +1,36 @@
 .editor-mode-switcher {
 	position: relative;
 	margin-right: $item-spacing;
-}
-
-.editor-mode-switcher__toggle {
+	padding-right: $item-spacing;
 	color: $dark-gray-500;
-	padding: $item-spacing;
 	align-items: center;
 	cursor: pointer;
-	border: none;
-	background: none;
 	border-right: 1px solid $light-gray-500;
 	outline: none;
 	display: flex;
 	align-items: center;
-}
 
-.editor-mode-switcher__content {
-	position: absolute;
-	top: 40px;
-	border: 1px solid $light-gray-500;
-	color: $dark-gray-500;
-	min-width: 100px;
-
-	button {
-		padding: 8px;
-		display: block;
-		border: none;
-		background: white;
+	.editor-mode-switcher__input {
+		background: transparent;
+		line-height: 1;
+		border: 0;
+		border-radius: 0;
+		-webkit-appearance: none;
 		outline: none;
 		cursor: pointer;
-		width: 100%;
+		box-shadow: none;
+		padding-right: 24px;
 	}
-}
 
-.editor-mode-switcher__arrow {
-	border: 10px dashed $light-gray-500;
-	height: 0;
-	line-height: 0;
-	position: absolute;
-	width: 0;
-	z-index: 1;
-	top: -10px;
-	left: 50%;
-	margin-left: -10px;
-	border-bottom-style: solid;
-	border-top: none;
-	border-left-color: transparent;
-	border-right-color: transparent;
+	.dashicon {
+		position: relative;
+		z-index: -1;
+		margin-left: -24px;
+		margin-top: -1px;
+	}
 
-	&:before {
-		top: 2px;
-		border: 10px solid white;
-		content: " ";
-		position: absolute;
-		left: 50%;
-		margin-left: -10px;
-		border-bottom-style: solid;
-		border-top: none;
-		border-left-color: transparent;
-		border-right-color: transparent;
+	&:hover,
+	select:hover {
+		color: $dark-gray-900;
 	}
 }
diff --git a/languages/gutenberg.pot b/languages/gutenberg.pot
@@ -31,19 +31,15 @@ msgstr ""
 msgid "Align right"
 msgstr ""
 
-#: editor/header/mode-switcher/index.js:30
+#: editor/header/mode-switcher/index.js:20
 msgid "Visual"
 msgstr ""
 
-#: editor/header/mode-switcher/index.js:31
+#: editor/header/mode-switcher/index.js:24
 msgctxt "Name for the Text editor tab (formerly HTML)"
 msgid "Text"
 msgstr ""
 
-#: editor/header/mode-switcher/index.js:44
-msgid "Switch the editor mode"
-msgstr ""
-
 #: editor/header/saved-state/index.js:11
 msgid "Saved"
 msgstr ""