reveal.js

Daniel Veza

PreviousNext

Using Drupal since 2014

https://www.drupal.org/u/danielveza
https://github.com/DanielVeza
DanielVeza in DrupalSlack

Layout Builder

But Layout Builder is scary!

Layout Builder modules

Layout Builder Claro

The first module is Layout Builder Claro. This is a simple theming only module that requires no configuration. As a reminder, this is what Layout Builder looks like out of the box -- After enabling Layout Builder Claro, its just been tidied up a touch to look at bit cleaner. All the links like adding a block or section stick out a bit more -- The other benefit of the Layout Builder Claro module is the improvements to the off canvas layout. Looking at the original LB, the off canvas is very small, really sticks out with WYSIWYG field. -- And looking at the off canvas with Layout Builder Claro, it's been given a lot more breathing room. -- And if you wanted to go even more extreme, we're proposing to add an "Advanced mode" to Layout Builder Claro which just takes this another step further. For the sake of this talk, I've made everything visible, but normally the add Block, and section links only show up on hover or focus. It also displays the name of the region and section that is being edited so rather than just seeing that you're editing Section 1, you're seeing that you're editing a content region in a default section, it's just all about giving more clarity to the editor. We've trailed this on one site so far, and the editors love it.

So our Layout builder now looks cleaner, lets help our editors out some more with the editorial process itself. The first module that helps us with this is Layout Builder Lock. Lets revist our Layout Builder screen for a moment. On this page here at the bottom we have a two column layout with an image on the left and four boxes on the right that have details like the cooking time etc. In this case these are pretty static layouts, we don't want editors adding new blocks here and breaking the layout. Out of the box they could do something like adding an image or the body field to one of the boxes in the right hand column, which probably isn't going to look great. -- Layout Builder Lock solves these problems for us. When editing a section you can start checking some of these boxes to restrict what can be done here. The best example of where something like this would be useful would be in a hero section. A hero section is most likely going to have an image, the title and maybe some subtext. For the most part they're going to be themed quite specifically and only work with certain blocks. So for a Hero section, in most cases we would want most of these ticked. We don't want the default blocks to be changed or new blocks added, so we would tick these first four boxes.

Layout Builder Lock

Layout Builder Restrictions

Out of the box with Layout builder, we don't have the control that we want. Editors can play fast and loose with the layouts, and there is an information overload for the editors when they try to add a new block. Out of the box, every single field and block is avialable in Layout Builder. So when editing a recipe, this means there is 76 blocks that can be used out of the box. This includes blocks like "powered by drupal", or under the content fields header there is fields like the revision log. This is where our next module, Layout Builder Restrictions comes to our rescue. It allows us to choose which of these blocks we want to be available to the editor. -- With Layout Builder restictions you can edit which blocks are available to the editor at the section or region level. -- In this instance, I've chosen to remove all blocks under the system category. It's pretty likely none of them will be needed. -- The next two checkboxes are used to allow or restrict cetain blocks in a category. In this example we've started to remove a large chunk of the content type fields. We can pretty safely remove a large chunk of them. How often is the editor going to want to embed the content under default revision or the revision log itself? I'm going to guess that number is zero. -- Now that we are editing the content again, we can see the block config form is much smaller. There was 76 now there is 20. Much better for the editor.

Layout Builder Browser

Adding fields with Layout Builder

Our content editor is now wanting to add the authored by field to the layout. Makes sense, we've restricted the blocks and where they can be added, and this field is allowed here. So, putting on our content editor hat for a second, can anyone see why this might be difficult for our editor? -- This assumes that our poor editor knows what a Field formatter is and when they should use them. When we don't use Layout Builder, this formatter option is hidden from them and set on the Manage Display for the field. This problem will be ever more obvious if we end up adding extra custom formatters. Our editors shouldn't need to know how and when to choose a particular formatter, to them it doesn't even matter what a formatter is. This shows the form when adding the "Authored by" block. -- This is even worse when you look at the authored on field! There is so many options here. In most cases, All this configuration like the formatter, the date format and the timezone really should be hidden from the editor and default values used. So how do we solve this problem? I've tried to keep this talk light on code and focusing on quick wins with modules, but I think this is too important to leave out.


abstract class FieldBlockBase extends BlockBase {

  abstract protected function getFieldItemList();

  abstract protected function getFormatterSettings();

  public function build(): array {
    return $this->getFieldItemList()?->view(
      $this->getFormatterSettings() + ['label' => 'hidden']
    ) ?: [
      '#cache' => [
        'tags' => [
          'node_list',
        ],
      ],
    ];
  }
}


final class AuthoredByBlock extends FieldBlockBase {

  protected function getFieldItemList(): ?FieldItemListInterface {
    $node = $this->getContextValue('node');
    return $node->get('uid');
  }

  protected function getFormatterSettings(): array {
    return [
      'type' => 'author',
    ];
  }
}

So Layout builder is an awesome tool that empowers our editors to make dynamic content, with its visual layout being much easer to use over the generic node edit form. But it does need some help. -- With Layout Builder Claro, we can make our Layout builder look nicer, and make it even easier to use with the off canvas clean up. -- We have our three modules that enable us provide a cleaner content editorial experience. These help to prevent layouts from being broken, and stop information overload for the editors when they're adding a block. -- And finally we have our custom block plugins, which takes information like field formatters out of the editors hands and allows them to just focus on the content.

Summary

Layout Builder Claro
Layout Builder Restictions

Layout Builder Lock

Layout Builder Browser
Custom block plugins for fields.

Questions