Layout Builder API in Drupal

In their simplest form layout plugins in Drupal Layout Builder define the part of the content output that can't be changed. For example a three column layout will consist of three equal columns every time an editor decides to use it as the layout section. The editor can place whatever they want into the three columns. But they can not change the overall layout. This restricts editorial capabilities of using layout plugins since in real life a three column layout may need to consist of a wider middle column and narrower side columns, allow for column headings, or other customizations.

This flexibility is accomplished by creating, and exposing, configuration options for layout plugins in Drupal's Layout Builder. In more advanced cases, we can take this flexibility further by exposing an interface editors to dynamically define layout plugins.

In this tutorial we'll:

• Learn how to use custom PHP classes in the layout plugin annotation
• Learn what annotations properties can be used for custom layout declaration
• Define the concept of derivatives and outline scenarios for using them
• How to declare static single layouts using YAML format

By the end of this tutorial you'll learn advanced ways of declaring configurable custom layout plugins.

When building a site using Drupal's Layout Builder, it's a good idea to keep the number of layout plugins manageable. In many cases it's better to create a single layout plugin that can be re-used rather than duplicate a layout multiple times to accommodate minor variations. One way to do this is to provide editors with configuration options that will change the output when a layout is used.

For example, imagine you need to provide variations of a 3-column layout where the columns are different widths. You could define a new layout for each variation. Or you could define a single layout with a configuration option that allows a user to choose the column widths. The latter approach reduces code duplication, and makes the codebase easier to maintain.

In this tutorial we'll:

• Learn how to declare advance layout plugins with configurable settings in the Drupal Layout Builder
• Extend the LayoutDefault class and create a custom settings form that editors will see when using a layout
• Use the provided configuration values in the layout's Twig template file to modify the layout when it is rendered

By the end of this tutorial you should be able to expose layout-related settings to editors, allowing for more flexibility in custom layout plugins.

Layout plugins can be dynamically generated based on configuration using plugin derivatives. This allows developers to provide Drupal site administrators with a UI for creating new layout plugins, or to automatically register layout plugins based on the environment.

This is useful in situations where it's not enough to define a set of pre-configured layouts to use in the Layout Builder. Instead, you need to empower editors to declare their own new layout plugins without writing any code. Derivatives could also be used in scenarios where the layouts that should be made available depend on configuration set elsewhere in the module. Or, you might have a scenario where you want to have multiple different 2-column layouts, and for those layouts to have different names, so that they can be themed differently depending on which one is used.

In this tutorial we'll:

• Create a user interface that allows editors to dynamically define layouts via configuration.
• Learn how to set up a plugin deriver that creates layout plugins based on configuration.
• Create custom dynamic layout plugins with variable numbers of columns.

By the end of this tutorial you'll know how to declare dynamic custom layout plugins using derivatives.