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