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

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 Caveats: It was suggested that the reverse be done, by using an edit.scss to hold editor specific styles. This seemed pretty daunting a task to me and I did not fully grasp what benefit that would bring over this approach either. ** Testing Instructions ** build the files via `npm run build` or `npm run dev` Verify that the gallery columns work both on the front end as well as back end. Verify that the drop cap style still works on the back end.
WordPress · Jun 24, 2017 · 19e54d5 · 19e54d5
1 parent ba3f4cb
commit 19e54d5
Show file tree

Hide file tree

Showing 8 changed files with 137 additions and 61 deletions.
diff --git a/blocks/editable/block.scss 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
@@ -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
@@ -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
@@ -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
@@ -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,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
@@ -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
@@ -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',