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