Improve the page building experience

It might be useful to get a list of the 15 modules identified so that then we can itemize the functionality they provide and possibly look to recreate that functionality in core.

We've kind of done that in 🌱 [META] Layout builder editorial improvements Active 👍

Updating the issue summary with more details and a proposed solution.

In case it helps you I comment some alternatives to the layout builder to have a page builder that I believe that they have very interesting points.

Mercury Editor:
This is what we are currently using. It is very intuitive and usable. Our customers have seen a big jump compared to layout builder.
It doesn't use layout builder, but layout paragraphs.
https://www.drupal.org/project/mercury_editor →
https://www.youtube.com/watch?v=OVCPu4_ZtzE&ab_channel=AtenDesign
It uses style options which allows to specify in a single yml file properties like Layout Options. Very useful to be able to pass this configuration to other sites, for example new developments.

DXPR:
https://www.drupal.org/project/dxpr_builder →
They have also dedicated a lot of effort to make it usable, with many customization options.
It is paid with subscription.

FWIW, I've been using DXPR Builder → (and theme → ) for a while now and it's a really polished, fully Drupal integrated page builder. Demo here: https://try.dxpr.com/

Reverting incremental changes is not easy, especially when the taken action isn't well understood.

Related to that: 🐛 Content Not reverting in Layout builder section Active

List of available blocks is overwhelming, need to restrict available options
Scalability issues when the site has a large number of fields / blocks on the site

Linking some core existing issues for this, which have been getting closer to a solution recently:

📌 [PP-1] Move away from derivatives for FieldBlock and instead use block settings Postponed
✨ Add the notion of a 'configured layout builder block' to solve a number of content-editor and performance pain points Active
🐛 block_content block derivatives do not scale to thousands of block_content entities Needs work .

Is the Decoupled Layout Builder intended to replace the current Layout Builder, or is it its own separate thing and there would be no upgrade path for it or anything like that (basically those of us creating sites with LB must start over)? Where does recently created things like SDC fit into it? Since SDC relies on Twig templates. Is this new DLB abandoning Twig in favor of React? I have questions 😅

@dalemoore the decoupled layout builder is an experimental project as part of the Pitchburgh innovation contest. It is only replacing the editing of layouts and its data-model is compatible with the existing layout builder data-model. It doesn't do anything for the display of the content, only for editing. So if you're using Twig etc for the presentation, it will still do so. If the markup from the decoupled LB in edit mode doesn't match that of your twig templates, you will be able to swap in a different React component so it looks closer to the final product. There is no intention of ditching Twig for react that I'm aware of.

There are other proposed approaches to this idea as well, i.e. the decoupled react one is just one option. The others are improving the existing one (see #9 for some links), using Gutenburg (another pitchburgh project) and other contrib options like LB Plus.

Thanks @larowlan. That gives me some sense of relief. I was afraid we were really just getting started with LB in my org only to have to change to something else.

I can say whatever gets us closer to what’s possible in Gutenberg/Block Editor in WordPress I’m 💯 in favor for!

Adding link to @lauriii's Layout builder mockup at DrupalCon Lille 2023 Keynote in Issue Summary. It looks awesome.

Including Visual Layout Suite (VLSuite) https://www.drupal.org/project/vlsuite → for ambitious site builders approach ready to use right now, in witch we put much effort, please take a look, recently out 1.1.1 stable with many improvements from 1.0.x, thanks!

Keypoints are:

• What You See is What You Get experience at the layout and content level, including appearance variants.
• Appearance modificators with live preview
• Built on top of layout builder with drag & drop UI
• Completly Drupal way approach
• Use any theme default/admin of your choice (no hard dependency)
• Many others, please read project description carefully

Demo & related conferences (1.1.x & 1.0.x):

• DrupalCamp Spain 2023: https://docs.google.com/presentation/d/1sTknXDVw3u9vPfb0sfriqG1fDLEQ1lba...
• Basic component (no sound, more in presentation): https://drive.google.com/file/d/1UBE66iu-z1eFF71JsMJCdfYSoAX13ViO/view?r...
• Complex component (no sound, more in presentation): https://drive.google.com/file/d/1AJZDVWq2kMExOczjpku9bDiLT1IHhWXI/view?r...
• Video (spanish 1.1.x-rc): https://youtu.be/bjYjXZJYRUI?si=Rtvzig3ZAdKQlx9U
• Drupal Austria 2023 (english - 1.0.x): https://www.youtube.com/watch?v=ke7-MYWrpy4&t=8s

The problem itself has been validated and Dries announced building a solution for this as a strategic initiative for Drupal in his keynote at DrupalCon.

During DrupalCon, several people worked on documenting pro's and con's of the existing solutions. There's also a list of contributed modules, and module setups that could be used as an inspiration. There's also a list of prioritized user stories for the page building tool.

The next step is to find initiative coordinators and to start defining a plan for this.

In the meanwhile, we are doing deeper analysis on some of the available open source projects like GrapeJS, Gutenberg, and puck to understand if there are anything we can reuse or learn from them.

There's lots of prior art to improving Layout Builder, and we are hoping to find a way to let the broader community leverage some of these in the short term. One idea was to build a community "recipe" that installs targeted contributed modules on top of Layout Builder, to have a more opinionated starting point.

I think this would fit under a "Ambitious Site Builder" tag?

I agree that the current Layout Builder UX is horrible, for example the URL separation between field content = /node/50/edit and layout = /node/50/layout, and that Drupal needs a modern page builder.

Here is this problem mentioned in an old blog post from 2020:

Our take is that Drupal, as of late 2020, is not there yet, not even half the way there, compared with WordPress-based page builders when it comes to the ability to create truly flexible, custom landing pages for marketing campaigns and one-off uses by non-technical people...

We believe this will hurt the Drupal community... in the long-run if more effort isn't put into creating a flexible, open source landing page builder. It will further the perception and PR problem Drupal has of being a difficult-to-use platform...

https://www.o8.agency/blog/state-drupal-layout-building-compared-wordpress

I wish that the wheels at Drupal HQ turned more quickly but it is great to see some progress.

@larowlan thanks for the detailed Pitchburgh updates on your blog. So is it possible that your Pitchburgh work could be adopted by the core team? Or if not could it become a contrib module?

Yep the Drupal bits are in decoupled_lb_api and the npm bits in decoupled_lb projects

My two cents:I think Page Manager should be included in Drupal core alongside with Layout Manager
Now,when you need to create the Homepage,you need to write some code.When you also need to add blocks,view etc,you need more code.
Page Manager has a GUI for all of these.

Hello there!

At Tag1 we have been hard at work to create a drop-in replacement for the Layout Builder UI, which is fully compatible with all existing contrib modules and used by our Enterprise clients already for a while in production.

It essentially changes the experience in three key points:

- a) 1 drag instead of 5 clicks (with full best-effort configurable auto-completion of blocks using sample images and lorem ipsum ...)
- b) Create your layout automatically -> Just drag your blocks and then change the auto generated layout to fit your needs
- c) BETA: Nested layouts including the ability to drag blocks into a sub-layout (think of it as Layout UI for blocks itself)

