qed42.com: Layout Builder Asset Injector module

Layout Builder Asset Injector module

Body

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;

}

Layout Builder Asset Injector Drupal module

| 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

Under Layout Options, check both ‘Use Layout Builder’ and ‘Allow each content item’ options.

Layout Builder Asset Injector Drupal module

Click on the Add Block where you have CSS and JS text field (text area)

Layout Builder Asset Injector Drupal module

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.