Aten Design Group: Simplified Drupal Views Styling with Custom Style Plugins

Let’s imagine that we have a simple grid component in our design system. This simple component accepts props for the items and column_count. This simple grid is going to be used all throughout the project and specifically across multiple View displays. There are a couple of common approaches to tackle this.

No One Size Fits All

Before getting into the markup, we need to align our new template with other View style plugin templates:

Apply the Styles Globally

Drupal’s shift to component based styling has been a much welcome change to how we plan out and organize a Drupal theme. While this has gone a long way in helping reduce duplication within our styles, figuring out the best way to apply the component styles to Drupal structures can sometimes be a challenge. Modules like SDC: Display are beginning to bridge this gap, but this doesn’t address every use case. One such scenario is applying component styles to a Views list.Another option is to move all of the styling to the Twig templates for those View displays. For example, on a list of blog posts we could create a template like views-view-unformatted–blog-posts.html.twig. Once we have that template, we call our grid component:

Moving Back into the UI

First, we modify our plugin class:Creating a custom Views style plugin gives us the best of both worlds. We still can leverage all the benefits of SDC, but expose all the options to site builders to apply to Views keeping the UI intact with the output. Let’s walk through the steps to get it done.

Adding Configuration to the Plugin

One option is to make the grid styles globally available, then use something like the HTML List plugin provided by Views to add the classes we need through the UI. While it keeps all of the config in Drupal’s UI where other developers might first look to replicate and make changes, we’ve made styles global that we likely don’t need on every page. It also requires detailed knowledge of the design system to know which CSS classes to apply and where to apply them to accomplish the desired styles.Currently the way our style plugin is set up assumes we want it to work the same everywhere. However most front-end systems like SDC allow components to be modified by passing props into them. For a grid component, allowing for the number of columns to be configured would give this component more flexibility. We can easily choose which props are exposed in Views to site builders.

Next, we need to make these options available to our Twig file. To do this, we update our preprocess function from earlier:

To start, in a custom module, create a new style plugin within Drupalmy_modulePluginviewsstyle. This plugin should extend DrupalviewsPluginviewsstyleStylePluginBase. At its simplest, all a style plugin needs is: