[Research] Layouts for Content Blocks

General
1

Layout Block Concept Feedback

At SilverStripe we’re working on a concept for a new type of content block aimed at giving
users the ability to create more dynamic layouts on their sites, using SilverStripe module
Elemental.

Goals:

  • The layout bock will not limit developers to conform to any front-end
    framework—flexible to work with Flexbox, CSS Grids.
  • Developers will be able to define unique naming conventions for their template
    structures which are surfaced within the CMS.
  • The extent of the flexibility provided to users through the block, can be defined by
    developers.
  • The layout block will not be able to contain another layout block (UI limitation).
  • The UI will be functional at smaller screen sizes.
  • The layout block will be able to handle nesting of template segments eg.
    section/row/column/row
  • Developers can allow users to adjust layout styles for segments (eg, column) and
    blocks (eg. adjust column width from 25% to 50%).

Design notes:

We’ve made an effort to ensure block editing will remain a priority over creating layouts, and
that you don’t need to navigate away from a page to edit the content.

Editing experiences have been kept separate from the presentation, so admins don’t get a
false sense of how content may look at different screen widths.

We’ve done our research to see how others systems approach this, and been through a few
different approaches already, and now we think we have a direction which has some potential
to work within the CMS UI.

The Prototype

These variations of a Layout Block are a proof of concept and don’t represent the final design.
We’ve created 2 examples of how this may work.

  1. A user customisable layout — providing CMS users have more flexibility to build
    custom layouts.
  2. A predefined layout — we’ve used a simple 2 column layout as an example.

View Layout block prototype
(feel free to leave comments on this prototype)

If you’re unfamiliar of the direction for how block editing is going to be built, check out the
block editing prototype.

We would love to hear thoughts on:

  1. What do you think so far?
  2. Are there any layout structures which we might find hard to cater to?
5 Likes