Skip to content

Commit 75330f5

Browse files
BE-Webdesignyouknowriad
BE-Webdesign
authored and
youknowriad
committed
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.
1 parent de00f70 commit 75330f5

File tree

7 files changed

+156
-65
lines changed

7 files changed

+156
-65
lines changed

‎blocks/editable/block.scss

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
.drop-cap-true .blocks-editable__tinymce:not( :focus ) {
2+
&:first-letter {
3+
float: left;
4+
font-size: 4.1em;
5+
line-height: 0.7;
6+
font-family: serif;
7+
font-weight: bold;
8+
margin: .07em .23em 0 0;
9+
text-transform: uppercase;
10+
font-style: normal;
11+
}
12+
}
13+
14+
.drop-cap-true:not( :focus ) {
15+
overflow: hidden;
16+
}

‎blocks/editable/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { BACKSPACE, DELETE, ENTER } from 'utils/keycodes';
1818
* Internal dependencies
1919
*/
2020
import './style.scss';
21+
import './block.scss';
2122
import FormatToolbar from './format-toolbar';
2223
import TinyMCE from './tinymce';
2324

‎blocks/library/gallery/block.scss

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
.wp-block-gallery {
2+
display: flex;
3+
flex-wrap: wrap;
4+
5+
&:not( .components-placeholder ) {
6+
margin-right: -16px;
7+
margin-bottom: -16px;
8+
}
9+
10+
.blocks-gallery-image {
11+
flex-grow: 1;
12+
margin: 0 16px 16px 0;
13+
14+
img {
15+
max-width: 100%;
16+
}
17+
}
18+
19+
// Cropped
20+
&.is-cropped .blocks-gallery-image {
21+
img {
22+
width: 100%;
23+
height: 100%;
24+
object-fit: cover;
25+
}
26+
27+
// Alas, IE11+ doesn't support object-fit
28+
_:-ms-lang(x), img {
29+
height: auto;
30+
width: auto;
31+
}
32+
}
33+
34+
&.columns-1 figure {
35+
width: calc(100% / 1 - 2 * 8px);
36+
}
37+
&.columns-2 figure {
38+
width: calc(100% / 2 - 3 * 8px);
39+
}
40+
&.columns-3 figure {
41+
width: calc(100% / 3 - 4 * 8px);
42+
}
43+
&.columns-4 figure {
44+
width: calc(100% / 4 - 5 * 8px);
45+
}
46+
&.columns-5 figure {
47+
width: calc(100% / 5 - 6 * 8px);
48+
}
49+
&.columns-6 figure {
50+
width: calc(100% / 6 - 7 * 8px);
51+
}
52+
&.columns-7 figure {
53+
width: calc(100% / 7 - 8 * 8px);
54+
}
55+
&.columns-8 figure {
56+
width: calc(100% / 8 - 9 * 8px);
57+
}
58+
}

‎blocks/library/gallery/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { Toolbar, Placeholder } from 'components';
88
* Internal dependencies
99
*/
1010
import './style.scss';
11+
import './block.scss';
1112
import { registerBlockType, query as hpq } from '../../api';
1213
import MediaUploadButton from '../../media-upload-button';
1314
import InspectorControls from '../../inspector-controls';

‎blocks/library/gallery/style.scss

-60
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,3 @@
1-
2-
.wp-block-gallery {
3-
display: flex;
4-
flex-wrap: wrap;
5-
6-
&:not( .components-placeholder ) {
7-
margin-right: -16px;
8-
margin-bottom: -16px;
9-
}
10-
11-
.blocks-gallery-image {
12-
flex-grow: 1;
13-
margin: 0 16px 16px 0;
14-
15-
img {
16-
max-width: 100%;
17-
}
18-
}
19-
20-
// Cropped
21-
&.is-cropped .blocks-gallery-image {
22-
img {
23-
width: 100%;
24-
height: 100%;
25-
object-fit: cover;
26-
}
27-
28-
// Alas, IE11+ doesn't support object-fit
29-
_:-ms-lang(x), img {
30-
height: auto;
31-
width: auto;
32-
}
33-
}
34-
35-
&.columns-1 figure {
36-
width: calc(100% / 1 - 2 * 8px);
37-
}
38-
&.columns-2 figure {
39-
width: calc(100% / 2 - 3 * 8px);
40-
}
41-
&.columns-3 figure {
42-
width: calc(100% / 3 - 4 * 8px);
43-
}
44-
&.columns-4 figure {
45-
width: calc(100% / 4 - 5 * 8px);
46-
}
47-
&.columns-5 figure {
48-
width: calc(100% / 5 - 6 * 8px);
49-
}
50-
&.columns-6 figure {
51-
width: calc(100% / 6 - 7 * 8px);
52-
}
53-
&.columns-7 figure {
54-
width: calc(100% / 7 - 8 * 8px);
55-
}
56-
&.columns-8 figure {
57-
width: calc(100% / 8 - 9 * 8px);
58-
}
59-
}
60-
611
.wp-block-gallery.is-placeholder {
622
margin: -15px;
633
padding: 6em 0;

‎lib/client-assets.php

+16-1
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,12 @@ function gutenberg_register_scripts_and_styles() {
120120
array(),
121121
filemtime( gutenberg_dir_path() . 'blocks/build/style.css' )
122122
);
123+
wp_register_style(
124+
'wp-edit-blocks',
125+
gutenberg_url( 'blocks/build/edit-blocks.css' ),
126+
array(),
127+
filemtime( gutenberg_dir_path() . 'blocks/build/edit-blocks.css' )
128+
);
123129
}
124130
add_action( 'init', 'gutenberg_register_scripts_and_styles' );
125131

