Allow build process to split css files for front end and backend.

blocks/library/gallery/block.scss

@@ -0,0 +1,58 @@
+.wp-block-gallery {
+	display: flex;
+	flex-wrap: wrap;
+
+	&:not( .components-placeholder ) {
+		margin-right: -16px;
+		margin-bottom: -16px;
+	}
+
+	.blocks-gallery-image {
+		flex-grow: 1;
+		margin: 0 16px 16px 0;
+
+		img {
+			max-width: 100%;
+		}
+	}
+
+	// Cropped
+	&.is-cropped .blocks-gallery-image {
+		img {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+		}
+
+		// Alas, IE11+ doesn't support object-fit
+		_:-ms-lang(x), img {
+			height: auto;
+			width: auto;
+		}
+	}
+
+	&.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/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';

blocks/library/gallery/style.scss

@@ -1,63 +1,3 @@
-
-.wp-block-gallery {
-	display: flex;
-	flex-wrap: wrap;
-
-	&:not( .components-placeholder ) {
-		margin-right: -16px;
-		margin-bottom: -16px;
-	}
-
-	.blocks-gallery-image {
-		flex-grow: 1;
-		margin: 0 16px 16px 0;
-
-		img {
-			max-width: 100%;
-		}
-	}
-
-	// Cropped
-	&.is-cropped .blocks-gallery-image {
-		img {
-			width: 100%;
-			height: 100%;
-			object-fit: cover;
-		}
-
-		// Alas, IE11+ doesn't support object-fit
-		_:-ms-lang(x), img {
-			height: auto;
-			width: auto;
-		}
-	}
-
-	&.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);
-	}
-}
-
 .wp-block-gallery.is-placeholder {
 	margin: -15px;
 	padding: 6em 0;

blocks/library/text/block.scss

@@ -0,0 +1,16 @@
+p.has-drop-cap {
+	&: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;
+	}
+}
+
+p.has-drop-cap:not( :focus )  {
+	overflow: hidden;
+}

blocks/library/text/index.js

@@ -7,6 +7,7 @@ import { concatChildren } from 'element';
 /**
  * Internal dependencies
  */
+import './block.scss';
 import { registerBlockType, createBlock, query as hpq, setDefaultBlock } from '../../api';
 import AlignmentToolbar from '../../alignment-toolbar';
 import BlockControls from '../../block-controls';
@@ -85,13 +86,14 @@ registerBlockType( 'core/text', {
 	},
 
 	save( { attributes } ) {
-		const { align, content } = attributes;
+		const { align, content, dropCap } = attributes;
+		const className = dropCap && 'has-drop-cap';
 
 		if ( ! align ) {
-			return <p>{ content }</p>;
+			return <p className={ className }>{ content }</p>;
 		}
 
-		return <p style={ { textAlign: align } }>{ content }</p>;
+		return <p style={ { textAlign: align } } className={ className }>{ content }</p>;
 	},
 } );
 

docs/coding-guidelines.md

@@ -32,6 +32,16 @@ In all of the above cases, except in separating the top-level element from its d
 
 You may observe that these conventions adhere closely to the [BEM (Blocks, Elements, Modifiers)](http://getbem.com/introduction/) CSS methodology, with minor adjustments to the application of modifiers.
 
+#### SCSS File Naming Conventions for Blocks
+
+The build process will split SCSS from within the blocks library directory into two separate CSS files when Webpack runs.
+
+Styles placed in a block.scss file will be built into `blocks/build/style.css`, to load on the front end theme as well as in the editor.
+
+All other SCSS files will be built into `blocks/build/edit-blocks.css`, to load **only in the editor**.
+
+Examples of styles that appear in both the theme and the editor include gallery columns and drop caps.
+
 ## JavaScript
 
 ### Imports

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' );
 
@@ -453,8 +459,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' );

webpack.config.js

@@ -6,6 +6,38 @@ 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',
+} );
+
+// Configuration for the ExtractTextPlugin.
+const extractConfig = {
+	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',
+			},
+		},
+	],
+};
+
 const entryPointNames = [
 	'element',
 	'i18n',
@@ -64,33 +96,39 @@ const config = {
 				exclude: /node_modules/,
 				use: 'babel-loader',
 			},
+			{
+				test: /block\.s?css$/,
+				include: [
+					/blocks/,
+				],
+				use: blocksCSSPlugin.extract( extractConfig ),
+			},
+			{
+				test: /\.s?css$/,
+				include: [
+					/blocks/,
+				],
+				exclude: [
+					/block\.s?css$/,
+				],
+				use: editBlocksCSSPlugin.extract( extractConfig ),
+			},
 			{
 				test: /\.s?css$/,
-				use: ExtractTextPlugin.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',
-							},
-						},
-					],
-				} ),
+				exclude: [
+					/blocks/,
+				],
+				use: mainCSSExtractTextPlugin.extract( extractConfig ),
 			},
 		],
 	},
 	plugins: [
 		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',