How To Improve Drupal's Layout Builder Experience?
Nitesh Jain
Sep 13, 2023
Layout Builder’s introduction in Drupal 8.6 and stabilization in Drupal 8.7 caused a drift in the ecosphere of Drupal’s page construction system. When compared to other tools like paragraphs, brick, panels, and display suites, Layout Builder was a fierce competitor. A significant concession for a page-building tool and the authors was its unique capability to drag and drop components and preview them in real-time.
Although it is a powerful tool for creating pages, business applications demand more specific rights for distinct user roles, improved authoring capabilities, restricted selections, and quick access. These are the issues that must be addressed.
In this piece, I’ll go over 10 contributed Drupal modules that, when combined with the outstanding Layout Builder module, can enhance the tool’s authority and intrigue. Additionally fantastic, all of these modules are also compatible with Drupal 9!
Drupal Layout Module Category
The modules are separated into the following groups:
- Styling – The ability to give the editor access to a style library that can be used to style sections and blocks.
- Authoring experience- Enhance the editors’ authoring experience so that they will enjoy it.
- Reusability – The ability to reuse elements or sections across multiple pages to speed up page creation.
- Rapid Access – Give editors rapid access to certain functions to save time.
- Permissions – Provide editors or other user roles with restricted access based on their access.
Layout Builder Style
A potent Drupal module called The Layout Builder Styles enables you to style blocks and sections directly from the user interface. It can be utilized to give authors the option of selecting from a menu of pre-defined styles established in the backend.
The application of one or more CSS classes is all that a “style” actually is. Additionally, a block template suggestion for the chosen style is added for blocks.
The CSS classes are essentially contained in the styles, which are configuration entities. For the classes added in the settings to appear on the frontend when applied to a specific section or block, they must be declared in the frontend theme stylesheet. There is a provision that allows for the application of numerous styles to a single block or section.
Styles may be readily exported to configuration files using Drupal configuration management because they are saved as configuration.
However, you must exercise caution when adding styles because you are granting authors the authority to change the styles of the elements that are included on a page. Conflicting styles could cause things to go wrong if they are not prepared appropriately.
Layout Builder Component Attributes
Similar choices are available to writers in the Layout Builder Component Attributes module, but it only applies to the blocks that are placed in a Layout.
To represent the data in a certain way, authors frequently need to add specific data attributes or specific CSS Classes/IDs to a block. Block characteristics and Block class are available modules that can be used in certain situations, however, they either don’t function with Layout Builder or require patching. These settings can be added to the blocks as attributes right in the Layout Builder UI out of the box thanks to the Layout Builder Component Attributes module.
Options offered by the modules include ID, Class(es), Styles (block-inline styles), and Data-* attributes. The block (outer) element, the block title, and the block content (inner) element can all have these properties added. As an example, if you don’t want the ID field to be available for block titles, you can uncheck those settings in the module’s setup form at
Layout Builder Modal
The block configuration forms or creation forms (in the case of inline blocks) are modernized by the Layout Builder Modal module for Drupal. Because it is so thin, the form that appears in the off-canvas dialog sidebar can be extremely difficult to utilize. Particularly when working with complex fields, rich text fields, media references, etc. Off-canvas dialog is not desirable in these circumstances because it significantly lowers usability.
The module opens the forms in a popup window that has more usable space and a reasonable amount of breathing room. You can configure the modal popup window’s width and height using available configuration options. You can also choose between the default enabled themes (Olivero in the instance of the aforementioned screenshot) and the beloved Seven administration theme when it comes to the theme for the modal content. Claro is not supported at the moment, however, efforts are being made to change this and make Claro an option.
Overall, the module dramatically improves Layout Builder usability and the authoring experience for editors.
Layout Builder Library
Consider a scenario where the editors need to quickly set up a page where they need to display specific content block components based on certain criteria, such as the choice of specific taxonomy keywords. Now, this may be accomplished in a difficult method by having editors establish a landing page and then repeatedly create the same layout for various pages with the same content but different conditions. Use the library module for Layout Builder instead.
The site administrator has the option to generate predefined layouts for each entity type and bundle combination using the Layout Builder library modules. The site editors will now have access to various layouts when producing the content for the landing page. Since the editors won’t have to perform the same work repeatedly, the task will be considerably simpler and quicker as a result. The module also offers granular permissions to limit editors’ ability to design custom layouts while allowing them to alter layouts on a per-content-item basis.
Section Library
Editors may occasionally need to reuse specific elements of the Layout Builder on different pages, which is analogous to the situation where they might need to select an existing layout from a library discussed above. The Section Library is useful in this situation. Editors can use the module to make custom miniature layouts that they can reuse on other pages. This enables them to produce pages more quickly without repeatedly doing the same thing.
This module and the Layout Builder Library module are fundamentally different in that the latter creates a full-page template and is config-based. Since the Section Library is content-based, the content editor can generate templates for individual sections or numerous combined sections (pages) on the fly without importing or exporting configurations.
The two modules can be used simultaneously and there is no overlap between them.
Layout Builder Direct Add
The ability to add inline blocks, which are unique, non-reusable blocks particular to a page, is one of the main features of Layout Builder. Now, if these inline blocks are mostly used as components on the pages in your system, the Layout Builder Direct Add can save some editors’ time by avoiding a few clicks.
The module merely switches out the “Add Block” button with a quick dropdown menu of the system’s possible block kinds with a “More” option that activates the sidebar dialog box off-canvas. When an editor chooses one of the block types from the list, the block form for that component is immediately opened.
Layout Builder Operation Link
A site would benefit from having this little element. An editor must visit the page and then select the Layout tab from the taskbar to access the Layout Builder UI for an object. The Layout Builder Operation Link includes a Layout option in the content overview page’s dropdown menu.
All entity-type bundles where Layout Builder is enabled will have the layout choice available. When content editors want to visit an entity’s layout page directly without first loading its edit page, this link allows them to do so without having to click or load a page.
Layout Builder Restrictions
Fields are available as blocks, and there are inline-block options to create ad-hoc blocks. Layout Builder will list out all the blocks offered by various plugins and modules in the system out of the box. In addition, the theme and all other modules’ layouts include listings of when each section will be placed. Since the number of blocks in an enterprise program can expand quickly, this might be a little daunting for editors and create a usability issue.
This issue is resolved by Layout Builder Restrictions, which offers a configurable layout with the required parameters. When Layout Builder is turned on for any entity display, these choices will always be available. Allow-listing/deny-listing blocks and layouts adjustable by module. Sites can select specific acceptable blocks & layouts, restrict all options by the provider, or allow all options from a specific source. Only those blocks and layouts will be available for editors to choose from once site managers have allowed or denied those blocks that are helpful for editors to design the pages.
Layout Builder Advanced Permission
Even though Drupal has a robust system for granting access to users based on their responsibilities, it is possible to grant permissions at a finer level based on the roles. When different user roles are interacting with the system and pages, the problem could occur.
The option to grant users with specific permissions based on their roles is provided by the Layout Builder Advanced Permissions module for site administrators. All entity types where Layout Builder is enabled are subject to these global permissions. Layout builder lock will be useful to go a step further and restrict access on a more basic level; this topic will be explored in the following section.
Layout Builder Lock
The Layout Builder Lock will give users cruder access, as was already indicated. Modifying the layout for a specific object enables administrators to lock specific portions of a default layout to prevent users from performing specific operations.
These lock options will be accessible for all sections after the module has been installed. To regulate who has access to the lock features, there are global permissions accessible. These are cutting-edge editorial elements that ought to be introduced and applied with extreme caution. A section’s ability to be changed will be severely restricted if it, or any component inside it, is locked out.
A Quick Recap Of All the Layouts
- Layout Builder Styles– provide a range of styles for site builders to choose from to apply to layout builder blocks and layout builder sections.
- Layout Builder Component Attributes– permits editors to add HTML characteristics to blocks that make up Layout Builder.
- Layout Builder Modal– allows you to create new blocks and modify current ones in a modal in the Layout Builder UI.
- Layout Builder Library– gives content editors access to a layout library where they can choose from a variety of pre-made layouts.
- Section Library– For an area or portions, construct reusable templates.
- Layout Builder Direct Add– a drop-button that displays a list of custom block types is used in place of the “Add block” link.
- Layout Builder Operation Link– adds a ‘Layout’ action link to content on Drupal administration pages that supports the Layout Builder.
- Layout Builder Restriction– Set which blocks and layouts Layout Builder should have access to for placement.
- Layout Builder Advanced Permission– enables more precise access control to the Layout Builder page by supplying a more detailed permissions list.
- Layout Builder Lock– permits administrators to disable specific user actions when customizing the layout for a specific entity by locking specific areas of a default layout.
Conclusion
Drupal’s page creation capabilities have been revolutionized by The Layout Builder. The Layout Builder has become the de facto tool in this modern era where more and more websites are migrating toward a component-based layout strategy for generating pages. This is because it provides an easy way to drag and drop component functionality.
However, if you are looking for a Drupal Development company that can help you manage your Drupal Software, then you should check out Appic Softwares. We have an experienced team of Drupal Developers that can help manage all your Drupal requirements.
So, what are you waiting for?
