[meta] Pitchburgh - Decoupled Layout Builder

Statement of work

This project aims to develop a proof of concept for a decoupled layout builder for Drupal.

Initial development funded by Pitchburg 2023

There are several sub-tasks:

Must have items

• #3375410: Create an npm package for developing decoupled components
• #3375412: Determine how to deal with externals in Webpack
• #3375413: Provide a registry of React Layout Components
• #3375414: Persistence layer
• #3375415: Create a block discovery mechanism to associate a block plugin with a React component
• #3375417: Create a discovery mechanism to associate a widget plugin with a React component
• #3375418: Create a discovery mechanism to associate a formatter plugin with a React component
• #3375420: React context provider/hooks
• #3375421: Layout builder component

Could have items

• #3375416: Create a Drupal-rendered block fallback React component

The main deliverable will be usage documentation and recommended next steps to continue this project.

Milestones and Timelines

This project aims to be delivered alongside other Pitchburg ’23 approved projects and should be completed by the end of 2023.

Discovery / Alignment - August, 31st 2023

N/A

Decoupled API endpoints for manipulating layouts without Form/AJAX API - September, 15th 2023

• All of the code for this is here
• The API is documented here
• You can see the routes here
• And test coverage is here

Javascript APIs for components to fetch and update block and layout data - September, 30th 2023

All of this code is in the decoupled LB project. Specifically this Redux slice which has methods for:

• reorderLayoutSections
• loading the layout
• moveBlock
• addNewSection
• addNewBlockAndSection
• addNewBlock
• saving the layout

Working MVP for content-editors editing layouts - October, 15th 2023

• You can play with a demo of this here
• How this is booted in a Drupal site
• Render element that - replaces default Layout Builder

Rest of deliverables and project completion - October, 31st 2023

Adding support for bundling/externals:

• https://git.drupalcode.org/project/decoupled_lb/-/tree/1.x/packages/scripts?ref_type=heads
• https://drupal.org/project/react
• https://drupal.org/project/importmap

Future considerations

Whilst this project focuses on editing layouts, the work done to create React versions of widgets and formatters has future applications for decoupled editing of any content entities, and could even power live preview.

Other links

Related projects

• https://www.drupal.org/project/decoupled_lb_api
• https://www.drupal.org/project/decoupled_lb

Related news

• PreviousNext blog post detailing the proposal
• Video explainer of the proposal
• Sprint 1 & 2 progress update
• Sprint 3 & 4 progress update
• Sprint 5 & 6 progress update
• Project wrap up