How to add custom styling to our blocks?
Note, this feature is used for including styling and scripts for individual blocks. To add the framework stylesheet and other global theme stylesheets into the block editor, use the Editor stylesheets Theme settings.
Sometimes our custom blocks need special CSS styling that is not covered by the framework styling or by the global theme stylesheet.
The best approach is to create a special CSS stylesheet that contains the block styling and to instruct WordPress to load it only if the block is displayed on the current page.
Create a new CSS file
To do that, create a new CSS file with all the required CSS styling. First, we create the folder
blocks that will contain our block assets. The name doesn’t have to be
blocks, of course.
Next, we create a new file in the Project panel by right-clicking on the
We will name the file
fancy.css to the page.
IMPORTANT: CSS rules should be scoped to the target block. The best way to do that is to add a class to the main block element and then use that class in CSS selectors.
Let’s go back to our About me block and add the class
fancy-block to its main
The right-click context menu or the CMD + L open up the Assign class dialog:
CSS rules use the class to scope the styling to the block. Here we will add a short decorative line below
fancy.css in the Project panel to open the file in the code editor:
We then include the CSS file with the Style setting on the Block action. The value is the relative url of the stylesheet, in relation to the project folder. In our case,
The stylesheet will be included both in the editor and on the front-end.
Including a stylesheet only in the editor
Use Editor style setting to add a stylesheet that should be included only in the editor.
Both Style setting and Editor style setting can be defined.
Sharing the same CSS stylesheets between more blocks
A group of blocks can share the same stylesheet. Just add it to each block with the Style setting on their Block actions.
Pinegrow generates resource handles based on the stylesheet name, so that the stylesheet will be included only once, even if more blocks are using it.
Including the framework stylesheet in the Block editor
Our blocks usually rely on styling provided by the global theme stylesheet or framework stylesheet such as Bootstrap and Tailwind CSS. Without these styles block don’t show up correctly in the block editor. Use Theme settings to include theme stylesheets in the block editor.
Loading only resources of blocks that are used on the page
By default, WordPress loads styles and scripts of all registered blocks on the front-end, regardless if blocks are used on the page or not.
To load only assets of blocks that are used on the page, add the following code to
add_filter( 'should_load_separate_core_block_assets', '__return_true' );
Starting from Pinegrow Web Editor 7.8, WordPress plugin 1.0.15 and Theme Converter 2.2 the WordPress builder can do this for you if you enable the Load only styles and scripts of blocks that are displayed on the front-end checkbox in project settings:
This completes the Create Your First Block guide.
Explore the rest of Blocks documentation and tutorials to learn more.