generic_layout
This layout forwards grid CSS features to the settings form in an assisted, user-friendly way (WIP). The actual CSS and the regions are created dynamically. Infinite variations are possible!
Regular Layout plugins provide a predefined set of regions, whereas in generic_layout, regions are defined and varied per layout instance using the CSS Grid API. In my opinion CSS Grid is simple enough to be used by 'WYSIWYG designers' but gives max source of truth and control for a the price of learning some CSS. A supportive, intuitive UI is key to success.
The best demo for now is my website https://rollgut.com?debug=true. By appending `?debug=true` every GenericLayout is outlined blue and css from ui_styles is also uncovered. You can use your browser's development tools (1st image attachment) or Visual CSS Editor to visualise the grid, that comes from GenericLayout (as seen in the screenshot).
The CSS modifiers controlling margin, padding and even gap are not part of GenericLayout. They come from implementing drupal/ui_styles of UI Suite. GenericLayout really just concentrates on CSS Grid, it's modulation accross Breakpoints and a proper interface to Drupals API and backend.
Patch Callers of LayoutEntityHelperTrait::getEntitySections() do not account for the view mode is required.
Implementation Details
Due to the infinite variations possible with this layout, a sophisticated CSS solution was required:
This layout differs from the traditional design of providing a static "CSS utility" file and varying the CSS classes per configuration. Instead, a CSS file is generated for every layout and attached as a library to allow caching.
Dynamic Libraries feature
By the time of coding this, i found no Drupal API or module providing "dynamic libraries,", so I've cooked a solution on my own. What sucks here is the GenericLayout instance detection algorithm. You must Save a new entity one time to make its Layouts discoverable.. If someone knows a better API-use / architecture -> please share!
Roadmap
- Intuitive UI: Create smart (ai driven!?) autocompletions for every textfield
- Support json import/export. Thats fundamental to integrate Ai Agents but could potentially also serve an extension like Visual CSS Editor (2nd image attachment)