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

) Related to #963. This PR splits up some of our CSS build process to have seperate files generated for blocks and editor specific styles of blocks. Block specific styles are now loaded both on the front-end and back end. Styles that should appear on both are currently in a block.scss file. Styles added: wp-edit-blocks: blocks/build/edit-block.css wp-blocks: blocks/build/style.css Adding documentation about the build process, updating variable names, reducing duplication. Making the drop cap style work on the front end as well as gallery styles.
WordPress · Jun 29, 2017 · 8dfc4c5 · 8dfc4c5
1 parent de00f70
commit 8dfc4c5
Show file tree

Hide file tree

Showing 8 changed files with 162 additions and 82 deletions.
diff --git a/blocks/library/gallery/block.scss b/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);
+	}
+}
diff --git 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
@@ -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;

diff --git a/blocks/library/text/block.scss b/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;
+}
diff --git a/blocks/library/text/index.js b/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>;
 	},
 } );
 

diff --git a/docs/coding-guidelines.md b/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

diff --git 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' );
 
@@ -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' );
diff --git a/webpack.config.js b/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',