Add language selector to block toolbar

src/code-block/edit.js

@@ -2,6 +2,7 @@
 import { PlainText } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
 import settings from './settings';
+import { Fragment } from '@wordpress/element';
 
 export default function editSyntaxHighlighterBlock( { attributes, setAttributes, className } ) {
 	const {
@@ -17,10 +18,9 @@ export default function editSyntaxHighlighterBlock( { attributes, setAttributes,
 		/>
 	</div>;
 
-	return (
-		[
-			settings( { attributes, setAttributes } ),
-			editView,
-		]
-	);
+	return <Fragment>
+		{ settings( { attributes, setAttributes } ) }
+		{ editView }
+	</Fragment>
+	;
 }

src/code-block/editor.scss

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

src/code-block/index.js

@@ -3,6 +3,8 @@ import deprecated from './deprecated';
 import edit from './edit';
 import save from './save';
 import transforms from './transforms';
+import './editor.scss';
+import './style.scss';
 
 const { settings } = window.syntaxHighlighterData;
 

src/code-block/settings.js

@@ -6,11 +6,15 @@ import {
 	TextControl,
 } from '@wordpress/components';
 
-import { InspectorControls } from '@wordpress/editor';
+import { Fragment } from '@wordpress/element';
+
+import { InspectorControls, BlockControls } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
+import languageToolbar from './toolbar.language';
 
 export default ( { attributes, setAttributes } ) => {
 	const blockSettings = [];
+	const toolbar = [];
 
 	const {
 		language,
@@ -42,8 +46,10 @@ export default ( { attributes, setAttributes } ) => {
 					options={ options }
 					onChange={ ( nextLanguage ) => setAttributes( { language: nextLanguage } ) }>
 				</SelectControl>
-			</PanelRow>,
+			</PanelRow>
 		);
+
+		toolbar.push( languageToolbar( { attributes, setAttributes, options } ) );
 	}
 
 	// Line numbers
@@ -128,11 +134,14 @@ export default ( { attributes, setAttributes } ) => {
 		);
 	}
 
-	return (
+	return <Fragment>
+		<BlockControls>
+			{ toolbar }
+		</BlockControls>
 		<InspectorControls key="syntaxHighlighterInspectorControls">
 			<PanelBody title={ __( 'Settings', 'syntaxhighlighter' ) }>
 				{ blockSettings }
 			</PanelBody>
 		</InspectorControls>
-	);
+	</Fragment>;
 };

src/code-block/toolbar.language.js

@@ -0,0 +1,27 @@
+import {
+	ToolbarGroup,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+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>;
+};

syntaxhighlighter.php

@@ -337,6 +337,14 @@ function enqueue_block_editor_assets() {
 				: $this->pluginver
 		);
 
+		wp_enqueue_style(
+			'syntaxhighlighter-blocks-css', // Handle.
+			plugins_url( 'dist/blocks.editor.build.css', __FILE__ ),
+			( ( defined( 'WP_DEBUG' ) && WP_DEBUG ) || ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) )
+				? filemtime( plugin_dir_path( __FILE__ ) . 'dist/blocks.editor.build.css' )
+				: $this->pluginver
+		);
+
 		// WordPress 5.0+ only, no Gutenberg plugin support
 		if ( function_exists( 'wp_set_script_translations' ) ) {
 			wp_set_script_translations( 'syntaxhighlighter-blocks', 'syntaxhighlighter' );