Layout builder: Visualize layout, region and field / block more clearly

Created on 5 August 2022, over 2 years ago
Updated 7 March 2024, 12 months ago

Like discussed today, we should please visually separate

  • Layouts
  • Regions
  • Fields / Blocks

from each other in layout builder and in the same style in layout paragraphs (to be consistent).

For layout paragraphs such work was already done in #3298541: Layout (Paragraphs) Edit UI: Differentiate style of regions and contents
For layout builder it's instead still hard to see, for example if layouts contain spaces, like in the example below.

The space before "region top" without any border around the layout makes you think it's two layouts intuitively:

Some suggestions / ideas:
- We should be consistent with layout paragraphs and layout builder to use the same style everywhere to consistency and intuitivity.
- We should perhaps only work with borders as adding background could conflict with content backgrounds in layout paragraphs
- Dashed border is often an indicator for a drag / drop area, so that might make most sense for regions
- Fields / Blocks should perhaps only have a relatively small (1px?) solid border to indicate the lowest hierarchy level
So for layouts it might make sense to for example use a dotted border?

Additionally, we could discuss to work with different border colors or work from dark to light or from larger border sizes to more light?

Looking forward to this :)

Feature request
Status

Active

Version

1.0

Component

Code

Created by

🇩🇪Germany Anybody Porta Westfalica

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

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024