Move the theme setting into a plugin sidebar.

blocks/code/edit.js

@@ -1,10 +1,10 @@
 import classnames from 'classnames';
 import { components, data, editor, element, i18n } from 'wp';
 import CodeEditor from './code-editor';
-import { languageChoices, themeChoices } from './settings';
+import { languageChoices } from './settings';
 
 const { PanelBody, SelectControl, ToggleControl } = components;
-const { dispatch, select, withSelect } = data;
+const { select, withSelect } = data;
 const { InspectorControls } = editor;
 const { Component, Fragment } = element;
 const { __ } = i18n;
@@ -13,14 +13,9 @@ export class CodeBlockEdit extends Component {
 	constructor() {
 		super( ...arguments );
 
-		this.onChangeTheme = this.onChangeTheme.bind( this );
 		this.toggleLineHighlight = this.toggleLineHighlight.bind( this );
 	}
 
-	onChangeTheme( value ) {
-		dispatch( 'cedaro/code' ).updateTheme( value )
-	}
-
 	toggleLineHighlight( value ) {
 		let lines = this.props.attributes.highlightLines;
 
@@ -54,17 +49,6 @@ export class CodeBlockEdit extends Component {
 							onChange={ () => setAttributes( { showLineNumbers: ! showLineNumbers } ) }
 						/>
 					</PanelBody>
-					<PanelBody title={ __( 'Settings' ) } initialOpen={ false }>
-						<p>
-							{ __( 'Settings that apply to all Shiny Code blocks.' ) }
-						</p>
-						<SelectControl
-							label={ __( 'Theme' ) }
-							value={ theme }
-							options={ themeChoices }
-							onChange={ this.onChangeTheme }
-						/>
-					</PanelBody>
 				</InspectorControls>
 				<div className={ className }>
 					<CodeEditor

blocks/code/index.js

@@ -4,6 +4,7 @@ import classnames from 'classnames';
 import { blocks, i18n } from 'wp';
 import CodeBlockEdit from './edit';
 import './data';
+import './sidebar';
 
 const { createBlock, registerBlockType } = blocks;
 const { __ } = i18n;

blocks/code/sidebar.js

@@ -0,0 +1,55 @@
+import { components, data, editPost, element, i18n, plugins } from 'wp';
+import { themeChoices } from './settings';
+
+const { PanelBody, SelectControl } = components;
+const { Component, Fragment } = element;
+const { dispatch, select, withSelect } = data;
+const { PluginSidebar, PluginSidebarMoreMenuItem } = editPost;
+const { __ } = i18n;
+const { registerPlugin } = plugins;
+
+class Sidebar extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.onChangeTheme = this.onChangeTheme.bind( this );
+	}
+
+	onChangeTheme( value ) {
+		dispatch( 'cedaro/code' ).updateTheme( value )
+	}
+
+	render() {
+		const { theme } = this.props;
+
+		return (
+			<Fragment>
+				<PluginSidebarMoreMenuItem target="shiny-code">
+					{ __( 'Shiny Code' ) }
+				</PluginSidebarMoreMenuItem>
+				<PluginSidebar
+					name="shiny-code"
+					title={ __( 'Shiny Code' ) }
+				>
+					<PanelBody>
+						<SelectControl
+							label={ __( 'Theme' ) }
+							value={ theme }
+							options={ themeChoices }
+							onChange={ value => dispatch( 'cedaro/code' ).updateTheme( value ) }
+						/>
+					</PanelBody>
+				</PluginSidebar>
+			</Fragment>
+		);
+	}
+}
+
+registerPlugin( 'plugin-name', {
+	icon: 'editor-code',
+	render: withSelect( function( select ) {
+		return {
+			theme: select( 'cedaro/code' ).getTheme()
+		};
+	} )( Sidebar ),
+} );