Thinking in Components!

Component-Based Theming in Drupal'

When it comes to Drupal themes the easy and fast way is to just theme your nodes or taxonomies as we see it. It is very likely that you need to theme the same component more than once.

What if we thought about building components so that they are configurable and reusable across different entities, views or blocks. Each component is the single point of view inside your theme. This is especially important for utility first frameworks like TailwindCSS.

If we could do that then we would be able to deliver your theme at a much faster. It is much faster to add new content types.

Drupal supports two possibilities for component based theming. Both ways are working with Wingsuit.

1. Presenter template

The presenter template is a Drupal theme template which includes the component template and provides all need variables. If you need to theme your link field with the button component you create a field template field--field-link.html.twig and include the button component like this:

{%
  include "@atoms/button/button.twig" with {"text": item.content['#title'], "url": item.content['#url'].toString() }
%}

2. UI Patterns Ecosystem

With UI Patterns you can map your entity fields to a component without additional mapping code. The UI Patterns ecosystem offering additional modules to map nearly any corner of Drupal to a component.