diff --git a/blocks/library/html/editor.scss b/blocks/library/html/editor.scss
index 0924aade0e47f3..6a76fd7d376570 100644
--- a/blocks/library/html/editor.scss
+++ b/blocks/library/html/editor.scss
@@ -1,12 +1,25 @@
-.gutenberg textarea.wp-block-html {
-	box-shadow: none;
-	font-family: $editor-html-font;
-	font-size: $text-editor-font-size;
-	color: $dark-gray-800;
-	border: 1px solid $light-gray-500;
-	border-radius: 4px;
-	padding: .8em 1.6em;
-	margin: 0;
-	overflow-x: auto;
-	width: 100%;
+.gutenberg .wp-block-html {
+	iframe {
+		display: block;
+
+		// Disable pointer events so that we can click on the block to select it
+		pointer-events: none;
+	}
+
+	.CodeMirror {
+		border-radius: 4px;
+		border: 1px solid $light-gray-500;
+		font-family: $editor-html-font;
+		font-size: $text-editor-font-size;
+		height: auto;
+	}
+
+	.CodeMirror-gutters {
+		background: $white;
+		border-right: none;
+	}
+
+	.CodeMirror-lines {
+		padding: 8px 8px 8px 0;
+	}
 }
diff --git a/blocks/library/html/index.js b/blocks/library/html/index.js
index 05ebd25338e1e8..e36c2438f64f6e 100644
--- a/blocks/library/html/index.js
+++ b/blocks/library/html/index.js
@@ -1,13 +1,8 @@
-/**
- * External dependencies
- */
-import TextareaAutosize from 'react-autosize-textarea';
-
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { withState } from '@wordpress/components';
+import { withState, SandBox, CodeEditor } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -42,35 +37,38 @@ registerBlockType( 'core/html', {
 
 	edit: withState( {
 		preview: false,
-	} )( ( { attributes, setAttributes, setState, focus, preview } ) => [
-		focus && (
-			<BlockControls key="controls">
-				<div className="components-toolbar">
-					<button
-						className={ `components-tab-button ${ ! preview ? 'is-active' : '' }` }
-						onClick={ () => setState( { preview: false } ) }>
-						<span>HTML</span>
-					</button>
-					<button
-						className={ `components-tab-button ${ preview ? 'is-active' : '' }` }
-						onClick={ () => setState( { preview: true } ) }>
-						<span>{ __( 'Preview' ) }</span>
-					</button>
-				</div>
-			</BlockControls>
-		),
-		preview ?
-			<div
-				key="preview"
-				dangerouslySetInnerHTML={ { __html: attributes.content } } /> :
-			<TextareaAutosize
-				className="wp-block-html"
-				key="editor"
-				value={ attributes.content }
-				onChange={ ( event ) => setAttributes( { content: event.target.value } ) }
-				aria-label={ __( 'HTML' ) }
-			/>,
-	] ),
+	} )( ( { attributes, setAttributes, setState, focus, setFocus, preview } ) => (
+		<div className="wp-block-html">
+			{ focus && (
+				<BlockControls>
+					<div className="components-toolbar">
+						<button
+							className={ `components-tab-button ${ ! preview ? 'is-active' : '' }` }
+							onClick={ () => setState( { preview: false } ) }
+						>
+							<span>HTML</span>
+						</button>
+						<button
+							className={ `components-tab-button ${ preview ? 'is-active' : '' }` }
+							onClick={ () => setState( { preview: true } ) }
+						>
+							<span>{ __( 'Preview' ) }</span>
+						</button>
+					</div>
+				</BlockControls>
+			) }
+			{ preview ? (
+				<SandBox html={ attributes.content } />
+			) : (
+				<CodeEditor
+					value={ attributes.content }
+					focus={ !! focus }
+					onFocus={ setFocus }
+					onChange={ content => setAttributes( { content } ) }
+				/>
+			) }
+		</div>
+	) ),
 
 	save( { attributes } ) {
 		return attributes.content;
diff --git a/blocks/library/html/test/__snapshots__/index.js.snap b/blocks/library/html/test/__snapshots__/index.js.snap
index cd76f087961566..465266d93baeef 100644
--- a/blocks/library/html/test/__snapshots__/index.js.snap
+++ b/blocks/library/html/test/__snapshots__/index.js.snap
@@ -1,9 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`core/html block edit matches snapshot 1`] = `
-<textarea
-  aria-label="HTML"
+<div
   class="wp-block-html"
-  rows="1"
-/>
+>
+  <div
+    class="components-placeholder"
+  >
+    <div
+      class="components-placeholder__label"
+    />
+    <div
+      class="components-placeholder__fieldset"
+    >
+      <span
+        class="spinner is-active"
+      />
+    </div>
+  </div>
+</div>
 `;
diff --git a/components/code-editor/README.md b/components/code-editor/README.md
new file mode 100644
index 00000000000000..9edd8c8e5eca44
--- /dev/null
+++ b/components/code-editor/README.md
@@ -0,0 +1,56 @@
+CodeEditor
+=======
+
+CodeEditor is a React component that provides the user with a code editor
+that has syntax highliting and linting.
+
+The components acts as a drop-in replacement for a <textarea>, and uses the
+CodeMirror library that is provided as part of WordPress Core.
+
+## Usage
+
+```jsx
+import { CodeEditor } from '@wordpress/components';
+
+function editCode() {
+	return (
+		<CodeEditor
+			value={ '<p>This is some <b>HTML</b> code that will have syntax highlighting!</p>' }
+		    onChange={ value => console.log( value ) }
+		/>
+	);
+}
+```
+
+## Props
+
+The component accepts the following props:
+
+### value
+
+The source code to load into the code editor.
+
+- Type: `string`
+- Required: Yes
+
+### focus
+
+Whether or not the code editor should be focused.
+
+- Type: `boolean`
+- Required: No
+
+### onFocus
+
+The function called when the editor is focused.
+
+- Type: `Function`
+- Required: No
+
+### onChange
+
+The function called when the user has modified the source code via the
+editor. It is passed the new value as an argument.
+
+- Type: `Function`
+- Required: No
diff --git a/components/code-editor/index.js b/components/code-editor/index.js
new file mode 100644
index 00000000000000..22692696155e39
--- /dev/null
+++ b/components/code-editor/index.js
@@ -0,0 +1,129 @@
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { keycodes } from '@wordpress/utils';
+
+/**
+ * Internal dependencies
+ */
+import withLazyDependencies from '../higher-order/with-lazy-dependencies';
+
+/**
+ * Module constants
+ */
+const { UP, DOWN } = keycodes;
+
+export class CodeEditor extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.onFocus = this.onFocus.bind( this );
+		this.onBlur = this.onBlur.bind( this );
+		this.onCursorActivity = this.onCursorActivity.bind( this );
+		this.onKeyHandled = this.onKeyHandled.bind( this );
+	}
+
+	componentDidMount() {
+		const instance = wp.codeEditor.initialize( this.textarea, window._wpGutenbergCodeEditorSettings );
+		this.editor = instance.codemirror;
+
+		this.editor.on( 'focus', this.onFocus );
+		this.editor.on( 'blur', this.onBlur );
+		this.editor.on( 'cursorActivity', this.onCursorActivity );
+		this.editor.on( 'keyHandled', this.onKeyHandled );
+
+		this.updateFocus();
+	}
+
+	componentDidUpdate( prevProps ) {
+		if ( this.props.value !== prevProps.value && this.editor.getValue() !== this.props.value ) {
+			this.editor.setValue( this.props.value );
+		}
+
+		if ( this.props.focus !== prevProps.focus ) {
+			this.updateFocus();
+		}
+	}
+
+	componentWillUnmount() {
+		this.editor.on( 'focus', this.onFocus );
+		this.editor.off( 'blur', this.onBlur );
+		this.editor.off( 'cursorActivity', this.onCursorActivity );
+		this.editor.off( 'keyHandled', this.onKeyHandled );
+
+		this.editor.toTextArea();
+		this.editor = null;
+	}
+
+	onFocus() {
+		if ( this.props.onFocus ) {
+			this.props.onFocus();
+		}
+	}
+
+	onBlur( editor ) {
+		if ( this.props.onChange ) {
+			this.props.onChange( editor.getValue() );
+		}
+	}
+
+	onCursorActivity( editor ) {
+		this.lastCursor = editor.getCursor();
+	}
+
+	onKeyHandled( editor, name, event ) {
+		/*
+		 * Pressing UP/DOWN should only move focus to another block if the cursor is
+		 * at the start or end of the editor.
+		 * 
+		 * We do this by stopping UP/DOWN from propagating if:
+		 *  - We know what the cursor was before this event; AND
+		 *  - This event caused the cursor to move 
+		 */
+		if ( event.keyCode === UP || event.keyCode === DOWN ) {
+			const areCursorsEqual = ( a, b ) => a.line === b.line && a.ch === b.ch;
+			if ( this.lastCursor && ! areCursorsEqual( editor.getCursor(), this.lastCursor ) ) {
+				event.stopImmediatePropagation();
+			}
+		}
+	}
+
+	updateFocus() {
+		if ( this.props.focus && ! this.editor.hasFocus() ) {
+			// Need to wait for the next frame to be painted before we can focus the editor
+			window.requestAnimationFrame( () => {
+				this.editor.focus();
+			} );
+		}
+
+		if ( ! this.props.focus && this.editor.hasFocus() ) {
+			document.activeElement.blur();
+		}
+	}
+
+	render() {
+		return <textarea ref={ ref => ( this.textarea = ref ) } value={ this.props.value } />;
+	}
+}
+
+export default withLazyDependencies( {
+	scripts() {
+		const scripts = [
+			'wp-codemirror',
+			'code-editor',
+			'htmlhint',
+			'csslint',
+			'jshint',
+		];
+
+		// Don't load htmlhint-kses unless we need it
+		if ( window._wpGutenbergCodeEditorSettings.htmlhint.kses ) {
+			scripts.push( 'htmlhint-kses' );
+		}
+
+		return scripts;
+	},
+
+	styles: [ 'wp-codemirror', 'code-editor' ],
+} )( CodeEditor );
diff --git a/components/code-editor/test/__snapshots__/index.js.snap b/components/code-editor/test/__snapshots__/index.js.snap
new file mode 100644
index 00000000000000..145b69b94d7d07
--- /dev/null
+++ b/components/code-editor/test/__snapshots__/index.js.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CodeEditor should render without an error 1`] = `
+<textarea
+  value="<b>wowee</b>"
+/>
+`;
diff --git a/components/code-editor/test/index.js b/components/code-editor/test/index.js
new file mode 100644
index 00000000000000..740decca0283c6
--- /dev/null
+++ b/components/code-editor/test/index.js
@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import { shallow } from 'enzyme';
+import { set, noop } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import { CodeEditor } from '../';
+
+describe( 'CodeEditor', () => {
+	it( 'should render without an error', () => {
+		set( global, 'wp.codeEditor.initialize', () => ( {
+			codemirror: {
+				on: noop,
+				hasFocus: () => false,
+			},
+		} ) );
+
+		const wrapper = shallow( <CodeEditor value={ '<b>wowee</b>' } /> );
+		expect( wrapper ).toMatchSnapshot();
+	} );
+} );
diff --git a/components/higher-order/with-lazy-dependencies/README.md b/components/higher-order/with-lazy-dependencies/README.md
new file mode 100644
index 00000000000000..becece48e80307
--- /dev/null
+++ b/components/higher-order/with-lazy-dependencies/README.md
@@ -0,0 +1,60 @@
+# withLazyDependencies
+
+`withLazyDependencies` is a React [higher-order-component] that wraps a
+component and, when mounted, automatically loads script and style
+dependencies before the mounting the wrapped component.
+
+A script or style dependency is one that has been registered using
+`wp_register_script` or `wp_register_style`. It is identified by a unique
+string handle.
+
+[higher-order-component]: https://facebook.github.io/react/docs/higher-order-components.html
+
+## Usage
+
+Use the `scripts` attribute to specify which registered scripts should be
+loaded before the wrapped component is mounted:
+
+```jsx
+function OriginalComponent() {
+	return <p>jQuery version: { jQuery.fn.jquery }</p>;
+}
+
+const EnhancedComponent = withLazyDependencies( {
+	scripts: [ 'jquery' ],
+} )( OriginalComponent );
+```
+
+Use `styles` to specify which registered styles should be loaded:
+
+```jsx
+const EnhancedComponent = withLazyDependencies( {
+	styles: [ 'style1', 'style2' ],
+} )( OriginalComponent );
+```
+
+To dynamically specify which dependencies to load, a function can be given to
+`scripts` or `styles`:
+
+```jsx
+const EnhancedComponent = withLazyDependencies( {
+	scripts() {
+		return [ 'jquery' ];
+	},
+} )( OriginalComponent );
+```
+
+Use `loadingComponent` and `errorComponent` to specify what should be
+displayed when the dependencies are loading or have failed to load:
+
+```jsx
+const EnhancedComponent = withLazyDependencies( {
+	scripts: [ 'jquery' ],
+	lodingComponent() {
+		return <p>Loading jQuery...</p>;
+	},
+	errorComponent() {
+		return <p>Error while loading jQuery!</p>;
+	},
+} )( OriginalComponent );
+```
diff --git a/components/higher-order/with-lazy-dependencies/index.js b/components/higher-order/with-lazy-dependencies/index.js
new file mode 100644
index 00000000000000..efff74221134fb
--- /dev/null
+++ b/components/higher-order/with-lazy-dependencies/index.js
@@ -0,0 +1,132 @@
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Placeholder from '../../placeholder';
+import Spinner from '../../spinner';
+
+const alreadyLoaded = {};
+
+function loadScript( url ) {
+	if ( alreadyLoaded[ url ] ) {
+		return Promise.resolve();
+	}
+
+	return new Promise( ( resolve, reject ) => {
+		const script = document.createElement( 'script' );
+		script.src = url;
+		script.onload = () => {
+			alreadyLoaded[ url ] = true;
+			resolve();
+		};
+		script.onerror = () => {
+			reject();
+		};
+
+		document.head.appendChild( script );
+	} );
+}
+
+function loadStyle( url ) {
+	if ( alreadyLoaded[ url ] ) {
+		return Promise.resolve();
+	}
+
+	return new Promise( ( resolve, reject ) => {
+		const style = document.createElement( 'link' );
+		style.rel = 'stylesheet';
+		style.href = url;
+		style.onload = () => {
+			alreadyLoaded[ url ] = true;
+			resolve();
+		};
+		style.onerror = () => {
+			reject();
+		};
+
+		document.head.appendChild( style );
+	} );
+}
+
+function loadDependencies( scripts, styles ) {
+	if ( typeof scripts === 'function' ) {
+		scripts = scripts();
+	}
+
+	if ( typeof styles === 'function' ) {
+		styles = styles();
+	}
+
+	const promises = [];
+
+	if ( scripts && scripts.length > 0 ) {
+		const url = `/wp-admin/load-scripts.php?load=${ scripts.join( ',' ) }`;
+		promises.push( loadScript( url ) );
+	}
+
+	if ( styles && styles.length > 0 ) {
+		const url = `/wp-admin/load-styles.php?load=${ styles.join( ',' ) }`;
+		promises.push( loadStyle( url ) );
+	}
+
+	return Promise.all( promises );
+}
+
+function LoadingComponent() {
+	return (
+		<Placeholder>
+			<Spinner />
+		</Placeholder>
+	);
+}
+
+function ErrorComponent() {
+	return <Placeholder>{ __( 'An unknown error occurred.' ) }</Placeholder>;
+}
+
+export default ( {
+	scripts,
+	styles,
+	loader = loadDependencies,
+	loadingComponent = LoadingComponent,
+	errorComponent = ErrorComponent,
+} ) => WrappedComponent =>
+	class LazyDependencyComponent extends Component {
+		constructor() {
+			super( ...arguments );
+
+			this.state = {
+				status: 'pending',
+			};
+		}
+
+		componentDidMount() {
+			loader( scripts, styles ).then(
+				() => {
+					this.setState( { status: 'success' } );
+				},
+				() => {
+					this.setState( { status: 'error' } );
+				}
+			);
+		}
+
+		render() {
+			const { status } = this.state;
+
+			if ( status === 'pending' ) {
+				return loadingComponent ? loadingComponent() : null;
+			}
+
+			if ( status === 'error' ) {
+				return errorComponent ? errorComponent() : null;
+			}
+
+			return <WrappedComponent { ...this.props } />;
+		}
+	};
diff --git a/components/higher-order/with-lazy-dependencies/test/index.js b/components/higher-order/with-lazy-dependencies/test/index.js
new file mode 100644
index 00000000000000..83648b53898a3d
--- /dev/null
+++ b/components/higher-order/with-lazy-dependencies/test/index.js
@@ -0,0 +1,82 @@
+/**
+ * External dependencies
+ */
+import { mount } from 'enzyme';
+
+/**
+ * Internal dependencies
+ */
+import withLazyDependencies from '../';
+
+describe( 'withLazyDependencies', () => {
+	function OriginalComponent() {
+		return <p>&lt;3</p>;
+	}
+
+	it( 'should load dependencies', () => {
+		const EnhancedComponent = withLazyDependencies( {
+			scripts: [ 'tomato' ],
+			styles: [ 'basil', 'mozzarella' ],
+		} )( OriginalComponent );
+
+		mount( <EnhancedComponent /> );
+
+		const scriptUrl = document.querySelector( 'script' ).getAttribute( 'src' );
+		expect( scriptUrl ).toBe( '/wp-admin/load-scripts.php?load=tomato' );
+
+		const styleUrl = document.querySelector( 'link' ).getAttribute( 'href' );
+		expect( styleUrl ).toBe( '/wp-admin/load-styles.php?load=basil,mozzarella' );
+	} );
+
+	it( 'should load dynamic dependencies', () => {
+		const EnhancedComponent = withLazyDependencies( {
+			scripts: () => [ 'tomato' ],
+			styles: () => [ 'basil', 'mozzarella' ],
+		} )( OriginalComponent );
+
+		mount( <EnhancedComponent /> );
+
+		const scriptUrl = document.querySelector( 'script' ).getAttribute( 'src' );
+		expect( scriptUrl ).toBe( '/wp-admin/load-scripts.php?load=tomato' );
+
+		const styleUrl = document.querySelector( 'link' ).getAttribute( 'href' );
+		expect( styleUrl ).toBe( '/wp-admin/load-styles.php?load=basil,mozzarella' );
+	} );
+
+	it( 'should render wrapped component when dependencies are loaded', () => {
+		const promise = Promise.resolve();
+		const EnhancedComponent = withLazyDependencies( {
+			scripts: () => [ 'tomato' ],
+			loader: () => promise,
+		} )( OriginalComponent );
+
+		const wrapper = mount( <EnhancedComponent /> );
+		return promise.then( () => {
+			expect( wrapper.text() ).toBe( '<3' );
+		} );
+	} );
+
+	it( 'should show loading component while loading', () => {
+		const EnhancedComponent = withLazyDependencies( {
+			scripts: () => [ 'tomato' ],
+			loadingComponent: () => <p>Loading...</p>,
+		} )( OriginalComponent );
+
+		const wrapper = mount( <EnhancedComponent /> );
+		expect( wrapper.text() ).toBe( 'Loading...' );
+	} );
+
+	it( 'should show error component when there is an error', () => {
+		const promise = Promise.reject();
+		const EnhancedComponent = withLazyDependencies( {
+			scripts: () => [ 'tomato' ],
+			loader: () => promise,
+			errorComponent: () => <p>Error!</p>,
+		} )( OriginalComponent );
+
+		const wrapper = mount( <EnhancedComponent /> );
+		return promise.catch( () => {
+			expect( wrapper.text() ).toBe( 'Error!' );
+		} );
+	} );
+} );
diff --git a/components/index.js b/components/index.js
index 96ecef165b8add..9e3b8c6b8fb124 100644
--- a/components/index.js
+++ b/components/index.js
@@ -3,6 +3,7 @@ export { default as APIProvider } from './higher-order/with-api-data/provider';
 export { default as Autocomplete } from './autocomplete';
 export { default as Button } from './button';
 export { default as ClipboardButton } from './clipboard-button';
+export { default as CodeEditor } from './code-editor';
 export { default as Dashicon } from './dashicon';
 export { DateTimePicker, DatePicker, TimePicker } from './date-time';
 export { default as DropZone } from './drop-zone';
@@ -44,5 +45,6 @@ export { default as withFilters } from './higher-order/with-filters';
 export { default as withFocusOutside } from './higher-order/with-focus-outside';
 export { default as withFocusReturn } from './higher-order/with-focus-return';
 export { default as withInstanceId } from './higher-order/with-instance-id';
+export { default as withLazyDependencies } from './higher-order/with-lazy-dependencies';
 export { default as withSpokenMessages } from './higher-order/with-spoken-messages';
 export { default as withState } from './higher-order/with-state';
diff --git a/editor/assets/stylesheets/_z-index.scss b/editor/assets/stylesheets/_z-index.scss
index f218da7a81da5f..3e9c2909c6383c 100644
--- a/editor/assets/stylesheets/_z-index.scss
+++ b/editor/assets/stylesheets/_z-index.scss
@@ -16,11 +16,11 @@ $z-layers: (
 	'.editor-inserter__tab.is-active': 1,
 	'.components-panel__header': 1,
 	'.editor-meta-boxes-area.is-loading:before': 1,
-	'.editor-meta-boxes-area .spinner': 2,
-	'.blocks-format-toolbar__link-modal': 2,
-	'.editor-block-contextual-toolbar': 2,
-	'.editor-block-switcher__menu': 2,
-	'.components-popover__close': 2,
+	'.editor-meta-boxes-area .spinner': 5,
+	'.blocks-format-toolbar__link-modal': 5,
+	'.editor-block-contextual-toolbar': 5,
+	'.editor-block-switcher__menu': 5,
+	'.components-popover__close': 5,
 	'.editor-block-mover': 1,
 	'.blocks-gallery-image__inline-menu': 20,
 	'.editor-block-settings-menu__popover': 20, // Below the header
diff --git a/lib/client-assets.php b/lib/client-assets.php
index 240d5793d34e3b..2a6cb3d8a6d634 100644
--- a/lib/client-assets.php
+++ b/lib/client-assets.php
@@ -667,6 +667,32 @@ function gutenberg_color_palette() {
 	);
 }
 
+/**
+ * The code editor settings that were last captured by
+ * gutenberg_capture_code_editor_settings().
+ *
+ * @var array|false
+ */
+$gutenberg_captured_code_editor_settings = false;
+
+/**
+ * When passed to the wp_code_editor_settings filter, this function captures
+ * the code editor settings given to it and then prevents
+ * wp_enqueue_code_editor() from enqueuing any assets.
+ *
+ * This is a workaround until e.g. code_editor_settings() is added to Core.
+ *
+ * @since 2.1.0
+ *
+ * @param array $settings Code editor settings.
+ * @return false
+ */
+function gutenberg_capture_code_editor_settings( $settings ) {
+	global $gutenberg_captured_code_editor_settings;
+	$gutenberg_captured_code_editor_settings = $settings;
+	return false;
+}
+
 /**
  * Scripts & Styles.
  *
@@ -840,6 +866,16 @@ function gutenberg_editor_scripts_and_styles( $hook ) {
 	), $meta_box_url );
 	wp_localize_script( 'wp-editor', '_wpMetaBoxUrl', $meta_box_url );
 
+	// Populate default code editor settings by short-circuiting wp_enqueue_code_editor.
+	global $gutenberg_captured_code_editor_settings;
+	add_filter( 'wp_code_editor_settings', 'gutenberg_capture_code_editor_settings' );
+	wp_enqueue_code_editor( array( 'type' => 'text/html' ) );
+	remove_filter( 'wp_code_editor_settings', 'gutenberg_capture_code_editor_settings' );
+	wp_add_inline_script( 'wp-editor', sprintf(
+		'window._wpGutenbergCodeEditorSettings = %s;',
+		wp_json_encode( $gutenberg_captured_code_editor_settings )
+	) );
+
 	// Initialize the editor.
 	$gutenberg_theme_support = get_theme_support( 'gutenberg' );
 	$align_wide              = get_theme_support( 'align-wide' );
@@ -906,12 +942,10 @@ function gutenberg_editor_scripts_and_styles( $hook ) {
 	/**
 	 * Styles
 	 */
-
 	wp_enqueue_style(
 		'wp-editor-font',
 		'https://fonts.googleapis.com/css?family=Noto+Serif:400,400i,700,700i'
 	);
-
 	wp_enqueue_style(
 		'wp-editor',
 		gutenberg_url( 'editor/build/style.css' ),