High level approach to managing layout

[CraigClark]

Background

Currently we are using the panels module with the bootstrap_layout module to control what appears on the search page. During automated testing, bootstrap_layout was causing tests to fail. We submitted a report to the project.

The test plan states that the priority is to always use automated tests. Manual tests should only be used if there is no reasonable alternative.

Possible solutions

Do nothing

We could write manual tests and hope that the contrib module gets fixed. it was decided in a meeting on July 17 that we do not want to take this approach.

Contribute a solution back to the bootstrap_layouts module

We are not sure of the level of effort required to identify and fix the issue. Additionally, there are several community approved patches in the issue queue now that have not made it back into the release. This is because the module is minimally maintained.
It was decided at the meeting on July 17 that we do not want to take this approach because it is impossible to estimate the level of effort required to address it.

Find an alternative to panels for layout

We could stop using panels and use layout builder instead. See the section panels vs layout builder.

Use panels, but write custom layouts in code

We could write custom layouts to be used by panels. These would be in code and would not have the customization in the UI that bootstrap_layouts provides. It is not difficulty to write custom layouts in code, however you do need a developer to do write them. It is not something a site builder can do in the UI. Users would be able to select one of the custom layouts to use from the UI, however they would not be able to do things like add custom classes or IDs. Note that all the default layouts are available, it is only the layouts provided by bootstrap_layout that we would replace.

Panels vs Layout builder

Panels is a contributed module, layout builder is part of Drupal core.

Panels

https://www.drupal.org/project/panels

Note: The University of British Columbia is a sponsor of this module

Pros

• Flexibility, you can do things like complex layouts like nesting.
• Granular control, you can get very specific as to how things appear on a page and under what conditions people can see parts of a layout, or how they see the layout
• Reusable - you can create panel pages that can be used across multiple parts of the project
• Good for landing pages, you don't need an entity to build the page on

Cons

• The module is minimally maintained. Though there are 123 007 sites reported to be using it
• Complexity, the user interface for panels has a steeper learning curve than layout builder

Layout builder

https://www.drupal.org/docs/8/core/modules/layout-builder

Layout builder is Drupal's built in tool for doing page layouts.

Pros

• Intuitive interface
• changes to layout are tracked in revisions for a node

Cons

• Lacks flexibility, for example conditions, nested layouts, no way to override default settings
• Theme compatibility, layout builder relies heavily on support form the theme being used. For BC, there is a Bootstrap layout module that may help with theme compatibility
• Performance considerations, known to slow down sites, especially with complex layout
• When using the in-place editor or preview, we have seen instance where the site locked up and we had to go into code to recover
• multi-lingual issues, we have experienced issues where layout builder does not handle multiple languages properly. This is not currently and issue for BC, but will be if these issues are not fixed when indigenous languages are introduced to projects using the base-build.
• we have seen instances where changes made in layout builder vanish

Question to answer

What do we anticipate the needs of projects using the base-build to be? Layout builder offers a simpler interface that will be easier for most content creators to manage. Panels can manage more complex layouts that may require things like conditional display, granular control or the ability to override defaults.

Recommendation

Use panels and layout builder, utilizing the strengths of each.

1. Keep panels for it's rich feature set, use it for things like search results and user dashboards
2. Replace bootstrap_layouts with custom layouts (other layouts will still be available)
3. Down the road, add a selection of layout builder layouts content creators can use, restrict how they can be used.

@chrislaick @NicoledeGreef @lkmorlan

[chrislaick]

Hi @CraigClark Just throwing this out there, but I noticed we're using paragraphs in composer.json. Maybe to manage layouts, we can use the new Layout Paragraphs module? I haven't used it personally, but it is on my to-do list to test drive it.

https://www.youtube.com/watch?v=A9c6ufPgbnY&t=886s

[CraigClark]

Thanks @chrislaick.

We are using paragraphs as a way to nest fields. There is a field for columns, each column has values, this is how the data dictionary is built. It's not very fancy, just a table, so we don't need a layout for it beyond what is already available.

I took a look at paragraphs layout. I don't think it can fix what we are trying to solve here. This is from the module page:

Layout Paragraphs does not support creating templates, site-wide defaults, or default layouts for content types. For these and other site-building needs, Layout Builder is a more appropriate solution.

A lot of what we need to do, particularly on the search page, needs blocks, which this doesn't support.

I haven't tried it, but I do think this module could be useful in circumstances where you are doing something like a landing page with a lot of cards on it, definitely worth keeping an eye on.

What are your thoughts on our recommendation?

[chrislaick]

I do like the recommendation for utilizing the strengths for each. For the use cases like you've described, search pages and dashboards, I think using Panels is fine. Replacing bootstrap_layouts with custom layouts is also good with me. I think we should provide what we think would be the most commonly used bootstrap layout options in our custom layouts.