Working toward an Experience Builder

Created
Wed, 24/04/2024 - 01:51
Updated
Wed, 24/04/2024 - 01:51

At DrupalCon Lille 2023, Dries announced a new strategic initiative to build a Next Generation Page Builder. The goal of the initiative was to improve and expand Layout Builder to provide a truly intuitive out-of-the-box page building experience.

We have started defining what experience would look like by identifying user journeys from beginning to end, from customizing Drupal to match a brand and content strategy to creating and editing pages. We have identified that to provide the desired experience, we need to define a standardized way for builders and creators to transform designs into optimized digital experiences. To realize the Ambitious Site Builder vision announced by Dries in 2022, we are providing visual, browser-based tools that require minimal technical expertise. This will make it easier for users without prior knowledge about Drupal or coding to implement a digital experience with Drupal. Our working name for this is Experience Builder to highlight that the module seamlessly integrates a page builder and a theme builder.

With the Experience Builder, site builders can create fully customized pages and themes using no-code/low-code tools in the browser. It provides site builders, developers, and content creators a single platform to collaborate. Content creators are empowered to create and update content without having to reach out to a developer. Site builders can balance brand consistency and creative freedom by selecting which visual editor controls to expose to the content creator. As a result, anyone in your organization can easily build and update sites, accelerating time to market while remaining brand compliant.

To keep the out-of-the-box experience simple for non-technical users, Drupal will continue to optimize the experience for site builders without the need of building custom, code-based headless front ends. We are actively exploring ways for Drupal to enable JavaScript developers to work with Drupal without the need of managing a large custom code base. Meanwhile, we will still deliver capabilities that enable headless use cases and retain much of the work that has been done to enable headless use cases so far.

How should we build the Experience Builder?

The Drupal core committer team has decided to expand on our existing solutions. Incorporating the best features of Paragraphs into an expanded Layout Builder will provide a solution that can significantly surpass the existing options explored. We are still evaluating if there are smaller components that exist in other open source projects that could be utilized by the Experience Builder.

What options did we consider?

We researched the existing Drupal based page building solutions, as well as other open source projects to decide how we should realize the Experience Builder. We evaluated Paragraphs, Layout Builder, and Gutenberg using six criteria: expertise required to realize our vision, effort required to realize our vision, effort required to migrate existing sites, future-proofness of the solutions, how well it matches with our persona, and ability for market differentiation.

Gutenberg was the primary option that we considered adopting from outside the Drupal ecosystem. With the help of the Pitchburgh fund, I had couple long days of working sessions with a group of Gutenberg maintainers, as well as the team behind Drupal Gutenberg. We learned that there are many parallels between the problems the different teams are aiming to solve. However, Gutenberg is primarily built for the content creators, which is at odds with our promise to build a platform for the Ambitious Site Builders. Gutenberg would provide us a fast way to enable content creators, but would slow us down delivering on our vision for site builders.

From the Drupal-based solutions, Paragraphs has the largest user base. Site builders attribute this to its relative simplicity and flexibility to implement nearly any kind of design system. However, Paragraphs focuses solely on component composition and content composition, and therefore doesn't enable non-technical builders to control the display of structured data, or the page as a whole.

Layout Builder originally focused on providing site builders with a way to display structured data from entities using more complex layouts. For this reason, the out-of-the-box experience hasn't been optimized for content creation. As a result, some sites using Paragraphs also choose to use Layout Builder as a tool for builders to customize the page layout, leading to a less integrated UX.

All of the solutions we evaluated came with trade-offs. The core committer team decided to prioritize how well the solution would match with our Ambitious Site Builder persona and having an ability for market differentiation. Based on our research, evolving Layout Builder, and enhancing it with capabilities that exist in Paragraphs today best meets these criteria. This approach requires a lot of expertise and effort to realize our vision, in particular UX design, but makes it easier to migrate existing sites and integrate with other Drupal APIs and use cases.

Next steps

We have identified three lanes of work to implement the Experience Builder:

  1. Creating a revamped user experience that is optimized for creating pages using components, as well as defining the layout for structured data.
  2. Implementing a new mechanism for defining components, alongside blocks. Components can be defined through the UI as no-code components, or as code components. The experience for creating code components will be similar to Single Directory Components.
  3. Implementing a browser-based theme builder that enables site builders to implement themes custom to brand without leaving the browser.

Expected timeline and call for help

The core committer team is convinced that a unified Experience Builder is one of the most important initiatives we can undertake. We are committed to moving quickly and iterating rapidly, but we need your support to succeed. We know that with the help of the community, we are able to develop a proof of concept and demo of the new user experience later this year. The first release as a contributed module is targeted for the first half of 2025.

If you are willing to help fund this project, you can reach out to Lauri or Dries. If you are willing to help with the implementation itself, we are planning to set up a recurring meeting. Join the #layouts channel on Drupal Slack for updates and opportunities to contribute!