It’s time to transform and improve the Layout Builder UI experience. What if we could rewrite it using React? Check out our video pitch (made using React), which received the highest average rank in the Pitch-burgh contest at DrupalCon!

by
lee.rowlands
/ 6 June 2023

At PreviousNext, we enjoy getting curious, tackling challenges and finding innovative solutions for our clients and the wider Drupal community. This constant drive for the future is why we’re such prolific contributors to the Drupal project. 

What if we used our curiosity and expertise to explore the concept of a decoupled Layout Builder?

The Pitch

Simply put, we believe creating a better experience for the Layout Builder user interface is possible. Getting there would mean leveraging a modern Javascript framework, like React, that communicates with Drupal over JSON.

We would plan to design an API that describes the future state of how a Decoupled Layout Builder could work, dramatically enhancing the content editor experience and bringing Drupal into the modern era of web UX. It would also strengthen Drupal’s reputation with marketers.

The case for an improved Layout Builder user experience

What if Layout Builder could move forward? It’s currently built with Drupal technologies that haven't significantly progressed in ten years.

Page edits use Drupal's AJAX API, which requires a round trip back to the server to perform UI updates. The server updates state on the server side and then returns a series of Javascript commands to update the page state.

This round trip is inconsistent with the instant experience users expect from the modern web. 

Our solution

Applications that leverage modern Javascript frameworks perform optimistic updates. They update the UI immediately and then update state on the server in the background.

We want layout retrieval and updates to happen in real time for more dynamic editing. To achieve this, we would rebuild the Layout Builder UI using React and identify the pain points.

This would be a significant jump, similar to the change to the block-based editor in WordPress.

Rather than starting from scratch, we could leverage a lot of prior art from the WordPress community. However, we would also bring our strengths into play, retaining our uniquely Drupal focus on structured data instead of serialising to HTML. 

Proof of concept

React is the best and most obvious option for the proof of concept. It was selected as the framework of choice for Drupal core development and has a large ecosystem. It was also successful in helping set WordPress up for the future. 

What if it’s Drupal’s turn next?

To retain structured data, it would be necessary to provide React versions of our existing formatters and widgets and a way for developers to create their own.

This approach would require a Javascript way of declaring layouts. Again, we could take a lot of this from existing layout plugins but would require a React component for the HTML representation.

We would also need to incorporate a Javascript way of declaring blocks. Much could be derived from our existing structured content modelling. However, assuming there would be a build step where this data is used for scaffolding Javascript code is reasonable.

JSON:API could be leveraged where possible, but we envisage needing to make new JSON endpoints for data that doesn't map to entities.

Once we had achieved a non-twig way of rendering widgets, formatters, blocks and layouts, we could keep the layout state in the browser, mutate it immediately and persist to the backend in the background.

Is a decoupled Layout Builder feasible?

There are a number of hard problems we'll need to solve here, such as how we allow modules to ship Javascript that relies on bundling, how we ensure there's only one version of React loaded into the page, and how we allow modules to rely on other packages from npm. Solving those will be a big part of this work, and even if a React-powered Layout Builder doesn't make its way from experimental to stable, the lessons learned in the process could solve some long-standing hard problems for Drupal in the front end space.

React in video

We decided it would be a fitting way to demonstrate how powerful React is by using it to make our Pitch-burgh video submission. 

We received the highest average rank when the video was shown during the Driesnote address at DrupalCon Pittsburgh, and look forward to the next steps for this exciting concept. 

Huge shout out to the team who worked on creating the pitch video especially the wizard of words Fiona, frontend Guru Jack and the excellent QA and GIF selection from Kim and Tina.

Enjoy!