It's called lb_plus and can be found here including a small GIF to show the awesomeness:

https://www.drupal.org/project/lb_plus →

Some more detailed description by Tim Bozeman, who wrote the second version of lb_plus follows:

Like larowlan said, we've been working on a drop in replacement for the Layout Builder UI that addresses many of these issues. There has been interest in adding LB+ to core also.

lauriii said:

One idea was to build a community "recipe" that installs targeted contributed modules on top of Layout Builder, to have a more opinionated starting point.

I think LB+ can help fill the gap.

Features include:

• Drag and drop block placement
• See what blocks do at a glance with block icons
• Place blocks quickly with Promoted Blocks
• Sortable sections
• Change a sections layout
• Duplicate blocks
• A cleaner UI that looks more like the published content while editing
• Soon to be released: Nested layouts ✨ Support Inline Layout Blocks Fixed which adds a whole new block builder functionality

Click here to see LB+ in action!

@lauriii is there any progress to report since your first post 7 months ago?

Two things I am hoping for =

live CSS on the edit page:

browsable component libraries in the page builder UI:

@larowlan did the core team reply to you about your Pitchburgh work, such as they will / will not adopt it?

I would be interested in where this is headed too. I'm about to embark on redesigning our "flagship" website and picking something, whether it's Layout Builder, Layout Paragraphs, or some new thing that we can be sure will be around for a while would be helpful. WordPress has mostly moved to the Block Editor/Gutenberg, if we could standardize on something (while still allowing others to go their own way) it would help a lot of us on small (or, er, mostly one person >_>) teams.

@Juc1 @lauriii has been doing evaluation of options and decoupled LB was in the mix.

@larowlan yeah I was just wondering if there was any progress yet, with Drupal 11 approaching.

Not at this stage. For what it's worth, we don't have to wait until major releases to add new features

@larowlan ok thanks, no reply from @lauriii yet but this recent blog post https://www.thedroptimes.com/38267/drupal-page-builders-part-1-paragraph... says it could be another year before page builder improvements get into core. it is depressing to me that Drupal core can move so slowly, like a snail, and I have lost some Drupal clients to Wordpress because they have seen modern page builders with features such as live CSS on other platforms, and I can't explain why Drupal can't do this in 2024.

@Juc1 Many entrepreneurs and companies, rather than starting to develop a full application with "Drupal", prefer to launch an MVP and that is where Drupal does not fit, they want to create websites quickly, pages, sections... like no-code apps do.

I think that Drupal has not put as much effort into this part because it has been selling itself for more advanced solutions, not to launch quick MVPs.

I think that if a solution could be reached between (Recipes + Single Directory Component SDC + Better and fast pages builder) Drupal would be used much more in other communities that only want to launch Web/MPV quickly to the market.

To reach clients into Drupal to create a quick MVP and then stay in Drupal for a more personalized solution.

I opened ✨ JSON-based data storage proposal for component-based page building Active which I think is general enough to be able to support any UI we might end up wanting for this.

The off-canvas UX is challenging for sure. There are some work happening at the modules

Decoupled Preview Iframe
https://www.drupal.org/project/decoupled_preview_iframe →

Visual Editor
https://www.drupal.org/project/visual_editor →

Adding some screenshots related to the OffCanvas

And a link to short demo video
https://www.youtube.com/watch?v=OElix4t3gCQ