Layout Builder Extras UX
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)