Support a few languages

Author: dmsnell

blocks/library/code-mirror/index.js

@@ -3,7 +3,12 @@
  */
 import CodeMirror from 'react-codemirror';
 import he from 'he';
+require( 'codemirror/mode/css/css' );
+require( 'codemirror/mode/diff/diff' );
 require( 'codemirror/mode/javascript/javascript' );
+require( 'codemirror/mode/markdown/markdown' );
+require( 'codemirror/mode/pegjs/pegjs' );
+require( 'codemirror/mode/php/php' );
 require( 'codemirror/lib/codemirror.css' );
 
 /**
@@ -27,18 +32,31 @@ registerBlockType( 'core/code-mirror', {
 
 	edit( { attributes, setAttributes } ) {
 		return (
-			<CodeMirror
-				value={ toEditor( attributes.html ) }
-				mode="javascript"
-				onChange={ value => setAttributes( { html: fromEditor( value ) } ) }
-				options={ {
-					lineNumbers: true,
-				} }
-			/>
+			<div>
+				<select onBlur={ ( { target: { value } } ) => setAttributes( { language: value } ) }>
+					{ [ 'css', 'diff', 'javascript', 'markdown', 'pegjs', 'php' ].map( language => (
+						<option
+							key={ language }
+							selected={ language === attributes.language }
+							value={ language }
+						>
+							{ language }
+						</option>
+					) ) }
+				</select>
+				<CodeMirror
+					value={ toEditor( attributes.html ) }
+					onChange={ value => setAttributes( { html: fromEditor( value ) } ) }
+					options={ {
+						lineNumbers: true,
+						mode: attributes.language,
+					} }
+				/>
+			</div>
 		);
 	},
 
 	save( { attributes } ) {
 		return attributes.html;
-	}
+	},
 } );

post-content.js

@@ -165,7 +165,7 @@ window._wpGutenbergPost = {
 			'https://make.wordpress.org/core/2017/01/17/editor-technical-overview/',
 			'<!-- /wp:core/embed -->',
 
-			'<!-- wp:core/code-mirror -->',
+			'<!-- wp:core/code-mirror language="php" -->',
 			'const add = ( a, b ) =&gt; a + b;<br>const sum = l =&gt; l.reduce( add, 0 );<br>',
 			'<!-- /wp:core/code-mirror -->',