Drupal 8’s Layout Builder allows content editors and site builders to easily and quickly create visual layouts for displaying content. Users can customize how content is arranged on a single page, or across types of content, or even create custom landing pages with an easy to use drag-and-drop interface. Our recently contributed module – The Layout Builder Asset Injector module is definitely not a replacement for theming, but it provides site administrators with a quick and easy approach. The Layout Builder Asset Injector module allows site builders to add CSS and JS to the layout builder blocks.
| Benefits
-
It allows you to inject CSS and JS within the layout builder blocks without the need to add it in the codebase.
-
Append unique CSS and scripts specific to layout builder blocks
-
It provides content editors with basic knowledge of CSS and JS to style their individual layout builder blocks and add short JS scripts to modify the behaviour.
-
Instead of adding CSS and JS on a page level, this module allows you to inject them on an individual block.
| CSS Injector
CSS Injector allows administrators to inject CSS into the page output based on configurable rules. It’s useful for adding simple CSS tweaks without modifying a site’s official theme.
| JS Injector
JS Injector allows administrators to inject JS into the page output based on configurable rules. It’s useful for adding simple JS tweaks without modifying a site’s official theme.
Note: Block class will be appended automatically to each CSS.
For example when we add a CSS as given below:
h1.node__title {
background-color:red;
}
It will automatically append the class of the block for which CSS is added once saved.
.block-field-blocknodepagebody h2.node__title{
background-color:red;
}
| How does it work?
-
Enable the Layout Builder Asset module
-
After you enable the module, enable the layout option from the manage display section as shown below:
-
Under Layout Options, check both ‘Use Layout Builder’ and ‘Allow each content item’ options.
-
Click on the Add Block where you have CSS and JS text field (text area)
To understand Layout Builder in detail refer https://www.drupal.org/docs/8/core/modules/layout-builder
-
You can add your styling and scripts under the CSS and JS fields respectively
-
To make the styling and scripts specific to a block, add classes under the Classes text field. This class should be unique so as to reflect scripts and styling specific to a block.
-
On adding the CSS and JS and saving the configuration, it will automatically prefix the CSS with a custom class added.
Note: You don’t need to add it manually.
-
Upon saving the configuration, it creates a block specific unique file in the backend.
-
In the frontend, you can see the CSS applied to the respective block.
| Implementing the Layout Builder asset injector module
Click here for the steps to install the Layout Builder asset injector module – https://www.drupal.org/docs/8/extending-drupal-8/installing-drupal-8-modules
| Developer support
Kishor Kolekar: https://www.drupal.org/u/kishor_kolekar
Harshal Pradhan: https://www.drupal.org/u/hash6
Abhishek Mazumdar: https://www.drupal.org/u/abhisekmazumdar
Hardik Patel: https://www.drupal.org/u/hardik_patel_12
Naresh Bavaskar: https://www.drupal.org/u/naresh_bavaskar
| Module download link
https://www.drupal.org/project/layout_builder_asset
| Alternative module links
https://www.drupal.org/project/asset_injector
https://www.drupal.org/project/layout_builder_styles
Kishor Kolekar
Mon, 06/01/2020 – 18:16