Skip to main content
drupalreleases

Use direct release data with your AI assistant.

Learn more

Layout Builder Extras UX

Security covered Under active development 459 sites

This module enhances Drupal's Layout Builder with live updates, a save and edit button for content forms, automatic removal of empty wrappers, improved drag handle visibility, and the ability to swap layouts. It also adds placeholders for empty regions and offers options to hide contextual links within Layout Builder.

How to use it

Go to the settings page and select which additions you want. Nothing is enabled by default.

What is it

It is an addition for layout builder that tries to make a more flexible and better experience.

What does this module do

  • Upon updating an item in the configure form of a section, you will see your CHANGES LIVE aka directly. This means you do NOT have to save it anymore or leave the "edit tray" and users can easily see what they are doing.(Moved to: layoutbuilder_extras_live_update)
  • Save and edit layout button. An extra button to the supported node forms that allows saving the node edit form and go directly to the LB edit page. Will only be visible for content type node forms which have LB enabled. It will also be added automatically
  • Remove unnecessary DIVS. Automatic function to remove empty field wrappers for layout builder templates. Very handy for generic theming purposes.
  • A drag handle icon to improve the UX (and visibility) of the resizing sidebar (for example edit of a text block - see screenshot)
  • New and improved edit experience/ theming on LayoutBuilder edit (See GIF). Has integration with section_library (Not visible in the GIF)
  • Ability to swap/change layouts! For example swap from your current layout TWO COL to layout Three col and vice versa
  • Placeholders for empty regions. Placeholders can be configured for each language via a WYSIWYGUX improvement to add block, placeholders are removed.
  • Ability to remove/hide contextual links and only use them/be visible on layout builder. This will remove the clutter and problem that for example users edit media items instead of the "image inline block".

Documentation Change layout

To support change layout afterwards your layouts defined your *.layouts.yml file will need to extend my custom class:

fivecol_section:
  label: 'Five column'
  class: '\Drupal\layoutbuilder_extras\LayoutBuilderExtrasLayout'

This way all code will be loaded and change layout will be added & will work.

Handy modules

I have added a personal selection of UX improvements modules:
- layoutbuilder_extras_live_update (Live update of sections + blocks)
- LB view mode selector for layout builder blocks (Visual view mode selection)
- layout_builder_restrictions (Restrictions in blocks and layout)
- layout_builder_operation_link (Link to layout from content overview)
- layout_builder_browser (Allows to add an image to custom blocks)

Drupal 8–10 · not 11

Ask your assistant about Layout Builder Extras UX

Check compatibility with your Drupal and PHP version, maintenance and security coverage, from current release data. How it works

Depends on

Dependencies of the latest stable release

  • layout_builder Drupal core

Required by

Tracked projects that depend on this one

No tracked projects depend on this one yet.

Activity

Tracked releases
11
Tracked since
Jan 2023
Latest release
1 year ago
Releases (12 mo)
0 ▼ from 2
Maintenance
Dormant

Release Timeline

Releases

Version Type Core PHP Release date
2.0.x-dev Dev 10–11 Jan 30, 2023