Merge pull request #3904 from Automattic/add/toolbar-dropdown

Add toolbar dropdown component for the editor

assets/blocks/editor-components/styles.scss

@@ -0,0 +1 @@
+@import './toolbar-dropdown/styles';

assets/blocks/editor-components/toolbar-dropdown/index.js

@@ -0,0 +1,80 @@
+import {
+	Button,
+	Dropdown,
+	MenuGroup,
+	MenuItem,
+	NavigableMenu,
+} from '@wordpress/components';
+import classnames from 'classnames';
+
+/**
+ * @typedef {Object} DropdownOption
+ *
+ * @property {string} label Option label.
+ * @property {string} value Option value.
+ */
+/**
+ * Dropdown for the editor toolbar.
+ *
+ * @param {Object}           props
+ * @param {DropdownOption[]} props.options        Dropdown options.
+ * @param {string}           [props.optionsLabel] Options label.
+ * @param {Object}           props.icon           Icon for the toolbar.
+ * @param {string}           props.value          Current dropdown value.
+ * @param {Function}         props.onChange       Dropdown change callback, which receive
+ *                                                the new value as argument.
+ */
+const ToolbarDropdown = ( {
+	options,
+	optionsLabel,
+	icon,
+	value,
+	onChange,
+} ) => {
+	const selectedOption = options.find( ( option ) => value === option.value );
+
+	return (
+		<Dropdown
+			popoverProps={ { isAlternate: true } }
+			renderToggle={ ( { isOpen, onToggle } ) => (
+				<Button
+					onClick={ onToggle }
+					icon={ icon }
+					aria-expanded={ isOpen }
+					aria-haspopup="true"
+				>
+					{ selectedOption.label }
+				</Button>
+			) }
+			renderContent={ ( { onClose } ) => (
+				<NavigableMenu role="menu" stopNavigationEvents>
+					<MenuGroup label={ optionsLabel }>
+						{ options.map( ( option ) => {
+							const isSelected =
+								option.value === selectedOption.value;
+
+							return (
+								<MenuItem
+									key={ option.value }
+									role="menuitemradio"
+									isSelected={ isSelected }
+									className={ classnames( {
+										'sensei-toolbar-dropdown-item-checked': isSelected,
+									} ) }
+									onClick={ () => {
+										onChange( option.value );
+										onClose();
+									} }
+								>
+									{ option.label }
+								</MenuItem>
+							);
+						} ) }
+					</MenuGroup>
+				</NavigableMenu>
+			) }
+		/>
+	);
+};
+
+export default ToolbarDropdown;

assets/blocks/editor-components/toolbar-dropdown/styles.scss

@@ -0,0 +1,11 @@
+.sensei-toolbar-dropdown-item-checked {
+	position: relative;
+	padding-right: 30px;
+	&::after {
+		font-family: dashicons;
+		content: "\f147";
+		font-size: 20px;
+		position: absolute;
+		right: 0;
+	}
+}

webpack.config.js

@@ -31,6 +31,7 @@ const files = [
 	'data-port/import.js',
 	'data-port/export.js',
 	'data-port/style.scss',
+	'blocks/editor-components/styles.scss',
 	'blocks/course-outline/frontend.js',
 	'blocks/sensei-single-course-blocks.js',
 	'blocks/single-course.scss',