Block Style Plugins

This is a fancy way to allow editors to add classes to blocks via the UI.

Tutorial Video: https://youtu.be/Y0t8owlV2_4 - warning, this video is using some deprecated class methods.

Block Style Plugins is an API module that allows a module or theme to add style options to block configuration by creating a custom plugin. In its simplest implementation, a UI element allows predefined classes to be added to a block so that CSS in a theme can alter a block's display.

Site Editors can't be expected to know CSS class names or Twig templates to provide theme suggestions. So instead this module allows a simple form UI that can be preconfigured with options on a Block instance's configuration page to choose how a block should be displayed.

The other advantage is that a block's style is now separate from its content.

Basic Setup

Documentation: https://www.drupal.org/docs/8/modules/block-style-plugins

The easiest way to get started is to use a single yaml file to declare each plugin and the fields to display. This can go into either a module or better yet, a theme. Name it "mymodule.blockstyle.yml" or "mytheme.blockstyle.yml" replacing the first part with the name of your module or theme.

sample_block_style:
  label: 'Sample Block Style'
  form:
    field_name:
      '#type': 'textfield'
      '#title': 'Add a custom css class'
      '#default_value': 'my-class'

Features

• Include or Exclude styles from appearing on specific blocks.
• Suggest a Twig Template to be used for a block.
• Basic form elements can be defined via Yaml.
• Advanced usage allows defining a PHP class plugin.

Layout Builder support in the 8.x-2.x branch

Support for the core Layout Builder has been added to the 8.x-2.x. However, it currently requires a core patch #3015152: Support third party settings for components within a section.

A new "Style settings" link will appear in the contextual link of each block placed in a layout Section. Styles can then be selected and applied to the block.

If the contextual link does not appear, you will need to clear your "browsers" session cache. You can do this in the browser console with window.sessionStorage.clear().

In addition, adding a plugin attribute of layout_builder_embed_form: true will allow a style's config to be embedded directly on Layout Builder's block configuration tray.

Layout Builder Sections can now also have styles on nodes by adding a plugin attribute of type: section. Sections on all entity types will be available after #3062862: Third party should be allowed to alter the section render array is committed. In addition, adding styles to a section only works on updated sections unless you also apply the #3044117: Add getter for layout object in Layout Builder's ConfigureSectionForm patch. Without the patch you will have to add a new section and then edit it to get style options to appear.

Deprecated methods in the 8.x-1.x branch

Several methods have been deprecated so that a more standardized approach can be used.
See release notes for https://www.drupal.org/project/block_style_plugins/releases/8.x-1.3.

Similar Modules

• Block Class - Manually add a CSS class to a block in a text field.
• Block Styles - Select predefined Twig templates to apply to the block.html.twig file.
• Layout Builder Styles - Add custom CSS classes via the UI as entities.