Fix toolbar code selection for latest Gutenberg versions

package.json

@@ -21,6 +21,7 @@
 	"dependencies": {
 		"@wordpress/escape-html": "1.9.0",
 		"cgb-scripts": "1.23.0",
+		"classnames": "2.2.6",
 		"npm-force-resolutions": "0.0.3"
 	},
 	"resolutions": {

src/code-block/edit.js

@@ -14,7 +14,7 @@ export default function editSyntaxHighlighterBlock( { attributes, setAttributes,
 	const editView = <div className={ className + ' wp-block-code' }>
 		<PlainText
 			className="wp-block-syntaxhighlighter__textarea"
-			style={ { tabSize, '-moz-tab-size': '' + tabSize } }
+			style={ { tabSize, MozTabSize: '' + tabSize } }
 			value={ content }
 			onChange={ ( nextContent ) => setAttributes( { content: nextContent } ) }
 			placeholder={ __( 'Tip: you can choose a code language from the block settings.', 'syntaxhighlighter' ) }

src/code-block/editor.scss

@@ -1,8 +1 @@
-.wp-block-syntaxhighlighter {
-
-	&__language_toolbar {
-		.components-dropdown-menu__menu-item.is-active {
-			font-weight: bold;
-		}
-	}
-}
+@import '../toolbar-dropdown/style'

src/code-block/settings.js

@@ -4,6 +4,7 @@ import {
 	SelectControl,
 	ToggleControl,
 	TextControl,
+	ToolbarGroup,
 } from '@wordpress/components';
 
 import { Fragment } from '@wordpress/element';
@@ -39,7 +40,7 @@ export default ( { attributes, setAttributes } ) => {
 		}
 
 		blockSettings.push(
-			<PanelRow>
+			<PanelRow key="code-language">
 				<SelectControl
 					label={ __( 'Code Language', 'syntaxhighlighter' ) }
 					value={ language }
@@ -55,7 +56,7 @@ export default ( { attributes, setAttributes } ) => {
 	// Line numbers
 	if ( settings.lineNumbers.supported ) {
 		blockSettings.push(
-			<PanelRow>
+			<PanelRow key="show-line-numbers">
 				<ToggleControl
 					label={ __( 'Show Line Numbers', 'syntaxhighlighter' ) }
 					checked={ lineNumbers }
@@ -68,7 +69,7 @@ export default ( { attributes, setAttributes } ) => {
 	// First line number
 	if ( lineNumbers && settings.firstLineNumber.supported ) {
 		blockSettings.push(
-			<PanelRow>
+			<PanelRow key="first-line-number">
 				<TextControl
 					label={ __( 'First Line Number', 'syntaxhighlighter' ) }
 					type="number"
@@ -84,7 +85,7 @@ export default ( { attributes, setAttributes } ) => {
 	// Highlight line(s)
 	if ( settings.highlightLines.supported ) {
 		blockSettings.push(
-			<PanelRow>
+			<PanelRow key="highlight-lines">
 				<TextControl
 					label={ __( 'Highlight Lines', 'syntaxhighlighter' ) }
 					value={ highlightLines }
@@ -98,7 +99,7 @@ export default ( { attributes, setAttributes } ) => {
 	// Wrap long lines
 	if ( settings.wrapLines.supported ) {
 		blockSettings.push(
-			<PanelRow>
+			<PanelRow key="wrap-long-lines">
 				<ToggleControl
 					label={ __( 'Wrap Long Lines', 'syntaxhighlighter' ) }
 					checked={ wrapLines }
@@ -111,7 +112,7 @@ export default ( { attributes, setAttributes } ) => {
 	// Make URLs clickable
 	if ( settings.makeURLsClickable.supported ) {
 		blockSettings.push(
-			<PanelRow>
+			<PanelRow key="make-urls-clickable">
 				<ToggleControl
 					label={ __( 'Make URLs Clickable', 'syntaxhighlighter' ) }
 					checked={ makeURLsClickable }
@@ -124,7 +125,7 @@ export default ( { attributes, setAttributes } ) => {
 	// Quick code
 	if ( settings.quickCode.supported ) {
 		blockSettings.push(
-			<PanelRow>
+			<PanelRow key="edit-mode">
 				<ToggleControl
 					label={ __( 'Enable edit mode on double click', 'syntaxhighlighter' ) }
 					checked={ quickCode }
@@ -136,7 +137,9 @@ export default ( { attributes, setAttributes } ) => {
 
 	return <Fragment>
 		<BlockControls>
-			{ toolbar }
+			<ToolbarGroup>
+				{ toolbar }
+			</ToolbarGroup>
 		</BlockControls>
 		<InspectorControls key="syntaxHighlighterInspectorControls">
 			<PanelBody title={ __( 'Settings', 'syntaxhighlighter' ) }>

src/code-block/toolbar.language.js

@@ -1,27 +1,17 @@
-import {
-	ToolbarGroup,
-} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
+import ToolbarDropdown from '../toolbar-dropdown';
+
 export default ( { attributes, setAttributes, options } ) => {
 	const { language } = attributes;
 
-	const languageControl = ( { label, value } ) => ( {
-		title: label,
-		onClick: () => setAttributes( { language: value } ),
-		isActive: value === language,
-	} );
-
-	const selectedLanguage = options.find( o => o.value === language );
-
-	return <ToolbarGroup
-		isCollapsed={ true }
-		noIcons={ true }
-		label={ __( 'Code Language', 'syntaxhighlighter' ) }
-		icon={ null }
-		menuProps={ { className: 'wp-block-syntaxhighlighter__language_toolbar' } }
-		toggleProps={ { children: <b> { selectedLanguage.label } </b> } }
-		controls={ options.map( languageControl ) }
-	>
-	</ToolbarGroup>;
+	return (
+		<ToolbarDropdown
+			key="code-language"
+			options={ options }
+			optionsLabel={ __( 'Code Language', 'syntaxhighlighter' ) }
+			value={ language }
+			onChange={ ( value ) => setAttributes( { language: value } ) }
+		/>
+	);
 };

src/toolbar-dropdown/index.js

@@ -0,0 +1,91 @@
+import classnames from 'classnames';
+import {
+	Button,
+	Dropdown,
+	MenuGroup,
+	MenuItem,
+	NavigableMenu,
+} from '@wordpress/components';
+
+/**
+ * @typedef {Object} DropdownOption
+ *
+ * @property {string} label Option label.
+ * @property {string} value Option value.
+ */
+/**
+ * Dropdown for the editor toolbar.
+ *
+ * @param {Object}           props                Component 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.
+ *
+ * @return {Object} React component.
+ */
+const ToolbarDropdown = ( {
+	options,
+	optionsLabel,
+	icon,
+	value,
+	onChange,
+	...props
+} ) => {
+	const selectedOption = options.find( ( option ) => value === option.value );
+
+	return (
+		<Dropdown
+			className="syntaxhighlighter-toolbar-dropdown"
+			popoverProps={ {
+				isAlternate: true,
+				position: 'bottom right left',
+				focusOnMount: true,
+				className: classnames(
+					'syntaxhighlighter-toolbar-dropdown__popover'
+				),
+			} }
+			renderToggle={ ( { isOpen, onToggle } ) => (
+				<Button
+					onClick={ onToggle }
+					icon={ icon }
+					aria-expanded={ isOpen }
+					aria-haspopup="true"
+					children={
+						selectedOption ? selectedOption.label : ''
+					}
+				/>
+			) }
+			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(
+										'syntaxhighlighter-toolbar-dropdown__option',
+										{ 'is-selected': isSelected },
+									) }
+									onClick={ () => {
+										onChange( option.value );
+										onClose();
+									} }
+									children={ option.label }
+								/>
+							);
+						} ) }
+					</MenuGroup>
+				</NavigableMenu>
+			) }
+			{ ...props }
+		/>
+	);
+};
+
+export default ToolbarDropdown;

src/toolbar-dropdown/style.scss

@@ -0,0 +1,23 @@
+.syntaxhighlighter-toolbar-dropdown {
+	&__popover.components-popover[data-x-axis='right'] {
+		.components-popover__content {
+			margin-left: 0;
+			min-width: 300px;
+		}
+	}
+
+	&__option {
+		text-align: left;
+		height: auto;
+		min-height: 32px;
+		border-radius: 2px;
+
+		.components-menu-item__item {
+			white-space: normal;
+		}
+
+		&.is-selected {
+			background-color: #f0f0f0;
+		}
+	}
+}