Drupal’s Layout Initiative and component-based theming

A quick overview of some things happening with Drupal’s Layout Initiative from the perspective of component-based theming, a theme development approach that has been gaining popularity in the past few years.

Layouts in core

Layouts have been an important tool in component-based theming as they can be used to map data to component templates. Layouts can be used with well-established contrib modules like Display Suite and Panels, and the UI Patterns module can expose its patterns as layouts.

Field Layout

An experimental Field Layout module was also added in Drupal 8.3. Field Layout provides a simple UI for arranging rows of entity fields into regions of a single layout, in a very similar way to Display Suite. Field Layout was planned to be stabilized in Drupal 8.5, but it continues to be an experimental module.

Layout Builder

An experimental Layout Builder module was added in Drupal 8.5. Layout Builder provides a UI with a visual preview and it supports using multiple layouts together, placing blocks in layout regions and creating layouts for individual pieces of content. It is powerful and unique and a huge step forward in capabilities offered by core. Layout Builder is currently planned to be stabilized in Drupal 8.7.

Field Layout might be removed from core

Layout Builder has essentially deprecated much of what Field Layout provides, and uses a completely different technical approach. Layout Builder does not currently support form displays, however. As Field Layout is still experimental, it has been proposed that Field Layout should be removed from core after moving its form display capabilities to core’s Field UI.

Modern UIs can be challenging to build in an accessible way, as the WordPress community has sadly discovered recently. Layout Builder is no exception, and it might prove difficult to pass Drupal’s accessibility gate in time to stabilize Layout Builder in Drupal 8.7. Because of this it has been proposed that Layout Builder provide an alternative accessible UI without a visual preview, not unlike Field Layout or the block admin UI.

Component-based theming use cases

Both aforementioned types of UIs are useful from a component-based theming perspective. However, a simple non-visual UI can be a better option in many cases. Layout definitions for components might include regions for adding things that are not displayed, for example.

Such a case can be found in my old blog post about using UI Patterns. The Code component described in that blog post defines a layout region for adding the code language. Instead of displaying the value, the component uses it as a part of a CSS class name.

Another example might be a component that defines a layout region for an image and a region for text, which the component then displays over the image. Such visually overlapping regions would be unnecessarily hard to implement perfectly in a UI with a visual preview, when a simple non-visual UI could just as well be used.

Now is a good time to get involved in the discussion

Personally I think it would be really great to have an alternative simple UI without a visual preview for layouts in core. If you would like to express your opinion on this, or can think of further use cases for such a UI, now is a good time to get involved in the related issues on Drupal.org:

I am moving back to Drupal and to ClassicPress ..and ending my work with WP with the Gut. I do *not* want a Wixy environment to work in. Loved reading "Personally I think it would be really great to have an alternative simple UI without a visual preview for layouts in core." My love for Drupal in the past was always because I was provided tools I had to master (hard work but do-able) to create anything in anyway without having to dig in and become an expert on higher levels of Javascript and React and Redux. I don't want to be stuck between having to master those tools to dev a custom theme or feeling a need to rip out the bars on a wixy ui.