Add support for Layout builder

[Decipher]

Is your feature request related to a problem? Please describe. As an Editor, I want to create Landing Pages using Layout Builder in the Drupal Admin UI and have them rendered accordingly in the FE

Describe the solution you'd like

• [ ] Add a Layout Builder module/component: DruxtLayoutBuilder
  • [ ] Add slots for each section, rendering via a relevant Layout component (e.g., layout_onecol -> DruxtLayoutBuilderLayoutOnecol?)
• [ ] Add support for Layout Builder to the DruxtEntity component?

An example usage might be:

<template>
  <DruxtEntity type="node--page" :uuid="uuid">
    <template #default="{ entity }">
      <DruxtLayoutBuilder :entity="entity" />
    </template>
  </DruxtEntity>
</template>

Or:

<template>
  <DruxtEntity :layout-builder="true" type="node--page" :uuid="uuid" />
</template>

Describe alternatives you've considered

Additional context

• Drupal core patch required: https://www.drupal.org/project/drupal/issues/2942975
• Layout builder attaches data to Entity attributes: layout_builder__layout

[Decipher]

There's a patch to expose Layout Builder data to the JSON:API in the following issue: https://www.drupal.org/project/drupal/issues/2942975

[Decipher]

To add the current WIP Drupal core patch you will need to:

1. composer require cweagans/composer-patches
2. Add the following to your composer.json:

       "patches": {
           "drupal/core": {
               "https://www.drupal.org/project/drupal/issues/2942975": "https://www.drupal.org/files/issues/2021-09-10/2942975-layout_builder_rest_e866ee63_reverted_0.patch"
           }
       }
   

Edit: Updated patch

After doing that, you will have access to the Layout Builder data on the DruxtEntity components:

[Decipher]

It appears that even with the Drupal core patch that Layout Builder only exposes data to the JSON:API when the Allow each content item to have its layout customized. checkbox is checked, otherwise it's stored as configuration.

[Decipher]

Proof of concept Druxt LayoutBuilder integration

Github: https://github.com/Decipher/druxt-experiments/tree/feature/layout_builder Gitpod: https://gitpod.io/#github.com/Decipher/druxt-experiments/tree/feature/layout_builder