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

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 or 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'

Visibility rules for showing style options per block

"include" and "exclude" attributes are available to only include certain blocks or to exclude certain blocks from accessing your custom block styles. Don't use both "include" and "exclude" at the same time.

Pass in a "block plugin id" or a custom block content "block content type" bundle name into the "include" or "exclude" attributes.

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.