diff --git a/blocks/editable/block.scss b/blocks/editable/block.scss
new file mode 100644
index 00000000000000..e62b5016ddea79
--- /dev/null
+++ b/blocks/editable/block.scss
@@ -0,0 +1,16 @@
+.drop-cap-true .blocks-editable__tinymce:not( :focus )  {
+	&:first-letter {
+		float: left;
+		font-size: 4.1em;
+		line-height: 0.7;
+		font-family: serif;
+		font-weight: bold;
+		margin: .07em .23em 0 0;
+		text-transform: uppercase;
+		font-style: normal;
+	}
+}
+
+.drop-cap-true:not( :focus )  {
+	overflow: hidden;
+}
diff --git a/blocks/editable/index.js b/blocks/editable/index.js
index b1315088bfe0b8..0c8b0bd46cfe4a 100644
--- a/blocks/editable/index.js
+++ b/blocks/editable/index.js
@@ -18,6 +18,7 @@ import { BACKSPACE, DELETE, ENTER } from 'utils/keycodes';
  * Internal dependencies
  */
 import './style.scss';
+import './block.scss';
 import FormatToolbar from './format-toolbar';
 import TinyMCE from './tinymce';
 
diff --git a/blocks/editable/style.scss b/blocks/editable/style.scss
index 9c143868dcdbe3..1cb1d8e3efafbb 100644
--- a/blocks/editable/style.scss
+++ b/blocks/editable/style.scss
@@ -50,23 +50,6 @@
 	}
 }
 