@@ -453,8 +459,17 @@ function gutenberg_scripts_and_styles( $hook ) {
453459
wp_enqueue_style(
454460
'wp-editor',
455461
gutenberg_url( 'editor/build/style.css' ),
456-
array( 'wp-components', 'wp-blocks' ),
462+
array( 'wp-components', 'wp-blocks', 'wp-edit-blocks' ),
457463
filemtime( gutenberg_dir_path() . 'editor/build/style.css' )
458464
);
459465
}
460466
add_action( 'admin_enqueue_scripts', 'gutenberg_scripts_and_styles' );
467+
468+
/**
469+
* Handles the enqueueing of front end scripts and styles from Gutenberg.
470+
*/
471+
function gutenberg_frontend_scripts_and_styles() {
472+
// Enqueue basic styles built out of Gutenberg through npm build.
473+
wp_enqueue_style( 'wp-blocks' );
474+
}
475+
add_action( 'wp_enqueue_scripts', 'gutenberg_frontend_scripts_and_styles' );

‎webpack.config.js

+64-4
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,21 @@ const glob = require( 'glob' );
66
const webpack = require( 'webpack' );
77
const ExtractTextPlugin = require( 'extract-text-webpack-plugin' );
88

9+
// Main CSS loader for everything but blocks..
10+
const MainCSSExtractTextPlugin = new ExtractTextPlugin( {
11+
filename: './[name]/build/style.css',
12+
} );
13+
14+
// CSS loader for styles specific to block editing.
15+
const EditBlocksCSSPlugin = new ExtractTextPlugin( {
16+
filename: './blocks/build/edit-blocks.css',
17+
} );
18+
19+
// CSS loader for styles specific to blocks in general.
20+
const BlocksCSSPlugin = new ExtractTextPlugin( {
21+
filename: './blocks/build/style.css',
22+
} );
23+
924
const entryPointNames = [
1025
'element',
1126
'i18n',
@@ -64,9 +79,54 @@ const config = {
6479
exclude: /node_modules/,
6580
use: 'babel-loader',
6681
},
82+
{
83+
test: /block\.s?css$/,
84+
use: BlocksCSSPlugin.extract( {
85+
use: [
86+
{ loader: 'raw-loader' },
87+
{ loader: 'postcss-loader' },
88+
{
89+
loader: 'sass-loader',
90+
query: {
91+
includePaths: [ 'editor/assets/stylesheets' ],
92+
data: '@import "variables"; @import "mixins"; @import "animations";@import "z-index";',
93+
outputStyle: 'production' === process.env.NODE_ENV ?
94+
'compressed' : 'nested',
95+
},
96+
},
97+
],
98+
} ),
99+
},
67100
{
68101
test: /\.s?css$/,
69-
use: ExtractTextPlugin.extract( {
102+
include: [
103+
/blocks/,
104+
],
105+
exclude: [
106+
/block\.s?css$/,
107+
],
108+
use: EditBlocksCSSPlugin.extract( {
109+
use: [
110+
{ loader: 'raw-loader' },
111+
{ loader: 'postcss-loader' },
112+
{
113+
loader: 'sass-loader',
114+
query: {
115+
includePaths: [ 'editor/assets/stylesheets' ],
116+
data: '@import "variables"; @import "mixins"; @import "animations";@import "z-index";',
117+
outputStyle: 'production' === process.env.NODE_ENV ?
118+
'compressed' : 'nested',
119+
},
120+
},
121+
],
122+
} ),
123+
},
124+
{
125+
test: /\.s?css$/,
126+
exclude: [
127+
/blocks/,
128+
],
129+
use: MainCSSExtractTextPlugin.extract( {
70130
use: [
71131
{ loader: 'raw-loader' },
72132
{ loader: 'postcss-loader' },
@@ -88,9 +148,9 @@ const config = {
88148
new webpack.DefinePlugin( {
89149
'process.env.NODE_ENV': JSON.stringify( process.env.NODE_ENV || 'development' ),
90150
} ),
91-
new ExtractTextPlugin( {
92-
filename: './[name]/build/style.css',
93-
} ),
151+
BlocksCSSPlugin,
152+
EditBlocksCSSPlugin,
153+
MainCSSExtractTextPlugin,
94154
new webpack.LoaderOptionsPlugin( {
95155
minimize: process.env.NODE_ENV === 'production',
96156
debug: process.env.NODE_ENV !== 'production',

0 commit comments

Comments
 (0)