Contrib.social

Add 3 column layout

Open on Drupal.org →
Created on 18 June 2024, 5 months ago
Updated 13 July 2024, 4 months ago

CivicTheme 1.0 shipped with one left sidebar and a content theme region. It also included a single-column Layout Builder layout (contained and edge-to-edge).

CivicTheme users has shown interest in having support for a right-hand-side sidebar.

This issue describes the implementation plan for this new functionality.

Theme vs Layout Builder regions

In Drupal 10, the Layout Builder allows for flexible customization of page layouts by defining regions within the content area. However, conflicts can arise when blocks are placed in both the theme's regions (e.g., left sidebar, right sidebar) and the Layout Builder's regions (which can also include left and right sidebars). This can lead to redundancy and potential layout issues, requiring a clear strategy to manage these conflicts.

Issues

  1. Conflict of Blocks in Sidebars:

    • Blocks placed in the theme's left and right sidebars may conflict with blocks placed in the Layout Builder's left and right sidebars, leading to duplication or layout disruption.

  2. User Management Complexity:

    • Relying on users to manually manage and avoid conflicts between theme regions and Layout Builder regions can be error-prone and complex.

  3. Inconsistent Layouts:

    • Without a clear strategy, pages may exhibit inconsistent layouts, with some pages displaying theme regions and others showing Layout Builder regions, creating a disjointed user experience.

Potential Solutions

  1. User Management of Blocks:

    • Users manually ensure that blocks in theme regions and Layout Builder regions do not conflict. This approach places the responsibility on users to avoid overlapping or redundant blocks.

  2. Theme Management of Conflicts:

    • The theme is configured to handle conflicts by conditionally hiding or rearranging blocks based on the context. Custom theme development can check for active Layout Builder regions and adjust the display of theme regions accordingly.

  3. Layout Builder Suppression of Sidebars:

    • Layout Builder is configured to suppress theme regions when its own regions are active. This can involve custom module development to dynamically manage the visibility of theme regions based on the active state of Layout Builder.

Recommended Approach

Pages where Layout Builder is active hide theme regions, but only if this option is enabled in the theme settings (enabled by default).

If not enabled - a site builder will need to manually resolve block conflicts.

Action plan

  1. . - https://civictheme-uikit.netlify.app/?path=/story/base-layout--layout
  2. Implement layout styles as libraries (requires extracting styles as a separate file using webpack config) - https://www.drupal.org/project/civictheme/issues/3441713 🐛 Layout error when another theme renders a node Fixed
  3. Update CivicTheme's Drupal theme regions to support 5 regions (to be compatible with UIKit's `Layout` component.
  4. Implement a 3 cols layout (name TBD) using markup and classes from the UIKit `Layout` component.
  5. Implement a theme settings in `Layout` to select if a `Layout Builder` suppresses the theme regions.
  6. Re-map existing 1-col and 1-col-contained to use the new layout component + put a deprecation message
🌱 Plan
Status

Fixed

Version

1.0

Component

Code

Created by

🇦🇺Australia alex.skrypnyk Melbourne

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024