-.drop-cap-true .blocks-editable__tinymce:not( :focus )  {
-	&:first-letter {
-		float: left;
-		font-size: 4.1em;
-		line-height: 0.7;
-		font-family: serif;
-		font-weight: bold;
-		margin: .07em .23em 0 0;
-		text-transform: uppercase;
-		font-style: normal;
-	}
-}
-
-.drop-cap-true:not( :focus )  {
-	overflow: hidden;
-}
-
 .block-editable__inline-toolbar {
 	display: flex;
 	justify-content: center;
diff --git a/blocks/library/gallery/block.scss b/blocks/library/gallery/block.scss
new file mode 100644
index 00000000000000..50b843fff8065d
--- /dev/null
+++ b/blocks/library/gallery/block.scss
@@ -0,0 +1,39 @@
+
+.blocks-gallery {
+	display: flex;
+	flex-wrap: wrap;
+
+	.blocks-gallery-image {
+		flex-grow: 1;
+		margin: 8px;
+
+		img {
+			max-width: 100%;
+		}
+	}
+
+	&.columns-1 figure {
+		width: calc(100% / 1 - 2 * 8px);
+	}
+	&.columns-2 figure {
+		width: calc(100% / 2 - 3 * 8px);
+	}
+	&.columns-3 figure {
+		width: calc(100% / 3 - 4 * 8px);
+	}
+	&.columns-4 figure {
+		width: calc(100% / 4 - 5 * 8px);
+	}
+	&.columns-5 figure {
+		width: calc(100% / 5 - 6 * 8px);
+	}
+	&.columns-6 figure {
+		width: calc(100% / 6 - 7 * 8px);
+	}
+	&.columns-7 figure {
+		width: calc(100% / 7 - 8 * 8px);
+	}
+	&.columns-8 figure {
+		width: calc(100% / 8 - 9 * 8px);
+	}
+}
diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js
index a8e9f2ad344ee0..1e3fe1bf064c37 100644
--- a/blocks/library/gallery/index.js
+++ b/blocks/library/gallery/index.js
@@ -8,6 +8,7 @@ import { Toolbar, Placeholder } from 'components';
  * Internal dependencies
  */
 import './style.scss';
+import './block.scss';
 import { registerBlockType, query as hpq } from '../../api';
 import MediaUploadButton from '../../media-upload-button';
 import InspectorControls from '../../inspector-controls';
diff --git a/blocks/library/gallery/style.scss b/blocks/library/gallery/style.scss
index 709eeee2fa604c..cbe0e8e3017170 100644
--- a/blocks/library/gallery/style.scss
+++ b/blocks/library/gallery/style.scss
@@ -1,43 +1,4 @@
 
-.blocks-gallery {
-	display: flex;
-	flex-wrap: wrap;
-
-	.blocks-gallery-image {
-		flex-grow: 1;
-		margin: 8px;
-
-		img {
-			max-width: 100%;
-		}
-	}
-
-	&.columns-1 figure {
-		width: calc(100% / 1 - 2 * 8px);
-	}
-	&.columns-2 figure {
-		width: calc(100% / 2 - 3 * 8px);
-	}
-	&.columns-3 figure {
-		width: calc(100% / 3 - 4 * 8px);
-	}
-	&.columns-4 figure {
-		width: calc(100% / 4 - 5 * 8px);
-	}
-	&.columns-5 figure {
-		width: calc(100% / 5 - 6 * 8px);
-	}
-	&.columns-6 figure {
-		width: calc(100% / 6 - 7 * 8px);
-	}
-	&.columns-7 figure {
-		width: calc(100% / 7 - 8 * 8px);
-	}
-	&.columns-8 figure {
-		width: calc(100% / 8 - 9 * 8px);
-	}
-}
-
 .blocks-gallery.is-placeholder {
 	margin: -15px;
 	padding: 6em 0;
diff --git a/lib/client-assets.php b/lib/client-assets.php
index 1a1ca89fc40322..78541d947615ab 100644
--- a/lib/client-assets.php
+++ b/lib/client-assets.php
@@ -120,6 +120,12 @@ function gutenberg_register_scripts_and_styles() {
 		array(),
 		filemtime( gutenberg_dir_path() . 'blocks/build/style.css' )
 	);
+	wp_register_style(
+		'wp-edit-blocks',
+		gutenberg_url( 'blocks/build/edit-blocks.css' ),
+		array(),
+		filemtime( gutenberg_dir_path() . 'blocks/build/edit-blocks.css' )
+	);
 }
 add_action( 'init', 'gutenberg_register_scripts_and_styles' );
 
@@ -446,8 +452,17 @@ function gutenberg_scripts_and_styles( $hook ) {
 	wp_enqueue_style(
 		'wp-editor',
 		gutenberg_url( 'editor/build/style.css' ),
-		array( 'wp-components', 'wp-blocks' ),
+		array( 'wp-components', 'wp-blocks', 'wp-edit-blocks' ),
 		filemtime( gutenberg_dir_path() . 'editor/build/style.css' )
 	);
 }
 add_action( 'admin_enqueue_scripts', 'gutenberg_scripts_and_styles' );
+
+/**
+ * Handles the enqueueing of front end scripts and styles from Gutenberg.
+ */
+function gutenberg_frontend_scripts_and_styles() {
+	// Enqueue basic styles built out of Gutenberg through npm build.
+	wp_enqueue_style( 'wp-blocks' );
+}
+add_action( 'wp_enqueue_scripts', 'gutenberg_frontend_scripts_and_styles' );
diff --git a/webpack.config.js b/webpack.config.js
index c20462f582084c..3000ca4ae6a139 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -6,6 +6,21 @@ const glob = require( 'glob' );
 const webpack = require( 'webpack' );
 const ExtractTextPlugin = require( 'extract-text-webpack-plugin' );
 
+// Main CSS loader for everything but blocks..
+const MainCSSExtractTextPlugin = new ExtractTextPlugin( {
+	filename: './[name]/build/style.css',
+} );
+
+// CSS loader for styles specific to block editing.
+const EditBlocksCSSPlugin = new ExtractTextPlugin( {
+	filename: './blocks/build/edit-blocks.css',
+} );
+
+// CSS loader for styles specific to blocks in general.
+const BlocksCSSPlugin = new ExtractTextPlugin( {
+	filename: './blocks/build/style.css',
+} );
+
 const entryPointNames = [
 	'element',
 	'i18n',
@@ -64,9 +79,54 @@ const config = {
 				exclude: /node_modules/,
 				use: 'babel-loader',
 			},
+			{
+				test: /block\.s?css$/,
+				use: BlocksCSSPlugin.extract( {
+					use: [
+						{ loader: 'raw-loader' },
+						{ loader: 'postcss-loader' },
+						{
+							loader: 'sass-loader',
+							query: {
+								includePaths: [ 'editor/assets/stylesheets' ],
+								data: '@import "variables"; @import "mixins"; @import "animations";@import "z-index";',
+								outputStyle: 'production' === process.env.NODE_ENV ?
+									'compressed' : 'nested',
+							},
+						},
+					],
+				} ),
+			},
 			{
 				test: /\.s?css$/,
-				use: ExtractTextPlugin.extract( {
+				include: [
+					/blocks/,
+				],
+				exclude: [
+					/block\.s?css$/,
+				],
+				use: EditBlocksCSSPlugin.extract( {
+					use: [
+						{ loader: 'raw-loader' },
+						{ loader: 'postcss-loader' },
+						{
+							loader: 'sass-loader',
+							query: {
+								includePaths: [ 'editor/assets/stylesheets' ],
+								data: '@import "variables"; @import "mixins"; @import "animations";@import "z-index";',
+								outputStyle: 'production' === process.env.NODE_ENV ?
+									'compressed' : 'nested',
+							},
+						},
+					],
+				} ),
+			},
+			{
+				test: /\.s?css$/,
+				exclude: [
+					/blocks/,
+				],
+				use: MainCSSExtractTextPlugin.extract( {
 					use: [
 						{ loader: 'raw-loader' },
 						{ loader: 'postcss-loader' },
@@ -88,9 +148,9 @@ const config = {
 		new webpack.DefinePlugin( {
 			'process.env.NODE_ENV': JSON.stringify( process.env.NODE_ENV || 'development' ),
 		} ),
-		new ExtractTextPlugin( {
-			filename: './[name]/build/style.css',
-		} ),
+		BlocksCSSPlugin,
+		EditBlocksCSSPlugin,
+		MainCSSExtractTextPlugin,
 		new webpack.LoaderOptionsPlugin( {
 			minimize: process.env.NODE_ENV === 'production',
 			debug: process.env.NODE_ENV !== 'production',