Drupal・2 min read・Last update on June 1, 2020

# Layout Builder Asset Injector module

 

 

 

 ![Layout Builder Asset Injector module](/sites/default/files/remediation-media/64e5de2b811d72e03bc73821_Drupal_20Contrib_201.avif) 

 



 

   Table of contents  - [| Benefits ](#benefits)
- [| CSS Injector](#css-injector)
- [| JS Injector](#js-injector)
- [| How does it work? ](#how-does-it-work)
- [| Implementing the Layout Builder asset injector module ](#implementing-the-layout-builder-asset-injector-module)
- [| Developer support](#developer-support)
- [| Module download link ](#module-download-link)
- [| Alternative module links ](#alternative-module-links)
 
  

 

### | 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;

}

```

  ![Layout Builder Asset Injector Drupal module](/sites/default/files/styles/uncropped_720w_webp/public/c3-body-media/25d9fa541690ad089a4a338f.png.webp?itok=c55BcA_O) ### | 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:

  ![Layout Builder Asset Injector Drupal module](/sites/default/files/styles/uncropped_720w_webp/public/c3-body-media/4de4414487bb0b242fc37125.png.webp?itok=0b85vN4E) - Under Layout Options, check both ‘Use Layout Builder’ and ‘Allow each content item’ options.

  ![Layout Builder Asset Injector Drupal module](/sites/default/files/styles/uncropped_720w_webp/public/c3-body-media/591e299f24c6ce062a858c3e.png.webp?itok=bnAq8FAx) - Click on the Add Block where you have CSS and JS text field (text area)

  ![Layout Builder Asset Injector Drupal module](/sites/default/files/styles/uncropped_720w_webp/public/c3-body-media/fbaef859d6883a18ca4fc56a.png.webp?itok=N1rp7Qac) *To understand Layout Builder in detail refer* [*https://www.drupal.org/docs/8/core/modules/layout-builder*](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.*

  ![Layout Builder Asset Injector Drupal module](/sites/default/files/styles/uncropped_720w_webp/public/c3-body-media/10ab6affed015c4ce76a9bef.png.webp?itok=VcEHiJn1) - Upon saving the configuration, it creates a block specific unique file in the backend.

  ![Layout Builder Asset Injector Drupal module](/sites/default/files/styles/uncropped_720w_webp/public/c3-body-media/5de40a727c6bf59a75c2508b.png.webp?itok=mcn_PIXw) - In the frontend, you can see the CSS applied to the respective block.

  ![ https://www.youtube.com/watch?v=3Ogya_66GDU&feature=youtu.be](/sites/default/files/styles/uncropped_720w_webp/public/c3-body-media/8bdc80b13adf26137fad45cd.png.webp?itok=ZI-EYmiO) ### | 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>

https://youtu.be/v3NYUYyg-3s

### | Developer support

Kishor Kolekar: [https://www.drupal.org/u/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](https://www.drupal.org/u/hardik_patel_12)

Naresh Bavaskar: [https://www.drupal.org/u/naresh\_bavaskar](https://www.drupal.org/u/naresh_bavaskar)

### | Module download link 

[https://www.drupal.org/project/layout\_builder\_asset](https://www.drupal.org/project/layout_builder_asset)

### | Alternative module links 

[https://www.drupal.org/project/asset\_injector](https://www.drupal.org/project/asset_injector)

[https://www.drupal.org/project/layout\_builder\_styles](https://www.drupal.org/project/layout_builder_styles)

 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.

 



Written by

Kishor Kolekar

 

 

 

 

 

 

 ## We'd love to talk about your business objectives

 [ Contact Us  ](/contact)