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!
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?
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.
This round trip is inconsistent with the instant experience users expect from the modern web.
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.
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?
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.
VIDEO: Bundle classes and Layout Builder are powerful combinations. Discover how to use these with Twig to build and theme testable, clean, modern Drupal sites.
Contributing makes good business sense, especially when open-source technology, such as Drupal, is at the core of everything you do (pun intended!).
How and why we contribute influences our impact on the Drupal community and ecosystem. So, how can we become positive, long-term contributors?