This article shows an example of how to use the Sass files we setup in the article Extending the WordPress Create Block Script webpack Config with multiple blocks within the same plugin. If you have not read that article, please read it first.
This article is for an older version of the Create Block Script
Although the theory can still be applied, some of the information in this article may no longer be compatible with the latest create block script. You can view our updated Create Block Script Guide here.
We also have an updated guide about adding additional entry points to webpack so you can have multiple CSS files generated.
Setting up Multiple Blocks
As I mentioned in the previous article, adding the Sass imports to the index of the plugin allows us to define multiple blocks within the plugin, each with their own editor.scss and style.scss files.
The webpack config we have setup will take the editor.scss and style.scss files for each block, and compile it into the /editor.css and /style.css files at the root of the plugin.
To try this out, lets move the /src/index.js and /src/scss files and folders into /src/blocks/block-one, then copy this block into /src/blocks/block-two. Finally create a new file at /src/index.js.
You should now have the following file structure:
/src/blocks/block-one/scss/editor.scss/style.scss
-
/index.js
/block-two//scss/editor.scss/style.scss
/index.js
/index.js
Then lets make some minor changes to /block-two so that it is registered as a unique block. Simply alter the following line in the /src/blocks/block-two/index.js file from:
registerBlockType( 'wcltd/wholesome-notes', {to:
registerBlockType( 'wcltd/wholesome-notes-2', {and change the name of the file from Wholesome Notes to Wholesome Notes 2:
title: __(
'Wholesome Notes 2',
'wcltd'
),Altering the Sass
In /src/blocks/block-two/scss/editor.scss and /src/blocks/block-two/scss/style.scss make some minor amendments, so that we will recognise the changes in the compiled files.
Also, let’s not forget to alter the classes in those files to use the new namespace .wp-block-wcltd-wholesome-notes-2.
Here are the amendments I made:
/src/blocks/block-two/scss/editor.scss
.wp-block-wcltd-wholesome-notes-2 {
border: 1px dotted #0f0;
}/src/blocks/block-two/scss/style.scss
.wp-block-wcltd-wholesome-notes-2 {
background-color: #fff;
color: #000;
padding: 2px;
}Nothing grand, I just changed a few changed colours.
Setting up the Index File
Now lets edit the file at /src/blocks/index.js. We just need to import the two blocks we have created:
import './blocks/block-one/index';
import './blocks/block-two/index';Viewing the Results
Now let’s run npm start and view the results of the outputted files.
The /editor.css file looks like this:
/**
* The following styles get applied inside the editor only.
*
* Replace them with your own styles or remove the file completely.
*/
.wp-block-wcltd-wholesome-notes {
border: 1px dotted #f00; }
/**
* The following styles get applied inside the editor only.
*
* Replace them with your own styles or remove the file completely.
*/
.wp-block-wcltd-wholesome-notes-2 {
border: 1px dotted #0f0; }See how the Sass from the editor.scss files of each block within the plugin have been compiled into this single /editor.css file.
Now let’s look at the /style.css file:
/**
* The following styles get applied both on the front of your site
* and in the editor.
*
* Replace them with your own styles or remove the file completely.
*/
.wp-block-wcltd-wholesome-notes {
background-color: #000;
color: #fff;
padding: 2px; }
/**
* The following styles get applied both on the front of your site
* and in the editor.
*
* Replace them with your own styles or remove the file completely.
*/
.wp-block-wcltd-wholesome-notes-2 {
background-color: #fff;
color: #000;
padding: 2px; }
You can see that the style.scss files of each block within the plugin have been compiled into this single /style.css file.